07design.blog

RSS
Home » designtips, topics

webデザインにおける視線誘導のおはなし

2011年 6月 1日 水曜日


こんにちは。今回はレイアウトの記事を書きます。

グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。
なんだかすごく中二心をくすぐられる言葉ですね。

「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。

簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。
こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。
テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置するように心がける、というものです。

これはドキュメントを読む際の視線の動きであって、媒体によって効果的な導線が異なってきます。

Z型パターン

紙媒体(横書き)の紙面なんかで
「左上→右上→左下→右下」とZの形にユーザーの視線が移動するため、
この導線上に重要なエレメントを配置しましょう、といった考え方です。

F型パターン

こちらはwebにおける視線移動の研究から提唱された、
比較的新しいパターンです。
まずはロゴ部分からヘッダーが目に入り、
続いて見出し・メニュー、記事…と読み進めていくような移動です。
レイアウトによって変わってくると思いますが、
やはり目立たせたいエレメントは左上に配置するのがベターなようです。

目標からレイアウトを逆算する

当たり前ですが、視線の流れは無意識によるものだけではなく、デザインの効果によって変わります。
サイトの目標をしっかりと設定し、ユーザーがどう行動するか、導線を考えて設計することが大切です。

見た目がキレイならいいってもんじゃない


同一色・同系色の配色は、デザインがまとまりやすく洗練された印象を覚えますが、
上の画像のように、見出しと本文が一瞬で判断できないと視線が迷ってしまいます。
また、文字サイズの大きさをあまり変えないと、落ちついたデザインになりますが、
ジャンプ率が低くなり、パッと見た時にどの文章を読めばいいのかわからなくなってしまいます。

デザインによる誘導


このようなレイアウトの場合、

配色による視線誘導


コンテンツ3カラムのうち重要な1つのみにアクセントカラーを置き、視線を誘導します。


逆に言えば、横にいくつものコンテンツを並列した場合に通常の視線の流れから考えて
左から読ませたいと考えていても、誘目性の高い色を一番左以外に使うと読み飛ばされてしまう危険性があります。

ジャンプ率による視線誘導


見出しに目が行き、一目で重要度が分かります。

webサイトをデザインする際は、コンテンツの重要度を把握した上でのレイアウト・ビジュアルデザインを意識したいですね。

23 Comments »

  1. はじめまして。
    はてなブックマークから流れ着きました。
    私もつい最近勉強を始めたばかりなのでこちらの記事はとても参考になりました。
    また立ち寄らせていただきます。

  2. >ぐろかず様

    コメントありがとうございます。
    拙い文章ですが、ご参考になりましたでしょうか。
    私もまだまだ勉強中の身ですが、お役立て頂ければ幸いです。

  3. […] アフィリエイターだって視線動線についてお勉強 WEBデザイナーや、WEBコンサルを職業としている人は、WEBマーケティングやWEBプランニングについて日々勉強しているかと思いますが、アフィリエイターも同じなんです。 ユーザーのニーズを解決するという意味では、手段は同じですからね。 画面でサイトをみている人のデザインにおける視線の動線について紹介したいと思います。 Z型やF型などは今では結構よく知られてるかと思いますが、デザインや配色によるサンプルも紹介されていますので、非常に勉強になります。 少しづつでもこのような、根拠のある仕組みを入れ込んでいって最終的に成約率が高まるかと思いますのでアフィリエイターはぜひ! ⇒webデザインにおける視線誘導のおはなし […]

  4. […] webデザインにおける視線誘導のおはなし […]

  5. はじめまして
    さくと申します。

    配色による視線誘導は「なるほど!」と
    思わされました

    これは頭にありませんでしたので
    活用させていただこうと思います^^

    またお邪魔させていただきます

  6. […] webデザインにおける視線誘導のおはなし | 07design.blog webデザインにおける視線誘導のおはなし | 07design.blog こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤ グラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられ る言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の 情報を見る際の、・・… original article […]

  7. こんにちは。はじめまして。
    もりりんといいます。

    ZやFの法則は、教材で学んだのですが、
    このような秘密があったんですね!

    そもそも、左上から右下にちろちろ・・・
    これが、まず最初の「ナルホド!」

    ついで、Zは紙ベース、Fはwebベース、
    「ふーむ。ナルホド」

    彩度の高いものは左・・・のところは、
    もう、敬服でした!

    勉強になりました!

  8. […] webデザインにおける視線誘導のおはなし | 07design.blog Annotations: […]

  9. […] ■ webデザインにおける視線誘導のおはなし | 07design.blog […]

  10. […] webデザインにおける視線誘導のおはなし | 07design.blog とっても丁寧な説明。メモメモ   […]

  11. […] webデザインにおける視線誘導のおはなし http://ow.ly/590Az […]

  12. […] webデザインにおける視線誘導のおはなし 極端な例をだしてくれているので、わかりやすく誘導されましたw デザイナでないので、あまり意識していませんでしたが、 ユーザビリティやコンバージョンに密接に関係する知識ですね。もっと深く知りたい。。 […]

  13. webデザインにおける視線誘導のおはなし…

    こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイア…

  14. […] webデザインにおける視線誘導のおはなし | 07design.blog […]

  15. […] webデザインにおける視線誘導のおはなし
    参考になりました

  16. たまたまなのですがこのブログの記事を転載している会社様のサイトを見つけたので、念のため。
    お知り合いとかでしたらいいのですが。
    「素晴らしいトピックを見つけたのでピックアップ」などと書いてあり言い訳は立ちそうなのですが、自分もWeb業界で働いており無断で転載したり画像利用など平気でする業者には困っているので念のためご連絡しました。

    http://fivenine-design.com/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E8%A6%96%E7%B7%9A%E8%AA%98%E5%B0%8E%E3%81%AE%E3%81%8A%E3%81%AF%E3%81%AA%E3%81%97/

  17. >通りすがりさん

    わざわざご報告ありがとうございます。
    全文引用は困りますね。ちょっと問い合わせてみます。
    ご協力に感謝いたします。

  18. […] webデザインにおける視線誘導のおはなし | 07design.blog […]

  19. […] webデザインにおける視線誘導のおはなし | 07design.blog […]

  20. […] 基本的な視線の動き webデザインにおける視線誘導のおはなし | 07design.blog […]

  21. […] ⇒webデザインにおける視線誘導のおはなし […]

  22. いま、ホームページ制作に悩んでいたので目から鱗です。
    閲覧ユーザーがどのようにページを認識するのかわかりました。
    ありがとうございます。

Comments

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.