ECサイトにおけるレイアウト構成は、２カラムが主流とされています。
取り扱い商品点数やカテゴリ数が多いECサイトや、バナー、レビュー(星の数)、営業日カレンダー等、見せたいコンテンツが多いECサイトでは、２カラム場合によっては３カラムのレイアウト構成で、賑やかなイメージを持たせることができ、次に遷移するページの選択肢が多いためサイトの回遊率の向上にも繋がります。

一方、シンプルなイメージで、メインとなるコンテンツ（商品）に視線を集中させたい場合は、１カラムレイアウトが有効です。通販に必要な情報を工夫して表示することで、ブランドイメージや世界観など、訴求したいイメージをそのままサイトに反映している事例もございます。しかし、メインとなるコンテンツに興味を持たれなければサイト訪問者は行き場を失い、離脱してしまう危険性があります。

本記事では、弊社にて開発提供しておりますクラウド型ECサイト構築ASPのaishipシリーズの導入事例の中から、PC表示時のレイアウトが１カラムのECサイトに絞り、デザイン性の高いサイト3選をご紹介していきたいと思います。１カラムのECサイト構築を検討されているEC事業者様向けのご参考になれば幸いです。

１カラムレイアウトのレスポンシブECサイト事例

ECサイト：Lebena organic様
オーガニックなブランドイメージを踏襲するかのように、淡色コーデ感の漂うECサイトにデザインされております。

ECサイト：Luin Living Japan様
こちらはメニューが多いながらも、スタイリッシュに表示している事例です。カテゴリや商品点数が多いサイトの場合、１カラムレイアウトには不向きとされておりますが、ヘッダーメニューを固定させることで下層ページに遷移しても回遊が可能です。

ECサイト：A THINGS WHITE様
全デバイスで共通でハンバーガーメニューを採用しておられます。つまり、どのデバイスでも同じ位置にメニューやコンテンツが配置されている為、どのデバイスでアクセスしても迷わない構成になっております。

aishipシリーズでの設定方法

現在、aishipシリーズで用意している無料テンプレートは、PC表示時は２カラムですが、１カラムに変更して運営することももちろん可能です。

aishipシリーズにて１カラムレイアウトを設定する方法は、大きく以下の２点です。

※テンプレートマスターをご利用の場合、各レイアウトに共通して設置してある機能パーツの「2カラム用CSS」を削除することで、1カラムレイアウトを実現可能です。

まとめ

いかがでしたでしょうか。ECサイトのレイアウト構成を考える際、最も重要なのは、訪問者に気持ちよく商品を選んでもらい、購入完了してもらうことです。あらゆるデバイスで表示される可能性がある今、モバイルファーストで画面設計することをベースにおくことも忘れてはなりません。
今後もデザイン性の高いECサイト事例が見つかり次第、取り上げさせて頂きたいと思います。