なぜ？特徴的なECサイトデザインのレイアウトについて分析してみました！

Writer： koga　更新日：2021/05/25

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

ECサイトのデザインを作成する際、視認性やユーザビリティに重点を置いたり、カートシステムを使用する為デザインの大枠はテンプレートに沿って作成する関係で、基本軸のページは割と似たようなレイアウトのサイトになることも多いかと思います。

その中でブランドの個性を出しつつ使いやすいサイトを作るには、どんなことができるのでしょうか。。

以前のブログでECサイトとスプリットレイアウトについての見解を紹介しましたが、今回は他にもECサイトを横断してみて、デザインが特徴的だと思うサイトをレイアウトの視点から他にどんなことができるのか見ていきたいと思います！

 

 

 

1. GUCCI

誰もが知っているラグジュアリーブランド「GUCCI」のサイトです。

こちらのサイトで一番特徴的なページデザインは、商品詳細ページだと思います。

一般的に商品詳細ページで多く見られるレイアウトは、左側に商品画像・右側に商品情報とCVボタン群ですよね。

こちらのページでは、PCは商品情報ブロックを中心に配置し、商品画像でサンドイッチしたようなレイアウトで、商品画像はこのまま2枚ずつスライドします。

また画像の使い方も大胆にはみ出した魅せ方で、まるでLPのMVのようです。

そして商品情報ブロックからカラーバリエーションの選択をしようとすると、それまでファーストビュー下に設置されていたカラーバリエーション画像ブロックが上昇するので、ファーストビュー＋1クリックだけでそのまま比較がしやすい仕様になっています。

この機能はSPでも使用されており、カラーバリエーションのボタンは商品画像が見えている間は追従します。

最も重要な商品画像をしっかり主役として表現しユーザーの視線を集めつつも、使いやすさも実現している点がとても特徴的なデザインになっている理由だと思いました。

 

 

2. nano・universe

ファッションブランド「nano・universe」のサイトは特集記事や動画配信など、コンテンツにも注力されているサイトです。

コンテンツの種類も豊富で、TOPページではそれぞれに背景もブロックデザインも異なります。

最も視線を集めるのは、PCではMVの次にくる特集ブロックかと思います。

画像面積が大きいのも理由の１つですが、他のブロックのレイアウトの使い方と比べると、グリッドレイアウトを大変うまく応用されていて、動きのあるレイアウトにされている所以だと思いました！

ところがSPでは、MV下にくるグリッドレイアウトを応用したブロックが特集コンテンツではなく、商品カテゴリブロックでした！

これは多様なコンテンツがある中でもSPユーザーが商品を見つけやすくする為の工夫だと思いました。

また、ブロックデザインがそれぞれ異なるのに、ごちゃっとした印象を感じさせずすっきりとした飽きのこない印象に感じさせるのは、背景をグレーを基調に落ち着かせていることもあると思いますが、ゆったりとした適切な余白をつけホワイトスペースを生み出しているからだと思いました。

全体を通して、レイアウトを考える上で重要な情報の優先順位をしっかりつけて優劣を表現することで、特徴的なレイアウトを使用して組んだとしても成立するデザインだと思いました。

 

 

3. FABRIC TOKYO

オーダースーツブランドの「FABRIC TOKYO」のサイトは、オーダースーツという少し敷居の高さを感じてしまうイメージを払拭するような明るく活発で親しみやすい印象のサイトデザインでした！

商品のほとんどがカスタマイズオーダーできるので、そもそも一般的なECサイトの購入フローとも少し違い、デザインもより特徴的と感じるのだと思いますが、綺麗でとても見やすいデザインです！

まずレイアウトを綺麗に見せるのに重要な整列や要素のグルーピングを直感的に分かりやすくする為に区別し反復することを徹底されていると思いました。

こちらのサイトも画像の使い方が本当に見事だと感じたのですが、記事コンテンツのサムネ画像と、目立たせたいブロックや商品のこだわりを表すコンテンツなどで使用している画像は、背景を一部白抜きにしていたり、全部背景が抜かれていたり、アクセントにカラー背景を入れたり、と細やかな工夫が散りばめられていてコンテンツ毎の強弱をうまくつけられていると思いました。

それらにより、より見てほしいコンテンツへユーザーの視線を誘導できるのではと思います。

 

もうひとつ面白い工夫があり、コーディネートの雰囲気を抽象的な言葉だけでなく、カジュアルかフォーマルかのメーターを目立つカラーのデザインで使用しホットスポットを作られていました！

スーツもこんなに着方で印象が変わるのですね。。

画像の作り方や活用の仕方で、コンテンツの対比をしっかり作ることで、より特徴的な印象を表現されているサイトだと思いました。

（ラインナップは男性のみのようで、個人的にスーツ着る機会はほとんどないのですが女性ラインナップも今後増えると素敵だなと感じました！）

 

 

4. まとめ

いろんなECサイトを横断して、特徴的だと思ったサイトを今回じっくりと観察してみて自分の中ではたくさんの気付きがありました。

今回紹介させていただいたサイトから共通して感じたのは、使いやすさ見やすさだけではなく、ユーザーに何を見て欲しいか優先順位をつけ、それらを両立させるレイアウトに落とし込んでいることです。

実現するのに必要な、大胆な技や細やかな技が交錯していました。

優先順位はつけるだけでなく、直感的に伝わるようなイメージにどう近付けていくのかが大事なポイントですね。

今後もそういった技をもっと習得できるようにインプットとアウトプットを繰り返していきたいと今回強く感じました。