「なんかダサい...」「素人っぽい...」自分で作ったチラシやサイトにそう感じたことはありませんか？実はプロのデザインには明確な法則があります。この5つを意識するだけで、あなたのデザインは劇的に変わります。
RULE 01
余白は友達
初心者が最もやりがちなミスは「スペースを埋めたくなる」こと。白い部分があると不安になって、テキストや画像を詰め込んでしまう。気持ちはわかります。でも、それこそが「素人っぽさ」の最大の原因なのです。
プロのデザインを観察してみてください。Apple、Nike、Muji -- ブランド力のある企業のサイトやカタログは、びっくりするほど余白が多い。余白はコンテンツに呼吸を与え、重要な情報を自然と目立たせる「見えないデザイン要素」です。
具体的なアクションとしては、今のデザインの要素間マージンを1.5倍にしてみましょう。テキストと画像の間、セクションとセクションの間、ボタンの内側のパディング。「ちょっと空きすぎかな？」と感じるくらいがちょうどいい。画面を埋めることに罪悪感を持つ必要はありません。むしろ「余白で語る」ことを覚えれば、デザインの質は一段階上がります。
ちなみに、このサイトもかなりの余白を取っています。セクション間の間隔、テキストの行間（line-height: 2.0）、カードコンポーネントの内側パディング。すべて意図的な設計です。
RULE 02
フォントは2種類まで
見出し用と本文用、最大でも2種類。これは絶対のルールです。3種類以上のフォントを使うと、一気に統一感が失われて素人感が出ます。
「でも、いろんなフォントを使った方がおしゃれじゃない？」 -- いいえ。逆です。プロのデザイナーほど使用するフォントの数は少ない。制約の中で変化をつけるのがプロの腕の見せどころです。ウェイト（太さ）の変化、サイズの変化、文字間の変化 -- 同じフォントファミリーの中でも、これだけの表現ができます。
日本語サイトなら「Noto Sans JP + 英字フォント（Space Grotesk、Inter、Montserratなど）」の組み合わせが鉄板です。このサイトでもNoto Sans JPとSpace Groteskの2種類しか使っていません。それでも十分な表現力があるでしょう？
逆に避けるべきなのは、装飾的な日本語フォント（手書き風、ポップ体など）をむやみに使うこと。使うとしてもアクセント的に1箇所だけ。全体の統一感を壊さない範囲に留めましょう。
RULE 03
色は3色ルール
使う色はメインカラー、アクセントカラー、ベースカラーの3色。これに白・黒・グレーの無彩色を加えるだけ。これ以上の色は不要です。
配色比率の黄金比は60:30:10。ベースカラー（背景色や大面積の色）が60%、メインカラー（ブランドカラーやナビゲーション）が30%、アクセントカラー（ボタンやリンクなどの注目させたい要素）が10%。この比率を守るだけで、配色のバランスは劇的に改善されます。
このサイトの場合は #1A1A2E（ダークネイビー/60%）+ #6C3CE1（パープル/30%）+ #00C9A7（ミントグリーン/10%）。3色だけで、ここまで豊かな表現ができるんです。色を増やすことで「華やか」になるのではなく、「ゴチャゴチャ」になるだけ。思い切って削りましょう。
配色に自信がない方は、Adobe ColorやCoolorsなどの配色ツールを使うのも手。プロが作った配色パレットから選ぶだけで、調和のとれた色使いが実現できます。
RULE 04
整列を徹底する
テキスト、画像、ボタン -- すべての要素を見えない線（グリッド）に揃える。これは「整列」と呼ばれるデザインの4原則のひとつであり、最も効果が大きいルールです。
1pxのズレがデザイン全体の品質を下げる。大げさに聞こえるかもしれませんが、本当にそうなのです。人間の目は微妙な「ズレ」に敏感で、意識していなくても「なんか気持ち悪い」と感じてしまう。逆に完璧に揃っているデザインは、それだけで「プロっぽい」印象を与えます。
実践のコツは、デザインツールのグリッド機能を積極的に使うこと。Figmaならオートレイアウト機能を使えば、要素の間隔が自動的に統一されます。Canvaでもガイドラインが表示されるので、それに合わせて配置するだけ。
特に注意したいのが「中央揃え」と「左揃え」の混在。同じセクション内で、見出しは中央揃え、本文は左揃え、ボタンは中央揃え...というチグハグな配置は、一瞬で素人感が出ます。基本は左揃えで統一し、ヒーローセクションやCTAなど「特別な場所」だけ中央揃えにするのが安全です。
RULE 05
コントラストを恐れない
見出しと本文のサイズ差、背景と文字色の明度差を大きくとる。中途半端な差が最もダサく見えるという法則を覚えてください。
例えば、見出しが18pxで本文が16pxだと、差が小さすぎて「どっちが見出し？」となる。見出しを28px以上にして本文を15pxにすれば、情報のヒエラルキー（優先順位）が一目瞭然になります。中途半端にしない。やるなら思い切って。これがコントラストのコツです。
色のコントラストも同様です。薄いグレーの背景に、もう少し濃いグレーのテキスト -- これは読みづらいだけでなく、デザイン的にも中途半端。白背景に黒テキスト（#333程度）のように、しっかり明度差をつけましょう。WCAG 2.1のコントラスト比4.5:1以上を目安にすると、見やすさとデザイン性を両立できます。
写真の上にテキストを置くときも要注意。暗い写真の上に白いテキスト、あるいは写真にオーバーレイ（半透明の黒や色）をかけてからテキストを配置する。「読めるけど、ちょっと読みにくい」状態は、コントラスト不足のサインです。
BEFORE / AFTER
5つの法則を適用すると
この5つの法則は、個別に適用するだけでも効果がありますが、組み合わせることで相乗効果が生まれます。数字で見てみましょう。
余白を増やしただけで
プロっぽさが増す倍率
使うフォントの上限数
見出し用 + 本文用
配色の黄金比
ベース : メイン : アクセント
この5つの法則だけで、あなたのデザインは確実に変わります。逆に言えば、多くの「ダサいデザイン」はこの5つのどれかを破っているだけ。才能やセンスの問題ではなく、知識の問題。知っているか知らないか、それだけの差です。
デザインセンスは才能ではなく知識。この5つのルールを暗記するだけで、あなたのデザインは確実に変わります。余白を取る、フォントは2つまで、色は3色、整列を徹底、コントラストを恐れない。今日から実践できる、シンプルだけど強力な法則です。