デザインを体系的に捉える「レイアウトする」

今回はデザインのクオリティを左右するレイアウトについての知識と、その知識を使って論理的にレイアウトを決定するにはどうすればいいか、についての記事を書いていきたいと思います。

レイアウトとは？

レイアウトとは何をどこに、どのように配置するかという割り付けのことです。紙面のレイアウトやインテリアのレイアウトなど、どのデザイン業界でも使われる単語ですね。

デザインの４大原則

まず、デザインの４大原則を解説していきたいと思います。デザインの４大原則とは、レイアウトを決めるときの根拠となる知識の１つになります。

「近接」「整列」「強弱」「反復」

この４つがデザインの４大原則です。

近接
人間は、近くに並べられたものを無意識のうちにグループとしてみなすように心理が働きます。その心理をうまく使うことで、読者の理解をサポートすることができます。 同じグループの要素は近くに配置し、それぞれのグループ間の距離を少し大きめに取りましょう！

整列
デザインの要素を整列させることで、見た目が整い、読みやすく、理解しやすいデザインになります。揃える方向は左右で「左揃え」「左右中央揃え」「右揃え」の3つあり、上下で「上揃え」「上下中央揃え」「下揃え」の３つあります。1pxのズレもなくきれいに整列させることで、制作物のクオリティが高くなるので、妥協することなく揃えましょう！

強弱
デザインの中で強弱を適切につけることによって、読者が理解するスピードが早くなります。そのため、情報に重要度を付けて、より重要な情報は目立つようにデザインしましょう。

反復
視覚的な要素を繰り返し用いることによって、そこに一貫性や統一感が生まれ、デザインにまとまりが生まれます。並列な重要度の要素には、積極的に反復を使って、同じ粒度の情報でデザインしましょう！

もっと詳しく知りたい方は、

・Prerequisites of Design（デザインの前提）
・Elements of Design（デザインの要素）
・Gestalt Principles（ゲシュタルト原則）
・Principles of Design（デザインの原則）

この辺りも参考にしてみてください。

視線誘導

次に人がどのように視線を動かしてみるかについて解説していきます。感覚的に理解している方も多いと思いますが、視線誘導のポイントが３つほどあります。

point1
人はまず、目立つものを最初にみる。

point2
同じ形の連続やグラデーション、矢印、数字、波や集中線のような流れを誘うものなどで視線を誘導します。

point3
視線誘導の法則を用いて視線を誘導する。
Zの法則・・・Z字のように左から右へ、そして上から下へ視線が流れる。
Fの法則・・・左から右へ進み、右端から下の段の左端へ戻り、そしてまた右へ進み、一段下の左へ戻るように視線が流れる。

この３つを意識するとある程度レイアウトが確定してくると思います。

どうやってレイアウトを決めるのか

1.情報を整理する。
まずは情報を整理します。
「何を伝えたいのか」や「何を伝えれば、読み手に効果的か」などの情報の重要度や各要素の関係性を参考に、情報を整理して、階層的に情報を捉えます。

2.読者の目線を意識する。
どの要素をどこに配置するかを決めるときには、読者の目線・視線を意識することが重要です。目線・視線をコントロールしてあげることで重要な要素を見落とされないようになります。視線誘導のポイントを根拠に大まかなレイアウトを決めましょう！

3.大きさを決める。
階層の違いに応じて大きさを決めます。これは、デザインの4大原則の強弱を根拠にタイトルや一番最初にみて欲しいものなどは、一番大きくし、図表の説明などの情報の重要度の低いものは小さくするようにしましょう！

4.余白を意識する
情報の関係性を意識して余白を決めます。これは、デザインの4大原則の近接や反復を根拠に関係性の強いものは近くに、関係性の低いものは遠くに、同じ階層のものは、反復させましょう！

5.揃える
あとは、デザインの4大原則の整列を根拠に徹底的に揃えましょう！妥協することなく揃えることは大変重要です。揃えないといけないpointは「文字や図の位置」「字間・行間・フォント・フォントサイズ」「色」です。

最後に

この順序にレイアウトして何パターンも考えてみましょう！

多作多捨はデザイン業界でも重要な考え方です。

個人的ではありますが、捨てなかったパターンは成功体験として蓄積しやすいいです。そのため、成功パターンとして、いいよ要素を学習する人は多い印象です。しかし、捨てたパターンの方が学べることが多いです。どうしてこのレイアウトがよくないのかやどうしてこのレイアウトにしたのか、どういうときにこのレイアウトが効果的なのかなどを記録、記憶しておくことで次に作るクリエイティブの参考になり、デザインスキルの向上に役立つ気がします。