レイアウトの基本5原則、ちゃんと使えてる？

～デザインを“プロっぽく”見せる黄金ルール～

デザインを学び始めたときに多くの人が悩むのが「なぜか素人っぽく見えてしまう」という問題。
実はその原因のほとんどが、レイアウトの基本5原則を意識できていないことにあります。

今回は「近接・整列・反復・コントラスト・余白」という5つの原則を、
より実践的に深掘りして解説します。

近接（Proximity）｜情報をグループ化する

人は自然に「近くにあるものは関連している」と認識します。
そのため関連情報はまとめ、関係ない情報は距離を取ることが大切です。

悪い例

• メニュー項目がバラバラに配置されている
• 見出しと本文の距離が遠く、関係が分かりにくい

良い例

• 見出しと本文は近接させて「ひとつのまとまり」として見せる
• フッター内のリンクはカテゴリごとにブロック分け

近接を意識するだけで、情報が“整理されて見える”ようになります。

整列（Alignment）｜見えない線を揃える

整列は「秩序」を作るルール。
左揃え・右揃え・中央揃えを意識するだけで、統一感が出ます。

ポイント

• 中途半端な位置に配置しない（例：ボタンの位置が微妙にズレる）
• グリッドシステムを活用（FigmaやPhotoshopにあるガイドライン）
• PC・スマホの両方で見たときに整列されているか確認

整列は「無意識に気持ちいい」と感じさせるデザインの基本です。

反復（Repetition）｜統一感を出す

デザイン内で繰り返し同じ要素を使うことで、一貫性が生まれます。

実践例

• ボタンの形や色はページ全体で統一する
• フォントサイズをルール化（例：見出しは24px、本文は16px）
• カラーパレットを3色程度に絞る

反復を意識するだけで「全体がバラけない」「ブランドらしさ」が強調されます。

コントラスト（Contrast）｜強弱でメリハリを

すべてを同じトーンで作ると、情報が埋もれてしまいます。
「ここを読んでほしい」というポイントは、しっかり差をつけましょう。

コントラストの付け方

• 文字サイズ（見出しは大きく、本文は小さめ）
• 色（背景と文字色の明度差を強くする）
• 書体（本文は読みやすいゴシック体、見出しは太字など）

ただし“強調しすぎ”は逆効果。1ページにつき「1〜2箇所の強調」がベストです。

余白（White Space）｜詰め込みすぎない勇気

初心者が最もやりがちなのが「情報を詰め込みすぎる」こと。
しかし、デザインにおいて余白は「空いているスペース」ではなく、
情報を引き立てるためのデザイン要素です。

余白の効果

• 情報に呼吸感を与え、読みやすくする
• 重要な要素を際立たせる
• 高級感や落ち着いた印象を演出できる

「余白＝無駄」ではなく「余白＝洗練」です。

まとめ

レイアウトの基本5原則は、どんなデザインでも通用する普遍的なルールです。

1. 近接：関連する要素は近くに置く
2. 整列：見えないラインを意識する
3. 反復：統一感を出すために繰り返す
4. コントラスト：重要な情報に強弱をつける
5. 余白：空間もデザインの一部と考える

センスに頼るのではなく、この原則を意識することでデザインは一気に「プロっぽさ」に近づきます

#Webデザイン #レイアウトの基本 #デザイン初心者 #デザイン学習 #Web制作勉強中 #デザインのコツ #UIデザイン #デザイン練習 #デザイナーの勉強記録 #見やすいデザイン

Favorite