トップページデザイン編〜JRE MALLに出店してみませんか？〜

トップページデザイン編
Ⓐショップヘッダー
Ⓑメインビジュアル
Ⓒお知らせ
Ⓓ人気のキーワード
Ⓔバナー（一列）
Ⓕバナー（二列）
Ⓖ特集
Ⓗカスタムエリア
Ⓘサイドナビ
まとめ

トップページデザイン編

本記事はJRE MALLのショップトップページの作成方法について、ご案内します。

JRE MALLのショップトップページは、JRE MALL側で用意されたパーツを編集し組み立てるイメージです。
基本的にはhtmlの知識は必要ありません。コーディング経験のない方でも構築することが可能です。

ショップトップページでは、具体的にどのようなことができるのか解説をいたします。

以下はトップページの構成です。そのうち「編集できる項目」を分かりやすく色分けしてみました。

以下にそれぞれ各項目について、説明をしていきます。

Ⓐショップヘッダー

基本的にヘッダーエリアには画像1枚が表示されます。
店舗ロゴやイメージ写真などを組み合わせて自由に画像を登録することが可能です。

すでにHTMLの知識がある方なら「リッチテキストエリア」という機能を使用することでオリジナルバナーやナビゲーション、検索フォームなどを設置することが可能になります。
具体的には、独自にHTMLとCSSとを作成し、店舗オリジナルのデザインを作成ができるということです。

リッチテキストエリアの内容は、商品ページや特集ページなどの下層ページにも表示されます。
ページ遷移時に常に表示される箇所のため、クーポンバナーやポイントアップバナーを掲載することでユーザーの目にとまらせることも可能です。

ただし、リッチテキストエリアではJavaScriptを使用することはできません。
たとえばJavaScriptを使用し、タイマー機能でリアルタイムにバナーを切り替える等といったことはできないため注意が必要です。

どうしてもJavaScriptを使用したいばあいは、iframeタグを使用することで実現できるケースもあります。iframeタグを使用することによってタイマーでのバナーの出し入れや、スライドギャラリーなどを使用してページをリッチ化することも可能です。

HTMLやCSS、iframeタグを使用することで、ある程度自由なヘッダーデザインを作成できますので、他ショップとの差別化ができます！

Ⓑメインビジュアル

メインビジュアルは、トップページのメインエリアの最上部に表示されるバナー群です。
イベントバナーや売れ筋商品バナーなどを掲載するのがおすすめです。

表示形式は「スライダー式」もしくは「タイル式」が選択できます。
また、メイン画像と連動するサムネイル付きの有無の設定も可能です。

バナーはPC用・スマートフォン用の掲載画像の設定や、表示期間の設定が可能です。

Ⓒお知らせ

管理画面にて設定した「お知らせ」のタイトルが表示されます。
タイトルをクリックすると、作成した内容が遷移先で表示されます。

Ⓓ人気のキーワード

管理画面から設定したキーワードをリンク付きで表示します。

Ⓔバナー（一列）

横幅100%でバナーを表示させることができます。
後述する「特集」の上に設定することで、たとえば特集のイメージ画像として使用したり、ショップイメージを掲載したりと様々な用途で活用できます。

Ⓕバナー（二列）

こちらはバナーを2列表示させることができます。
一列・二列のレイアウトを自由に使用してください。

Ⓖ特集

任意の特集に紐づいた商品を表示できるエリアです。
PC表示時は5商品、スマートフォン表示時は2商品の表示となります。またファーストビューで表示しきれない商品は横スライドで操作することができます。
また、自動的に特集に紐づいた商品が表示されるため、手動での入れ替え作業は不要です。

Ⓗカスタムエリア

HTMLの知識がある方は、カスタムエリアを使用して自由度の高いエリアを作成することができます。
JRE MALLのトップページのカスタマイズ機能では、基本的な表示パーツは揃っているためカスタムエリアの使用頻度（優先度）はそこまで高くないかもしれませんが、カスタムエリアを活用することで、店舗オリジナルのデザインを表現することができます。
ちなみにJavaScriptの使用は不可となっています。