楽天の店舗ではiframeを上手に使って色々効率化するべき

公開日:  最終更新日:2017/07/31

楽天RMSのトップページが変わりました。主要メニューがファーストビューで見える様になったり、デザインが今風に変わったりと一見大きく変わった様に見えますが、機能的にはあまり変わってないので、正直「ふーん」って感じです。

既に担当ECCからのお知らせなどで、結局ごちゃごちゃしたトップページになっている状況も見受けられるので、実質的な効果はそんなに無いんじゃないかと感じています。楽天の好きな「見た目から入る」「流行もの好き」「質よりもスピード重視」って感じがありありと見て取れるのが、「なんだかなあ」と感じています。

早いところ共通CSSの設定やFTP領域のとの連携強化を実施して欲しいのですが、「作業効率には直結するものの、店舗の売上げには直結しない部分」へのシステム変更は後回しにされる傾向は相変わらずです。

実際に店舗を運営するスタッフは、ページ制作も担当する場合がほとんどなので、作業効率の改善は売上げへの貢献度も高いはずなのですが、楽天上層部には伝わっていないのでしょう。

システムが対応しないなら工夫で乗り越える

そんな糞(言い過ぎ?)なシステムですが、楽天の店舗運営者にとっては無くてはならないもの。ログインしない日は無いくらい身近に接していますが、もっと便利に使おうって工夫をされている方は意外と少ない気がします。(偏見かもしれません)

そもそも楽天ショップの店舗運営担当なんて、「なんか出来そうだからやってみろ」的な任命のされ方をした場合も多く、元々PCのスキルやデザインのスキルがあった訳では無いのに、右も左もわからないまま、只々多忙な業務に追われる生活に追いやられた方が多いのかも知れません。

毎日を忙しく過ごしていると、こなす事に精一杯になり、改善への取り組みや新たな挑戦なんかが、ついつい後回しになってしまいます。

「成長しなければ生活は良くなんかならないし、挑戦しなければ成長なんかしない」 byハカセ

という訳で「目指せiframeで効率化」

iframe(インラインフレーム)
ページの中に別のページを読み込む事が出来るタグ。HTML4では時代遅れな感じに扱われてたけど、HTML5で正式採用されているので、まだまだ現役なのかも?

iframeで何が出来る?

別のページを読み込ませる事が出来る=同じものを色んな場所で共通で利用出来る

つまり、共通部分の編集を一度の手間で済ませる事が出来るのです。これによりヘッダー領域やサイドナビなど店舗で共通のナビゲーション(案内)用のコンテンツなどは一括で管理が可能になります。

商品・カテゴリページではJavaScriptが使えない→iframeの出番です

当然と言えば当然なのですが、商品ページやカテゴリページではscriptタグが使用出来ません。しかしGOLD領域に作ったオリジナルのページには使用出来ます。

GOLD領域に作ったJavaScriptを使用したコンテンツのHTMLを、商品ページやカテゴリページにiframeで呼び出せば、みんなの大好きなJQueryなどを使った動くバナーや、カウントダウンタイマーなどJavaScriptが使い放題です。

効率化のためにiframeのTIPS

多分頭のいい人が考えたら色んな効率化の道はあるんだろうけど、僕が5年に渉る店舗運営の中で編み出した力技のiframe利用方法の一部を公開します。

heightやwidthは別途CSSで管理する

「同梱おすすめ商品」や「当店イチオシ」なんてコーナーを作ってiframeにバナーを置いて各ページに設置なんてパターンよくあると思います。そんな場合よくあるのがバナーの数や大きさを変更してiframe内のHTMLの高さが変わってしまう事。

スクロールさせればOK?ってダサくね?って事で楽天ショップで外部スタイルシートを利用する方法を参照してiframeの高さ(height)や幅(width)はスタイルシート(CSS)で一元管理しよう。

具体的にはiframeにクラスを指定してそれを管理するCSSファイルをヘッダーフッターレフトナビのテンプレートなどに読み込ませる。高さや幅を変えたい時はCSSファイルを編集してアップロードし直せばOK

