楽天RMSのECサイト構築 楽天RMSでECサイト・ホームページの作り方をメニュー別に徹底解説!

ホーム楽天RMSのECサイト構築楽天ECサイトの大枠デザイン・構成となる共通ヘッダー・フッターの設定

楽天ECサイトの大枠デザイン・構成となる共通ヘッダー・フッターの設定

楽天ECサイトにおいてPC版の共通ヘッダー・左メニュー・フッター、スマホ版の共通ヘッダー・フッターとなる大枠デザイン・構成はとても重要です。通常ECサイトはトップページ>カテゴリページ>商品ページという3階層になっていますが、どのページにも共通で表示されるヘッダー・フッターの大枠部分はページ離脱やコンバージョン率と大きく関係する為です。このページでは楽天RMSで設定する共通ヘッダー・フッターをPC版、スマホ版に分けて解説します。

PC版の共通ヘッダー・左メニュー・フッターを設定する

楽天のPC版は基本的に左メニューがある2カラム構造の為、共通ヘッダー・左メニュー・フッターを設定します。RMSメインメニュー>店舗設定>デザイン設定>PCデザイン設定>ヘッダー・フッター・レフトナビへ進みますと下図の画面が表示されます。設定しているテンプレートの「編集」ボタンを押すとHTMLを入力する画面に移行します。この3つの入力欄に設定してHTMLが楽天ECサイトの大枠デザイン・構成となる共通ヘッダー・左メニュー・フッターになるという仕組みです。一般的には、ヘッダーには看板やグローバルメニュー、左メニューにはカテゴリ一覧と検索窓、フッターにはショッピングガイドを設定することが多いです。
少々プロ仕様ですが、楽天GOLDで構築することもできます。GOLDサーバへFTP接続して共通ヘッダー・左メニュー・フッターのHTMLパーツをアップします。それをRMSの中にiframeで設置する方法です。RMSメインメニュー>店舗設定>デザイン設定>PCデザイン設定>ヘッダー・フッター・レフトナビへ進みますとHTML入力欄がありますので、そこに楽天GOLDにアップしたHTMLファイルをiframeで設置します。 楽天GOLDの仕様やFTP接続方法はこちら

スマホ版の共通ヘッダー・フッターを設定する

スマホ版はPC版と異なり左メニューが無いワンカラム構造の為、共通ヘッダー・フッターを設定します。スマホ版の楽天ECサイトはデザイン・構成の仕様制限が強い為、共通ヘッダーとしては看板と共通バナーしか設定することができません。まずは看板を設定するにはRMSメインメニュー>店舗設定>トップページ設定>看板設定へ進むと下図の画面が表示されます。看板画像には大きさの制限があり、横1200px×縦400xの大きさで作成してR-CabinetにアップしたURLを張り付けます。
また、看板の下に共通バナーを設定できます。RMSメインメニュー>店舗設定>デザイン設定>スマートフォンデザイン設定>共通バナー設定へ進むと下図の画面が表示されます。大バナーは横1080px×縦210pxで、小バナーは横266px×縦110pxの大きさ制限があり、R-CabinetにアップしたURLを張り付けます。ここで設定した共通バナーは全商品ページに共通表示される為、ページ離脱やコンバージョン率と大きく関係します。

PC版の左メニューに設定したカテゴリ一覧もスマホ版ではバナーとして設置できます。RMSメインメニュー>店舗設定>デザイン設定>スマートフォンデザイン設定>目玉カテゴリ設定へ進むと下図の画面が表示されます。最大12個まで設定でき、横400px×縦400pxの大きさでR-CabinetにアップしたURLを張り付けます。ここで設定したカテゴリバナーは全商品ページに共通表示されます。
PC版で共通ヘッダー・フッターに設置したグローバルメニュー、ショッピングガイドなど決済・配送・返品や会社概要の運営関連メニューは、スマホ版では共通ヘッダーのメニュー内やフッターのリンク一覧にテンプレート表示されますので、PC版のようにHTMLで設定する必要はありません。

このように楽天RMSで共通ヘッダー・フッターを構築する方法を解説しましたが、ヤフーや自社ECサイトと多店舗並行運用している場合には、デザイン・構成を統一して管理したいところです。ヤフーは楽天よりもデザイン的な仕様制限が強かったり、自社ECサイトは完全に自由にデザインできたりと仕様の違いを理解するとスムーズな多店舗運用ができます。 ヤフーの共通ヘッダー・フッターの設定を比較して見る makeshopの共通ヘッダー・フッターの設定を比較して見る