ECサイトの構築って、モールやシステムごとに独自の決まり事があったりして、一般的なページデザインとは勝手が違いますが、楽天市場のショップ構築は、その中でも特に独特だなーと感じます。
作業をすると「独特だなー」という感覚だけが残って細かいことは忘れてしまい、次またイチから調べ直し、そしてまた忘れる、の繰り返しを毎回やってる気がします。。
いい加減不毛なループから抜けるため、備忘録をつくっておきます。
（※情報は投稿日現在のものです。）
基本はtableコーディング
楽天市場のページは、tableコーディングでできています。
tableコーディングとは、その名の通りtableタグでページのレイアウトをつくる手法です。
一般的なページコーディングでは現在ほぼ見かけなくなった
いにしえのコーディングスキルです。
楽天市場のページは、このtableコーディングで骨組みが作られています。
こう聞くと、できることが限られるんじゃないか？と身構えてしまいますが
横幅100%のページや、サイドナビゲーションなしのワンカラムレイアウトなど
ポイントさえ押さえれば、今風のデザインに近づけることも十分可能です。
スマートフォン用商品ページは自由度が相当低い
スマートフォン用商品ページで使えるタグは
Web黎明期に使われていたような、いにしえのタグのみです。
現代社会でマークアップしている人々にとっては見るだけで頭痛がしてくるやつです。
ただ、そういう仕様なので従うしか選択肢がありません。
ページの構成は
- タイトル
- 文章
- 画像
を中心に、シンプルな組み立てにするのが良いかと思います。
横並びのレイアウトをつくるときはtableを使います。
PCトップページのカスタマイズ、JavaScriptに必須の『楽天GOLD』
楽天市場には、無料で契約できる「楽天GOLD」というサービスがあります。
楽天GOLDは、楽天市場専用のサーバーが手に入るようなもので、ページ作成のバリエーションがグッと増します。
ただ、GOLDの恩恵を受けられるのはPCページのみ。
SPはGOLDとの連携ができません。
PCトップページはRMSとGOLDで切り替えが可能
楽天GOLDは、作成したファイルをサーバーにアップロードできるので、普通のページ制作と同様のページ制作をおこなうことが出来ます。
ただPCページも、新店舗トップページに切り替えるとGOLDへの切り替えができなくなるので、切り替える前に検討を重ねることをおすすめします。
RMSでは、JavaScript（scriptタグ）が使えない
楽天RMSではscriptタグの使用が禁止されています。
すなわち、商品ページに直接jsを読み込むことはできません。
iframeが使えるので、GOLDでパーツを作成して（スライダーなど）
それをiframeで読み込んでいるショップさんは結構ありますね。
そのような、ちょっとした工夫が必要です。
※外部のjsファイルをRMSで読み込む裏ワザ的な方法も存在するようですが、これはあくまで非公式の方法です。
制作者がクライアントさんのお店で実装することは決してオススメできません。
100歩譲って、自分のお店で自己責任で試すくらいに留めておきましょう。。
全ページ共通のCSSファイルは、適用範囲に注意
外部CSSの適用範囲は、
- GOLDで作成したページ
- RMSの商品説明文内
のみに適用されるようにしましょう。
リセットCSSやcommon.cssなど全ページ共通のスタイルを当てるとき
RMSのページ全体に当ててしまうと、デフォルトのtableレイアウトが崩れる恐れがあります。
特にbox-sizingの指定や、画像に対するmax-widthの指定があると、崩れにつながりやすいようです。
商品説明文のエリアにはデフォルトで.sale_descというクラス名がついているので、これを活用して.sale_desc内にスタイル付けしていくと良いです。
画像ファイルやスタイルシートのキャッシュに注意
楽天市場のファイルはキャッシュがきついことで有名（？）です。
特に、CSSファイルや画像ファイルを更新したときには注意が必要です。
GOLDで管理している、CSS等の外部ファイルや画像について
オススメは、再読み込み用にパラメータをつける方法です。
RMSで管理している画像は、差し替えよりも新規アップロードしてURLを書き換える方がオススメです。
大量に画像があるなどでそれがむずかしいときは、更新に時間がかかることをあらかじめ承知の上作業をおこなってください。
構築に必要な情報はどこで得るか？
公式マニュアル「店舗運営Navi」
楽天市場の公式マニュアル「店舗運営Navi」は、RMSを契約しているショップ向けに公開されています。
楽天RMSのアカウントがないと見られないので、お客様からお預かりしたアカウント情報でログインし、管理画面から確認することが可能です。
楽天市場ショップ構築のサポート
楽天RMSの管理画面には、サポートへの問い合わせフォームがあります。
楽天市場でこんなことできるのかな？など、調べてもわからない内容について問い合わせると親切に答えてくれます。
内容等によって異なるとは思いますが、1〜2営業日内には返信いただける印象です。
困った時には利用してみると良いと思います！
ネット検索
ググって情報を探す人も多いと思いますが、楽天市場のショップ構築に関しては、ネット検索で出てくる情報に限りがある印象です。
というのも、上位にヒットするのは店舗運営サポートをしている業者の記事が多く、中には古いものも含まれるからです。
参考にしたい情報が現在の仕様に当てはまるのか、注意が必要です。
まとめ
ということで、普通のコーダーが楽天市場のショップページを構築する際覚えておきたいことをまとめました。概要はこれでつかめるかと思いますので、参考いただければ幸いです。
iframeを扱うとき謎の余白ができて困ったときは、こちらの記事もぜひご覧ください！
【HTML/CSS】iframeの下に謎の余白が空く問題｜nico MEMO
細かいポイントやTipsも、まとめ次第随時アップしていきたいと思います。
コメント