デザインのきほん４原則とは

1994年にRobin Williams（ロビン・ウィリアムズ）が著書『The Non-Designer's Design Book』で提唱した４つの原則です。タイトルの「Non-Designer's」が示すとおり、専門的な訓練を前提としない設計論です。

４原則の頭文字を並べると CRAP になります。Contrast（対比）・Repetition（反復）・Alignment（整列）・Proximity（近接）の順に対応した４語です。

４原則を学ぶ理由

デザイン初学者がハマりやすいのは、配色・フォント・装飾に意識を集中させ、情報の構造を見落とすことです。制作者は内容を知り尽くしているため、初見の人に伝わるかどうかの判断が難しくなります。

４原則は独立して機能するのではなく、互いに補い合います。近接でグループを作り、整列でそのグループに秩序を与え、対比で重要なグループを目立たせ、反復でページ全体に一貫性を持たせる。この連鎖によって、情報の構造が視覚的に完成します。

また、４原則はデザインの「なぜ」を言葉で説明する根拠にもなります。クライアントや上司に修正を依頼するとき、「なんかまとまりがない気がして」より「近接が取れていないので〇〇を近づけてほしい」と言えると、指示の意図が正確に伝わります。感覚ではなく原則を根拠にすることで、デザインの議論が具体的になります。

４つの基本原則を使いこなす

近接（Proximity）

✗ 悪い例

✓ 良い例

ピザメニューの商品名をイラストの直下に配置するだけで、情報のまとまりが一目で伝わります。関連する要素同士を近づけて、情報のグループを視覚的に伝える原則が近接です。

余白が十分に取れない場合でも、区切り線・背景色・吹き出しを使ってグループを視覚的に伝えられます。

Webページでは、フォームの入力欄とラベル、カード内の画像とテキスト、ナビゲーションのリンクグループなど、近接が機能する場面が随所にあります。「この要素はどのグループに属するか」を意識するだけで、レイアウトの判断が具体的になります。近接が崩れているとき、多くの場合は余白の設定ミスが原因です。要素間のマージンを見直すことが、最初の修正ポイントになります。

整列（Alignment）

✗ 悪い例

✓ 良い例

同じピザメニューでも、商品名を左揃え・価格を右揃えに統一するだけで、目線が迷わなくなります。ばらばらな配置は「センタリング」しているように見えて、実際には基準線がない状態です。要素を規則正しく揃えることで、目に見えない基準線（グリッド）を生み出す原則が整列です。このグリッドが情報の階層と属性グループを伝えます。

整列には大きく分けて、左・中央・右の3つの方向があります。それぞれに適した使いどころを理解することが、整列を使いこなす第一歩です。

左揃え

文頭が常に左端に固定されるため、行をまたいでも視線の戻り位置が一定です。本文・リスト・説明文など、複数行にわたる「読ませるテキスト」全般に最も適しています。読者の目が左端に自動的に戻るので、行間が広くても読み疲れしにくいのが特徴です。

中央揃え

左右対称に配置されるため、フォーマルで格調のある印象を与えます。短いキャッチコピーや見出し、詩のような短文には映えます。ただし3行以上になると文頭がバラバラになり、どこから読み始めるか迷いやすくなります。長文の本文への使用は避けるのが基本です。

右揃え

右端を基準に読む情報に向いています。名刺の連絡先・表の数値・日付など、右端に視線を固定させたい場面で使います。画面全体を右揃えにすると文頭が不規則になるため、特定の情報ブロックだけに絞って使うのが効果的です。

対比（Contrast）

要素に明確な差をつけて、情報の重要度を伝える原則です。見出し・サブタイトル・本文のサイズがほぼ同じだと単調なデザインになります。大きさや太さの差をはっきりつけることで、視線の入口と読む順序をコントロールできます。

対比で視線を誘導する

✗ 悪い例

✓ 良い例

対比を使いこなせるようになると、デザインを見る人の視線を意図通りに誘導できるようになります。横書きでは人は左上から右へ、そして下へと視線を動かすのが自然な流れです。しかし、写真やイラストをメインに据えたデザインでは、重要度の順番にテキストを配置することが難しい場面も多くあります。

そこで対比の出番です。伝えたい情報を優先度別に段階的に目立たせることで、初見のユーザーでも「何をどの順に見ればいいか」が直感的に伝わります。悪い例のように要素の大きさや太さが均一だと、どこに目を向ければよいかわからず視線が迷います。良い例のように明確な差がついていれば、視線は自然に重要な情報へ引き寄せられます。

この視線誘導の技術は、WEBデザインにおける導線設計とも直結します。ユーザーにボタンをクリックしてほしい、フォームに入力してほしいといった目的がある場合、対比によってその要素を際立たせることで、自然な行動を促せます。「なんとなくかっこいいデザイン」ではなく、「見た人が動くデザイン」を作るために、対比は欠かせない原則です。

可読性を高めるためのコントラスト

