PINTO!株式会社PLAN-Bの情報発信メディア

2019.06.07

箱根 祥雅

WEB CREATION

スマートフォンでのブラウジング時の目線と指の動き

WRITER

箱根 祥雅

株式会社PLAN-B システム開発部

2015年03月にPLAN-Bに入社しJuicerの開発を担当。主にバックエンド・インフラ領域を担当し、 爆発的に増え続けるログとの格闘の日々を送っている。

目次
    1. スマホユーザはブラウジング時に画面の何処を見ているのか
    2. 画面のどの位置を触ってスクロールしているのか?
      1. スクロール量(移動距離)について
    3. 画面に表示される情報量と読むスピード
      1. 見ている場所
      2. 目線を追う仕組み
    4. まとめ

現在、機能の提供を一旦ストップしていますが、Juicerでは以前にスマホ版のヒートマップを提供していました。ヒートマップはクリックヒートマップ、PCでいうとマウスの軌道をトレースするのが一般的な手法かと思います。Juicerではスマホユーザの目線を大事にしていました。

厳密に目線を追う方法はアイトラッキングを行う以外方法はないと思っていますが、Juicerではアイトラッキング無しにヒートマップの作成を試みました。どうすればアイトラッキング無しに目線を追う事ができるのでしょうか。調査した内容をご紹介します。

※調査対象は大規模ではなく小規模に社内で行ったものです。大規模に行えば結果は変わる可能性があります。ご了承下さい。


スマホユーザはブラウジング時に画面の何処を見ているのか

まずはじめに行った調査は、スマホでブラウジング時に画面の何処を見ているか?という調査です。

この調査を行った結果、自分の当たり前は他人の非常識だという事を実感しました。私は常に画面の上部に目線を向ける傾向があったので、みんなもそうだと思い込んでいましたが、大きく分けて3つのタイプがあることがわかりました。

3タイプの目線の位置
大半が上派かと思いましたが、以外にバラけました。目的は目線のトラッキングなので、これではどこの部分をヒートアップするかが分かりません。なんとかして特徴はないものかと模索した結果、次に注目したのは指の位置です。どの部分に指を当ててスクロールを行っているのかを調査しました。


画面のどの位置を触ってスクロールしているのか?

  • 画面下部派(片手派、両手派)
  • 画面上部派(片手派、両手派)
  • 画面真ん中派(片手派、両手派)

画面の見ている場所とスクロールを行う場所には特に関係性はなく、どちらかというとデバイスの大きさや手の大きさなどに影響している所が大きいと思います。

特徴的なのが大きめの端末を持っている人の特徴としてよく見られましたが、大きなデバイスを使っている方は指の位置が安定しませんでした。おそらく、片手で操作をする場合と両手で操作する場合があり指の位置が安定しないのではないかと予想します

スクロール量(移動距離)について

  • 上派の人は移動距離が大きい
  • 下派の人は移動距離が短い

真ん中派の人は、移動距離が上派と真ん中派の中間ぐらいでした。ほぼいませんでしたが、何名かの下派の人の中には、1行づつスクロールを行うという人もおり、もっとまとまった大規模な調査を行ってみる必要があると感じました。


画面に表示される情報量と読むスピード

目線の動きを再現する為に次に注目したのは表示されているサイトの情報量です。文字が中心のサイトか、画像や動画が中心のサイトかで目線の動きが変わると考えました。

文字が中心のブログ系のサイトと画像が中心のサイトでは若干ですが、文字中心のサイトの方がスクロールを行う間隔が大きくなるという事がわかりました。上記の調査結果からJuicerでは以下のような仕組みでヒートマップを考えていました。

基本的には以下のルールを設定しました。

  • スクロールが止まっている時にログを連続で飛ばします。
  • 時間の経過と共に飛ばすログの座標を下方向にずらします。

見ている場所

スクロールが止まった状態で画面を縦に4分割してY座標の上から2番目(青枠)部分の上辺のY座標を目線の始まりとしました。このY座標をログとしてサーバに送信し続けます。

目線の開始位置

画面がスクロールされればログの送信をストップし、スクロールが停止すれば再度ログの送信を再開します。(※ログの送信は0.5秒おきに設定しています。)

画面のどの部分を見ているのかはユーザによって様々で、見ている場所を特定する一定のパターンは現段階では明確になりませんでした。画面を4分割して上から2番目の位置を採用したのは調査した中ではその位置を見ているという意見が一番多かったからです。

もっと大規模に調査を行い、サンプル数を増やせば統計的にわかってくるかとも思いますが、今回は決め打ちで場所を固定しました。

目線を追う仕組み

スクロールが止まった状態で、上から下方向に目線の移動が始まると仮定して、2秒おきに下方向にY座標をずらしながらログの送信を行います。画面がスクロールされればログの送信はストップし、スクロールが停止すればログの送信を再開します。

目線を追う仕組み

画面に表示される情報量と、読むスピードの調査からもわかったとおり、サイトに含まれている文字情報を計算してY座標を下にずらすタイミングを2秒〜1秒の間で変更していました。この仕組の欠点は下から上に目線を移動したという場合の考慮がされていない点です。上から下に目線は移動するという仮定の上に成り立つロジックになっています。


まとめ

この2つの仕組みにより、数え切れないぐらいある目線の動きの1〜2パターンぐらいは再現できたのでは無いかと思います。

ですが、やはり厳密に目線を追う技術は、今のところアイトラッキングしかないのではないかと思います。特にスマートフォンの目線に関しては様々なシチュエーションが考えられます。

立っている時、座っている時、寝転んでいる時、歩いている時など、様々なシチュエーションで利用されているので、その時々に違った見方が存在するはずです。

今後ヒートマップの機能をJuicerもしくは他のプロダクトで考える機会があればさらに深い調査と実装を行いたいです。