センス不要で資料を見やすく｜デザインの4原則

センスがあって、いいですね

って言われたことのあるデザイナーの方、多いんじゃないでしょうか？

でも、ルールさえ覚えれば、誰だって見やすい資料を作ることが出来ます。そのルールというのが、

デザインの4原則

です。

• 近接

• 整列

• 反復

• 対比

ひとつひとつみていきましょう。

---

近接の原則

関連する要素を近づけてグルーピングすることで、
各要素の関連性が明確になります。

上記例はECサイトなどでよくある商品一覧のレイアウトです。
構成要素は

• 商品画像

• 商品名のテキスト

• 商品の説明テキスト

です。

これらは関連性が強いので、各要素間の余白を狭く取ります。
逆に各商品コンポーネント同士は関連性が弱いので、余白を広く取ります。

---

整列の原則

基準となる見えない線に沿って要素をレイアウトすることで、
情報の視認性を高くします。

実際にラインを装飾として引いても良いですが、
装飾だらけになるとゴチャついて視認性が低くなってしまうので、
見えない線を意識するのがコツです。

---

反復の原則

要素の一貫性を持たせて繰り返すことで、
情報の取得にかける労力を軽減します。

要素の重要度に合わせて、装飾に一貫性を持たせます。

大見出し
文字サイズ：30px　文字色：ブラック　装飾：アンダーライン

中見出し
文字サイズ：20px　文字色：グリーン　装飾：左側に矢印アイコン

のように、ルールを定義します。

---

対比の原則

要素の優先度によって大胆に強弱をつけることで、
重要な情報に素早くアクセスできるようにします。

強弱をつける方法には様々あります。

• 文字サイズ

• 書体

• 配色

• オブジェクトの形状

これらを駆使して、重要度の高い情報、重要度の低い情報にメリハリをつけて、情報の取得の手助けをします。

---

ルールなので覚えるだけ

これらは単純なルールなので、覚えるだけで見やすいデザインの実現が可能になります。