ConversionXLツイートシェア先日、アイトラッキングに関する記事を配信した所、予想以上の人気がありました。アイトラッキング以上に簡単に実施できるのが、マウスの導線を追うヒートマップテスト。様々なASPサービスも提供されており、低価格で導入できますよね。今回の記事では、数多くの公開事例や調査を通してヒートマップテストで会得した19のデータを紹介します。Japanヒートマップは、ビジターの行動を分析する上で大いに役立つ。その他のメソッドでは得られない見解を導き出し、その結果、コンバージョン率を大幅に引き上げることが出来る可能性がある。ヒートマップは、マウストラッキングとアイトラッキングの2つに分類される。大多数の企業は、マウストラッキングのヒートマップを利用している。費用対効果に優れているためだ。それでは、各種のヒートマップのテストで判明した重要な結果を検証してこう。マウストラッキングとアイトラッキングの一番の違いを挙げていく。マウストラッキングを利用する場合は、実際のビジターからデータを獲得し、一方、アイトラッキングを利用する際は、通常の環境では除外されることの多い人達のグループをサンプルとして用いる。そのため、後者の場合、結果が歪んでしまうことがある。その反面、アイトラッキングを採用すると、テストの主題に関しては100%近い精度の結果が得られる。マウストラッキングの精度は85-90%である。この調査では、ビジターがページを閲覧する時間は、ページの下半分に向かうと、大幅に短くなることが明らかになっている。80%の時間をページ上半分のコンテンツに割り当てている。そのため、ウェブサイトの目標にとって、最も重要なアイテムをページの上半分に掲載するべきである。現在、大抵のウェブユーザーは、もっと高い画質のスクリーンを利用している。この点は、調査の結論に、本質的な変化を与えるわけではないが、比率が若干変わる可能性がある。大きなスクリーンで流動型なレイアウトが用いられていると、上半分のコンテンツの量が多くなる可能性があるためだ。ヘッダーから離れれば離れるほど、読もうとする意欲は薄れていく。そのため、最も重要な情報を上部に挿入しよう。スクロールを促されると、ビジターはページをスクロールする点を覚えておこう。従って、長いページを用意しているなら、スクロールを促すデザインを採用してもらいたい。ページの最後の要素に対する注目この調査では、閲覧時間が、ウェブページの一番下の部分で大きく増えることも判明していた。ビジターの注目は、ページの一番下に到達すると、再び高くなるのである。従って、良質なコールトゥアクション、または、関連するコンテンツをウェブページの一番下に置くと、コンバージョン率の増加につながると考えられる。ついでに、親近性効果、要するに、最後に見たものが、心の中に残る効果も考慮すると良いだろう。時間を割いて、ページの最後を慎重に作り上げることが重要だ。急いでいる時は、目立つものが選ばれる画像ソース先日行われたCaltechの脳科学の調査では、早急な決定を行う際(急いでるとき、もしくは、集中力を妨げられたとき)、視覚的なインパクトが、消費者の好みよりも選択に大きな影響を与えることが分かった。ビジターが急いでいる時は、個人の好みを軽視し、最も目についたものを基準として選択を行う傾向があるのだ。この偏りは、気が散っている状態では、さらに強くなり、各種の選択肢における好みがない際に、特に強い。オンラインショッピング等のとりわけ時間の制約があり、気が散る状況において、製品の視覚的なインパクトが、消費者の好みを上回るなら、ウェブサイトのデザインに戦略的な変更を加えると、ビジターの注目を著しく移すことが出来るはずである。そのため、忙しさを増す環境で、ビジターが、探しているもの(もしくは、最も売りたいもの)をすぐに見つけられるように、ウェブサイトのデザインを最適化すると良いだろう。ビジターは特にページの左側を見る画像ソース複数の調査により、ウェブサイトの左側にビジターの注目が集まることが判明している。左側は、ビジターが最初に見る部分でもある。例外はあるが、左側を常に意識しておくと良いだろう。独自の価値を表示する手が考えられる。この調査は、ウェブサイトの左側が、閲覧時間の69%を占めると指摘している。ビジターは、右側と比べ、左側に2倍以上の時間を割くようだ。ビジターはコンテンツをF字型で読むこの調査の結果では、サイトのビジターが、テキスト主体のコンテンツをF字型に読む傾向があることが明らかになっている。F字型とは、どんな意味があるのだろうか?ビジターは、飛ばし読みしており、主な注目が、テキストの最初の部分に集中する。重要な見出し、そして、小見出しを読み、その後、テキストの大半を選択して、読んでいく。ビジターが最も読む可能性の高いコンテンツがこの部分に該当する。小見出し、箇条書き、そして、段落を使って、コンテンツを読みやすくするべきだ。ビジターは、飛ばし読みするため、重要な情報を箇条書きで提供すると、テキストに目を通す際に気づいてもらえる確率は高くなる。F字型のスタイルは、写真ベースのウェブページには当てはまらない点を理解してもらいたい。この調査で証拠が提供されている。画像ベースのウェブページに関しては、水平方向に見ていく傾向があるようだ。バナーブラインドネスはスペースの無駄遣いをもたらす画像ソースバナーブラインドネスとは、ビジターが、広告のように見えると言う理由で、無意識のうちに、あるいは、意識的に、ウェブページの一部を無視する状況を指す。大量の広告に毎日晒されているため、無意識のうちに、ウェブサイトの広告を無視する習慣がついたのだ。広告のように見える文章や画像も無視される。ビジターは、ほぼ確実に、広告のように見えるコンテンツには注目しない。このヒートマップに関する調査は、広告をしっかりと注視する行為は存在しないと指摘している。ストーリーを読むことに集中しているなら、コンテンツから目を離すことはない。オンラインマーケティングの実績を持つデザイン会社に頼むことで、大抵の問題は防ぐことが可能だ。事実、ビジターの注目を集める上で効果的なデザインの要素の一つである。複数のヒートマップに関する調査で、ビジターは、モデルの視線を目で追うことが判明している。そのため、綺麗な女性の写真だけでなく、隣のコンテンツにも注目してもらいたいなら、モデルの女性が当該のコンテンツを向いている写真を利用するべきだ。感情を伝えることも大事である。感情を伝えると、コンバージョン率に大きくプラスに働く。この調査によると、落ち着いた人物の写真に対して、感情が伝わる人物写真を用いると、コンバージョン率が高くなるようだ。感情を伝える人物が、ページの望ましい場所を見つめている写真を利用しよう。男性は、プロフィールの人物の視覚的な要素、つまり写真に注目し、一方の女性は、提供されている情報に関心を寄せる傾向がある。女性は、プロフィールの人物を評価することに、50%近くの時間を費やし、男性は、画像ばかりを見る。別の調査では、男性は、女性と比べて、胸を眺めるために37%長く時間を費やし、一方の女性は、左手の薬指を見る時間が男性よりも27%長いことが判明した。この調査は、「男性は変態で、女性は金目当て」と結論付けている。どちらの調査でも、男性が、ビジュアルを意識し、特定の身体の部分を中心に見る傾向があり、女性は、情報を求め、写真を見る際は、情報を得るためにざっと目を通す程度であると、まとめることが出来る。クリックスルー率を改善するために、自動画像カルーセルとバナーを諦めるこの調査では、特定のタスクを抱えるユーザーが、2つのサイトを訪問した結果、メインのバナー、さらには、動画版のバナーも無視されることが明らかになった。この類のソリューションは、数多くのウェブサイトで用いられているが、一時的なブームに過ぎない。自動画像カルーセル、そして、バナーは、ホームページには向いていないと言えるだろう。バナーブラインドネスを導くため、ビジターに無視され、その結果、サイトの多くのスペースを無駄に使ってしまうだけである。この現象に関しては、この記事で詳しく検証している。ASOS(洋服のショッピングサイト)のホームページ中央のバナーは、その他のサイトと比べて、多くの注目を集めることに成功している。このサイトのバナーは何が違うのだろうか?テストで採用されたその他の画像カルーセルと比べて、ページに溶け込んでおり、バナーのようには見えないことが原因だと思える。その結果、バナーブラインドネスをそれほど多く生み出さずに済んだようだ。それでも、完璧なソリューションとは言い難い。sourcetechwyseは、ヒートマップを使ってランディングページのテストを行い、色の対比がビジターを導く上で重要度がとても高いと感じたようだ。テストを行った結果、トップページのクリック不可能な、価格に関する情報が、最も多くの注目を集めていたことが判明した。これは、周りとの色の対比が原因であり、ページの残りの部分から、注目を逸らしていた。トップページを大改造して、ビジターがページを見るパターンと、techwyseが見てほしい情報を合わせる取り組みを行った。60歳は20歳よりも2倍多くのミスをする画像ソースターゲットのオーディエンスが、高齢者なら、出来るだけ簡単に利用することが可能な環境を作り、余分な情報を排除するべきである。257名が参加した遠隔ユーザーテストで、タスクの失敗率が、25歳以下と比べて、55歳以上の参加者は1.9倍高いことが判明したためだ。若いグループと比べて、55歳以上のグループでは、2倍近くの参加者が、タスクの遂行に失敗する、もしくは、タスクを諦めていた。高齢者は、ネット上での動きが遅いことも分かった。若い参加者と比べて、タスクを完了するまでの時間が40%長かった。自分にとっては簡単なタスクであっても、高齢者は、とても難しいと感じている可能性は高い。従って、高齢者をターゲットにしているなら、レイアウトを高齢者にテストしてもらおう。ウェブサイトは、インターネットが生まれた直後から、選りすぐりの写真を使って、コンバージョン率を上げる試みを行ってきた。この試みは、ちゃんとした根拠に基づいている。厳選した画像を製品の提案に組み込むべきである。実在する人物の写真を使う実在する人物の写真に対するリアクションは高い。この調査により、テストの参加者は、ウェブページの大半を占めるコンテンツを読む行為よりも、従業員の写真を眺める行為に10%以上長く時間を費やしていることが判明した。反対に、「実在の人間」のストック写真には全く反応しない。私達は、どうにかして、実際の人間と「写真データベースの人間」を見分ける術を身につけたようだ。このブログの投稿は、ストック写真を利用した際のデメリットを指摘している。そのため、写真を過剰に編集するべきではない。この調査は、LinkedInのプロフィールでは、写真は最も重要な要素だと結論づけており、この調査は、Facebookでも同じ相関関係があることを明らかにしている。製品の写真を使ってコンバージョンを引き上げる大きな写真は、適切に利用すると、ビジターの注目を確実につかみとる効果がある。37signalsは、Highriseでこの取り組みを巧みに実施している。ブログでは記事全文よりも要約を掲載する方が良い画像ソースこの調査は、ブログのホームページでは、記事の全文よりも、要約を用いる方が、コンテンツを多く読んでもらえると指摘している。ブログのホームページで、記事全文を用意しているなら、1本目の記事を面白いと思ってもらえない場合、ビジターを失うリスクを抱えることになる。1本目の記事を読むことに好奇心を「使い切って」しまい、ブログ、または、ウェブサイトの残りを読む余力はなくなってしまう。左の画像と、その隣の画像は、フロントページに記事の全文を掲載しているブログの画像である。どちらも、ビジターは1本目の記事を飛ばし読みするものの、他の場所は見ていない。真ん中の画像、そして、右隣の画像は、記事の要約のみを掲載するページの例である。Capgeminiのブログでは、ビジターは、10本の記事の要約が掲載されたページ全体に目を通している。一部の記事は、短く、全てを表示し、長い記事は、要約を利用している。被験者は、1万2000ピクセル以上に目を通し、写真のみを見て、テキストは無視していた。したがって、ブログのホームページで、記事の全文の代わりに、要約を表示する方が良い。要約は、様々なトピックの選択肢をビジターに与えることが出来るためだ。記事の選択肢を広げることで、サイトを去るのではなく、ビジターが興味深い記事を見つけ出し、クリックして、残りの部分を読む確率は高くなる。早めに相手の注目を引き付けようこの調査によると、ユーザーの67%は、ニュースレターの導入部には注目しないようだ。ニュースレター内の導入部の段落は飛ばし、コンテンツの残りにざっと目を通す傾向がある。ニュースレターに割り当てられる時間の平均は、51秒間であり、ニュースレターの19%のみを真剣に読む。大半の部分は、飛ばし読みされるため、ニュースレターを簡潔で、要領を得た内容にまとめ、明確なコールトゥアクションを用意しよう。Optimizerの運営者は、ホームページのトラフィックの25%近くが、上部のメニューの小さな「価格」のリンクに向かい、トラフィックの大半を集めるために作った、大きな、主役のコールトゥアクションボタンは、クリック全体の5%しか獲得していないことに気づいた。Optimizerは、このクリップマップの情報をA/Bテストと組み合わせて、効果の高い変更したホームページのバージョンを見つけ出す取り組みを行った。ウェブサイトのスプリットテストでは、同じページの2つのバージョン、もしくは、それ以上のバージョンにトラフィックを導き、各バージョンの効果を分析することが出来る。ボタンの色、背景の色、コピー、または、アイテムの配置をテストすることが可能である。一例を挙げると、ボタンの色の変更が、コンバージョン率を高くする可能性がある。Irrational」(予想通り不合理)に触発され、ロバート・スティーブンズは、ランダムに60名を選んでテストを行い、関連性が、日常的な決定にどのように変化を与えているのか調査した。我々は、決定を下す際に利用可能な情報を基にして、決定を下しているのである。1つ目のバージョンは、値引きしたInnocentのスムージーのみを見えるようにして、定価のスムージーは載せなかった。2つ目のレイアウトでは、通常価格のスムージーも幾つか配置した。リッカート尺度では、2.4に対して、1.7であった。リサーチでは、10数名のテストの参加者に、偽物のニュースサイト、そして、本物のニュースサイトを訪問してもらい、1時間にわたって観察する試みが行われた。その後、右側の領域に移動し、続いて、ページの下の方を閲覧する。左上の隅を注視している場合、この傾向が特に強い。調査により、大き目のフォントは、ページにざっと目を通す行為を導き出す。ビジターは、注目を引きつけるワードやフレーズを探しているためだ。小さなフォントは、コンテンツに集中させる効果がある。ヘッドラインの冒頭の幾つかのワードが、ビジターを魅了すると、引き続き読んでもらえる確率は高くなる。1秒以内に注目を掴まなければならない。Eコマースサイトに向いており、ピークのコンバージョンの時間をヒートマップのような形式でまとめることが可能だ。ヒートマップテストのツール今回紹介した調査結果により、効果のある取り組みに関して、重要な見解を得てもらいたいが、出来れば、自分自身でテストを行うべきである。ウェブページ用の優れたテストツールを提供する会社は多い。マウストラッキングテストにうってつけのツールだ。クリックヒートマップ、スクロールマップ、そして、特定の要素のクリック数に対するオーバレイ(リファラーのソースに応じて、クリック数を見分けることが可能)機能を用意している。Eggは、アイトラッキングテストと比べて、88%のトラッキング精度を自負している。全てのプランは、30日間限定で無料で利用することが可能であり、その後は、9ドル/月~の料金が課される。このツールもマウストラッキングテストを行う際に、心強い助っ人となる。マウスの動きの再生と記録を行う機能をアピールしている。フォームを記入する際の、キーの入力を記録することも可能だ。料金は10ドル/月~に設定されているが、機能を制限した永久無料プランも用意している。エンタープライズレベルのマウストラッキングソフトウェアであり、数々の大企業をユーザーに抱える。このソフトウェアは、マウスの動きを追跡するマウストラッキングスイート、視覚的なサマリーを特徴とするヒートマップスイート、そして、コンバージョン率最適化に良質な分析データを提供するコンバージョンスイートに分類される。400ページビュー/月限定の無料プランもある。ページビューを増やしたい場合は、見積もりを要請する必要がある。このリアルタイムヒートマップツールは、登録したユーザーに名札をつけて、各ユーザーのサイト上のアクティビティを別々に確認することが可能な機能等、便利な機能を幾つか用意している。ウェブサイトにログインして、データを見ることに抵抗があるユーザーのために、デスクトップ配信も行っている。14日間は無料で利用することが可能であり、その後、10ドル/月~の料金を求められる。マウスの動きの記録に加えて、Luckyorangeは、リアルタイムのビジターマップ、ビジターの投票調査、そして、ライブチャットをソフトウェアに組み込むバンドルも用意している。7日間の無料お試し期間の後、10ドル/月~の料金が発生する。オープンソースのツールであり、サイト上のマウスのクリック数を基にヒートマップを作成する。このツールを利用するには、コードの知識が必要になる。Clickheatと同じように、ページ上のクリックのデータを基にヒートマップを生成する。まとめヒートマップは、様々なデータから作成することが出来る。コンバージョン率の最適化について話をする際は、マウスの動きやクリックの回数のデータをベースに生成するヒートマップが、必ずと言っていいほど、話題に上がる。この2つのデータは、どちらもマウストラッキングから得ることが出来る。ウェブサイトのビジターは、ページをスクロールするものの、注目の度合いは、スクロールするごとに下がっていく。視覚的な特徴を用いて、最も重要なアイテムを目立たせよう。視覚的な特徴は、周りのアイテムから目立たせるオブジェクトの特徴的な性質(色等)であり、瞬く間に注目を掴み取る。この特徴を使って、売りたい製品を目立たせると良いだろう。ウェブサイトの要素が、バナー広告に似ている場合、得られる注目は少なくなる。ユーザーは、具体的なタスクを意識している際は、カルーセルを完全に無視する。この件に関しては、この記事を参考にしてもらいたい。ビジターは、実在する人物と良質な製品の写真によく反応する。視線の方向を通じて、ビジターの動きをリードすることも出来る。要約を用いると、ビジターにもっとコンテンツを読んでもらえるようになる。記事全文を掲載すると、探しているものを見つける前に、ビジターの注目が枯渇してしまうからだ。この2つのメソッドを1つの分析で併用すると、別々に利用するよりも、遥かに多くの情報を得られる。Tests」を翻訳した内容です。圧倒的なボリューム、かつ質も高い内容の記事でした。どれもいわれてみれば一般論としては納得できるものばかりに読めますが、シニアに関するデータは改めてデザインやユーザービリティの重要性を感じました。後半に少し書かれているフォントを小さくすることで注目させる効果がある、、、というのは、ユーザービリティ的には逆説的に聞こえますが、確かに小さいと注意して読むことは事実ですよね。滞在時間、コンバージョンなど総合的に考えた際にどうなるのか気になります。最後のツール紹介は英語圏のものばかりですが、日本語版が提供されているツールもありますし、ヒートマップツールは英語でも特に問題なく利用できますよね。Japanアイオイクスは2002年設立の日本を代表するSEOコンサルティング会社です。Minihttps://clm.seojapan.com/アイオイクス社の社員によるコラムブログです。SEOを中心としたWebマーケティングに関することなどの記事を不定期に更新しています。Newsletter」のバックナンバーを隔週1回の頻度で更新しています。人気の記事500万の検索結果を分析した結果、自然検索のクリック率についてわかった10の事実30分以内に結果が出る高度なSEOテクニックGoogleの検索結果において、自身のサイトをよりクリックされやすくする5つの方法キーワードリサーチから被リンクの獲得まで。Japanでよく読まれた記事ランキングトップ10ユーザーの目を引く検索結果。