告知画像を作ったら、必要な情報は全部入っているのに、なぜか読みづらい。そんなときに役立つのが「デザインの4原則」です。見た目の好みだけで判断せず、どこを直すか考えるための基本になります。
デザインの4原則は「近接・整列・反復・コントラスト（対比）」です。関連するものをまとめ、位置を揃え、共通の形を繰り返し、大事なものに差をつけます。
4つ全部を一度に使わないとだめですか？
PORT編集部一度に完璧を目指さなくて大丈夫。まず「一番伝えたいこと」が読めるか確認し、一つずつ直しましょう。
- 4原則は何のために使う？
- 近接｜関連する情報を近づける
- 整列｜揃える線を決める
4原則は何のために使う？
デザインの4原則は、情報の関係と優先順位を見た目で伝えるための考え方です。例えばイベント告知では、イベント名・日時・会場・申込先を同じ大きさで並べると、読む順番が分かりません。原則に沿って整理すると、見る人が必要な情報を見つけやすくなります。
| 原則 | 見る場所 | 直し方 |
|---|---|---|
| 近接 | 情報の距離 | 同じ話題を近づける |
| 整列 | 端の位置 | 揃える基準線を決める |
| 反復 | 共通の形 | 同じ役割を同じ見た目に |
| コントラスト | 強弱 | 主役と補足に明確な差をつける |
同じ情報を4原則で並べ直す
近接で開催情報をまとめ、整列で左端を揃え、ボタンの形を反復。コントラストでイベント名を先に読ませます。架空の告知です。
近接｜関連する情報を近づける
イベント名と説明文、日時と会場など、ひとまとまりで読んでほしい情報を近づけます。別のまとまりとの間は少し広く空けます。枠線を増やさなくても「ここから別の話題」と伝えられます。
詳しい使い方は「近接とは？情報をわかりやすくまとめるデザインの基本」で具体例とともに解説しています。
整列｜揃える線を決める
見出し、本文、ボタンの左端が少しずつずれると、目が何度も止まります。左揃えを基本にして一本の見えない線に沿わせると、画面がすっきりします。中央揃えと左揃えを使い分ける場合も、理由を持って切り替えましょう。
詳しい使い方は「整列とは？デザインをきれいに見せる揃え方の基本」で具体例とともに解説しています。
反復｜同じ役割は同じ見た目に
複数の見出しを同じ色・太さにする、カードの角丸を揃えるなど、共通のルールを繰り返します。Instagramの連続投稿なら、タイトル位置を揃えると同じシリーズだと伝わります。
詳しい使い方は「反復とは？統一感のあるデザインを作る基本ルール」で具体例とともに解説しています。
コントラスト｜重要度に差をつける
大切な見出しを大きくし、補足は小さくする。濃い文字と淡い背景を組み合わせる。差が小さいと全部が同じ強さに見えるため、最初に読んでほしい情報を一つ決めて明確に強調します。
詳しい使い方は「コントラストとは？メリハリのあるデザインを作る方法」で具体例とともに解説しています。
4原則を使う順番
①内容を整理して近接、②左端などを整列、③同じ役割の見た目を反復、④主役をコントラストで強調。最後にスマホサイズで読み直し、強調が多すぎないか確認します。
実例｜ワークショップ告知を整える
イベント名、日時、場所、申込先をすべて同じ文字サイズで中央に並べる。どれを先に読めばいいか分からない。
イベント名を主役として大きくする。日時と場所を近づけ、左端を揃える。申込ボタンは同じ色で繰り返し使う。
直す手順
- まず情報を「内容」「開催情報」「申込」に分ける。
- 各グループの左端を揃え、間に余白を作る。
- 最初に読ませたいイベント名だけ強く見せる。
まとめ
上手に飾る前に、情報の関係が伝わるかを確認する。4原則はそのためのチェックリストです。
