こんにちは、竹内です。
Magentoの商品カテゴリページには、CMSで作成・登録したコンテンツやウィジェットを配置することができます。
今回はその機能を活用し、充実した商品カテゴリページの作成について、実際にある案件で作成したデザインをもとに紹介していきます。
カテゴリページは第二のトップページ！
今回もデザインを作成する前にいくつかの参考サイトを観察したところ、商品カテゴリページにもコンテンツをいくつも用意しているサイトが多くありました。カテゴリページを「第二のトップページ」という位置づけにしています。
サイトに訪れるユーザーは、すでに目当ての商品がありそれを目指して訪れるひともいれば、なんとなくウインドウショッピングをしに訪れるひともいます。そのため、カテゴリページでも様々なアプローチで商品をPRすることで、より多くのユーザーを商品ページへ導くことができるようになっていると感じました。
そこで、今回の案件でもカテゴリページから商品への導線を増やすことを意識しデザインの作成に着手しました。
Magentoデフォルトのカテゴリページ
上の画面はMagentoのデフォルトのカテゴリページです。はじめは商品一覧のみが表示されています。
このカテゴリページに、作成したサイトのデザインに合わせたコンテンツを追加していきます。
おすすめ商品を紹介するバナーと新着商品ウィジェット、
サブカテゴリへのリンクバナーを配置して商品への導線を増やす
バナー、新着商品ウィジェット、ブランドリストを配置
ページ内で一番目につく場所、メインカラムの最上部には商品バナーを配置します。
単にこのカテゴリを象徴するようなメインビジュアルを配置してもよいのですが、今回は商品への導線を増やすため、目玉商品のバナーを想定して作成しました。
次に、このカテゴリ内での新着商品を紹介するエリアを作成します。
フラッツの標準テンプレートにも新着商品のウィジェットがすでに用意されていますので、管理画面から設定を行えば簡単に新着商品を配置することができます。
新着商品のデザインは、この後紹介する「商品一覧」とはレイアウト・商品画像サイズを変え、画面が単調にならないようにしました。
続いて、サブカテゴリへのリンクバナーを設置します。
今回はカテゴリ内で取り扱っているブランドを紹介すると同時に、そのブランド毎の商品一覧へのリンクバナーを想定して作成しています。
商品一覧部分のカスタマイズ
キャプション
今回の案件では、商品一覧部分のデザインも少しカスタマイズしました。
1つ1つ商品を枠線で囲むことでシャープな印象となり、ひとつひとつの商品が際立ちます。また、商品が多数並んだ時でも重要な情報部分が強調されるよう価格・レビュー・ボタン部分の背景には薄いグレーを敷いています。
また「欲しい物リストに追加」「比較リストに追加」リンクは、アイコンのみで表現したボタンにし、コンパクトにまとめています。
管理画面から登録
これらの作成したコンテンツやウィジェットを、管理画面の [商品管理] > [カテゴリ一覧] > [左カラムのカテゴリリストからページを選択] > [全般] > [概要] でコンテンツの登録を行います。
完成したカテゴリページ
こちらが完成したカテゴリページです。
管理画面からの設定はさほど難しくなく、手順を教わりながら私でも簡単にページ作成をすることができました！
デフォルトの状態でもしっかり商品一覧ページとして機能するため、ついついそのままにしてしまいがちなカテゴリページですが、丁寧に作り込んでいくことで商品に対する思い入れや、運営者の意気込みが垣間見えるような「人気（ひとけ）」のあるサイトになっていきます。コンテンツを充実させ、お客さんを呼び込んでいきましょう！