ECショップオーナーやウェブ制作担当の方の多くは、ECサイトの基本的な閲覧・購入の手順に熟知しています。
しかし利用者の多くはそれほど精通していません。

下のヒートマップは、同じサイトのトップページが表示されてから10秒間に、ユーザーがどこを見たかを示したものです。
ECサイトを使い慣れているユーザーと、使い慣れていないユーザーの違いがわかります。

画面の中央に視線が集中しています。目を引く画像に目線が取られている様子が見てとれますね。
慣れていない人は全体を俯瞰することができないため、どこを見れば目的のものが見つかるのかがわかりません。

画面の中心にある画像にそれほど視線が滞留せず、左のナビゲーション部分や上部のタブメニューに目を向けています。

ヘビーユーザーは検索やカテゴリからの絞込みを使って自分の欲しいものを手早く見つけたいと思っています。
運営サイトがどちらをターゲットとしているかをよく考慮し、力を入れる方向を定めましょう。

ショップ制作者が自社サイトを「ユーザーの視点」で見た視点

ページの下部にある単価表を確認しているのをチェックしてください。サイト全体がわかっていないと気付くことができないですが、制作者はあることを知っているために操作ができています。

インターネットに熟達していない人の視点

制作者の視点と比較して、ページ全体の構造を理解していないために目的の情報を探せない様子がわかります。

インターネットに熟達している人の視点

インターネットに熟達している人は最初にサイトの情報構造をつかもうとします。インターネットに熟達していない人との違いを確認してください。

協力：名入れボールペン(粗品・販促・記念品用)製作専門「OH！名入れペン」さん　http://www.opening.jp/

概要

・”お味噌”ということで、ビジュアル表現で商品ごとの違いを見せることが大変な商材。料理の画像や表現しようとしている。
・購入したいと思わせる表現が必要。あか抜けた表現で高級志向のユーザーへの訴求力を高めて。

視線の特徴

商品ページ

ランディングページに表示される2つの商品は、価格帯が違い、各ページでさまざまな画像や表現を使って違いを理解してもらえるよう工夫されています。
ユーザーも理解出来ています。
ですが、高価格帯の商品について、「あまり高級感が感じられない」という意見があがることがありました。

＜改善案＞
お味噌など、どこでも購入出来る商材を販売するネットショップのターゲットを考えるとき、「なぜスーパーで購入出来る商品をわざわざインターネットで購入しようとするのか」ということを意識しなければなりません。
お客様の中には、「毎日使うものだから安く済ませたい」という方と、「多少手間をかけてでも体に良いもの、ちょっと良いものが欲しい」という方がいます。
どちらをメインターゲットとすべきか、商材によって違いますが、今回の場合は後者を意識したサイト作りが妥当でしょう。
むしろ「セレブ志向の主婦向け」と割り切った作りにすることで、訴求力も高まります。
また、今回の場合、肝心の料理の写真は2つの商品どちらも同じものを使っています。
お味噌汁の表現一つとっても、器や具の見せ方をより工夫したり、料理の名称にひねりを加えてセレブ感を演出するなど、「多少送料がかかってもご近所スーパーよりここの商品が使いたい！」と感じてもらえるようになる工夫をしていきましょう。

■調査対象URL

味噌・醤油の老舗・厳選素材専門店　山田屋

http://www.e-misoya.com/hpgen/HPB/entries/238.html

■目的

・ちょっと高級なお味噌を探す主婦の方に、どんなページがよいか確認したい

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■タスク内容

あなたは普段使いや贈り物として使えるお味噌をインターネットで購入しようと思い検索したところ、あるページにたどりつきました。
表示されるページから、お味噌を選んで購入してください。

概要

・『油』というメイン商品そのものに関連しない情報が多く、初めて訪れたユーザーが『油の店』であることが直感的に理解しにくい。リピーターを飽きさせない工夫は必要だが、重要な商品から離れすぎないように注意。

視線の特徴

商品個別ページ

［五味一体特別の油 寿］の商品ページ。
商品ページの上下に買い物かごのボタンあり、初めて購入するユーザーもリピーターも購入しやすい。

＜改善案＞
ページ下の買い物かごボタンのそばに関連商品にお得なセット販売があります。左図ヒートマップの赤くなって入る部分（注視されている部分）がそれです。
リピーターの方が購入しやすいよう、セット販売ページへのリンクをページの上部にある買い物かごボタンのそばに設けるとより親切です。商品についてわかっているリピーターは、わかっているからこそあまりページをよく見ずに条件反射で買い物かごボタンをクリックしてしまう場合があります。カートに入れるボタンを押す前に早めに表示させるようにしましょう。
バナーなど凝ったものではなく、「お得な6本セット販売はこちらから」などのテキストリンクで十分。魅力ある言葉で引きつけるようにしましょう。

