こんにちは。今回はECサイトについてお話します。
弊社は採用サイト制作を強みとしていますが、もちろんそれ以外にも多ジャンルのサイトを制作しております。
その中でも、最近は自分の入社当初よりもECサイト案件が増えたなぁ、と思う今日この頃です。
ECサイトのデザインは個人的にとても難しいのですが、同時にやりがいがあって楽しい分野です。
コンバージョンポイントがハッキリしているので、どうやって購入までこぎつけるのか、という「ユーザーの行動をデザイン」することが大切だと考えています。
今回は、どのサイトでも重要な役割を果たす「ヘッダー」が、ECサイトではどんな作りになっているか観察していきたいと思います。
私がたまに利用する3つのECサイトをご紹介していきます♪それでは早速見ていきましょう！
高島屋オンラインストア
高島屋オンラインストアのファーストビューのヘッダーは比較的情報量が多いです。メインはロゴのある行で、ここは下にスクロールしても付随してくる部分となっています。
重要な遷移先はコンパクトにまとめていますね。具体的には、キーワード検索、ログイン、お気に入り、お知らせ、カート、そしてメガメニュータブです。
メニュータブ内は、サイトマップのようになっていて、商品のカテゴリーや特集、会員メニューへのリンクができます。
ファーストビューではグレー帯付きの行が商品一覧への導線になっているのと、その下に「注目ワードから探す」という欄があるので、ここからダイレクトに商品一覧ページに飛びやすいですね。
また、最上部のタカシマヤカード入会のご案内は、かなり作りこまれていて目立ちます（笑）。アテンション強めです！
そして、小さくではありますが各種髙島屋のサービスサイトへの遷移も設置されています。それぞれのページにアクセスしてもらうのも、ささやかなポイントなのかもしれません。
カルディコーヒーファーム オンラインストア
カルディのオンラインストアも、ファーストビューで商品のカテゴリーが分かりやすく並んでいます。
アイコン付きの商品カテゴリーはダイレクトに遷移できて、その上の文字ベースのカテゴリータブはメガメニューになっていて、より詳細にカテゴリーの絞り込みをして一覧を見ることができます。
かなり丁寧に導いてくれて嬉しいなーっという印象を持ちました。
スクロールするとこんな感じのコンパクトなものになり、この状態で追尾します。↓
アイコンをホバーするとメニュー名が表示されます。これまた分かりやすくて安心感がありますね！
全体的に、分かりやすさと見た目の作り込みが丁寧な印象のヘッダーとなっています。
ロイズ（ROYCE’）公式 – チョコレート・お菓子のオンラインショップ
チョコレートで有名なロイズのECサイトは、情報が他の2サイトよりも厳選されている印象です。
上段は会員メニューと、おそらく多くの方がアクセスするであろう店舗情報、催事情報へのリンクがアイコン付きで並んでいます。
下段はざっくりとした商品カテゴリーの羅列になっています。色付きになっていて、目立つ見た目になっていますね。
ホバーするとより詳細なカテゴリーが表示されます。
そして、このサイトはスクロールでヘッダーは追尾しないことに気が付きました（PCの場合）。確かに、追尾しなくても、使っていて特に不便に感じたりはしないなぁと感じました。
こちらは的確で潔い印象のヘッダーだな、と思います。
まとめ
いかがでしたか？
今回紹介した3サイトはどれもファーストビューで商品を探しやすいように、カテゴリーが分かりやすく、目立つような見た目で並んでいますね！
やはりECサイトはどれもユーザーに商品を買わせる、という共通目的があるので、どうやって購入ボタンまで誘導するか？というのを熟考して作られているな、とつくづく思います。
それらを考察しながらサイトを見ていくと、新たな発見があってとても楽しいです♪
最後までお読みいただきありがとうございます。
