こんにちは、竹内です。
今回から2回に分けて、Magento2のトップページデザインカスタマイズについて、ご紹介していきます。
左：Magento2標準テーマのトップページ 右：デザインカスタマイズしたトップページ
左の画像は、Magento2の標準テーマのトップページです。
今回は、右の画像のようにトップページをデザインカスタマイズしました。
最上位ヘッダーの高さを広くとり視認性アップ
最上位ヘッダー
Magento2の最上位ヘッダーには、マイアカウントナビ、欲しいものリスト、会員登録、ログインなど、ECサイトとして重要な機能へのナビが配置されています。
重要なナビを最上位ヘッダーにまとめることで、すっきりとシンプルなデザインを実現していますが、その一方で、始めてサイトに訪れたユーザーがこれらのナビを見つけにくいのでは、という懸念もあります。
そこで今回のデザインでは、最上位ヘッダーの高さを少し多くとりました。これにより最上位ヘッダーの存在感が増し、重要なナビを見つけやすくなりました。
サイトロゴを中央揃えにして主張させる
サイトロゴ
Magento標準テーマでは、サイトのロゴは左揃えに配置されていますが、今回はこのサイトロゴを中央揃えにするカスタマイズを行いました。
左寄せと比べてみるとロゴがより目立つようになり、スタイリッシュな印象になりました。
カンプ上でロゴ位置を移動するのは簡単ですが、Magentoのヘッダーはカートや検索が配置されており、これらをレスポンシブウェブデザインに対応するため複雑な構造になっています。そのため、実装は大変苦心したそうです。タブレットやスマホでの表示時にデザインが崩れないよう確認・調整も必要です。
サイトのカラーとフォントを変更
今回のデザインでは、サイトカラーに黒・白・グレーを使用しています。サイトをモノトーンにしたことで、商品画像が際立ちます。
また、フォントはゴシック/セリフ体から、明朝/サンセリフ体に変更しています。
後編に続きます。