金田油店さん 見エール体験談はこちらから

■調査対象URL

えごま油の店 金田油店

■目的

・「五味一体特別の油 『寿』」を頂き物としてもらい、美味しかったので自分で買おうと思い検索して来店した方がきちんと購入できるか確認したい
・セット販売のものを購入するとお得になること（1本当たり100円引きになる）に気づくか確認したい

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

１１月２４日～２５日

■タスク内容

あなたは以前、「五味一体特別の油寿」という商品をお友達から頂きました。
おいしかったので、自分で購入しようと思い検索したところ、あるページにたどりつきました。
「五味一体特別の油寿」を、何本購入されても結構ですのでなるべくお得に（送料無料など）になるように購入してください。

概要

・『油』というメイン商品そのものに関連しない情報が多く、初めて訪れたユーザーが『油の店』であることが直感的に理解しにくい。リピーターを飽きさせない工夫は必要だが、重要な商品から離れすぎないように注意。

視線の特徴

商品個別ページ

［五味一体特別の油 寿］の商品ページ。
ファーストビューは雑誌掲載・テレビ紹介の情報になっている。
＜問題点＞
商品よりも雑誌の表紙の顔写真が目立ち、何のページなのかすぐに判断できない。
商品の部分も、他の商品の写真が一緒に掲載されているためメインの商品が目立たない。

＜改善案＞
ユーザーは作り手が思っているほどページをスクロールしてくれません。ファーストビューで商品の把握ができないと、「ちょっと違うのかも･･･」と不安になって離脱されてしまいます。
ページが変わっても画面に変化がないという状況は避けてください。
そのページで販売されている商品とその特徴の説明をはっきりとファーストビューで示すようにしましょう。
商品の信頼性やイメージアップのために、掲載履歴も重要です商品説明の下に配置しておきます。
その際、人の顔には視線が固定されることに気をつけましょう。

金田油店さん 見エール体験談はこちらから

■調査対象URL

えごま油の店 金田油店

■目的

・「五味一体特別の油 『寿』」を頂き物としてもらい、美味しかったので自分で買おうと思い検索して来店した方がきちんと購入できるか確認したい
・セット販売のものを購入するとお得になること（1本当たり100円引きになる）に気づくか確認したい

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

１１月２４日～２５日

■タスク内容

あなたは以前、「五味一体特別の油寿」という商品をお友達から頂きました。
おいしかったので、自分で購入しようと思い検索したところ、あるページにたどりつきました。
「五味一体特別の油寿」を、何本購入されても結構ですのでなるべくお得に（送料無料など）になるように購入してください。

概要

・サイト全体の雰囲気や操作性は統一されていて、概ね迷わずに操作していくことができる。ギフトセットなどを含めても商品点数は20程度となり、それほど多くなく、それぞれの商品ページでは魅力的な写真と丁寧な説明で商品のよさを伝えている。
・商品ページごとについている【カートへ入れる】ボタンは大きく見やすいが、購入手続きへ進むためのボタンが見づらくなっていてもったいない

視線の特徴

買物カゴ

注文確認の表は見やすくなっていて、間違いなくチェックをすることができる。

＜問題点＞
購入手続きへ進むためのボタンと買い物を続けるボタンの違いがわかりにくい。また、ボタン自体が小さく、文字も背景色と同化したようになってしまい読み辛く感じられる。せっかく買い物籠に商品を入れたユーザーの”購入したい意欲”とボタンの購入して欲しい勢いがかみ合っていない。

＜改善案＞
購入手続きへ進むためのボタンはもっと大きくはっきりさせたり、支払いなどの手続きであることを示すアイコンをつけるなどの工夫をするとよりわかりやすくなる。

佐野洋菓子研究部さん 見エール体験談はこちらから

調査対象URL

ベイクドチーズケーキ・洋菓子専門店　佐野洋菓子研究部

目的

・スムーズに購入できるページ構成になっているか?
・知りたい情報（説明や画像）がきちんとページに記載されているか?
・分かりづらい文章はないか?
・買い物かごに入れた後、注文確定まで不安無く終了したか?
・他ページへの移動はスムーズか?

調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

調査日時

２０１０年９月２８日～３０日

タスク内容

あなたはインターネットで「ベイクドチーズケーキ」を購入したいと思っています。
ヤフーなどで「ベイクドチーズケーキ」で検索し、あるサイトを見つけました。
今から表示されるサイトで、チーズケーキを購入してください。
その他、購入したい商品を自由に購入してください。

