ECサイト構築・運用でチェックしたいヘッダーデザイン~12のポイント~

ECサイトを構築する際に真っ先にお客様の目に飛び込んでくる「ヘッダーデザイン」は、ECサイト全体のユーザビリティを考えるにあたっても、最も重要な構成要素の一つです。

そこで、今回は国内外の大手ECサイトの事例を交えながら、チェックしておきたいヘッダーデザインのポイントを紹介したいと思います。

○ショッピングカート(買い物かご)を見る

ECサイトにおいてヘッダーに配置するのは、必須とも呼べる存在。多くの企業では、カートのアイコンとともに「カートを見る」「ショッピングカート」というテキストが配置されていますが、「THE BODY SHOP」のオンラインショップでは、何も入っていない状態でもカートの中身を表示し、カートに何かを入れると現在のカートの中身を確認できるというユーザーフレンドリーな優れた表示方法を実現しています。

フレグランスやメイクアップ商品などを扱う「THE BODY SHOP」
http://www.the-body-shop.co.jp/shop/

bodyshop

○ヘルプ

ECサイトを訪れたお客様が注文する際に何かに困った時、あるいは注文後に何かに困った時に「ヘルプ」というサービスを提供することにより、ECサイトとしてのサービスレベルを向上させることができます。

米フォーチュン誌が選ぶ「働きがいのある企業100」ランキングで15位(2010年度)にも選ばれた「ザッポス」では、「ライブ・ヘルプ」というチャット・サービスをヘッダー上に準備しています。

筆者もオンラインチャットによる「ライブ・ヘルプ」は利用した経験がありますが、非常に便利です。

ザッポスは、非常に顧客満足度の高い企業としても知られていますが、「ライブ・ヘルプ」を用意することで、お客様へのサービス・レベルはかなり高くなっていると考えられます。

ライブ・ヘルプを用意することは、企業としては簡単なことではありませんが、「ヘルプ」をヘッダーに入れる価値はECサイトにおいて非常に重要な要素の一つです。

シューズからスタートして、現在では世界的に有名なアパレル通販サイトに。アマゾンにより買収/ザッポス
http://www.zappos.com/

zappos

ikea ukのサイトでは、オンラインチャットのスタッフが迎えてくれます。
http://www.ikea.com/gb/en/

ikea

○電話番号

ECサイトには様々な問い合わせ方法が用意されていますが、「電話」による問い合わせが用意されているのは、ユーザーにとってはとてもありがたいものです。

ECサイトの運営側にしてみると、売り上げが伸びるにつれ、電話による問い合わせも増えて、また、その対応にスタッフが多くの時間を取られてしまうことも少なくないため、電話対応を積極的にサイトとして推進するということについては慎重な企業が多いのも事実かと思います。

しかし、電話によるお問い合わせをして頂けるお客様の中には、電話注文にも抵抗がないだけでなく、リピーターや高額購入者になるロイヤリティの高いお客様であることが少なくないというデータも企業様によってはあります。(弊社調べ)

スイスのプレミアムチョコレートブランドとして有名な「リンツ」のオンラインショップでは、フリーダイヤルに加えて、窓口の営業時間と休業案内も同時にヘッダーに記載しています。

事前にかけても繋がらない日時を併記することで、お客様にはとても分かりやすい表記になっています。

スイスのプレミアムチョコレートブランド「Lindt リンツ」のオンラインショップ
http://www.lindt.jp/

lindt

○商品検索

「ショッピングカートを見る」同様にECサイトのヘッダーで必須のような存在の商品検索ボックス。

検索に関するニーズはグーグルなども公表していますが、単語による検索だけでなく、複数の単語を含んだ複合ワードによる検索が増えていることもあり、サイト内での検索を考慮し、商品ページに丁寧に商品の特徴をキーワードとして盛り込んでいくといった地道な作業も必要になってきます。

無印良品のサイトでは、検索ボックスの中に薄いグレーの文字で「商品名、キーワード、商品番号・・・」といった説明が入っていて、ユーザーへ検索の使い方を提案するという方法が取られています。

商品番号で検索できることの有用性は運用側はよく理解されていることが多いですが、お客様の方ではそれほど認知されていないことが少なくありません。紙媒体などのカタログなどを配布されている企業様ではこうした取り組みは特に有用性が高いと思います。

無印良品のオンラインショッピング
http://www.muji.net/store/

muji

○送料と返品について

ECサイトを利用する際に、お客様が気にされるポイントとして最もよく挙げられる「送料」と「返品」。

もし、送料無料で返品可能期間、また海外発送も可能であれば、それをヘッダーで分かりやすく告知することでお客様のショッピングへの安心感やハードルを下げることに繋がると思います。

世界100ヶ国に配送しているメーシーズ。海外発送についてのFAQもヘッダーで告知しています。
http://www.macys.com/

macys

送料無料、7日間返品OKを赤字でヘッダーに表記しているユナイテッドアローズのオンラインストア
http://store.united-arrows.co.jp/

ua

○ログイン、会員登録について、マイページ、サインアウトなど

新規会員登録、ログイン、マイページなどへ誘導を促すためのリンクやアイコンもほとんどのECサイトで見られます。

日本ではあまり見られませんが、サイトへ訪れたと同時にポップアップ画面が登場して、サインインを促すECサイトもあります。

