カテゴリページ・特集ページ・フリーページ作成編〜JRE MALLに出店してみませんか？〜

JRE MALLでのページ作成にかんするブログ、好評につき第四弾！今回は、店舗のカテゴリページや特集ページ、フリーページで何ができるのか？についてご説明します。

それぞれのページを活用することのメリットや、編集、カスタマイズの方法等について解説をいたします。

これまでのJRE-MALL関連の記事はこちら

みなさん、JRE MALL（ジェイアールイーモール）をご存知ですか？JRE MALLとはJR東日本（東日本旅客鉄道株式会社）が運営する、モール型ECサイトで、その最大の特徴は「JRE POINT」が貯まる、使える（現状）唯一のモールだということです。そんな今後の成長度ハンパないJRE モール。コンサルロケッツでは運営代行をまるっとお請けできます！

JRE MALLでの施策について〜JRE MALLに出店してみませんか？〜

Amazonや楽天などのECモールと同じく、JRE MALLでもポイント設定や有料広告など様々な施策を行うことができます。JRE MALLで現在行える代表的な施策を４つ紹介いたします。

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

本記事はJRE MALLのショップトップページの作成方法について、ご案内します。JRE MALLのショップトップページは、JRE MALL側で用意されたパーツを編集し組み立てるイメージです。基本的にはhtmlの知識は必要ありません。具体的にどのようなことができるのか解説をいたします。

これまでのJRE-MALL関連の記事はこちら

カテゴリページ
特集ページ
フリーページ
まとめ

カテゴリページ

まず「カテゴリページ」についてご説明します。JRE MALLでは商品のカテゴリを作成することが可能です（当たり前の機能ですが…）。カテゴリを作成すると、カテゴリページとしてページが自動的に作成され、カテゴリに紐づいた商品が一覧で表示されます。
ちなみに何もカスタムしなければ、カテゴリにまとめられた商品の一覧が表示されるページになります。

JRE MALLでは楽天市場やYahoo!ショッピングのカテゴリページのように、ページ上部をカスタマイズすることが可能です（以下の画像参照）。

「カスタム可能エリア」では、カテゴリのイメージバナーを作成して設置するのも良し、カテゴリのピックアップ商品を並べてみるのも良し、他カテゴリへの回遊リンクを設置するの良し。
店舗様に合ったカスタマイズが可能です。

ただ、バナー1枚を掲載したいのなら「カテゴリ画像」として登録〜表示させることもできます。
商品をページに並べたり、画像やリンクボタン等を設置したいときは、HTMLを使用する必要があります。

特集ページ

「特集ページ」は、商品グループ（主に特集ページやトップページに商品を紐づける機能）を使用してページを作成します。公開期間を設定したり、特定のユーザーのみがアクセスできるページを作成できる点が、先述のカテゴリページとは異なります。

また、更新予約という機能を使用することで、ページの更新を自動で行うことも可能です。

特集ページも、カテゴリページと同様に自由にページをカスタマイズすることが可能です。
下図の「コメント上部」と「コメント下部」の2箇所に、任意のデザインを挿入できます。

こちらの「特集ページ」のカスタマイズは、今後頻繁に活用する場面が多くなるかと思います。たとえばコメント上部には特集イメージのバナーや概要画像、ピックアップ商品などお客様の目を引く要素を掲載してみたり、コメント下部には回遊バナーを設置することでサイトの離脱を防いだり、さまざまな対策を行うことができます。

特集の内容によって柔軟にカスタマイズしていきたいですね！

ここでひとつ注意点があります。

特集ページは1ページ40商品までが一覧として表示され、それ以上はページ送りで2ページ目、3ページ目と自動でページ送りが生成される仕組みになっています。
コメント上部、コメント下部の内容は全ページ共通で表示されてしまうため、コメント上部にバナーなどを設置しすぎて長いコンテンツになってしまうと、ユーザー目線としては見づらいページになってしまう可能性があります。ページを構成時にはユーザビリティを考慮してみましょう。

今後、表示の仕組みをカスタムできるように改善されると嬉しいですね！

フリーページ

最後に「フリーページ」です。フリーページでは、カスタムエリアやページ幅などが制限なく構築できるページになります。
たとえばランディングページとして活用したり、カテゴリのトップページとして制限なくデザインしたり、丸々1ページを使用して商品ページを構築したり、自由なページづくりが可能となる点が魅力です！

残念ながらJavaScriptは使用できません。けれどCSSだけでもかなりリッチなページを作ることが可能です。

例えば下記のページは「フリーページ」で作成されているんです。

ベルメゾン JRE MALL店：Suicaのペンギンベルメゾンコラボページ
https://shopping.jreast.co.jp/pages/S107_suica

ベルメゾン JRE MALL店：おすすめグルメ特集
https://shopping.jreast.co.jp/pages/S107_gourmet

どちらのページも、CSSのみでサイトの動きを出しているのが特長です。