This page is intended for users in Japan(English). Go to the page for users in United States.

余白を制する者はレイアウトデザインを制する|けっきょく、よはく

こんにちは、デザインスタジオのまなべです。

今回は、私がデザインについて学習するにあたって参考にした『けっきょく、よはく 余白を活かしたレイアウトデザインの本/ingectar-e(著)』という本をお勧めしたいと思います。

1.本書の構成


本書は一テーマに対して以下六つの要素で構成されています。
①NG作品例
②OK作品例
③問題点の洗い出し
④修正点とその目的
⑤他のレイアウト提案
⑥余白以外のデザインに関するアドバイス


①デザイン初心者や少し慣れてきたデザイナーがやりがちなNGレイアウト例を、②ブラッシュアップした作品と比較して③問題点を洗い出し、④修正箇所の目的を明らかにした上で、⑤他のブラッシュアップ案も検討し、⑥本書のテーマである余白以外のデザインアドバイス(フォントや配色など)に少し触れて他の学習のきっかけをつくる、というような流れです。
作品例がとても多いことが特徴で、女性向けの華やかな広告作成に向いている印象です。

2.そもそも、何故”余白”が大切なのか


優れたレイアウトデザインの条件は「情報がより整理され、デザインがより洗練されていること」であり、「情報を整理してデザインを洗練させるためには余白を活用することが必須」だと本書では語っておりますが、そもそも何故余白を活用することが大切なのかお話しておこうと思います(本書には記載されていない内容です)。

人間は、脳の負担を軽減するために物事をグループ化(群化)して知覚・認知を行っており、これをプレグナンツの法則と呼びます(大変重要で資料作成などにも役立つ法則なので、デザイナー以外の方も是非調べてみて下さい)。
レイアウトデザインの余白にはプレグナンツの法則のうち「近接の要因」が大きく関わっています。

試しに同じ大きさ・色・数の円を並べたものを二種類作ってみました。

上の配列は一つ一つの円が等間隔に並んでいるようにしか見えませんが、下の配列は円が二つずつのグループになっているように見えます。
つまり、「要素間が近いもの同士を同じグループだと認知する」のです。
これを「近接の要因」と言います。

次に、この二種類の配列の円同士の隙間に色を付けてみました。

グループ化している下の配列の方がグループ間が開いていることが分かります。
よって、余白が少ないデザインよりも、しっかりと余白を取ってあるデザインの方が情報がまとまって分かりやすく感じるのです。


3.実例


余白を意識しながら、本書の作品例を分解してみました。

例1.罫線は本当に必要だと判断した場合にだけ引く

上図では、全ての要素間を線で区切って表しています。
この場合、ぱっと見たときに内容よりも罫線の方が目を引いたり、ポスター等の中で使用する際に悪目立ちしてしまう可能性があるため、罫線を抜いて以下のようにまとめてみました。

①はbeforeから罫線を抜いただけのものです。
この状態だとポイント―内容間より、ポイント―ポイント(内容―内容)間の方が近いため、列がグループ化しているように見えます。


②ポイント―内容間のグループ化をさせるために内容を左に寄せて距離を縮めました。


③②ではまだポイント―内容間より、ポイント―ポイント(内容―内容)間の方が距離が近かったため、次は縦の距離を離してみました。漸く行ごとのまとまりが感じられるようになりました。


④③で完了でも良いですが、さらに区別をつけたければ行間に薄く線を引いてみてもいいかもしれません。


例2.写真を切り抜くことでレイアウトの自由度が増えて華やかに


上図は飲食店のメニューなんかでよく見かけるレイアウトです。
商品の写真を単一的に画面一杯に並べており、規則的ですが強弱が無く面白味には欠けるデザイン。 ­­

商品の写真を切り抜くとその分周囲に余白が生まれてレイアウトの幅が広がり華やかな印象になります。要素の大小を変えるとメインメニューとサイドメニューを区別出来たり、サイドメニュー同士をグループ化して情報をまとめることもできるので、分かりやすい上に楽し気なデザインになります。

4.まとめ


伝えたい情報が多いと無理に頑張って詰め込みがちになってしまったり、要素が小さいと気づいてもらえるか不安になってしまうことがありますが、今回、余白について学習して「”間”を取ったマイナスのデザイン」を上手に活用出来るようになることで、より人に伝わり、楽しんでもらえるデザインが出来るようになれたらいいなと思いました。

株式会社MAISON MARC's job postings
14 Likes
14 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more