トレンドのECサイトヘッダーUIデザインパターンについて〜スマホライク編〜

Writer： koga　更新日：2021/10/26

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

前回に引き続き、最近よく見るECサイトのヘッダーパーツのUIデザインパターンについて、今回はスマホライク編です。

PCでもスマホライクなサイトのトップページを中心に見ていきたいと思います！

↓前回の記事はこちら↓

おさらいとして、一般的にECサイトのヘッダーに必要で設置すべきと言われている要素はこちらです。

 

 

 

1、ABC-MART GRAND STAGE

シューズ小売店のABCマートのラインで、各人気ブランドの限定アイテムなどを扱うGRAND STAGE公式オンラインショップです。

まずヘッダーに必要な要素はほとんど設置されています。

なおかつヘッダーデザインはPCもSPのレイアウトをそのまま採用されており、ハンバーガーメニュー内に基本的なメニューを配置されています。

ヘッダーのすぐ下に設置してある検索窓は、ページスクロールの際に上方向にスクロールした時にのみ画面上部固定で表示される仕様です。

また、ハンバーガーメニューとは別に検索窓の左端に配置されているアイコンメニューが絞り込み検索のフィルターのようです。

つまり商品一覧ページではなくとも、どのページを表示していてもこのアイコンから絞り込み検索ができる仕様です。

この仕様も、デザイン含めSP同様にPCも共通のようです。

コンテンツでもスライダーに矢印アイコンがないのは、スマホでスライダーはスワイプ操作することが多いことからそのようなデザインに統一されているのかと思いました。

完全にターゲットをスマホ操作がメインの世代のユーザーを狙っているのではと思います。

 

 

2、hince

韓国コスメブランドのオンラインショップです。

カラーリングだけでなく背景の角丸の形状など細部までトンマナが統一されていてとても素敵なデザインです。

こちらのサイトもヘッダーに必要な要素はほとんど設置されていて、PCもSP同様のハンバーガーメニューが設置されるレイアウトを採用されています。

そしてヘッダー背景が透明かつ四隅に寄せるデザインでコンテンツの邪魔になりにくく、ビジュアルでの訴求が重視されています。

ハンバーガーメニューでの違いといえば、SPよりもPCの方がメニューを開いた時の項目が細かく表示されており、SPではタップしてアコーディオン式に開いて選ぶところを、１アクション省略されています。

デザインは同じでも、こういった細かい仕様があるとPCとSP各々のユーザビリティが向上されると思います。

コンテンツもスプリットレイアウトをブロック毎に使用していて、PCではスクロールの動き、SPではスワイプの動きにそれぞれ合わせたデザインで、どちらのデバイスでも使い勝手が良いのではないでしょうか。

 

 

3、FABRIC TOKYO

こちらのサイトは以前の記事で紹介したオーダースーツブランドのオンラインショップです。

以前の記事で紹介した時からヘッダー周りのUIデザインがスマホライクに変化していました。↓

hinceのサイトのようにヘッダー背景は透明でハンバーガーメニューが設置されており、その他の要素もほとんど設置されていますが、こちらのサイトはPCではハンバーガーメニューだけでなくカテゴリーメニューを別に設置されています。

カテゴリーメニューとハンバーガーメニュー内の項目は、同じフライアウトが出現する仕様で、スマホでも同様の要素を画面のスペースに合わせレイヤーを分ける程度の違いで実装されています。

※ハンバーガーメニュー内もテキストだけでなく切り抜き画像を使用するなど工夫されているので直感的に操作ができるのではと思います！

PCはSPに比べてスペースに余裕があるので、このようによく使用される項目は出しておいた方がユーザーの操作は１アクションで済むので使いやすいかもしれません。

 

 

4、LACOSTE

アパレルブランドで有名なラコステのオンラインショップです。

こちらのサイトでは、PCは画面上部にヘッダー、左側にメニューが固定表示してあり、残りの右側のコンテンツ部分のみスクロールできる仕様です。

このメニューですが、下層ページでも同じように固定表示されているため回遊性に優れており、スマホではハンバーガーメニューとしてそのまま使用されています。

最近は１カラムレイアウトを意識したサイトが多く、ECサイトでも画面幅いっぱいに画像を表示させることもよく見られるようになりました。

世界観を魅力的に表現できるのですが、画像の比率やバランスの制御の仕方によっては画像が大きすぎてPC環境によって見辛くなってしまうケースも見受けられます。

こちらのサイトのように片側にメニュー固定すると、コンテンツ幅いっぱいに画像を使用したとしてもそういった見辛さが解消されていると思います。

このように左側にカテゴリーメニュー含め必要な要素を配置したヘッダーを固定表示させるパターンもECサイトで見かけることが増えたのではと思います。

ただし、このようなレイアウトを組む場合はデザイン以前に、できるだけ情報量を整理しスッキリさせることが肝になってくるかと思います。

 

 

5、まとめ

今回はスマホライクなサイトを見ていきましたが、ECサイトのヘッダーに必要な要素を残しつつ、ターゲットのスマホ操作がメインの世代のユーザーに合わせたデザインをされていました。

スマホ操作に慣れているということは、スマホのUIとして一般的なアイコンやレイアウトの方がターゲットにとっては自然体でよりユーザビリティ的に適しているのだと思います。

また、PCもスマホライクなデザインにすることで、レスポンス時の切り替えの違和感も少なく、ソースの運用もしやすくなることが多いので、レスポンシブ対応により適した仕様にできると思いました。

ただPCでそのままスマホのデザインを流用するのではなく、ソース構造が変わらない程度のちょっとした工夫をデザインに取り入れた方が、現状は幅広いユーザー層に受け入れられやすいのではないかと思いました。

狙うべきターゲットユーザーにとっていかにストレスなく考えさせない操作性を提供できるUIデザインとはどんなものなのか、自分の体験も1ユーザーとして踏まえた目線で考えていくことが大事なのだと思います。