全体評価

概要

・商品画像がシンプルだが大きく、ユーザーが気になる部分についてきちんと掲載されていて商品を検討をする材料としてとても役立っている。

視線の特徴

ショッピングカート内

ショッピングカート内の商品数が１種類の場合、購入手続きへ進むためのボタンもきちんとファーストビューに入り、スムーズな操作ができるようになっている。
ボタン自体も大きく、間違えることがない。
＜問題点＞
スクロールせずに購入手続きに進める分、ついで買いのおすすめ商品がファーストビュー外になってしまっているため見てもらいにくい。
注文に関する注意書きが多く、ページ下におすすめ商品を押し下げてしまっている。

＜改善案＞
商品確認部分の上部にある説明をうまく省略し、おすすめ商品がうまくファーストビューにかかるようになるとなお良いでしょう。

■調査対象URL

ブランドセレクト通販ショップ【亜洲’Ｓ本店】

■目的

主なユーザーは男性、ファッション誌を読む２０－３０代の大学生、社会人

雑誌掲載商品だけでなく、そのブランドの他の商品も見てもらい、今の
シーズン（今は秋）のトレンド品種や新作をバンバン買って行って欲し
い。

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

９月２８日～３０日

■タスク内容

あなたは、ファッション雑誌を読んで見つけた、あるブランド（インパクティスケリー）の服が気になっています。
ブランド名で検索し、ある通販ページにたどり着きました。
気に入る服があるか、自由に探して購入してください。
このブランド以外にも、自由に閲覧し、好みの商品を購入してください。
（ただし、このサイト内での購入に限ります。）

全体評価

概要

・商品画像がシンプルだが大きく、ユーザーが気になる部分についてきちんと掲載されていて商品を検討をする材料としてとても役立っている。
・服のブランドセレクトショップのため、ユーザーの興味の強弱で導線が異なる

視線の特徴

トップページ

トップページのファーストビューはブランドごとのグローバルメニューとランキングに占められる。
送料や発送に関する説明ページへのバナーや電話番号などもファーストビューに入っており、初めてのお客様へも親切な作りになっている。
＜問題点＞
ファッションに興味があり、ある程度ブランドについての情報を持っている人がターゲットとなっているため、知識のない人にとってはとっつきにくい雰囲気がある。
商品の分類や価格帯で絞り込むメニューも右に用意されているが、メインコンテンツの部分の大きな画像が目立ちすぎるためあまり見られていない。

＜改善案＞
分類で商品を選べるページを１ページ用意し、トップにバナーを張るなどの方法でユーザーがブランドの新規開拓をしやすくする。

■調査対象URL

ブランドセレクト通販ショップ【亜洲’Ｓ本店】

■目的

主なユーザーは男性、ファッション誌を読む２０－３０代の大学生、社会人

雑誌掲載商品だけでなく、そのブランドの他の商品も見てもらい、今のシーズン（今は秋）のトレンド品種や新作をバンバン買って行って欲しい。

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

９月２８日～３０日

■タスク内容

あなたは、ファッション雑誌を読んで見つけた、あるブランド（インパクティスケリー）の服が気になっています。
ブランド名で検索し、ある通販ページにたどり着きました。
気に入る服があるか、自由に探して購入してください。
このブランド以外にも、自由に閲覧し、好みの商品を購入してください。
（ただし、このサイト内での購入に限ります。）

茶道具専門店の、初心者向け商品のセット販売ページの例です。
初心者向けにお茶のお稽古に必要なものをお稽古セット価格で販売していますが、色柄などは自分で商品カテゴリから自分で選択するようになっています。
「お稽古セット」と買い物カゴにいれ、さらに細かく自分で商品を選択する手順を踏まなければなりませんが、ユーザーは「お稽古セットということで柄などは決まったものがある」と勘違いしてしまっているケースが多くありました。

ヒートマップからは商品の説明分を読んでいる様子が見て取れますが、文字が小さく、文章構造もわかりにくいため「よくわからない」という理由から注視されていました。

オーナーさんによると、お店のポリシーから、「単純なセット販売にはできない、お茶の世界ではどんな状況にどんな柄が合うのかなど重要」ということで選択式のセット販売にしており、問い合わせをもらってお店でお客様に合う商品を選んであげることも少なくない人のことでした。

このようなケースの場合、お店のよさを生かすためにはネット注文だけにとらわれず、電話やFAXでの注文を積極的に受け付けることも考えた方が良いでしょう。
特にお茶など専門性のあるものを初心者が購入する場合は、自力でのネット注文だと失敗する場合があります。商品ごとに専用のFAX用紙を準備し、丸をつけて個数を記入して送るだけという形にすると敷居が下がります。
これはシニア向けの商品についても同じことが言えます。

