HTMLとCSSでコードは完璧に書けるようになった。
でも、出来上がったサイトを見てこう思いませんか？
「機能は動いているけど、なんか…ダサい？」
その原因は、あなたのセンスが悪いからではありません。
「デザインの基本ルール」を知らないだけです。
Webデザインはアート（芸術）ではなく、情報の設計です。
今回は、守るだけで一気にプロっぽくなる「4つの鉄則」を紹介します。
1. 配色は「3色」に絞る
初心者が一番やりがちなミス。それは「色を使いすぎること」です。
色は使えば使うほど、サイトは安っぽく、まとまりがなくなります。
プロは「70：25：5の法則」を使って色を決めます。
| 役割 | 比率 | 説明 |
|---|---|---|
| ベースカラー | 70% | 背景色。白、薄いグレー、薄いベージュなど。 主役を邪魔しない色にします。 |
| メインカラー | 25% | サイトのテーマ色。ロゴの色や、ブランドのイメージカラー。 見出しやイラストなどに使います。 |
| アクセントカラー | 5% | 注目させたい色。「お問い合わせボタン」など。 メインカラーの「反対色（補色）」を使うと目立ちます。 |
【アドバイス】
「真っ黒（#000000）」は自然界に存在しない強い色なので、Webでは目に優しくありません。
文字色には「濃いグレー（#333333 や #444444）」を使うのが今の主流です。
2. 「余白」こそが高級感を作る
「情報を詰め込んだほうが親切だ」と思っていませんか？ 逆です。
余白（ホワイトスペース）がないサイトは、ユーザーに圧迫感を与えます。
脱・初心者のための余白ルール
- 詰め込みすぎない： 要素同士の距離（margin）は、思っている「2倍」空けてちょうどいいです。
- 関係性を意識する：
- 関係が深いもの（画像とキャプション）は近くする。
- 関係が薄いもの（前のセクションと次のセクション）は大きく離す。
高級ブランドのサイトを見てください。スカスカに見えるほど余白がありますよね？
「余白＝ゆとり＝高級感」なのです。
3. 画像は「クオリティ」で殴る
残酷な真実ですが、「写真が良いだけで、サイトはプロっぽく見えます」。
逆に、どんなに凄いコードを書いても、写真がボケていたり、素人撮影の暗い写真だと、サイト全体の評価が下がります。
鉄則：高品質なフリー素材を使う
自分で撮影するのが難しければ、プロが撮った高品質なフリー素材を使いましょう。
以下のサイトがおすすめです。
- Unsplash（アンスプラッシュ）： 海外のおしゃれで高画質な写真が多い。これを使うだけでカフェサイトなどが一瞬で作れます。
- O-DAN（オーダン）： 複数のフリー素材サイトを一括検索できる便利なサイト。
文字を乗せる時のテクニック
写真の上に文字を乗せると、読みづらくなることがあります。
そんな時は、前回のチュートリアルでもやった「画像を暗くする（フィルター）」技を使いましょう。
/* 画像の上に黒の半透明を重ねる */
background-color: rgba(0, 0, 0, 0.5);4. 文字は「ジャンプ率」で読ませる
すべての文字が同じ大きさだと、どこが重要なのか分かりません。
見出しと本文のサイズ差（ジャンプ率）を極端につけることで、メリハリが生まれます。
- 見出し（h1, h2）： 大きく、太く！思っているより大胆に。
- 本文（p）： 読みやすいサイズ（16px前後）で控えめに。
フォント選びのコツ
- ゴシック体（Sans-serif）： 親しみやすい、モダン、デジタル向き。
- 明朝体（Serif）： 高級感、和風、伝統的、真面目。
Webサイトでは、基本は読みやすい「ゴシック体」を使い、高級感を出したい見出しだけ「明朝体」にするのが王道です。
まとめ：デザインは「引き算」
エンジニアは「機能」を足し算したがりますが、デザインは「引き算」です。
- 色を増やさない（3色まで）。
- 余計な線を引かない（余白で分ける）。
- 文字を詰め込まない。
この3つを意識するだけで、あなたの作るWebサイトは見違えるほど洗練されます。
ぜひ次のコーディングで試してみてください！