みなさんこんばんわ、
今日もWebライティングの勉強をしたのですが、
今回はコンテンツのレイアウトの仕組みについて学びました。
ページに追加した画像の効果を高めるためにはWebページのレイアウトも大切です。
視線の動きを考慮した適切なレイアウトには、より、高いアクション率を実現します。
では代表的三つのレイアウトをご紹介しましょう。
視線の動きの３パターン
○グーテンベルグダイヤグラム
○Zパターン
○Fパターン
なんだか突然専門用語が飛び出してきましたね。
では最初にグーテンベルク・ダイヤグラムからご紹介しましょう。
グーテンベルクダイヤグラムは、左上から一気に矢印が落ちてきてるイメージです。
本や雑誌など、出版物を想定したパターンです。
均等に配置された同一のコンテンツを読む際の視線の動きになります。
Webでは、ページを開いた時にスクロールなしで一覧できるくらい短くて
均質なコンテンツに限り、グーテンベルク・ダイヤグラムに従った視線の動きが予想されるのです。
なるほど、私たちは知らないうちに左上から右下に移動するように見ていたのですね、
次にZパターン。
こちら、先ほどのグーテンベルクと違うところは
明らかにコンテン量が多い時に予想される読み方、というところでしょうか。
しっかりと一行一行読んでいく視線の動きと同じです。
つまり、情報量がぎっしりと詰まっていて、斜め読みが難しいコンテンツで見られる視線の動きと同じ、ということになります。
その名の通り視線の軌跡がアルファベットのZ字を描き、その視線の動きが繰り返されるそうです。
そして、よく見られるFパターン。
コンテンツ量はZパターンと同じなのですが、
これは流し読みの視線の動きになります。
動き方は、視線が下に進むにつれて右方向への動きが少なくなることで、
視線の軌跡がアルファベットのF字を書くのです！
基本的にWebコンテンツは端から端まで読まれることは少なく、また、スクロールなしでコンテンツの全体が見えることも少ないので、FパターンがWebコンテンツを見る際の一般的な動きになります！
しかし、全て左上から始まるんですね、ロゴやタイトル、大事なものが左上にあるのも頷けます。
なので目立つように置くものに関しては、真ん中や、右などに配置してしまうと、それより
左に置いたものが目立たなくなってしまう傾向があるようです。
なるほど、レイアウトにはユーザーの視線と誘目性を意識することが必要なんですね。
明日も頑張ります！