【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

ヒートマップ解析で見えてきた、レスポンシブなファーストビュー構築3つのポイント

ヒートマップ解析で見えてきた、レスポンシブなファーストビュー構築3つのポイント

*この記事はPtmind様のご協力のもと作成しています。

開発部の岡本です。

スマートフォンからサイトを見ている時、「スクロールしないとどんなサイトかわからない!」と感じたことはありますか?

今回は「レスポンシブサイト」や「マルチデバイスに対応したサイト」でスクロールせずに見える範囲(=ファーストビュー)でどんなことを意識する必要があるかについて3つのポイントにまとめました。

解析方法・期間など

今回はヒートマップ解析ツール「Ptengine」を用いて「スマートフォン」「PC」からのクリックやアテンションについて調査しました。

調査対象サイトは

・弊社サービスサイト:http://www.aiship.jp
・当ブログ     :https://www.aiship.jp/knowhow/

の2サイト、10月17日金曜日から11月13日木曜日までの4週間の計測データを元にしています。

こちらのヒートマップは弊社サイトのTOPページをPC・スマートフォン個別で表示させたものです。
aishipjp-0

また同一ドメインで運営している当ブログのTOPページのヒートマップはこちらです。
LAB-1

ここからはこの2枚の画像をもとに、レスポンシブサイトで意識すべきファーストビューのポイントを3つに分けて紹介します。

1:キャッチコピーをとにかく目立たせる

aiship.jpのヒートマップ解析から伺えるポイントとして、「一番目立つテキストが見られやすい」ということが伺えます。

PC・スマートフォンいずれも「国内唯一のレスポンシブECサイト構築運用ASP」というテキストの前後が赤色になっており、最も閲覧されているエリアであることを示しています。

aishipjp-1

先ほどの画像に黒枠などを追加してみました。

スマートフォンではテキスト上部の赤色エリアが狭くなっていますが、これはPCよりも余白が少ないことが原因ではないかと思われます。

レスポンシブサイトに限られたことではありませんが、まずは「一番伝えたいテキストを、最も目立つように配置すること」をファーストビュー構築時には意識する必要がありそうです。

2:ヘッダーは無視されると考えよう

続いて特徴的なポイントとして「ヘッダーはほとんど見られていない」というポイントも伺えます。

aiship5

lab-2

どちらのサイトも、グローバルナビを境目に極端に閲覧率が低下しています。

これは「ヘッダーに欲しい情報は掲載されていない」と考えているユーザーが多いのではないかとも考えられます。

とはいえヘッダー内に設置されているリンクが全くクリックされていないというわけでもなく、むしろ高いクリック率を記録しているリンクが複数見られました。

lab-3

この2つを合わせると、ユーザーはサイトのヘッダー部分に対して「知りたい情報は無いが、情報を探すための機能は豊富である」と認識している可能性が高いと思われます。

よってスマートフォンも考慮したサイトを作る際、

  • なるべくヘッダー部分はコンパクトにまとめる
  • サイトの情報は一通り網羅できるユーティリティ性を保つ
  • 特にスマートフォンでは重要度の低いリンクをドロップダウンなどでまとめる

という3点を意識する必要がありそうです。

3:ヒーローエリア下バナーは有効

最後に特にECサイトなどで注目すべき点として考えられるのが、「ヒーローエリア下バナーの重要性」です。

aiship.jpではヒーローエリアの直下にバナーを2つ設置しています。

そして今回のヒートマップ解析結果を見ると、1で紹介した「キャッチコピーテキスト」と「ヒーローエリア下バナー」が最も閲覧されていることがわかります。

aiship-3

おそらく「キャッチコピーテキスト」が閲覧開始位置となるため、その直下にあるコンテンツは関連性の高いものとして認識されているからではないかと思われます。

このためバナーを利用した告知を行う際には「ヒーローエリア」の直下、可能であれば「キャッチコピーテキスト」の近くに設置するとよりユーザーに認識してもらえる可能性が高いと考えられます。

しかし一方でスマートフォンでは2つ目のバナーの一部が「100%表示領域」からはみ出してしまっていました。

aiship4

このことから「ファーストビューからはみ出さない位置にバナーを設置すること」も同時に重要であることが伺えます。

まとめ

いかがでしたでしょうか。

aiship.jpと当ブログのヒートマップ解析結果を元にファーストビューを構築する際のポイントを3つ紹介しました。

スマートフォン・タブレットなどの従来のPC端末よりも小さい画面の端末が増加したことで、「スクロールせずに見れる範囲(ファーストビュー)にどれだけの情報を載せるか」を今まで以上に考慮する必要が生まれています。

ヒートマップに限らず、ユーザーテストやアクセス解析などを駆使した「ファーストビュー構築のPDCAサイクル」を今後は構築する必要があるかもしれません。

今回使用したツール

今回使用したツールは「Ptengine」というマルチデバイス対応のヒートマップ解析ツールです。

無料で1ページ(月間25,000PVまで)計測することが可能とのことですので、興味のある方はLPのテストなどにいかがでしょうか。

ptengine
スマホからPCまで解析できるヒートマップ解析ツール|Ptengine : http://ptengine.jp/

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+