トレンドのECサイトヘッダーUIデザインパターンについて〜まとめ〜

Writer： koga　更新日：2021/11/01

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

前回前々回と、最近よく見かけるECサイトのヘッダーパーツについてPCトップページを中心に注目してきました。

ピックアップしてきたサイトから獲得できた情報を整理し今回の記事でまとめたいと思います。

 

 

1、ECサイトのヘッダーに必要な要素は？

一般的にECサイトのヘッダーに必要で設置すべきものは以下の要素です。

スペースや配置レイアウトによって優先順位をつけ見せ方を省略したり、他にも要素があったりとサイトの方針によって異なりますが、大体これらの要素がユーザーに一目で伝わるようにデザインされます。

今回様々なECサイトを見てきて、優先順位をつけるとすれば以下のような傾向が多いのではと思います！

会員登録/ログインと買い物カゴ（カート）は今回紹介したサイトはすべて表示していたので同率１位にしました。

２位にロゴとしたのですが、トップページに関しては、ヘッダー上ではなくMVで表現するケースもいくつか見られたので会員登録/ログインと買い物カゴ（カート）よりは下位にしましたが、ファーストビューでは必ず見せるべき要素だと思います。

続いて３位にカテゴリーメニュー、４位に商品検索窓としましたが、こちらの２つはサイトの方針、前回前々回のPC・SP独立型編とスマホライク編のようなサイトの構成で変動するかと思いました。

 

 

2、PC・SP独立型

デザイン上PCとスマホを切り分けているサイトと、サイト構築の構造上PC専用とスマホ専用で分かれているサイトでよく使用されるヘッダーパターンについて簡単にイラストにしてみました。

▼ヘッダー背景あり

▼ヘッダー背景なし

このようなレイアウトを選択しているサイトの特徴としては以下のことが挙げられると思いました。

実際に注目したサイトの詳細についてはこちらの記事をご覧ください。

 

 

3、スマホライク型

PCデザインもスマホライクにデザインされているサイトでよく使用されるヘッダーパターンについてこちらも簡単にイラストにしてみました。

▼PCヘッダーカテゴリーメニューなし

▼PCヘッダーカテゴリーメニューあり

特に海外サイトが多い印象ですが、次のレイアウトもしばしば見かけます。

▼PCヘッダーサイドメニューあり（SPのハンバーガーメニュー）

また、スマホライクなレイアウトを選択しているサイトの特徴としては以下のことが挙げられると思いました。

実際に注目したサイトの詳細についてはこちらの記事をご覧ください。

 

 

4、まとめ

ECサイトのヘッダーパターンについてPC・SP独立型とスマホライク型を2軸にいろんなサイトから分析してきましたが、この2軸の切り口だけでも、それぞれの共通した特徴が浮かび上がってきたと思います。

サイトのジャンルがまた違うと、必要な要素も変わりますしレイアウトも変わってきます。

また別の切り口で分析してみるのも面白そうです。

サイトをデザインすることは、見た目を良くすることだけではなく、ユーザーにとってストレスなく考えさせない操作性を模索し提供することでそのサイトで伝えるべき情報をいかに明確に伝えられるかが重要だと思います。

その為には、デザインに入る前に、お客様の狙うターゲットユーザー層や、何を重視してサイト作りをしていきたいのかなどしっかりと情報収集し整理していくことが、どんなレイアウトにするのが適しているのか選択していくためにも大変重要なことだと改めて思いました！

今後もお客様のご要望に適切なデザイン提案ができるよう日々の情報収集を引き続き行っていきたいと思います。