名古屋のWebマーケティング企業「アライブ株式会社」のマーケティングブログ

052-684-5558

Marketing Blog マーケティングブログ

できてる?基本のデザイン道場〜レイアウト編〜 「視線を意識して情報を配置しよう」

2021/07/26 | UXデザイン

萩原 麻衣

Writer萩原 麻衣

Designer / Project Manager

こんにちは!デザイナーの萩原です。

 

今回のブログテーマは、同じチームで働いている私の先輩にあたる三林さんから頂戴しました!

先輩が普段考えている「デザインのノウハウ」について、私が先輩からもらったテーマを噛み砕きながらブログにするという新企画です。

 

今回は基本のデザイン道場〜レイアウト編〜について。

新人デザイナー向けでもあり、ちょっとしたチラシなどを作らないといけない!という状況になってしまったお客様向けでもあります。

 

見やすいデザイン」「わかりやすいデザイン」には必ずルールがあります。

見る人の目線を意識してデザインするコツを三林と萩原の2人でお伝えします!

 

 

1. 人間の視線の流れ方を肝に銘じるべし!

▼結論

もう結論から言っちゃいましょう。

– 文字が横組みなら左上 → 右下
– 文字が縦組みなら右上 → 左下

 

これを徹底的に意識するだけで見やすいデザインになります!

視線の動きを意識することで、ユーザーに見せたい情報を見せたい順番に見せるようにコントロールすることができます。

 

また、ユーザーに無意識に正しい順序を導くことができるようになるので「ユーザーにとって優しいデザイン」にできます!

 

たとえば以下の画像、どちらが読みやすいでしょうか?

 

皆さんがこの画像をみた時の目線の動きを予想したものがこちらです。

 

 

Aは目線の動きが複雑になり、

Bはすんなりと情報が入ってきたのではないでしょうか?

 

なぜそう感じるのかについて、ご説明します。

 

 

2. 視線の流れ 3つの型

▼「Z型」

Zの法則

 

Z型は横組みの文章を読む時の視線の動きです

チラシ、文字が横組みのパンフレット、看板などに一般的に使われます。

さきほどの「ねこねこサマーキャンペーン」のバナーBは、このZ型に基づいて作られていたわけですね!

 

▼ 「N型」

Nの法則

 

N型は縦組みの文章を読む時の視線の動きです
(マンガ、小説、ファッション雑誌も多くはこれ)

マンガはセリフの流れが違和感なく読めるように、このN型(右上 → 左下)に沿って、フキダシの位置やキャラクターの顔の向きなどの配置がものすごく工夫されています。

次に読むセリフはここか、と思った時に違うフキダシを読んで「ん?話が繋がらない…」と思ってしまうことってほとんどないですよね。
ぜひ、お手持ちのマンガを見てみてください!

 

▼「F型」

Fの法則

 

F型は主にWebサイトやブログを見るときの視線の動きです

動きとしてはZ型に似ていますが、下に連続していきます。

たとえばWebサイトのように下にスクロール移動してざっと全体を流して見ながら、気になるものがあれば横にも視線を移動させるので、それを意識して情報を配置します。

 

▼ おまけ:グーテンベルク・ダイヤグラム

グーテンベルク・ダイヤグラム

 

グーテンベルク・ダイヤグラムは同じ種類の情報が均等に配置されている時に、左上から右下に視線が動いていくという視覚の動き方のパターンです。

このレイアウトは稀なケースなので、おまけ程度にしておきます!

 

 

3. 身近なところにも視線の流れの法則が!

たとえば、iPhoneの時計機能や、乗り換え案内のアプリの画面。

 

 

この2つもF型に基づいてデザインされていますね。

では、もしも世界時計のレイアウトが左右逆だったら、どうでしょうか?

 

 

人間の視線は左 → 右の順番に見るので、
先に時刻がわかっても、「それがどこの地域なのか」という情報が遅れて入ってくるのは、少し見にくいですよね。

視線の流れに沿って
ユーザーが最初に求める情報から順番に配置することで、
伝えたい情報をスムースに受け取ってもらうことができます

 

 

まとめ

大きくは以下3つのポイント。

 


視線の流れを徹底的に意識しよう。

文字が横組みなら、情報の流れは左上 → 右下。文字が縦組みなら右上 → 左下。

「ユーザが求める情報」から先に見せることで、わかりやすい画面づくりができる。


 

こちらを意識してデザインすると、グッとユーザー目線に立ったデザインになるので、施策の効果も出やすくなると思います!ぜひ、取り入れてみてくださいね。

 

◎あとがき

今回、テーマをもらうことで私自身も改めて確かに、と思う部分が多くありました!

先輩デザイナーに聞いてみたシリーズを不定期で書いていこうと思います^^

執筆:萩原麻衣
企画構成・説明画像作成:三林真希

萩原 麻衣

Writer萩原 麻衣

Designer / Project Manager ブログ プロフィール

学生時代は舞台美術を専攻し、テレビや映画の美術セットの制作に携わる。学内・学外を通して空間的なデザインをしている中で平面的なグラフィックやWebのデザインにも興味を持ち、就職活動中にアライブに出会い入社。これまでに自分が学んできたものをWebに活かし新しいデザインを生み出したい。

学生時代は舞台美術を専攻し、テレビや映画の美術セットの制作に携わる。学内・学外を通して空間的なデザインをしている中で平面的なグラフィックやWebのデザインにも興味を持ち、就職活動中にアライブに出会い入社。これまでに自分が学んできたものをWebに活かし新しいデザインを生み出したい。

Latest Posts

ブログを強力な集客ツールに! SEO対策の基本と最新手法
2024.11.29

ブログを強力な集客ツールに! SEO対策の基本と最新手法

リール動画の作り方&おすすめアプリ5選
2024.11.29

リール動画の作り方&おすすめアプリ5選

Latest Posts

ブログを強力な集客ツールに! SEO対策の基本と最新手法
2024.11.29

ブログを強力な集客ツールに! SEO対策の基本と最新手法

リール動画の作り方&おすすめアプリ5選
2024.11.29

リール動画の作り方&おすすめアプリ5選

© ALIVE Co.,Ltd.