ECサイトデザインとスプリットレイアウトについて

Writer： koga　更新日：2021/04/06

こんにちは、福岡オフィスの古賀です。

私は普段の業務でアパレル系ECサイトの構築に携わることが多いのですが、海外ハイブランドのECサイトデザインを観察していると、商品詳細ページに スプリットレイアウト を採用しているサイトをしばしば見かけることがありました。

そこで今回は実際の 商品詳細ページデザイン 例を比較してECサイトとスプリットレイアウトについて注目してみました！

 

 

 

1. スプリットレイアウトとは

スプリットレイアウトといえば、サイトの画面を大きく分割して表現されるレイアウト方法です。

対比を表現するのに２分割＋カラー反転させて使用される広告などでも良く見られます。

スプリットレイアウトを使用することで、対比の効果や要素を互いに引き立たせることができ、Webサイト上では分割された画面にスクロール時の動きが加わることでその効果をより視覚的に発揮し、オリジナリティを強調した印象を与えることも可能です。

PCではそのように画面を分割し横並びにすることで表現できますが、スマホ端末のように小さい画面では縦並びに変化するというようなレスポンシブデザインに対しても組み込みやすいのも特徴のひとつと言われています。

またスクロール時に視差効果をつけたり、動画と組み合わせたりといろいろと応用方法はありますが、大きく分けると、分割した画面を全て固定表示するタイプと片方のみスクロールするタイプがあり、ECサイトの商品詳細ページでよく使用されているのは片方のみスクロールのタイプになります！

 

 

2. MACKINTOSH

　

トレンチコートで有名な英国の老舗ブランドですね。

こちらのスプリットレイアウトは少し珍しく、ファーストビューでは見えていた商品名からCVボタンまでのブロックは普通にスクロールされますが、商品詳細情報のブロックがページ上部に固定される仕様でその効果を発揮されています。

そしてスクロールし隠れた、商品名や価格、CVボタン周りについてはヘッダー下に新たに固定表示されるようになります。

これにより常にCVボタンが画面上に存在しユーザーはいつでもカートインができ、そのままスマホ画面も同様のデザインで固定表示となり（固定位置は変わりますが）、分割していたブロックが縦並びになるので、レスポンシブしやすく崩れにくい構造で使いやすいデザインになっていると思います。

 

 

3. BURBERRY

　

日本では「バーバリーチェック」で有名な大人気のブランドですね。

こちらの商品詳細ページは、商品画像と商品情報部分が背景ごとはっきりとセパレートに分けられたレイアウトです。

商品画像が１カラムなのでインパクトが強く、より印象的になります。

またレイアウトを維持しやすくする為に、なるべく詳細情報を隠し、表示する際もモーダルとして表示される仕組みなので、レスポンス時のレイアウト崩れが起きにくくスプリットレイアウトの効果が強く発揮されています。

また、スマホではPCで分割していたブロックを縦並び＋cssを応用して視差効果を与えるデザインになっており、スマホでもオリジナリティを強調したデザインになっていました。

そしてスプリットレイアウトとは別に、商品在庫がある店舗を検索できる機能や付近の店舗の訪問予約ができる機能、チャット機能も活用しており、セールスDXにも積極的に取り組まれているのが分かりました。

 

 

4. Dior

　

ファッションだけでなく化粧品などでも有名なブランドですね。

こちらも商品画像と商品情報部分でセパレートに分かれたレイアアウトでスマホでは縦並びになります。

商品画像が２カラム表示なので少ないスクロール量で多くの写真を見ることができますね。

バーバリーと比較すると詳細情報部分がアコーディオン式で開閉されますが少し縦長に伸びてしまうようです。

それにより商品画像の枚数によっては、商品情報部分の固定表示が先に解除しページ下部へスクロールされ、スプリットレイアウトの視覚的な効果を維持しにくくなってしまうかもしれません。

ただスプリットレイアウトとは別に、Diorでも在庫のある店舗検索ができ、かつその店舗の訪問予約を一連の流れで取得できる機能があったり、レコメンド商品をページ遷移せずにモーダル表示でカートインが可能な機能などCVボタン周りのUIが優れていたりと購入前のちょっとした手間を削減できるユーザー目線のデザインだと思いました。

 

 

5. まとめ

スプリットレイアウトをECサイトの商品詳細ページで使用すると、商品画像がより引き立つことで印象強く与えられるのと同時に、レスポンシブ時のレイアウト崩れが起きにくい構造になる利点が分かりました。

また、PCだけでなくスマホの縦並びのレイアウト＋スクロール時の動きの見せ方にひと工夫加え共通化させることで、PCとスマホの両方で印象的なページにすることが可能なのだと思いました。

しかしスプリットレイアウト自体はただ画面をセパレートに分けて固定表示させればいいと言うものではなく、スクロール量も関係するのでブラウザの高さや固定表示させる情報の取捨選択・その見せ方にも気を付けて作成する必要があります。

ユーザビリティ向上の為の機能やUIデザインとうまく組み合わせ、そのような注意点に即した使い方ができれば、商品の魅力をより印象的に伝えられて、なおかつ使いやすいECサイトデザインにできる強い味方になるのではないでしょうか。