筆者はログインや会員登録、マイページへの誘導についてはそれほど派手な誘導は必要はないが、ヘッダー部分には欠かせない構成要素だと思います。

メールを使って、サインアップすると、お得な情報などが受け取れることができるという告知が出てくるティンバーランドのサイト

ティンバーランドのオンラインショップ
http://shop.timberland.com/home/index.jsp

timba

ページ最上部の一番左側に「LOG IN」へのリンクをシンプルに設置している他、チェックアウトも設置/H&Mのオンラインショップ

H&M US ONLINE STORE
http://www.hm.com/us/

hm

○お気に入り、ウィッシュリストなど

実店舗ではウィンドウ・ショッピングだけでも楽しいものですが、ネットショッピングでも自分のお気に入りをストックしておくのも楽しいものです。

例えば、ECサイトでいくつか自分の欲しいアイテムの候補があったときに、それぞれのページをブラウザのブックマークに入れたりするのは意外に億劫だったりします(ブックマークが増えたり、整理するのが苦手という人も少なくないと思います。)

そんな時に重宝するのがお気に入りやウィッシュリストかもしれません。サインインさえしておけば、あとは自分のお気に入りを増やしていくだけですから、簡単ですね。

ヘッダーの目立つところにハートマークともに用意されている「お気に入り」/ゾゾタウン
http://zozo.jp/

zozo

○問い合わせ/Contact

ECサイト以外のサイトでもヘッダーには設置しておきたい「問い合わせ」

クリックすると、電話やメール、そして問い合わせ内容により分かりやすくお客様へ誘導することで、お客様と運営側が問い合わせをスムーズに行うことができます。

分かりやすい配置とクリック後に用意された豊富な窓口/フィリップス
http://www.philips-store.com/store/

philips

○ご利用ガイド、お買い物ガイド

アパレルや書籍といった商品に比べて、いわゆる”生もの”である植物や食物は、配送のことも含めて、お客様の購入へのハードルが少し上がると言われています。

そうしたお客様の購入のハードルを下げてあげるためには、サイト内で丁寧な案内が必要ですが、ヘッダーにご利用ガイドやお買い物ガイドを設置することは貴重な方法の一つであると考えられます。

「あんしんお買い物ガイド」というテキストをヘッダー最上部に用意しているオンライン・フラワーギフト・ストア/イイハナドットコム
https://www.e87.com/

e87

○実店舗について

実店舗を運営しながら、ECサイトも運営しているという会社も多いと思いますが、「実店舗」があることや実店舗でサポートが受けられることをヘッダーでアピールすることがお客様への安心材料になることがあります。

オーマイグラスは日本全国1100店舗にてフィッティング、修理、クリーニング、レンズ交換、 視力測定等の各種サービスを受けることを可能にして、日経トレンディで「試して納得して買えるネット通販1位」に選ばれています。

オーマイグラス株式会社
http://www.ohmyglasses.jp/

ohmy

また、最近では、スマホで「会社名(店舗名) 地域名」で検索されることが多いことから、ヘッダー部分で実店舗やサポートが受けられる店舗をすぐに探すことができるようにサイトを設計することはユーザビリティの向上にもつながります。

○はじめての方へ、当サイトについてなど

認知度の高いブランドや会社のECサイトであっても、「初めての方へ」はそのサイトをお客様に理解して頂くための貴重なコンテンツになり得ます。またヘッダーに配置することでお客様への積極的なアピールになります。

「ブランド」を知っていても、その企業にとってのECサイト位置づけやサービスまでお客様が知っているかどうかは分かりません。

株式会社ニコンや株式会社ラッシュジャパンといった人気企業のサイトでも「初めての方へ」をしっかりと配置し、さらにクリックした先には丁寧な説明が用意されています。

ニコンダイレクト
http://shop.nikon-image.com/

nikon

LUSH
http://www.lushjapan.com/

lush

○FAQ、よくある質問

こちらも「はじめての方へ」同様、ヘッダーに配置することでお客様へ「FAQ」という貴重なアドバイスを与える機会を積極的に提供できます。

タビオやNOYESは靴下やソファといった商品についてのFAQをヘッダーに配置して、お客様が自分で問題を解決できるようにしています。

FAQは問い合わせ窓口のコストを減らすことにも繋がりますので、サイトの構成上、設置を考慮することは十分価値のあることだと思います。

靴下専門のタビオ
http://www.tabio.com/jp/

tabio

ソファ専門のNOYES
http://www.ny-k.co.jp/index2.html

noyes

【まとめ】

ヘッダーデザインにはこれが正解というものはありませんし、また構成要素の教科書があるわけでもありません。今回紹介した各要素を全てヘッダーで準備する必要はない場合の方が多いと思います。

ただ、上記で紹介したような実績のあるサイト、人気ECサイトなどでヘッダーに採用されることが多い構成要素は、ECサイトの構築や運営において、それだけ価値の高い構成要素であることの証左だと思います。

マーケティング・パートナーでは、サイトの構築時のインフォメーション・アーキテクトだけでなく、デザインから運用、物流までをトータルに、また部分的にコンサルティングを行い、クライアント様のご要望・環境に応じたECサイト構築支援を行っています。

ECサイト構築・ECサイトのリニューアル・乗り換えなどのご相談については、お気軽にお問い合わせくださいませ!