DESIGN.md — 生成り×藍色の保湿スキンケアキャンペーンLP（Soft Beige and Indigo Skincare Campaign LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、信頼・誠実
• キーワード: 生成り・藍色・明朝・水滴・余白・淡い光
• 地の質感: 白〜ベージュへのごく淡いグラデーション地と、柔らかい光が回った写真。水色の円形ぼかしで潤いを表す
• 形: 正円バッジ、水滴風の円、左右がフェードアウトする横長の見出し帯、細い罫線
• 温度感: 生成りで少し暖かく、藍と水色で涼しさを加えたニュートラル

Colors

• 地は白と生成りベージュを交互に使い、ブランド物語とキャンペーンを生成りで包む
• 強調はすべて藍色1色に寄せ、派手な色は使わない
• 見出し帯は藍→明るい青へのグラデーションで左右を透明にフェードさせる
• 潤い表現は淡い水色の円形ぼかしに限る
• 赤は対象外などの注記だけに使う
• 受付前・非アクティブ状態はグレーで示す
• button-disabled は文字 #FFFFFF × 背景 #B4B4B4 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 情緒的なコピーと特長は明朝、手続き情報はゴシックで分ける
• ストーリー文は中央揃えで短く改行し、行間を広く取る
• FVキャッチは縦書きの2行にする
• 見出しの文字色は黒ではなく藍色にする
• 注記は小さいグレー文字で、※を先頭に付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長バッジ・タブ・ナビは 2〜3 列、商品一覧は 5 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右に余白を残して中央に置き、全幅にはしない
• セクションの頭にはグラデーション帯の見出しを置く
• POINT番号の丸から各特長を縦に並べ、間を下向きの三角でつなぐ
• FAQは罫線区切りのアコーディオン行にする
• ページ内ナビは2×2の藍色ボタンにする

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• 円形バッジは白地に細い藍色グラデーションの縁取り
• 水滴の円は内側の白ハイライトと淡い青のぼかしで立体感を出す
• 終了バッジの円にだけ軽い影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。人物の部分カットは円形に切り抜き、商品は白い円の中に置く
• セクション境界: 直線で切り替えるが、背景はグラデーションで溶け合わせる。区切りには細い横罫線を使う
• 主ボタンは藍色のピル型で、左に白い▶を置く
• 特長は正円の中に2行で入れる
• タブは上側だけ角丸にする
• 見出し帯は角のない横長の帯で、両端を透明に抜く

Components

• 藍色ピルボタン（button-primary）: 左に▶、文字は中央揃え。購入・店舗検索の導線に使う
• 受付前ボタン（button-disabled）: グレーのピル型。応募の開始日を表示する
• グラデーション見出し帯（heading-band）: 藍から青へ流れ、両端を透明に抜いた帯。中央に白文字
• こだわり円バッジ（badge-circle）: 白い正円に藍のグラデーション細線。明朝2行を入れて3つ並べる
• POINT番号（point-number）: 藍色の丸に小さくPOINT、その下に大きな数字
• ページ内ナビ（nav-button）: 角の小さい藍色の矩形を2×2で並べ、右端に▼
• 賞品タブカード（prize-card）: 藍枠のタブ切替。中身はベージュ面で、リボン型ラベルと当選数の丸バッジ付き
• コメント吹き出し（comment-bubble）: 手描き線の吹き出し。中は淡い黄色から水色へのグラデで、筆記体の見出しを付ける
• FAQアコーディオン（faq-row）: Q.で始まる行。右端に＋、下に罫線

Do's and Don'ts

Do - 強調色は藍色1色にまとめる - 情緒的な部分は明朝・中央揃えにし、余白を広く取る - 潤いは水滴や水色の円ぼかしで表現する - セクションの頭はグラデーション帯で統一する - 人物写真は柔らかい自然光で、ベージュのニットなど淡い色の服にする

Don't - 原色の赤や黄を大きな面に使わない - 太いゴシックでセール風に煽らない - 濃い影や光沢のあるボタンにしない - 生成りの地に真っ黒の見出しを置かない - 写真を全面に敷き詰めて余白をなくさない

Page Structure

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

1. ファーストビュー（季節の悩みと商品の印象を伝える）: 人物のアップに縦書きの明朝キャッチ、左下に商品、円形バッジを重ねる。左は淡い水色の光
2. ブランドストーリー（価値観に共感してもらう）: 生成りの地に写真と、中央揃えの明朝の短文を交互に置く
3. 3つのこだわり（ものづくりの姿勢を示す）: 正円バッジを3つ並べ、その下に▶付きの下線リンク
4. 動画（CMで関心を高める）: グレーのタブ切替と動画埋め込み、プロフィールとコメント吹き出し
5. ページ内ナビ（目的の情報へ案内する）: 藍色の矩形ボタンを2×2で並べる
6. 商品の特長（保湿の仕組みを伝える）: 枠付きのリード、POINT番号、水滴の円3つと肌断面図、商品と成分の円
7. 使い心地とタイプ選び（自分に合うタイプを選んでもらう）: 水色縁のピル型ラベルと、さっぱり〜しっとりの横軸チャート
8. ラインナップ（商品の一覧を見せる）: 罫線区切りの＋アコーディオン
9. キャンペーン概要（期間と条件を伝える）: 生成り地に明朝のロゴ風見出し、第1弾・第2弾の帯、終了を示す藍色の円
10. プレゼント（賞品の魅力を見せる）: 斜線で挟んだ見出しと、タブ付きの賞品カード
11. 応募方法・規約（応募の手順を示す）: 番号付きの手順、円形サムネイルの商品5列、スクロールできる規約枠、受付前ボタン
12. 購入導線（購入先へ送る）: ピル型ボタン2つと通販ロゴ一覧
13. よくある質問・問い合わせ（不安を解消する）: FAQアコーディオンと、中央揃えの事務局情報、シェアボタン
14. フッター（企業情報）: 濃い灰色の地に白ロゴ、SNS、規約リンク

Imagery

• 人物は淡いベージュのニットを着せ、明るい背景で自然光の柔らかい写真にする
• 頬に手を添える・目元のアップなど、素肌を感じる構図にする
• 透明なジェルや水が手のひらに広がるマクロ写真を使う
• 商品は白背景の切り抜きにし、淡い水色の光で囲む
• 成分は透明な水滴の球体の中に文字を入れて表す
• 肌断面はパステルのオレンジと水色のフラットな図解にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約800pxに絞って中央に置き、左右に余白を取る
• ストーリーは写真と文を左右交互の2カラムにする
• ページ内ナビはPCで横4列にする
• 購入ボタンはPCで横2列にする
• FVはPCで人物を中央に置き、キャッチを左、商品を右に配置する

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