DESIGN.md — 四季パステル水彩のカラーケアヘア LP（Seasonal Pastel Watercolor Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: パステル水彩・四季の花・手書き英字・ボトル主役・診断チャート・金メダルバッジ
• 地の質感: 水彩のにじみ、花びらが舞う背景、和紙のような淡いグラデーション
• 形: 白い角丸カード、少し傾けた白フチの写真、円形の水彩スポット
• 温度感: 暖かめ。桜ピンクとベージュを基調にして、夏・冬はミントや水色で涼しさを足す

Colors

• ページ全体は桜ベージュと淡ピンクの水彩地を基本にする
• 商品紹介では季節ごとに地色を変える（春はピンク、夏は水色、秋は若草と黄、冬はミントとラベンダー）
• 見出しと本文はこげ茶にして、黒は使わない
• 実績バッジは金のメダル風にする
• ラベルにはブラウン帯や半透明の白帯を使う
• 強調には黄色マーカー帯を使う。商品の色名は濃いこげ茶の極太文字にする

Typography

• 感情に訴える見出しは明朝、商品名は極太ゴシックで、役割に合わせて書体を変える
• 英字の商品名や成分名は手書きスクリプトで斜めや縦に置き、装飾として使う
• 数字（実績や倍数）は周りの文字の 2 倍以上の大きさにする
• 本文は 12px 前後で、行間をゆったり取る
• 注釈は 9px のグレーで、ブロックの右下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とボトルは左右に重ねて配置する
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品ごとに、季節の背景・写真・ボトル・バッジ・説明を同じ型で繰り返す
• 髪の写真は左、ボトルは右に重ね、写真の下に商品名を置く
• 金バッジは右上に固定する
• 成分・製法は、写真の円とテキストを左右交互に並べる
• 6 つの役割は水彩の円を 3×2 で並べる

Elevation & Depth

• 白カードには淡い影を付ける（0 2px 8px rgba(0,0,0,.08)）
• 傾けた写真には白フチと薄い影を付け、ポラロイド風にする
• ボトルの切り抜きにはわずかな落ち影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 白フチ付きで少し傾けた四角、円形の切り抜き、水彩のにじみ形
• セクション境界: 水彩のにじみと花びらで境界をぼかす（直線では区切らない）
• 診断チャートの箱は角丸 8px 前後の白カードにする
• 成分写真は正円に切り抜く
• ラベルは角の小さい帯か、筆跡風の帯にする
• 直線的で硬い枠は避ける

Components

• 金メダル実績バッジ（badge-medal）: 金の円形メダルにリボンを付け、中央に大きな数字を置く
• 診断チャートの箱（chart-box）: 白の角丸箱を YES/NO の矢印でつなぎ、最後に 4 タイプの結果カードを並べる
• ブラウン帯ラベル（label-brown）: 見出しの上に乗せる、こげ茶地に白文字の小さな帯
• マーカー見出し（marker-heading）: 黄色のマーカー帯の上に、手書き風の文字を 2 行で置く
• 傾き写真フレーム（photo-polaroid）: 白フチ付きで -3 度ほど傾けた髪の写真
• 水彩の円ラベル（watercolor-dot）: 淡い水彩の円の中に役割名を置き、3×2 で並べる
• 成分カード（ingredient-card）: 半透明の白カードに、円形の写真・成分名・説明・手書き英字を入れる
• 使い方ステップ（step-number）: 大きな斜体の数字と線画イラストを並べ、下に短い説明を置く

Do's and Don'ts

Do - 季節ごとに背景色と花のモチーフを変え、同じレイアウトを繰り返す - ボトルは切り抜き写真で大きく、斜めに重ねて置く - 手書きの英字を縦や斜めに添えて、雑誌風に見せる - 花びらやにじみを散らして、余白をやわらかくする - 成分は円形の写真と短い効能の文で見せる

Don't - 黒の文字や原色をそのまま使わない - 直線のはっきりした区切りやベタ塗りの帯でセクションを切らない - 角ばった硬い UI パーツを使わない - 背景の写真を濃くしすぎて、文字を読みにくくしない - 本文を長く続けない。3〜4 行で区切る

Page Structure

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

1. ファーストビュー（商品の世界観と実績を伝える）: グレーの地に 4 色のボトルを斜めに配置する。右に明朝のキャッチ、白帯 2 本、虹色の帯、金バッジを置く
2. タイプ診断（自分に合う色を選ばせる）: 虹色の水彩背景に、YES/NO の診断チャートを置き、4 タイプの結果カードで締める
3. 商品紹介（季節別）×4（色ごとの魅力を見せる）: 季節の背景・傾けた髪の写真・ボトル・金バッジ・対象の吹き出し・極太の色名を同じ型で繰り返す
4. トリートメント紹介（セット使いを提案する）: ブラウン帯の見出し、マーカーの『向け』見出し、テクスチャーの写真、香り素材の円 3 つを並べる
5. 知識の解説（タイプ別の考え方を説明する）: 線画の円を 2 つ並べ、カラーパレットの丸を 7 つ入れた白カードを置く
6. ビフォーアフター（効果を実感させる）: BEFORE と AFTER の写真を傾けて並べ、矢印でつなぐ。配合の秘密を円の図と文で添える
7. 原料・製法（こだわりを伝える）: ブラウンのタグで区切り、円形写真の成分カードを左右交互に並べる
8. 香り（使う時間の楽しさを伝える）: トップ・ミドル・ラストの円形写真を三角形に配置し、手書き英字を添える
9. 多機能の訴求（1 本で何役もこなすことを示す）: 大きな数字の見出しに、水彩の円を 6 つ、ボトルを置き、プラス記号でつないだまとめを付ける
10. 使い方（手順を示す）: 線画イラストと大きな数字で 3 ステップを横に並べ、時間バッジを付ける

Imagery

• 商品ボトルは切り抜きで、少し斜めにして存在感を出す
• 髪の写真は背中まで流れるロングヘアで、つやのある色味にする
• 背景は四季の花（桜・朝顔・紅葉・雪の結晶）を水彩で描く
• 成分は果物・植物・液体のアップを円形に切り抜く
• 使い方は細い単色線のイラストで描く
• テクスチャーはクリームのひと塗りや、液体のうねりで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため、以下は推奨。PC では中央 750px 前後に SP デザインを置き、左右には水彩背景を広げる
• 季節別の商品紹介は、PC では写真とテキストを左右 2 カラムにする
• 診断チャートは 4 列のまま横幅を広げる
• 6 つの役割の円は、PC では 6 個を横 1 列に並べてよい

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 行書くと起動時に読み込まれる。