DESIGN.md — パステル虹色×金縁の和華風アニメコラボ化粧水LP（Pastel Gradient Anime Collab Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、和風、やさしい・柔らかい、上品・高級
• キーワード: パステルグラデーション・金の細枠・中華・和の装飾・キャラクター配置・明朝見出し・白い花の散らし
• 地の質感: なめらかなグラデーションの面に、白い小花や細い金線を散らして軽く華やかにする
• 形: 角に飾りが付いた金の細枠、ピル型の検索バー、円形の成分バッジ、リボン型の見出し帯
• 温度感: 暖色ピンクから寒色の水色までを順に移り、全体はやわらかく明るい

Colors

• 地はピンク→黄→黄緑→黄→水色→ピンクと縦にゆるく移るパステルグラデーションにする
• 情報ブロックは白い面か白の半透明帯に載せ、地の色と分ける
• 見出しは紺かマゼンタ、成分の訴求は赤を使う
• 金色は枠線・角飾り・ちょうちんなど装飾だけに使う
• 購入ボタンは虹色グラデ、販売店ボタンは紺青グラデで区別する
• 本文は濃い灰で、強調は紺の下線付きテキストにする
• badge-ingredient は文字 #FFFFFF × 背景 #B9D8E1 のコントラスト比が 1.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#5B5B5B、4.52:1）を使う。
• speech-bubble は文字 #FFFFFF × 背景 #C9A54A のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8F732B、4.51:1）を使う。

Typography

• 大見出しは明朝で、字間を少し広げて古風さを出す
• ポップな訴求見出しは太い丸ゴシックに白フチを付ける
• 見出しの中の助詞は小さくし、キーワードを大きくする
• 本文は中央揃えで短く改行する
• 強調箇所は紺の文字に下線を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。部位カードのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは中央揃えで縦に積む
• キャラクターは左右どちらかに大きく置き、反対側にテキストを置く
• 金枠のボックスは画面端から約 12px 内側に置く
• ボタンは縦に 3 本並べ、間隔は約 24px にする
• 白い小花を余白に散らして間を埋める

Elevation & Depth

• カードには薄いドロップシャドウを付ける
• 使用シーンの帯は白の半透明グラデーションにし、影は付けない
• ボタンは影を付けず、二重線の枠で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品とキャラクターは背景を切り抜き、成分は円形のグラデーションバッジにする
• セクション境界: 境界線は引かず、グラデーションで地の色をつなぐ。一部はひし形連続模様の金帯で区切る
• 枠は細い金線で、四隅に中華風の角飾りを付ける
• ボタンはほぼ角丸なしの長方形にする
• 検索バーだけはピル型で金の太枠にする
• 見出し帯はリボン型にする

Components

• 金の角飾り付き枠（frame-gold）: 細い金の二重線と四隅の角飾りで情報ブロックを囲む
• 詳細ボタン（button-detail）: 白地に金の細枠と角飾り、明朝の文字と右向き三角
• 購入ボタン（button-primary）: ピンク→黄→黄緑の横グラデに黒い明朝文字と外部リンクアイコン
• 販売店検索ボタン（button-cta）: 水色→紺の横グラデに白い内枠線と白文字
• 成分の円バッジ（badge-ingredient）: ピンク→水色のグラデの円に白い明朝の成分名を入れ、2つを＆でつなぐ
• チェックリスト（check-list）: 赤いチェックアイコンと紺の太字で魅力を6項目並べる
• 部位カード（card-area）: 白カードに紺の下線付き見出しと短い説明。横にちびキャラを添える
• リボン見出し（ribbon-heading）: クリーム色のリボン帯に金縁、両端に花を飾る
• 吹き出し（speech-bubble）: 金色の円い吹き出しや白い雲形の吹き出しで補足を入れる

Do's and Don'ts

Do - 地の色は必ず淡いパステルのグラデーションでつなぐ - 装飾の線は金色の細い線にする - 見出しは明朝、ポップな訴求は白フチ付きの太い丸ゴシックで使い分ける - キャラクターや花を余白に置いて華やかにする - 白い面の上に情報をまとめ、読みやすさを保つ

Don't - 濃い単色のベタ面を大きく使わない - 太い黒線や角丸の大きいポップなボタンにしない - 金を文字色として多用しない - セクションを直線の区切り線で切らない - 本文を長く横に流さない

Page Structure

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

1. ヘッダー（ブランドを示す）: 白い帯の中央に小さなロゴ
2. ファーストビュー（コラボを告知する）: ピンク〜黄緑のグラデに花とキャラクター。中央に白いロゴ枠と円形の限定バッジ
3. 商品紹介（限定デザインの商品を見せる）: 金の角飾り枠の中に実績の吹き出し、説明、商品写真と詳細ボタン
4. 有効成分（効き目の根拠を示す）: ひし形模様の金帯で上下を挟み、ちょうちんを飾る。円バッジ2つを＆でつなぐ
5. 豆知識（歴史と信頼を伝える）: 白カードに古い瓶の写真、金枠の中に説明文
6. 使い方の提案（拭き取りケアをすすめる）: マゼンタの白フチ見出し、手元写真を円形に切り抜き、吹き出しとキャラを添える
7. 魅力リスト（特長をまとめる）: 左にキャラクター全身、右にチェックリスト6項目
8. ボディ用途（使える範囲を広げる）: 2カラムの白カードにちびキャラを添える
9. 使用シーン（使う場面を示す）: リボン見出しの下に商品写真を置き、白の半透明帯でシーンを4行並べる
10. SNS（口コミへ誘導する）: SNSアイコンの吹き出しと金枠のピル型検索バーを花で囲む
11. CTA（購入・店舗検索へ誘導する）: ピンク地に詳細・購入・販売店の3ボタンを縦に並べる
12. フッター（企業情報とリンクを載せる）: 灰色の帯にリンク、白地にロゴとリンク一覧

Imagery

• キャラクターは背景を抜いた全身や、ちびキャラのイラストで使う
• 商品の瓶は背景を抜き、青いガラスのツヤを見せる
• 白い小花やダリア風の花のイラストを余白に散らす
• ちょうちん・角飾り・ひし形模様など中華風の装飾は金色の線画で描く
• 手元写真は明るい白背景で撮り、円形に切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央に約 900px 幅の 1 カラムで置き、構成は SP と同じ
• PC はキャラクターと装飾をやや小さくし、左右の余白を広げる
• ボタン幅は PC で約 60% に抑えて中央に置く
• PC のフッターはロゴとリンクを 4 カラムに並べる

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