iframeはこんな感じ

<iframe class="doukon" src="hoge.html"><iframe>

CSSファイルはこんな感じ

@charset "UTF-8";
/* CSS Document */
.doukon {
	width:700;		/* 必要に応じて変更 */
	height:500;		/* 同じく */
	border:none;
	}

ページのテンプレートにCSSを読み込ませる※絶対リンク(http:ではじまる)で指定しないとダメなので注意

<link rel="stylesheet" href="http://www.rakuten.ne.jp/gold/hogehoge/hoge.css" />

いざという時のための見えないiframe

スーパーSALEやお買い物マラソン、その他店舗のイベントなどで一時的にしか使用しないんだけど、定期的に使用する様なiframeもあるでしょう。まいどまいどその時に設置しては撤去をするのは非常に非効率なので、全ページにあらかじめ「イベント用iframe」を仕込んでおこう。使わない時はCSSにvisibility:hidden;と一行追加しておけば表示上は無いのと一緒だ。

使う時にはiframeのHTMLを更新してCSSを編集してサイズなどを整えれば、お手軽に全ページにSALE用バナーなどを設置出来る。

ここはiframeにしろ!

楽天の店舗運営をやっていて個人的にここにはiframeを使った方が良いなと思ってる場所が幾つかあるのでご紹介します。あくまでも個人的な意見ですので参考までに。

ヘッダー・フッター・レフトナビ
GOLDでトップページを作っている店舗なら商品ページやカテゴリページも見た目は共通にしたい。しかもカテゴリ一覧やイチオシバナーなどがあれば頻繁に更新する作業も発生するので、iframeで作っといて各所に流用するのが無難かと思われます。

ヘッダーの下あたりと商品ページの下部
いわゆるイベントバナー的なものの置き場所を用意しておきたい。賛否両論はあるでしょうが、イベント時にはポイントうんたらとか、あと何時間とか色々訴求したいものが出てくるので、あらかじめ前述の「見えないiframe」を用意しておこう。

お買い物かごのそば(PC用商品説明文)
ここは最後の手段と言うかほんとに伝えたい情報を載せるスペースとして重宝するので、くどくならない程度に常時「同梱おすすめ商品」などを置いておいても良い。余談だが前職で発注ミスにより今日中に30個売らなきゃいけない商品をこのエリアに訴求して8時間で24個売って残りは買い取った・・・おすすめ。

工夫次第でまだまだいける。あきらめるな

色々書きましたがこれらはあくまでもヒントです。店舗によって商品によって色んな工夫が出来ると思います。

ただ忘れてはいけないのは効率化はあくまでも自分たちのための行為。効率化によって時間を作り、その時間をお客さんの満足のために費やす。その事だけが貴店の売上げと利益を生み出すのだという事を。

偉そうな事を書きましたが、自戒の意味も込めて。
それではまた。

コメント

  1. みい より:

    博士様
    おはようございます。いつもありがとうございます。今日は、また貴重なお話をありがとうございます。今日もまた、質問なのですが楽天市場トップページにjQueryを設置したいと思っています。インラインフレームに入れればよいのでしょうか?
    画像をスライドさせたいのです。
    まだまだ、素人ですのでお時間ございます時に詳しく教えて頂けますか?
    いつも、申し訳ありませんがよろしくお願いいたします。

  2. hakase より:

    みいさん
    いつもコメントありがとうございます。
    おっしゃる通りjQueryはGOLDのページでしか動作しませんので、
    商品ページやカテゴリページで使用したい場合はiframeで読み込む事になります。
    jQueryに関しての記事は以前から書こうと思っていたので、
    近日中に記事にしたいと思います。気長にお待ちくださいw。

  3. みい より:

    博士様
    おはようございます。いつもありがとうございます。
    楽天市場のトップページを諦めかけていました私にもう一度頑張ってみようといつも、希望を与えて下さってありがとうございます。
    黄色い本も買って、博士様に教えて頂いた事を頑張りながら一からやり直したいと思います。
    jQueryの記事楽しみにしています。
    よろしくお願いいたします。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る