レイアウトの4原則
プロのデザインは、たいていこの4つを守っているだけ。むずかしい才能ではなく、 知っているかどうかの差です。まず全体像をつかみましょう。
① 近接(きんせつ)
関連するものは近づけ、関係ないものは離す。グループが一目で分かる。
② 整列(せいれつ)
要素を見えない線にそろえる。バラバラだと散らかって見える。
③ 反復(はんぷく)
色・形・間隔などを繰り返す。統一感が出てプロっぽくなる。
④ コントラスト
大事な所は大きく・強く。メリハリで「どこを見るか」を導く。
整列(そろえる)を直す
下の3つの要素がバラバラの位置にあって、散らかって見えます。 左右にドラッグして、点線の整列ラインに左端をそろえましょう(近づくと吸い付きます)。
近接(余白でまとめる)を直す
3つのイベント情報が、全部おなじ間隔で並んでいて「どれが1セットか」分かりません。 スライダーでグループの間の余白を調整して、関連する行をまとめましょう。
同じグループの中は近く、グループ同士は離す。余白は「区切り線」のかわりになります。線を引かなくても、余白だけで整理できるのがプロのコツ。
チラシを直そう(総合)
ちょっと残念なチラシです。3つのスイッチを全部ONにして、4原則の力で「プロっぽい」チラシに変身させましょう。
スイッチを入れるたびに、チラシがどう変わるか見てみよう。
ビフォーアフター完成!同じ情報でも見違えました
足したのは「整列・近接・コントラスト」だけ。イラストや派手な装飾がなくても、原則を守るだけで“ちゃんとして見える”レイアウトになります。
レイアウトが上手になるコツ
1. まず「揃える」
迷ったら左揃え。要素の端を1本の線にそろえるだけで、ぐっと整って見えます。中央揃えの多用は注意。
2. 余白を怖がらない
詰め込むほど読みにくい。余白は「情報の整理整頓」。空けるところは思い切って空ける。
3. 強弱は大胆に
「ちょっと大きい」は中途半端。見出しは本文の1.5〜2倍以上でハッキリ差をつける。
4. 同じルールを繰り返す
色・余白・書体を全ページで統一(反復)。バラバラにしないだけで、まとまって見えます。
「素人っぽい」を直すチェック
| あるあるNG | 直し方(原則) |
|---|---|
| 要素の位置がバラバラ | 左端や中心を1本の線にそろえる(整列) |
| 全部おなじ間隔で何が1セットか不明 | 関連は近づけ、グループ間を空ける(近接) |
| どこを読めばいいか分からない | 見出しを大きく・太く(コントラスト) |
| ページごとにデザインがちがう | 色・余白・書体を統一(反復) |
| 文字を詰め込みすぎ | 情報を減らす/余白を増やす |