LPの見た目を、ルールとして残す。

「いい感じ」を、次も再現できるルールに。

UNIT 07では、スマホで見ても読みやすいかを確認しました。今度は、その見た目を次の修正でも保てるようにします。新しいデザインを作り直す回ではありません。

この UNIT の依頼文は、2026年11月12日に Windows 10 Home のパソコンで、Claudeアプリの Code に実際に送って確かめたものです。返事の引用は、そのときの会話の記録から写しています。ページの写真は、同じパソコンの Microsoft Edge を画面を出さない形で動かして撮ったページの表示です（Edge の枠は写っていません）。

ルールがないと、ページの中で見た目がばらつく。

例の2つのカードは、同じサービスの説明です。色や文字、ボタンの形が毎回違うと、ひとつのサイトなのに別々のページのように見えます。

ここで学ぶのは配色の専門知識ではありません。「文字の役割」「色の役割」「形の統一」を言葉にして残すことです。

今の index.html にある値だけで、決まりを書き出してもらう。

1. ClaudeアプリのCodeで、サイドバーの「新規作成」から新しいセッションにし、UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。
2. 入力欄の下にlp_learning、右側に「手動」と出ているかを見ます（UNIT 06の写真1と同じ画面です）。
3. 下の1通目をコピーして貼り、文の先頭が1通目になっているかを見てから送ります。

タップ・クリックで拡大

現在選択している lp_learning フォルダの中にある brief.md と、lp_sample フォルダの index.html を読み、
このLPの見た目の決まりを書き残す DESIGN.md の内容を考えてください。

作成するファイルは、lp_sample フォルダの中の DESIGN.md の1つだけです。

書く内容は次のとおりです。
- この決まりを使うページ（lp_sample の index.html）
- 色：index.html で実際に使っている色の番号と、何に使っているか
- 文字：フォントの指定と、見出し・本文の大きさ
- 余白・角丸・ボタンの決まり
- スマホの幅（375px）で確かめること
- 実績、利用者の声、価格、保証などを創作しないこと

新しい色や決まりを想像で作らず、今の index.html に書かれている値だけを使ってください。index.html から分からないことは「未確認」と書いてください。
brief.md、start.md、lp_sample の index.html は変更しないでください。ほかのファイルは作成・変更・削除しないでください。
コマンドの実行、公開、外部への送信はしないでください。
まず、DESIGN.md に書く内容と作成するファイルの場所を示して、私の確認を待ってください。
まだファイルは作成しないでください。

この1通目は読むだけなので、この教材の確認では許可の確認は出ませんでした。Claudeは brief.md と index.html を読み、色・文字・余白・ボタンの決まりの案と、作る場所（lp_sample の中の DESIGN.md）を示して止まりました。

案を見るときは、次の3つを確かめます。

• 色の番号が、index.html に書かれている値になっていること（新しい色が足されていない）
• 分からないことが「未確認」と書かれていること
• 実績・利用者の声・価格・保証を創作しない決まりが入っていること

この教材の確認では、案に書かれた色は8つで、index.html にある色とちょうど同じでした（ORIHATAが index.html の中の色を全部取り出して比べました）。文字の大きさ・余白・角丸の値も、すべて index.html に書かれていました。「未確認」は、ダークモード・本文の文字の大きさ・375pxでの実際の見え方の3か所でした。UNIT 07で直したボタンの色（#b8452c）と、マウスを乗せても色が変わらないことも、そのまま書かれていました。

見た内容でよければ、1つのファイルだけを作ってもらう。

提示された内容どおりに、lp_sample フォルダの DESIGN.md を作成してください。

作成してよいのは、lp_sample フォルダの中の DESIGN.md だけです。

brief.md、start.md、lp_sample の index.html は変更しないでください。

コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。

1. 「Claude に DESIGN.md の書き込みを許可しますか？」と出たら、ファイル名が DESIGN.md で、場所が lp_sample かを見ます（新しいファイルなので「書き込み」です。UNIT 05と同じ種類の確認です）。
2. よければ「一度だけ許可」を押します。この教材の確認では、確認は1回でした。

タップ・クリックで拡大

できた DESIGN.md は、エクスプローラーで lp_sample を開き、右クリック →「プログラムから開く」→「メモ帳」で読めます。この教材の確認でできたファイルの「色」の部分は、次のとおりでした。

## 2. 色（`:root` で決めている値）
| 名前 | 値 | 使っている場所 |
|---|---|---|
| `--bg` | `#fbf8f4` | ページ全体の背景、サービス内容と利用の流れのカード、見本画像の背景 |
| `--surface` | `#ffffff` | サービス内容のセクション、背景が白い追加セクション（`--surface`）、特徴カード |
| `--text` | `#2a2522` | 本文の文字色、ボタンにフォーカスしたときの枠線 |
| `--muted` | `#6b625c` | 補足文、※注記 |
| `--accent` | `#d9573b` | ブランド名の前の四角、サービスカード左の太線、見本画像の上の帯 |
| `--accent-dark` | `#b8452c` | ボタンの背景、カードの小見出し（ラベル・ステップ番号） |
| `--line` | `#ece4dc` | 区切り線、カードの枠線、見本画像の線 |
| （直接書かれた値） | `#fff` | ボタンの文字色 |

- ボタンにマウスを乗せたときの色も `--accent-dark` で、通常時と同じです（見た目は変わりません）。
- ダークモード用の色：未確認（指定がありません）

この教材の確認でできた DESIGN.md には、「この決まりを使うページ・色・文字・余白と角丸とボタン・スマホの幅（375px）で確かめること・創作しないこと」の6つの見出しがありました。brief.md・start.md・index.html は変わっていませんでした。

次に見た目を直すときは、DESIGN.md を読んでもらう。

DESIGN.md は、見た目を自動で変える仕組みではなく、Claudeと自分が同じ決まりを見るための説明書です。次に見た目を直すときは、依頼文に「lp_sample の DESIGN.md を読み、その決まりに沿って」と書き足します（この1行を足した依頼は、この教材では確かめていません）。

うまくいかないときの対処。

公式資料：デスクトップアプリを始める。サービスの仕様や画面は変わることがあります（2026年11月12日に確認）。

ルールを残せたら、このUNITは完了。

チェックはこの画面上の自己確認用です。Codeの実行結果を自動で調べているわけではありません。