3-3 サイトデザインを CSS で統一する

このレッスンで身につくこと

第 3 章の締めくくりとなるこのレッスンでは、3-1 で設計し 3-2 で増やした複数ページを 1 つのブランドとして見える ようにそろえます。サイトが 1 ページの LP だった頃は気にならなかったことが、ページが 3〜5 枚に増えた瞬間に一気に表面化します。トップは青なのにメニューは緑、ボタンの角丸の度合いがページごとに違う、フォントの大きさが揃っていない、スマホで開いたときの余白がバラバラ — こうした 小さなズレ は、訪問者にとって「なんとなく素人っぽいサイト」という印象を残します。

所要時間 — 約 15 分 難易度 — 星 2（CSS の構造を整理するパート。コードを書く必要はなく、Claude Code への指示で完結する）

なぜデザインの統一が重要か

「動くサイト」と「信頼されるサイト」の境界線は、デザインの一貫性 にあります。中身が同じでも、見た目がそろっているだけで売上やお問い合わせ数が数十パーセント変わる、というのは Web 制作の世界で当たり前に語られる話です。

理由は次の通りです。

1. ブランド感の演出 — 統一されたサイトは「ちゃんとしている」という印象を瞬間的に与えます。逆にページごとに雰囲気が違うと、訪問者は無意識に「個人の手作りサイト」「途中で止まった案件」と感じます
2. 認知負荷の低減 — ボタンの色や形がページごとに違うと、訪問者は「これは押せるのか？」を毎回判断し直す必要があります。デザインがそろっていると、トップで覚えたパターンが他ページでもそのまま使えます
3. 信頼性の担保 — 怪しいサイトは大抵デザインがバラバラです。大手企業のサイトはどのページも統一されています。訪問者は 経験的に学習 しているので、そろっているだけで「ちゃんとした会社」と認識します
4. 運用コストの低下 — 共通 CSS が整理されていれば、「メインカラーを変えたい」と思ったときに 1 箇所変えるだけ で全ページに反映できます

ステップ 1 — 共通 CSS を 1 本に整理する

3-1 と 3-2 でページを増やしてきた段階では、CSS が各 HTML ファイルの中に <style> として書かれていたり、ページごとに別の CSS ファイルになっていたりするかもしれません。まずこれを ==style.css 1 本== に統合します。

実際の作業は Claude Code に任せます。次のように頼んでください。

> 各 HTML ファイルに散らばっている CSS を、すべて style.css に統合してください。
> 各 HTML からは style.css を <link> で読み込むだけにして、
> <style> ブロックは削除してください。
> ページ固有のスタイルがある場合は、style.css 内で
> /* ===== about ページ ===== */ のようにコメントで区切ってまとめてください。

このとき、もし「ページ固有の調整」が混ざっていても、Claude Code が 自動で共通部分とページ固有部分を分けて くれます。あなたは結果を確認するだけで OK です。

ステップ 2 — CSS 変数でカラーパレットを一元化する

CSS を 1 ファイルにまとめても、色やフォントサイズが直書きで散らばっている とまだ修正が大変です。たとえば「ボタンとリンクとロゴで全部 #0AA5D4 を使っている」場合、「やっぱり緑に変えたい」と思ったら 3 箇所書き換えなければなりません。これが 10 箇所、20 箇所と増えると、もう手では追いきれなくなります。

CSS 変数（カスタムプロパティ） を使うと、色やサイズに 名前を付けて 1 箇所で定義 できます。

:root {
  --color-primary: #0AA5D4;
  --color-secondary: #0369A1;
  --color-accent: #F59E0B;
  --color-text: #1E293B;
  --color-bg: #ffffff;
  --font-base: 16px;
  --font-h1: 32px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --radius: 8px;
}

定義したら、CSS の中では color: var(--color-primary); のように参照します。これで ==:root の 1 行を書き換えるだけ== でサイト全体の色やサイズが変わります。

Claude Code への指示は次の通りです。

> style.css の冒頭に :root { } ブロックを追加し、
> 使われている色・フォントサイズ・余白を CSS 変数に定義してください。
> 既存の CSS の中の直書き値は、すべて var(--xxx) に置き換えてください。
> 変数名は --color-primary / --color-secondary / --space-md のように
> 用途がわかる名前にしてください。

このリファクタを 1 回やっておくと、以降の調整が 圧倒的に楽 になります。

ステップ 3 — デザイントークンの考え方

CSS 変数をもう一歩進めると デザイントークン になります。プロのデザインシステムでも使われている整理術で、色・余白・フォント・角丸を用途別にカテゴリ分けして名前を付ける ことです。

おすすめの最小セットは次の通りです。

余白を「スケール」で持っておく のがコツです。4 / 8 / 16 / 32 / 64 のように 2 倍ずつ の階段にしておくと選択肢が減って迷わなくなります。デザインのプロが「8px グリッド」と呼ぶ手法です。

> CSS 変数を整理して、デザイントークンの形にしてください。
> カラー 6 種、余白 5 段階（4 / 8 / 16 / 32 / 64px）、
> フォントサイズ 4 種、角丸 3 種で揃えてください。

