株式会社カラフルクローバー公式ブログ

WordPress・HTML・CSS等のTipsを公開しています! 株式会社カラフルクローバー公式ブログ

広告の企画制作の株式会社カラフルクローバー 公式サイトはこちら

*

注意!コンテンツのレイアウトを考える前に意識すること。

   

みなさんこんばんわ、
今日もWebライティングの勉強をしたのですが、
今回はコンテンツのレイアウトの仕組みについて学びました。

ページに追加した画像の効果を高めるためにはWebページのレイアウトも大切です。

視線の動きを考慮した適切なレイアウトには、より、高いアクション率を実現します。
では代表的三つのレイアウトをご紹介しましょう。

視線の動きの3パターン

○グーテンベルグダイヤグラム
○Zパターン
○Fパターン

なんだか突然専門用語が飛び出してきましたね。
では最初にグーテンベルク・ダイヤグラムからご紹介しましょう。
グーテンベルクダイヤグラムは、左上から一気に矢印が落ちてきてるイメージです。
本や雑誌など、出版物を想定したパターンです。
均等に配置された同一のコンテンツを読む際の視線の動きになります。

Webでは、ページを開いた時にスクロールなしで一覧できるくらい短くて
均質なコンテンツに限り、グーテンベルク・ダイヤグラムに従った視線の動きが予想されるのです。
なるほど、私たちは知らないうちに左上から右下に移動するように見ていたのですね、

次にZパターン。
こちら、先ほどのグーテンベルクと違うところは
明らかにコンテン量が多い時に予想される読み方、というところでしょうか。
しっかりと一行一行読んでいく視線の動きと同じです。
つまり、情報量がぎっしりと詰まっていて、斜め読みが難しいコンテンツで見られる視線の動きと同じ、ということになります。
その名の通り視線の軌跡がアルファベットのZ字を描き、その視線の動きが繰り返されるそうです。

そして、よく見られるFパターン。

コンテンツ量はZパターンと同じなのですが、
これは流し読みの視線の動きになります。
動き方は、視線が下に進むにつれて右方向への動きが少なくなることで、
視線の軌跡がアルファベットのF字を書くのです!
基本的にWebコンテンツは端から端まで読まれることは少なく、また、スクロールなしでコンテンツの全体が見えることも少ないので、FパターンがWebコンテンツを見る際の一般的な動きになります!

しかし、全て左上から始まるんですね、ロゴやタイトル、大事なものが左上にあるのも頷けます。
なので目立つように置くものに関しては、真ん中や、右などに配置してしまうと、それより
左に置いたものが目立たなくなってしまう傾向があるようです。
なるほど、レイアウトにはユーザーの視線と誘目性を意識することが必要なんですね。

明日も頑張ります!

 - SEO, りりこのWeb学習記録, 学習方法, 未分類

  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

Twitter
ソーシャルメディアとの関係はどう理解する?

みなさんこんばんわ。 本日もSEOの学習を進めました。 今回は昨日よりも書籍を …

金銭的感覚
SEO的なキャッチコピーはどうすれば作れるの?

こんばんわ、今日はSEOライティングにおけるキャッチコピーの作成について学習しま …

SEO
SEOをわかりやすくkindleで読んでみた。

こんばんは 本日は動画を見ながらでも打ち込み練習でもなく、 kindleの電子書 …

やさしいSEOの教本を読んでみた!

こんばんわ まだやっているんですか?と思われるかもしれませんが 今回もSEOの勉 …

キーワードとニーズ
どうやって決める?Webサイトのキーワードとニーズ

みなさんこんばんわ 今回は、前回読み始めたWebライティングの本について学んだこ …

競合Webサイト
競合Webサイトはこう破る!安全なキーワードの決め方。

こんばんわ、 今日もWebライティングの学習を進めましたよ! 前回はキーワード …

htmlcssを実際に打ち込んでみよう。

こんばんわ 本日、html css の練習動画を見ながら打ち込みの練習をしました …

Googleに瞬間的にインデックスする方法
埋め込んだGoogleMapsの所在地を、好きなアイコンに変更する方法

皆様こんにちは! GoogleMaps埋め込みの応用編です。 ① ホームページに …

学習方向
地域と言語レポートはこう使う!

こんばんは 今回の勉強はgoogleアナリティクスの学習をしました。 いつもと違 …

キーワード
理解すれば怖くない!キーワードを使う回数と検索エンジンのペナルティ。

皆さんこんばんわ。 今日ももちろんライティングの学習をしましたよ! 本日まず学習 …