*この記事はPtmind様のご協力のもと作成しています。
開発部の岡本です。
スマートフォンからサイトを見ている時、「スクロールしないとどんなサイトかわからない!」と感じたことはありますか?
今回は「レスポンシブサイト」や「マルチデバイスに対応したサイト」でスクロールせずに見える範囲(=ファーストビュー)でどんなことを意識する必要があるかについて3つのポイントにまとめました。
今回はヒートマップ解析ツール「Ptengine」を用いて「スマートフォン」「PC」からのクリックやアテンションについて調査しました。
調査対象サイトは
・弊社サービスサイト:http://www.aiship.jp
・当ブログ :https://www.aiship.jp/knowhow/
の2サイト、10月17日金曜日から11月13日木曜日までの4週間の計測データを元にしています。
こちらのヒートマップは弊社サイトのTOPページをPC・スマートフォン個別で表示させたものです。
また同一ドメインで運営している当ブログのTOPページのヒートマップはこちらです。
ここからはこの2枚の画像をもとに、レスポンシブサイトで意識すべきファーストビューのポイントを3つに分けて紹介します。
aiship.jpのヒートマップ解析から伺えるポイントとして、「一番目立つテキストが見られやすい」ということが伺えます。
PC・スマートフォンいずれも「国内唯一のレスポンシブECサイト構築運用ASP」というテキストの前後が赤色になっており、最も閲覧されているエリアであることを示しています。
先ほどの画像に黒枠などを追加してみました。
スマートフォンではテキスト上部の赤色エリアが狭くなっていますが、これはPCよりも余白が少ないことが原因ではないかと思われます。
レスポンシブサイトに限られたことではありませんが、まずは「一番伝えたいテキストを、最も目立つように配置すること」をファーストビュー構築時には意識する必要がありそうです。
続いて特徴的なポイントとして「ヘッダーはほとんど見られていない」というポイントも伺えます。
どちらのサイトも、グローバルナビを境目に極端に閲覧率が低下しています。
これは「ヘッダーに欲しい情報は掲載されていない」と考えているユーザーが多いのではないかとも考えられます。
とはいえヘッダー内に設置されているリンクが全くクリックされていないというわけでもなく、むしろ高いクリック率を記録しているリンクが複数見られました。
この2つを合わせると、ユーザーはサイトのヘッダー部分に対して「知りたい情報は無いが、情報を探すための機能は豊富である」と認識している可能性が高いと思われます。
よってスマートフォンも考慮したサイトを作る際、
- なるべくヘッダー部分はコンパクトにまとめる
- サイトの情報は一通り網羅できるユーティリティ性を保つ
- 特にスマートフォンでは重要度の低いリンクをドロップダウンなどでまとめる
という3点を意識する必要がありそうです。
最後に特にECサイトなどで注目すべき点として考えられるのが、「ヒーローエリア下バナーの重要性」です。
aiship.jpではヒーローエリアの直下にバナーを2つ設置しています。
そして今回のヒートマップ解析結果を見ると、1で紹介した「キャッチコピーテキスト」と「ヒーローエリア下バナー」が最も閲覧されていることがわかります。
おそらく「キャッチコピーテキスト」が閲覧開始位置となるため、その直下にあるコンテンツは関連性の高いものとして認識されているからではないかと思われます。
このためバナーを利用した告知を行う際には「ヒーローエリア」の直下、可能であれば「キャッチコピーテキスト」の近くに設置するとよりユーザーに認識してもらえる可能性が高いと考えられます。
しかし一方でスマートフォンでは2つ目のバナーの一部が「100%表示領域」からはみ出してしまっていました。
このことから「ファーストビューからはみ出さない位置にバナーを設置すること」も同時に重要であることが伺えます。
いかがでしたでしょうか。
aiship.jpと当ブログのヒートマップ解析結果を元にファーストビューを構築する際のポイントを3つ紹介しました。
スマートフォン・タブレットなどの従来のPC端末よりも小さい画面の端末が増加したことで、「スクロールせずに見れる範囲(ファーストビュー)にどれだけの情報を載せるか」を今まで以上に考慮する必要が生まれています。
ヒートマップに限らず、ユーザーテストやアクセス解析などを駆使した「ファーストビュー構築のPDCAサイクル」を今後は構築する必要があるかもしれません。
今回使用したツールは「Ptengine」というマルチデバイス対応のヒートマップ解析ツールです。
無料で1ページ(月間25,000PVまで)計測することが可能とのことですので、興味のある方はLPのテストなどにいかがでしょうか。
スマホからPCまで解析できるヒートマップ解析ツール|Ptengine : http://ptengine.jp/