DESIGN.md — 生成りクリームと金茶の上品ヘアカラー LP（Creamy Beige Gold Hair Color LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: クリーム質感・金茶グラデーション・明朝見出し・白カード・大人女性
• 地の質感: 泡やクリームのなめらかな波を写した背景と、柔らかな光のにじみ
• 形: 角丸はほぼ使わない四角いカードと円形の切り抜き写真。斜線で挟んだ見出し
• 温度感: 暖色寄りの生成りとベージュで、温かく上品

Colors

• 白・生成り・クリーム黄・ベージュの地色をセクションごとに切り替え、境界は色の差だけで分ける
• 金茶は帯、番号、手書きの英字にだけ使い、広い面には使わない
• 強調語は金色の文字か淡い黄色のマーカーで示し、赤などの強い色は使わない
• 見出しは黒に近い焦げ茶にし、純黒は使わない
• 濃いグレーはフッターだけに使う
• bubble-copy は文字 #C9A063 × 背景 #FDF3DB のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8D6831、4.58:1）を使う。

Typography

• 見出しは明朝体で字間を広めに取る
• セクション見出しの上に、小さな英字ラベルを薄い文字色で置く
• 番号は手書きの英字と大きな数字を重ね、両側に細い線を引く
• 本文は中央揃えで短く改行する
• 強調語は金色の文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 1 列（PC は 2 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央に置き、上下の余白を大きく取る
• 特長は写真と文章を左右交互に並べる（SP では縦に積む）
• 補足の特長は白いカードを 2×2 に並べ、上に文章、下に写真を置く
• 使い方は 4 ステップを線画アイコンと短い説明で 2×2 に並べる
• メディア掲載とコラムは横スクロールのカード列にする

Elevation & Depth

• カードはほぼ影なしで、白い面を地色との差で浮かせる
• FV の商品写真だけ、ごく薄い落ち影をつける
• 通販サイトへのボタンは白地に薄い影をつける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い切り抜きが基本。髪や人物の写真は円形にし、白いふちを付ける
• セクション境界: 直線。地色の切り替えだけで分ける
• 見出しは左右の斜線で挟む
• チェック項目は四角いベージュの帯にする
• 円グラフ風のリングで数値を見せる
• 角は鋭く保ち、ポップな丸みは避ける

Components

• FV 下の金茶帯（fv-band）: FV の下端に金茶の横帯を敷き、短い価値訴求を白い明朝体で載せる
• 斜線見出し（heading-slash）: 見出し語を左右の細い斜線で挟んで中央に置く
• ポイント番号（point-number）: 金色の手書き英字に大きな数字を重ね、両側に細い線を引く
• 白い特長カード（feature-card）: 白いカードに、上は明朝の見出しと説明、下は写真を全幅で置く
• マーカー付きの短いコピー（bubble-copy）: 円形の写真の周りに、金色の文字と黄色マーカーの短い訴求を散らす
• チェック帯（check-bar）: ベージュの帯の左にチェックアイコンを置き、体験の特徴を 1 行で書く
• 色見本チャート（color-chart）: 茶系のチップを格子状に並べ、選んだ色の仕上がり写真と色名を横に出す
• 通販サイトボタン（shop-button）: 白地に薄い影をつけ、ロゴを中央に置いた横長ボタンを 3 つ並べる
• 使い方ステップ（step-item）: 線画のイラストアイコンの横に、STEP 番号・見出し・説明を置く

Do's and Don'ts

Do - 地色はクリーム・生成り・ベージュの近い色で切り替える - 見出しは明朝体にし、余白を大きく取る - 強調は金色とマーカーに絞る - 泡やクリームの質感写真を背景に使い、なめらかさを伝える - 人物写真は笑顔でナチュラルな光のものにする

Don't - 原色の赤や青で強調しない - 太い角丸やポップなピル型ボタンを使わない - 純黒の文字や濃い背景を本文エリアに使わない - 装飾フォントを本文に使わない - カードに強い影をつけない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品とイメージモデルで印象を作る）: クリームの波の背景に明朝の大見出し、商品、笑顔の人物を置き、下端に金茶の帯を敷く
2. ページ内ナビ（各セクションへの導線）: 細い縦線で区切ったテキストリンクを横に並べる
3. 価値の要約（特長を一目で伝える）: 円形の写真の周りに、マーカー付きの短いコピーを散らして配置する
4. 商品紹介と動画（商品の外観と CM 動画を見せる）: 白地に商品写真と仕様を左右に並べ、その下に動画を中央に置く
5. 商品特長（主要なポイントを詳しく説明する）: 手書き風の番号と明朝見出しを使い、写真と文章を交互に並べる
6. 満足度・お客様の声（社会的な証明）: 大きな % のリングを中心に置き、口コミカードをその周りに配置する
7. 追加の特長（補足のメリットを伝える）: 光がにじむ背景の上に白いカードを 2×2 で並べる
8. 悩みの提起（共感を得て動画へ誘導する）: 斜線見出しの下に、動画カルーセルを置く
9. カラーバリエーション（色を選ばせる）: 白いパネルに色見本チャートと仕上がり写真を置く
10. 使い方（手順を示し、不安を解消する）: 動画の下に、線画のアイコンで 4 ステップを並べる
11. 商品詳細（セット内容と仕様を示す）: 円形に切り抜いた付属品の写真と、仕様のリストを並べる
12. メディア掲載・コラム（信頼性と回遊）: ベージュ地にメディア名と要約を並べ、コラムは横スクロールのカードにする
13. 購入導線（購入につなげる）: 斜線見出しの下に通販サイトボタンを 3 つ並べ、SNS アイコンを添える
14. フッター（サイト内リンク）: 濃いグレー地に白文字のリンクを多段に並べる

Imagery

• 白い泡やクリームが波打つマクロ写真を背景に使う
• 大人の女性の上品な笑顔を、柔らかい自然光で撮る
• 白い手袋で泡を扱う手元を、ベージュ背景で写す
• つやのある茶髪のアップを円形に切り抜く
• 使い方の説明は細い線画のイラストにする
• 背景に虹色の光のにじみを薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 720px の本文幅、SP は画面幅の 90% にする
• PC の 2×2 カードと左右交互のレイアウトは、SP では 1 列に積む
• FV は SP では人物と商品を上、大見出しを下に置く
• 色見本チャートは SP では横スクロールさせるか、チップを縮小する
• 通販ボタンは SP では縦に積む

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。