AIツールで見た目の統一感を整える

レストランのメニューを想像してみてください。前菜は和風の皿、メインは洋食のプレート、デザートは中華の器……いろんな雰囲気が混ざっていると、「このお店は何のお店なんだろう？」と迷ってしまいますよね。

Webサイトも同じです。ページごとに色や文字の大きさがバラバラだと、訪れた人が「ここは何のサイト？」と混乱してしまいます。

このレッスンでは、AIツール（＝あなたの指示でコードを書いてくれる助手）を使って、サイト全体の見た目を「ひとつの世界観」にまとめる方法を学びます。所要時間はおよそ15分です。

このレッスンを始める前に、次の条件を満たしているか確認しましょう。

• すでに基本的なホームページ（＝サイトの入り口となるページ）ができている
• AIコーディングツール（Claude Code、Codex CLI、Cursor のいずれか）が使える状態になっている

まだの方は、先に「ホームページを作る」レッスンを終えてから戻ってきてください。

まずは、あなたのサイトのどこがバラバラになっているかを把握しましょう。これは料理で言えば「冷蔵庫の中身を全部テーブルに出してみる」作業です。

AIツールに次のように聞いてみてください。

Claude Code / Codex CLI の場合（ターミナルで入力）:

今のサイトのCSSファイルとコンポーネントを確認して、以下の4項目がバラバラになっている箇所をリストアップして。
1. 色（カラーコード）
2. フォントサイズ
3. ボタンの見た目（角丸・背景色・サイズ）
4. 余白（margin/padding）の値

表形式で「ファイル名 / 項目 / 現在の値」をまとめてください。

Cursor の場合: ファイルツリーでプロジェクトフォルダを開き、Cmd+L（Mac）またはCtrl+L（Windows）でチャットを開いて、同じ内容を貼り付けます。

ChatGPT の場合: サイトのスクリーンショットを添付して「この2ページで色・フォント・ボタンの見た目がバラバラな箇所を教えてください」と聞きます。

良い例と悪い例

• 良い例: 「ボタンの色が3種類（#2563EB、#16A34A、#EF4444）、角丸が2種類（4pxと8px）使われています。トップページは青ボタン、お問い合わせページは緑ボタンです」
• 悪い例: 「デザインに問題があります」（どこがどうバラバラなのか分からない）

AIの回答が曖昧だった場合は、「具体的にどのファイルの何行目か教えて」と追加で聞きましょう。

バラつきが分かったら、全体で使う「ひとつのルール」を決めます。料理で言えば「今日のメニューはすべてイタリアンで統一」と決めるようなものです。

次のようにAIツールに指示して、ルールをまとめたファイルを作ってもらいましょう。

site-style-guide.md というファイルを新しく作ってください。中身は次の通りです：

# サイトスタイルガイド

• メインカラー：#2563EB（青）
• サブカラー：#F59E0B（オレンジ）
• 背景色：#FFFFFF（白）
• テキスト色：#1F2937（濃いグレー）

• ページタイトル：32px
• セクション見出し：24px
• 本文：16px
• 補足テキスト：14px

• 角丸：8px
• 背景色：メインカラー（#2563EB）
• 文字色：白（#FFFFFF）
• 高さ：44px以上（スマホでも押しやすいサイズ）

• セクション間：32px
• 要素間：16px
• ページ左右の余白：16px（スマホ）/ 32px（PC）

> **ヒント**: 色が決まらないときは、AIに「私のサイトのロゴの色に合う配色を3パターン提案して」と聞くと便利です。

### 良い例と悪い例

- **良い例**: 色コード、サイズ、余白の数値をすべて具体的に書く
- **悪い例**: 「きれいにして」だけ（AIがどう直せばいいか分からない）

ルールが決まったら、実際にサイトのコードを書き換えます。

一度にすべてを直そうとするとAIが混乱することがあります。ページごとに分けて指示するのがコツです。

ステップ1: まず共通のスタイルファイルから統一します。

site-style-guide.md を読んで、globals.css（サイト全体の見た目を設定するファイル）のカラーコードとフォントサイズをスタイルガイドの値に統一してください。変更前と変更後を見せてください。

ステップ2: 次にページ単位で修正を進めます。

site-style-guide.md のルールに従って、トップページの見た目を統一してください。特にボタンの色・角丸・余白を揃えてください。

ステップ3: 残りのページにも同じ要領で適用します。

site-style-guide.md のルールに従って、[ページ名]ページの見た目を統一してください。

Cursorを使う場合: Cmd+K（Mac）またはCtrl+K（Windows）でインラインエディットモードにして、修正したいCSSファイルを選んだ状態で「スタイルガイドに合わせて色を統一して」と指示できます。

AIの作業が終わったら、ブラウザ（＝インターネットを見るためのアプリ）でサイトを開いて確認します。

開発サーバーが動いていれば、ブラウザで http://localhost:3000 を開いてください。動いていない場合は、AIに「開発サーバーを起動して」と伝えましょう。

次の4つのポイントを、すべてのページを行き来しながらチェックしましょう。

確認のコツ: ブラウザのタブを2つ開いて異なるページを並べると、違いが見つけやすくなります。

もしバラつきが残っている箇所を見つけたら、AIに「このボタンの色がスタイルガイドと違うので直して」とピンポイントで指示しましょう。

AIが全部を一度に直そうとしてエラーになる

ページごとに分けて指示すると安定します。「まずトップページだけ直して」と範囲を絞りましょう。それでもうまくいかない場合は「globals.css だけ修正して」とファイル単位で絞ってみてください。

直したら別のページが崩れた

共通のスタイルファイル（globals.css など＝複数ページで共有する見た目の設定ファイル）を先に直すとこの問題を防げます。個別ページのスタイルは後から調整しましょう。

色の好みが決まらない

最初は気に入っている有名サイトの配色を真似するのがおすすめです。AIに「Notion風の落ち着いた配色を提案して」のようにお手本を伝えると、具体的な色コードを出してくれます。

AIの修正が意図と違う

「変更前と変更後を見せて」「変更理由も教えて」と伝えると、AIが何をどう変えたか確認できます。おかしい箇所があればその場で「ここは元に戻して」と指示できます。

このレッスンを終えると、以下が手元に残ります。

1. site-style-guide.md — サイト全体のデザインルールをまとめたファイル
2. 統一されたサイト — 全ページで色・文字サイズ・ボタン・余白が揃った状態

スクリーンショットを撮って、修正前と修正後を比べてみましょう。「自分のサイトにプロっぽい統一感が出た！」と実感できるはずです。