【Web】創作備忘録No.39 SKILL – Webサイト視線誘導の型

『Webサイト視線誘導の型』

　どうも皆さんこんにちは！
　本日は再開して二日目の創作備忘録！
　テーマはWebということで、はりきってBGMを聞きながら書いていきます！

　さて、本日のタイトルは『Webサイト視線誘導の型』というわけですが、皆さんいつも自分がWebを見ているときどのように見ているか思い出してみてください。

　左上のロゴからざっと見る？もしくは上の見出しから順々に横へ読んでいく？スマホであれば自然と上から見ていると思われます。

　人によって、そしてWebによって見方は当然変わってきますが、ある程度法則性が決まっており、それらには○○型と名前が付けられています。

F型

　F型は主に左から右へと視線を移動させ、見るものがなくなれば再度左に視線を戻し、また右へと視線を移動させる。このように視線を誘導させる型を『F型』と言います！
　今皆さんが見ていますこのサイトもF型と言えるでしょう。

　なぜなら皆さん順々に左から右へと視線を移動させて読んでいますからね。
　
　この視線誘導の方法として、右に情報を置いてあれば自然と目に映るので、大事な情報は右においておくといいかもしません。
　2カラムとかもこの型を利用しておいてあるのかな？

Z型

　Z型はWebの一番最初に見ることが多いんじゃないかと思う。

　上の画像のようにヘッダーの下に大きい画像が来ていて、その下に多くの情報が詰まっていたとしたら、自然と画像は流し目で見て情報が詰まっている部分に目線を送るのではないだろうか？
　これを上手く使えば商品サイトとかでもサムネイルを大きくして、右下にイイネとか共有ボタンとか置いてあったら反応が多くなるんじゃないかな？

I型

　これは主にスマホにおいてのWebサイトでの視線誘導の型だ。スマホは縦長な分、大きな画像といったものは縦並びで配置されることが非常に多い。パソコンなら横に並べられる余白が置いてあるが。
　だからこそ、自然と縦に画像などを見ることが多くなり、その視線の通る道に大事な情報を載せておくと、目には着くんじゃないかと思う。

最後に

　以上、筆者が知っているWebにおける視線誘導の型である。
　他にも、小説投稿サイトのように縦読みのWebサイトでは右上から見て一番下に行けば自然と左上に視線を移し、再度下に行くことからN型と呼ばれるものも存在する。

　このように視線誘導を上手くもちいれば気づいてほしい情報へと利用者を導くことができるため、一考の余地ありだと思う。

　…三カラムとか、複数のカラムが存在するサイトって、なんだかローマ数字のⅡ、Ⅲ型ってよんでもいいんじゃないかな…?

　てなわけで今日の備忘録はここでおしまい！他のジャンルに関してはテンプレートのサムネイル作ってる最中だからしばしお待ちを！
　では皆さん、ごきげんよ～～！