概要

・サイト全体の雰囲気や操作性は統一されていて、概ね迷わずに操作していくことができる。ギフトセットなどを含めても商品点数は20程度となり、それほど多くなく、それぞれの商品ページでは魅力的な写真と丁寧な説明で商品のよさを伝えている。
・ファーストビューに商品の情報は十分にあるが、会社概要にあたるものがない

視線の特徴

トップページ

メイン商品を写真ではっきり打ち出し、ユーザーに伝えることができている。
ファーストビューには売上ランキングも表示されている。商品点数がそれほど多いサイトではないため、ランキングがファーストビューにあることはユーザーの商品選びにとても役立つ。
＜問題点＞
電話・ＦＡＸでの注文は推奨していないため、トップページには表示されていない。また、会社概要や特定商取引法に基づく表記のページへのリンクもファーストビューになく、ページ中程までスクロールしたサイドメニューやフッターに設置されている。初めて注文するユーザーは会社概要、特定商取引法に基づく表記を確認してサイトに対する信頼感を高めたいと思う傾向がある。

＜改善案＞
商品情報だけでなく、運営者の情報をできるだけファーストビューに入れる必要がある。初めて購入するユーザーにも安心感を持ってもらうことができる。特に食品など安全性が重視される商材の場合重要。電話やFAXでの注文も受け付けている場合、必ず番号をファーストビューに明示する。

佐野洋菓子研究部さん 見エール体験談はこちらから

調査対象URL

ベイクドチーズケーキ・洋菓子専門店　佐野洋菓子研究部

目的

・スムーズに購入できるページ構成になっているか?
・知りたい情報（説明や画像）がきちんとページに記載されているか?
・分かりづらい文章はないか?
・買い物かごに入れた後、注文確定まで不安無く終了したか?
・他ページへの移動はスムーズか?

調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

調査日時

２０１０年９月２８日～３０日

タスク内容

あなたはインターネットで「ベイクドチーズケーキ」を購入したいと思っています。
ヤフーなどで「ベイクドチーズケーキ」で検索し、あるサイトを見つけました。
今から表示されるサイトで、チーズケーキを購入してください。
その他、購入したい商品を自由に購入してください。

同梱すると送料無料になる商品を一緒に購入し、送料を浮かせようとするユーザーは少なくない。しかし、同梱しようとすればするほどお買い物ができなくなる仕組みになっているECサイトも少なくない。
同梱を促進するのであれば、気軽な気持ちで買い物籠に一緒に入れて頂く必要がある。
途中でユーザーを悩ませたり、同梱の際にエラーが発生する様なことが起きる事は最も避けたいことである。

事例紹介：ハウオリさんのサイト

ハウオリさんのサイトで送料無料にするためには、1万円以上購入するか送料無料の商品を同梱する必要がある。
商品の買い物かごの下に「同梱すると送料無料」というバナーがあり、一緒に買うものによって送料が無料になることが分かる。

送料無料ページ

・同梱商品に送料無料商品を指定すれば「送料が無料」になるはずだが

１）送料無料商品の中にはメール便の物もあり同梱不可の物が含まれている
２）在庫切れと書いてある事に気づかず、在庫切れの商品をクリックしてしまう。

このように、買う気になってから買い物籠ボタンがクリックできない為モチベーションが下がってしまう。

問題点一覧
・最初の商品を購入し、「元の商品に戻る」をクリックすると、どこに「送料無料セット」があるのか解りづらい。最初の商品ページの左メニュー部分で「どこをクリックしたらいいのか迷う」ユーザーの視線がうかがえる。
・商品の送料無料セットのページを探し当てることはできるが
・送料無料セット側で“同梱不可”商品がある(「メール便のために同梱不可」)
・同梱してほしい商品なのに在庫切れが多い

在庫切れは、商品の下に「在庫切れ」という表示があるものの、商品に注視しているユーザーには気づかれない。そのために、在庫切れに気づかず商品をクリックしてしまい、商品説明をすべて読み「さあ買おう！」とした瞬間に在庫切れで購入できないことに気づく。

改善案
・同梱商品ページを作成し、「送料無料」ページとは別にする。
・同梱商品ページでは在庫切れ商品を掲載しない

その他

・送料無料になる金額を探している最中に、あといくらで送料無料になるか調べるため［買物かごを見る］ボタンを探しす人がいる。同梱を促進するなら解りやすい場所へ買物かごへのリンクを張るのが親切。

ライオンコーヒーとハワイ雑貨の【ハウオリ】さん見エール体験談はこちらから