デザインの4原則とは｜バナーで学ぶ基本
この記事でわかること
- デザインが変に見える原因を、4つの視点から見つけられる
- バナーや資料を、順番に沿って自分で直せる
デザインが「なんか変」だと感じても、どこを直せばいいのかわからないことがあります。デザインの4原則を知ると、変に見える原因を言葉で説明できるようになります。この記事では、1枚のバナー※1をSTEPごとに直しながら、4原則を紹介します。
ハコマル
センスがなくても大丈夫だよ！ルールに沿って1つずつ直していこうね
※1：バナー…Webサイトや広告に置く、リンク付きの画像。
デザインの4原則の全体像
直したいところが決まっている場合は、次の表から使う原則と解説を探してください。
| やりたいこと | 使う原則 | 解説 |
|---|---|---|
| 関係のあるものをまとめる | 近接 | STEP1 |
| 端をそろえる | 整列 | STEP2 |
| 見た目に統一感を出す | 反復 | STEP3 |
| 見せたいものを目立たせる | コントラスト | STEP4 |
| 「なんか変」を見つける | 4原則すべて | チェック |
デザインの4原則は、Robin Williams著『ノンデザイナーズ・デザインブック』で紹介されている考え方です。この本が最初に提示したとされています。
この記事では、書籍の章と同じ順番で、冒頭のバナーに原則を1つずつ重ねていきます。前のSTEPの結果を次のSTEPで使うので、初めての人は目次の順に読み進めてください。
STEP1：関係のあるものを近づける
近接は、関係のあるものを近づけて、ひとつのかたまりにする原則です。近くにある要素は、同じグループだと受け取られます。余白の量を変えることで、「まとめる」「分ける」を伝えます。
| よくある失敗 | 直し方 |
|---|---|
| すべての要素が同じ間隔で並んでいる | 関係のあるものは近づけ、かたまりの間は広く空ける |
| 関係のないものが近くに並んでいる | 必要な情報が埋もれるため、別のかたまりに分ける |
| 関係のあるものが離れている | 関係がないと見なされて見落とされるため、近づける |
例えばバナーでは、キャッチコピーと補足、割引率と期間、ボタンを、それぞれのかたまりにまとめます。
ハコマル
線や枠で区切らなくても、余白だけでグループは作れるんだね！
STEP2：端をそろえる
整列は、要素の端を「見えない線」にそろえて置く原則です。左揃えを基本にして、中央揃えは多用しないようにします。
| よくある失敗 | 直し方 |
|---|---|
| 行ごとに、左・中央・右とそろえ方が違う | そろえ方を1つに決めて、すべての行に使う |
| なんとなく中央揃えにしている | 左揃えを基本にする |
| 文字とロゴの端がずれている | 文字の端とロゴの端を、同じ線に合わせる |
例えばバナーでは、文字の左端をそろえ、ロゴやボタンの端も同じ線に合わせます。
ハコマル
そろえただけなのに、急に「ちゃんとした感じ」が出てきたね！
STEP3：同じ役割は同じ見た目にする
反復は、同じ役割の要素を同じ見た目にして、繰り返す原則です。色・サイズ・余白をそろえて繰り返すと、全体に統一感が出ます。
| よくある失敗 | 直し方 |
|---|---|
| 行ごとに書体や色が違う | 同じ種類の文字は、書体・色・サイズをそろえる |
| 補足の文字の大きさがばらばら | 補足の文字は、すべて同じ見た目にする |
| バナーごとにデザインが違う | シリーズのバナーでは、同じ型を使う |
例えばバナーでは、補足と期間はどちらも「補足の文字」なので、同じ色とサイズにします。
ハコマル
すっきりしたけど、まだ主役がいない感じだね。最後のSTEPで仕上げよう！
STEP4：見せたいものを目立たせる
コントラストは、違うものにはっきりと差を付ける原則です。サイズ・太さ・色を変えて、見せたいものを目立たせます。
| よくある失敗 | 直し方 |
|---|---|
| すべての文字が同じくらいの大きさ | いちばん伝えたい文字を、いちばん大きくする |
| 差が少ししか付いていない | サイズ・太さ・色で、はっきりと差を付ける |
| ボタンがまわりの文字に埋もれている | ボタンだけを目立つ色にする |
中途半端な差は、かえって見づらくなります。差を付けるときは、誰が見ても違いがわかるくらい大きく変えましょう。
例えばバナーでは、キャッチコピーをいちばん大きくし、ボタンだけを目立つ色にします。
ハコマル
冒頭のバナーと見比べてみてね！文字の内容は1文字も変えていないよ
「なんか変」を4原則でチェックする
自分のサイトや資料が変に見えるときは、4原則を質問の形にして確認します。STEPと同じ順番で上から確かめると、直すところを見つけやすくなります。
直す前に確認する4つの質問
- 関係のあるものが離れていないか（近接）
- 端がそろっているか（整列）
- 同じ役割なのに、見た目がばらばらになっていないか（反復）
- いちばん見せたいものが目立っているか（コントラスト）
ハコマル
「なんか変」を言葉にできると、人のデザインを見るのも楽しくなるよ！
さいごに
まとめ
デザインの4原則は、近接・整列・反復・コントラストの4つです。1つずつ順番に重ねていくと、文字の内容を変えなくてもデザインは見やすくなります。
4原則でやること
- 近接：関係のあるものを近づける
- 整列：端を見えない線にそろえる
- 反復：同じ役割は同じ見た目にする
- コントラスト：見せたいものにはっきり差を付ける
まずは自分で作ったバナーや資料を、4つの質問で確認してみてください。
よくある質問
4原則は、どの順番で使えばいいですか？
この記事では、近接・整列・反復・コントラストの順に重ねています。『ノンデザイナーズ・デザインブック』の章も、同じ順番で並んでいます。
順番の考え方は「デザインの4原則の全体像」で解説しています。
文字を少し大きくしたのに、目立ちません
中途半端な差は、かえって見づらくなります。サイズ・太さ・色を、はっきり違いがわかるくらい変えましょう。
差の付け方は「STEP4：見せたいものを目立たせる」で解説しています。
4原則は、バナー以外にも使えますか？
使えます。『ノンデザイナーズ・デザインブック』の日本語版には、名刺・フライヤー・ウェブの作例も載っています。