ステップ 4 — 共通コンポーネントを統一する

色とフォントがそろったら、次は コンポーネント単位 でそろえます。具体的には次の 4 つが特に重要です。

1. ヘッダー（グローバルナビ） — 全ページの最上部に同じ高さ・同じロゴ・同じメニューが並ぶ
2. フッター — 全ページの最下部に同じ会社情報・著作権表記・SNS リンクが並ぶ
3. ボタン — どのページの CTA も、同じ色・同じ角丸・同じホバー挙動
4. カード — 商品紹介・実績紹介で使う四角い枠が、全ページで同じ余白・同じ角丸・同じ影

ヘッダーとフッターは特に重要です。訪問者は最初にヘッダーを見て、最後にフッターを見ます。ここがページごとに違うと「別サイトに飛ばされた？」と一瞬戸惑います。

Claude Code への指示は次のように切り分けます。

> 全ページのヘッダーを統一してください。
> 構造: 左にロゴ、右にナビ（ホーム / メニュー / 店舗情報 / お問い合わせ）。
> 高さ 64px、背景は白、影は控えめに。
> 全 HTML ファイルで同じヘッダーになるようコピーしてください。

> 全ページのフッターを統一してください。
> 中身: 会社名 / 住所 / 電話 / メール / 著作権表記。
> 背景は --color-text、文字色は白、上下 32px の余白。
> 全 HTML ファイルで同じフッターをコピーしてください。

> ボタンのスタイルを .btn クラスに統一してください。
> 全ページの <a class="btn"> と <button class="btn"> が同じ見た目になるように。
> 背景 --color-primary、文字色は白、角丸 --radius-md、
> ホバー時は少し濃い色 + ふわっと浮き上がるアニメーション。

> カードのスタイルを .card クラスに統一してください。
> 背景白、角丸 --radius-md、影は薄く、padding は --space-md。
> 全ページのカードがこのクラスを使う形に整理してください。

ステップ 5 — レスポンシブブレークポイントを統一する

スマホ・タブレット・PC で見え方を切り替える メディアクエリ の境界値（ブレークポイント）も、ページごとにバラバラだと崩れの原因になります。

最小限の指針は次の通りです。

この 2 段階だけで実用上は十分です。細かく刻みすぎない のがコツです。

Claude Code には次のように頼みます。

> 全ページのメディアクエリを 2 段階に統一してください。
> @media (max-width: 640px) でスマホ用、
> @media (max-width: 1024px) でタブレット用、
> デフォルトを PC 用にしてください。
> 既存の中途半端なブレークポイント（750px とか 900px）は削除して、
> 上記 2 段階に整理し直してください。

スマホで特に確認すべきポイントは ナビゲーション と フォーム の 2 つです。ハンバーガーメニューが指で押せる大きさになっているか、フォームの入力欄が画面からはみ出ていないか — この 2 つさえチェックすれば、ほぼ事故は防げます。

> スマホ表示（横幅 375px / 640px）で、
> ハンバーガーメニューが指で押せる大きさ（最低 44px 四方）か、
> フォームの入力欄が画面端からはみ出ていないか、
> 文字が小さすぎないか（最低 14px）、
> 全ページ通しで確認して、問題があれば修正してください。

ステップ 6 — タイポグラフィの統一

文字まわりも、ページごとに違うと一気に「素人っぽい」印象になります。次の 5 つは 全ページで同じ にそろえます。

• 見出しの大きさと太さ — H1 / H2 / H3 のサイズと font-weight
• 本文の行間 — line-height（推奨 1.7 前後、読みやすさが段違い）
• リンクの色と下線 — マウスオーバー時の挙動も含めて統一
• フォントファミリー — 日本語サイトなら「Noto Sans JP」「ヒラギノ角ゴ」あたりを 1 つだけ使う
• 文字色のコントラスト — 本文は --color-text、補足は --color-muted のように使い分け

> 全ページのタイポグラフィを統一してください。
> フォントファミリーは "Noto Sans JP", sans-serif で統一。
> body の line-height は 1.7、文字色は --color-text。
> H1 は 32px / 700、H2 は 24px / 700、H3 は 20px / 600。
> リンクは --color-primary、ホバー時に下線。
> 補足テキスト（.muted クラス）は --color-muted。

ステップ 7 — ホバーとトランジションの一貫性

ボタンやリンクの マウスオーバー時の挙動 も、地味ですが統一感を左右する要素です。

ありがちな失敗は、トップページのボタンだけ「ふわっと浮き上がる」アニメーションで、他ページのボタンは「色がパッと変わるだけ」になっているケース。動きの スピード感 や 気持ちよさ が違うと、訪問者は無意識に違和感を感じます。

> 全ページのホバー・トランジションを統一してください。
> ボタンとリンクは transition: all 0.2s ease;
> ホバー時はボタンが 2px ふわっと上に浮き、影が少し濃くなる。
> カードは hover で 4px 上に浮き、影が大きくなる。
> 速度・イージングを揃えて、ページごとに違わないようにしてください。

