dtpdesign

伝える!デザインの視線誘導 基本構造

KOMAWORKS

※イラストはAI生成です

デザインの基本 視線誘導

視線誘導の必要性

考える意味あるの?

デザイン制作の中で、視線誘導を考えることは重要です。というか基礎です。

視線誘導を意識することで、

内容を伝えたい順番で読んでもらうことがで

アイキャッチなどで、視覚を操作することで

自然な流れで内容を読んでもらい離脱を防ぐことができます。

見栄えの上でも、メリハリがついたデザインになるので、作っていて気持ちよくなれます(笑)

この記事では基本の「3つの法則と」「視覚の原則」をご紹介します。

視覚の原則

視線は大→小へ、左上→右下へと動きます。

この基本的な動きを「グーテンベルク・ダイヤグラム」といいます。

活版印刷の発明者 ヨハネス・グーテンベルグさんのお名前が基になってるんですね。

グーテンベルグダイヤグラムとは、「均一に配置された情報を見る時、視線は左上から右下に流れていくように習慣づけられている」という考え方で、15世紀に活版印刷技術の発明者として活躍したヨハネス・グーテンベルグが提唱しました。

https://sitest.jp/blog/?p=1283

3つの法則

視線の動きには3つの法則があります。

Zの法則

チラシや広告、バナー、本の表紙など、すべての情報が一見できる媒体向いている考え方。

見慣れない形のサイトや、珍しいUIなどはこの視線の動きが最初に来るのでコンテンツの位置を考えて決めるのがおすすめです。

※動画や動きのあるものは別の法則が働くのでこの限りではありません。

Fの法則

実は比較的新しい動き方。

大量の情報から自分の興味ある部分のみピックアップする

いわゆる「流し読み」に適した動きです。

縦長のサイトや広告紙面に向いています。

Nの法則

和風のデザインや、極端に縦長の紙面に向いている視線の動き。

和風のデザインに向いていますが、使用する際には最初に注目させたい右上のポイントに

アイキャッチなどを置いて強調する必要があります。

活用事例

この記事の参考図書はこちら

<script type="text/javascript">var a8='a20042499771_3BBSQ0_DXWFQQ_2HOM_BU3I9';var rankParam='jIfqnbcveySiGs31N4oPk3cvGyKnGaYa7aSTYatH1IomcaciYISves01lIjxx';var bannerType='0';var bannerKind='travel.fix.kind1';var frame='1';var ranking='1';</script><script type="text/javascript" src="//rws.a8.net/rakuten/ranking.js"></script>
ABOUT ME
記事URLをコピーしました