デザインでは画像の上に文字を置く場面がよくあります。背景画像の本来の目的は文字のメッセージを補完することですが、背景と文字のコントラストが確保できていないと、肝心の文字が読みづらくなってしまいます。代表的な4つの手法を紹介します。

① ドロップシャドウ（光彩）

文字の後ろにシャドウをつけて背景から浮き上がらせる手法です。ただし細い文字に濃いドロップシャドウをつけると逆に読みづらくなることがあります。光彩（外側）を使って文字全体に自然なシャドウがかかるように調整するのがポイントです。シャドウの色は黒ではなく、背景画像内の色を使うとコントラストを保ちながらデザインに馴染みます。

② ぼかし

文字の後ろにごちゃごちゃしたオブジェクトがある場合、背景をぼかして色を均一化し可読性を上げる手法です。画像全体をぼかす方法もありますが、ぼかしすぎて何の画像かわからなくなっては意味がありません。この例のように文字の後ろ部分だけをぼかす方法も効果的です。

③ 半透明オーバーレイ

背景画像と文字の間に半透明の背景色やパターン（ボーダー・ドットなど）を入れる手法です。Webのファーストビューに動画を使う場合などによく用いられます。背景画像が何かわからなくなってしまわないよう、挟む色やパターンはシンプルなものを選び、不透明度を調整しましょう。全体が暗くなりすぎる場合は、文字の後ろだけに背景色を入れる形にしても効果的です。

④ グラデーション

動画配信サイトやニュースサイトのサムネイルなどでよく見られる手法です。背景画像には顔やニュースの核となる画像が使われるため画像自体をあまり暗くしたくない場面で、下からグラデーションをかけることで背景の明るさも保ちつつ文字の可読性を上げられます。場合によってはグラデーションではなく、帯（背景色や半透明の帯）を文字の後ろに入れる方法もあります。

色のコントラストは見やすさだけでなく、アクセシビリティにも直結します。背景色と文字色の輝度比（コントラスト比）が低いと、視力の弱いユーザーや屋外での閲覧者が読めなくなります。Webの標準規格（WCAG）では、通常のテキストで最低コントラスト比4.5:1を確保することが推奨されています。デザインの美しさと読みやすさを両立させるためにも、対比は感覚だけに頼らず数値で確認する習慣を持ちましょう。

反復（Repetition）

デザインの特徴を繰り返すことで一貫性が生まれ、全体として統一感のあるまとまったデザインになります。以下の例で確認してみましょう。

✗ 悪い例

✓ 良い例

悪い例は、挿絵と見出しのデザインテイストに一貫性がないため、統一感がなく見出しの階層構造もわかりづらくなっています。良い例のように一貫したデザインテイストで統一すると、どれが中見出しでどれが小見出しかが一目でわかり、全体に安定感が生まれます。

デザイン初学者は面白みを出そうと、様々な色・フォント・イラストを使いがちになります。しかし雰囲気がバラバラになると、どれが中見出しでどれが小見出しなのかを判断することも難しくなります。明確なルールを繰り返すことが、わかりやすさに直結します。

例えば、カレーの商品パッケージ裏の『カレーの作り方』イラストを想像してください。料理をしながら見るため、たびたび目線が外れます。再度「火加減」を確認しようとしたとき、すぐに見つけられるかどうかは反復にかかっています。

✗ 悪い例

✓ 良い例

悪い例では、火加減がどこに記載されているかパッと見つからず、各工程の中をひとつひとつ探さなければなりません。良い例では、火加減の記載場所とデザインが統一されているため、一度確認した場所を手がかりに、次の工程でも迷わずすぐに目を送ることができます。反復によって不必要な情報をスキップし、ほしい情報へ即アクセスできるようになります。

反復の応用

反復を使う際に気をつけることがあります。商品の種類が違う場合に同じ色を使いすぎると、識別性（区別のしやすさの度合い）が下がってしまいます。人間は情報の80%以上を視覚から得ており、色は形よりも先に認識されます。そのため、同色だと別商品をユーザーが同じものと誤認してしまう可能性があります。

✗ 悪い例

✓ 良い例

ただ同じデザイン要素を盲目的に繰り返すのではなく、デザインテイスト（形・トーン・位置）は統一しつつ、色や写真で変化をつけて識別性を上げることが反復の応用です。一貫性と識別性を両立させることで、ユーザーを惑わせないデザインが実現できます。

習熟度確認課題

知識として理解した状態から、実際のデザインに活かせる状態に引き上げるための課題です。

課題１：世の中のバナーから４原則を見つける（必須）

バナーデザインのギャラリーサイトから、近接・整列・対比・反復それぞれが確認できるバナーを最低3点ずつ探してみましょう。Notionの新規ページに貼り付け、どの部分がどの原則かを書き出して提出してください。1つのバナーですべての原則を見つける必要はありません。

参考サイト：Pinterest / デザインライブラリー / bannnner.com / バナー広場