これだけで「いいサイトだな」と感じる確率がぐっと上がります。細部の動きの統一 は、デザインの上級者がやっている地味な仕事です。

ステップ 8 — まとめ指示テンプレ

ここまでの作業を Claude Code に一気に頼むときの テンプレ指示 です。コピペして使ってください。

> 全ページの CSS を style.css 1 本に統合し、
> 各 HTML から <link rel="stylesheet" href="style.css"> で読み込む形にしてください。

> style.css の冒頭に :root { } でデザイントークンを定義し、
> カラー 6 種・余白 5 段階・フォント 4 種・角丸 3 種を変数化、
> 既存の直書き値はすべて var(--xxx) に置き換えてください。

> 全 HTML のヘッダー・フッター・ボタン・カードを統一してください。
> .btn と .card を共通クラスとして style.css に定義し、
> 全ページで同じ見た目・同じホバー挙動になるよう整えてください。

> サイト全体を最終レビューしてください。
> デザインの統一感 / レスポンシブの崩れ / リンクの動作 / 誤字脱字を
> 全ページ通してチェックし、問題点と修正案を提示してください。

ステップ 9 — 最終チェックの通し見

ここまでの作業が終わったら、全ページを順番に開いて目で見て チェックします。Claude Code に頼んだだけで満足せず、必ず自分の目で確認してください。

通し見のときの観点は次の通りです。

1. 同じ位置にヘッダーがあるか — トップで右上にあった「お問い合わせ」ボタンが、サブページでは消えていないか
2. 同じフッターがあるか — 著作権表記の年号が古いままになっていないか
3. ボタンの形と色が同じか — トップは丸ボタン、サブページは角ばっているなどの不一致がないか
4. 見出しの大きさが揃っているか — H1 がページごとに違う大きさになっていないか
5. 余白が大きすぎず小さすぎないか — セクション間が詰まりすぎ、または空きすぎていないか
6. スマホでハンバーガーメニューが押せるか — タップ領域が指より小さくないか
7. フォームが画面からはみ出していないか — スマホで入力欄が右端から飛び出していないか
8. 画像が壊れていないか — 404 になっている画像、まだ placeholder のままの画像がないか

この観点で全ページを通すと、必ず 1〜2 個は気になる箇所 が出てきます。それを 1 行ずつ Claude Code に指示して直してもらえば、サイトは一気に完成度の高い見た目になります。

<Checklist items={["全ページの CSS が style.css 1 本に統合されている","カラー・余白・フォントサイズが CSS 変数で一元管理されている","ヘッダー・フッターが全ページで同じ構造・同じ見た目","ボタンとカードのスタイルが共通クラスで統一されている","メディアクエリのブレークポイントが 640px / 1024px の 2 段階にそろっている","タイポグラフィ（フォント・行間・見出しサイズ）が全ページで統一されている","ホバーとトランジションの挙動がページごとにバラバラになっていない","スマホ表示でハンバーガーメニューとフォームに問題がない","全ページを通し見して違和感のある箇所を 1 つ以上修正した"]} />

まとめ

このレッスンで押さえてほしいことを 6 つ並べます。

1. デザインの統一はセンスではなく仕組み — 共通 CSS + CSS 変数の構造で実現する
2. 共通 CSS は ==style.css 1 本== にまとめ、全 HTML から <link> で読む
3. CSS 変数で カラー・余白・フォント・角丸 をデザイントークン化する
4. ヘッダー・フッター・ボタン・カードは 共通コンポーネント として全ページで使い回す
5. ブレークポイントは 640px / 1024px の 2 段階 に統一する
6. 最後は 自分の目で全ページを通し見 して、違和感を 1 つ以上潰す

<Quiz question="複数ページのデザインを統一する際、最も効果が大きい仕組みは次のうちどれですか？" options={["CSS 変数でカラーパレットや余白サイズを一元管理し、style.css 1 本にまとめる","ページごとに別の CSS ファイルを作り、それぞれで色を直書きで指定する","見た目はページごとに好みで変えて、訪問者が飽きないようにする"]} answer={0} />

<Quiz question="レスポンシブのブレークポイント（メディアクエリの境界値）の設計として推奨されるのはどれですか？" options={["ページごとに違うブレークポイントを設定し、デザインに合わせて細かく刻む","640px と 1024px の 2 段階に統一し、全ページで同じ境界値を使う","スマホ専用 CSS を別ファイルに分けて、PC 版とは完全に独立させる"]} answer={1} />

第 3 章はこれで完了です。複数ページを 1 つのブランドとして見える状態に揃え終わりました。次は最終章の 4-1: ホスティングサービスを選ぶ に進みます。手元で動くサイトを 世界中からアクセスできる URL に載せるステップに入ります。

次のステップ

• 4-1: Web サイト公開先の選び方 — 第 4 章の入口。揃えたサイトをいよいよ世に出すホスティング選定の章です
• 3-1: ホームページのページ構成設計 — サイト構成の決定プロセスに不安が残る方は、章の冒頭に戻って組み立て直せます
• 2-3: Claude Code で LP デザイン調整 — CSS の統一感が物足りないときは、LP 章のデザイン調整パターンを参照できます