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