Loading...

wokobo

2016 10 April

レイアウトの基本を学びデザインに取り入れる

PDPics / Pixabay

前回はグリッドを用いたレイアウトについてお話ししました。今回はレイアウトの基本を学ぶと共に、デザインに対してどのような効果があるかをお話します。

レイアウトで優先順位を示す

ジャンプ率

ここでは写真や文字によって優先順位を与える方法を説明します。優先順位を与えるには、単純に要素を大きくする方法があります。このサイズ比を「ジャンプ率」といい、デザインにおいて頻繁に使用されます。

写真のジャンプ率による優先順位

レイアウト1

複数の写真がある場合には、ジャンプ率によって優先順位を与えることが可能です。目立たせたいほうを大きくするだけでなく、もう一方を小さくすることでさらなる差別化が可能です。

文字のジャンプ率による優先順位

layout2

文字で優先順位を付けるのにも強調したい文字を拡大するのが有効です。さらに差別化を図るには太字にするとよいでしょう。

色や形による優先順位

layout3

色で優先順位を付けるには後退色の中に進出色を混ぜると効果的です。また、形においては同一の形の中に一つだけ異なる形を加えることでそれを強調することが可能です。

視線を誘導するテキストのレイアウト

テキストでは読み手がいかに読みやすいレイアウトにするかが非常に重要になってきます。視線の流れに沿った適切なレイアウトについて説明します。

text1

素材による視線の誘導

text2

素材の位置によって読み手の視線を誘導させることが可能です。反対に素材が文字列を中断するような位置に配置することで、謝った視線の流れに誘導する恐れがありますので素材の配置には十分な注意が必要です。

文章の開始位置の提示

text3

文章の開始位置を明確に提示する方法として、先頭の文字を大きくしたり書体や色を変えて強調する「ドロップキャップス」が有効です。他には小見出しの書式設定を本文と差別化、強調することで開始位置の提示が可能です。

余白を利用したレイアウト

レイアウトに余白を利用することで、豊かさや余裕を感じさせると共に単調なレイアウトに変化を与えることが可能です。ここでは意図的な余白の利用の仕方を説明します。

余白による圧迫感の軽減

whitespace

余白が少ないと読み手に圧迫感を与えてしまい、それだけで拒否反応を示してしまう可能性すらあります。意図的に余白の割合を増やすことで読み手にゆとりを感じさせ、安心して読み進めていくことを可能にします。

 

余白を利用した形の変化

whitespace2

余白をうまく利用することで、単調なレイアウトに変化を与えて読み手を惹きつけることが可能です。

視覚効果を利用したレイアウト

最後に視覚効果を踏まえたレイアウトについてお話しします。視覚効果には錯視のように意図した見え方とは異なって見えてしまうことがあります。しかし、視覚効果をうまく利用することで見せたいものを強調するなど、プラスに作用させることも可能です。

mental

天地中央の見出し

mental2

天地中央に配置された要素は数値ぴったりに配置すると、やや下がり気味に見えてしまいます。そのことも踏まえて少し上の位置に配置することで、読み手に天地中央に配置しているように見せることが可能です。どの程度上げるなどの決まりはありませんので、最適な感覚を身につけるしかありません。

形による見え方の変化

mental3

四角と丸では丸のほうの間隔が広く感じてしまいます。意図的に丸を近づけることで、この問題を解消することが可能です。

ゲシュタルトの法則

ゲシュタルトとはドイツ語で全体性を持ったまとまりのある構造という意味です。ゲシュタルト心理学では人間がある対象を知覚する時に、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える法則が示されています。いくつかゲシュタルトの法則の例を見ていきます。

mental4

パターンの繰り返しによるリズムのあるレイアウト

レイアウトではパターンを繰り返すことでリズムを生み出すことが可能です。リズムを利用することで読み手に一定のテンポでの視認を可能にしたり、あえてリズムに異なる要素を加えることで、そこを強調させることも出来ます。

mental5

黄金比・白銀比の利用

人間には理屈抜きで好む比率というものが存在します。その一つに有名な黄金比があります。黄金比とは1:1618の縦横比で構成されたものを指します。他にも、日本人が特に好むと言われている白銀比があります。これらは以前の投稿で詳しく説明していますのでそちらをご覧ください。

デザインの中に隠された黄金比の秘密を探る

日本人が愛して止まない白銀比の謎に迫る

 

ここまでレイアウトの基本的な方法について見てきました。レイアウトは感性に頼る部分が多いのも事実ですが、レイアウトで行き詰まった際にこれらの基本を生かすことで解決する問題もあることでしょう。これからWEBデザインやグラフィックデザインを学ぶ方にとってレイアウトの基本を学ぶことは必須となりますので、しっかりと身に付けデザインに生かしていただきたいです。

Pocket