トレンドのECサイトヘッダーUIデザインパターンについて〜PC・SP独立型編〜

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

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

サイトを構成する上で必ず必要なパーツがいくつかありますが、中でもヘッダー・フッターパーツはECサイトにおいても重要なパーツです。

そこで最近よく見かけるECサイトのヘッダーパーツに注目し、大きなパターンをピックアップしてみました！

今回は、PC・SP独立型編と言うことで、

•  デザイン上PCとスマホを切り分けているサイト 
•  サイト構築の構造上PC専用とスマホ専用で分かれているサイト 

よりPCトップページを中心に紹介していきたいと思います。

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

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

これらの要素も踏まえて実際にサイトを見ていきたいと思います。

 

 

1. BEAMS

アパレルブランドとして有名なBEAMSのオンラインショップです。

こちらのサイトのヘッダータイプは比較的スタンダードなパターンとしてECサイトでは一般的に使用されることが多く、このタイプから派生したレイアウトを使用されているサイトが多いと言っても過言ではないと思います。

ヘッダーに必要な要素は全て配置してあり、なおかつサイトの特徴として店舗スタッフのオムニチャネルコンテンツにも力を入れらているので、タイムライン形式で見ることのできるリンクもヘッダーに設置されています。

またヘッダーの下に、性別毎のタブが設置されており、性別毎のトップページに切り替えることができます。

コンテンツがとても充実しているサイトでも、このような工夫があるとユーザーが欲しい商品まで迷いにくく辿り着ける導線で使いやすいと思います！

一方スマホでは、画面上部固定のヘッダー内の設置要素は絞って、ハンバーガーメニュー内で導線を作られています。（スマホではこの形式が一般的に多く見られます。）

PCで配置していた他の要素はヘッダー下に配置されているのでファーストビューで見ることができます。

 

 

2. KINS

化粧品やサプリを販売しているブランドのオンラインショップです。

ヘッダーに必要な要素は大方揃っており、基本的に背景は透明でMV上に重なっているので、コンテンツに視線をより集めるデザインだと思います。

こちらのサイトの特徴としては、トップページではMVでロゴを目立たせる為ヘッダーにはロゴは表示させていないようですが、トップページ以外の下層ページではしっかりヘッダーの中心にロゴを設置してあります。

最近写真で魅せるデザインや海外商品のサイトなどを中心によく見かけるのがこのパターンですね。

画像は商品詳細ページのものですが、とにかくトンマナに拘っておられてこだわりや商品一つ一つの魅力にフォーカスしたページ構成だと思いました。

 

 

 

3. 銀座KUKI

 

お味噌の専門店のオンラインショップです。

こちらもPCではヘッダーの背景が透明でMV画像上に配置されています。

ヘッダーに必要な要素も揃っていて、違いはメニューや魅せるコピーなどを縦書きで表現することで和モダンな雰囲気を表現されていると思います。

和食や日本の伝統文化に属するものを扱われているサイトなどで縦書きを活用するサイトもよく見られます。

食品に使用する調味料なので、合う料理のレシピコンテンツが充実していて使用しているお味噌の商品詳細ページへの導線もあり、見せたいコンテンツもヘッダーメニューに配置されています。

 

 

5. SHIRO

 

化粧品で有名なSHIROのオンラインショップです。

こちらのサイトではヘッダーに必要な要素は大方揃っていて、ヘッダーメニューがMV画像の下に配置されているパターンです。

このパターンはECサイトではそこまで見られないパターンかもしれません。

PCのファーストビューでMV上にあるのはロゴとSNSアイコンのみで、MVが主役として目に入りやすくビジュアルでの訴求に強いと思います。

スクロールしてMV画像をすぎると、MV下にあったヘッダーメニューの左側にロゴが出現し、画面上部固定されます。

下層ページは、背景カラーが変わり回遊性を重視してなのか最初から画面上部固定です。

スマホはまた少し違い、画面下部にアプリのようにアイコンメニューが固定表示されます。

他にも工夫されている点がありスマホはスマホのユーザビリティを向上されています。

MV上のロゴと、PCではヘッダーとして機能していたMV下のカテゴリーメニュー群は配置は同じ位置ですが、項目が多いのでスマホでは追従しません。

ですがMV画像の高さと合わせて計算されていて、ファーストビュー内でカテゴリーメニューが見られるようになっています。

 

 

4. まとめ

今回は、PC・SP独立型編と言うことで、デザイン上PCとスマホを切り分けているサイトと、サイト構築の構造上PC専用とスマホ専用で分かれているサイトで見てきたのでレスポンシブ対応サイトも混在していました。

PC用とスマホ用にUIを適宜変更し別にしているので、実際の数値等はアクセス解析が可能でないと明言はできませんが、PCでのページ回遊性が高くなるのではと思います。

またセオリー通り必要な要素を隠さず表示するサイトが多い為、BEAMSのサイトのようなレイアウトをベースに派生したものになることが多いようでした。

あまり独特すぎるサイトデザインにするとオリジナリティは向上できるかもしれませんが、初めて訪れたユーザーにとっては操作に迷ってしまい欲しい情報に辿り着きにくくなってしまう可能性が高いです。

ECサイトの目的は商品を購入してもらい売上を向上させることなので、最も目に付きやすいヘッダーは特にセオリーを守ることは重要なことだと思いました。