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

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

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

*

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

   

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

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

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

視線の動きの3パターン

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

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

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

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

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

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

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

明日も頑張ります!

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

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

Message

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

  関連記事

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

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

検索エンジン
検索エンジンの正しい捉え方って?

みなさんこんばんわ 今回もSEOの学習を進めましたよ!! そう、前回記事を読んで …

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

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

Webライティング
SEOで抜群の効果を発揮できるWebライティングとは?

みなさんこんばんわ。 今日はなんと、長い間にわたり読み進めていたSEOの書籍を読 …

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

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

Googleアナリティクスは実践あるのみ。

みなさんこんばんわ 本日学習したのは  googleアナリティクスの試験勉強。 …

SEO
リンクの正しい設定方法とは?

こんばんは 今回の勉強は前回の続きになります! 前回の勉強というのはSEOについ …

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

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

no image
ウェブ解析士試験問題、そもそもの単語の意味を教えて!

みなさんこんばんは、 本日の学習はSEOライティングの学習ではなく、 ウェブ解析 …

リマーケティングリスト
Googleアナリティクスを振り返る

みなさんこんばんわ googleアナリティクスの学習をして 自分的にわからなかっ …