こんにちは、竹内です。
今日はMagentoサイトのトップページのデザインカスタマイズについてご紹介します。
Magentoデフォルトのトップページ
上の画像は、Magento 1.9系のサイトのデフォルトのトップページです。
Magentoサイトのトップページは骨格となるレイアウトなどは予め決められていますが、コンテンツ部分は管理画面から作成します。
WYSIWYGエディタを利用することができ、HTMLとCSSである程度自由にレイアウトすることができます。
動的な機能であるランキングや売れ筋商品・おすすめ商品などを配置・表示することも可能ですが、今回は動的な機能は使わずに作成しました。
バナースライダー＆カテゴリバナーでブランドを意識したレイアウトに！
デザインカスタマイズ後のトップページ
上の画像がデザインカスタマイズ後のトップページです。
Magentoに標準で用意されているバナースライダーをそのまま利用し、その下に各カテゴリトップページへのバナーを配置しています。
今回、あえてECサイト的な商品一覧は配置せずブランドサイトのようなデザインにした理由は、サイトに訪れたユーザーに、まずは商品そのものというよりショップやブランドに対しての興味を高めてもらう狙いがあります。
カテゴリ部分拡大
カテゴリバナーは大きく正方形で配置しています。グリッドで配置された画像は整然とした印象を与えますし、カテゴリの増減があった場合でもメンテナンス性が高く、更新も容易です。
画像の上にはカテゴリ名と概要文をテキストで配置しています。このように画像とテキストを分けておけば、多言語サイトでも言語別でバナー画像を複数作成する手間が省け、テキスト部分の変更のみで対応が可能です。
スマホ表示でのトップページ
スマホ表示では、カテゴリのブロックを1カラムで表示します。
画像をブラウザ幅いっぱいに大きく見せるため、インパクトのあるページレイアウトになります。
このようにMagentoでは、敢えてECサイトらしくせず、まずはショップやブランドへの興味を持たせるようなトップページも作成することができます。
商品が地味で写真映えしないという場合などにも、カテゴリ画像に「使用感のイメージをふくらませるような画像」を利用することで華やかなサイトにすることができそうですね（*´∀｀*）