DESIGN.md — 朝の光と焦げ茶×金の飲料キャンペーンLP（Morning Light Cafe-au-lait Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか
• キーワード: 朝の光・淡いパステルグラデーション・焦げ茶×金・明朝見出し・舞う葉・飾り枠カード
• 地の質感: 光が差すぼかし背景と金色のサテン調グラデーション。白地のカードは平らで、細い焦げ茶線で囲む
• 形: 角を内側にえぐったクラシックな飾り枠、不定形のブロブ型人物切り抜き、ピル型CTA、ゆるいアーチ状の帯
• 温度感: 暖かく穏やか。朝の柔らかな空気

Colors

• セクションごとに地色を変える。空の青→若葉グリーン→ピンク→クリーム→金→淡いピンクベージュ
• 焦げ茶を唯一の濃色にする。見出し・本文・帯・CTAを焦げ茶系でそろえる
• ティールとローズは2人のキャストの色。番号・名前・強調語にだけ使う
• 金色グラデーションは対象商品セクション専用で、高級感を出す
• カードは白地に焦げ茶の細線。影は付けない

Typography

• 見出しとリード文は明朝で、手順・規約などの実用テキストはゴシックにする
• セクション見出しは、英字セリフのラベルと和文小見出しを中央に2段で置く
• リード文は中央揃えにし、強調語だけティール色にする
• キャストの番号は斜体セリフの大きな数字にし、キャスト色で塗る
• 電話番号は太いゴシックの大きな文字（約34px）で焦げ茶にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央揃えを基本にする
• キャストは写真と文字を左右交互に配置する
• 手順カードは縦に並べ、上辺の中央に丸いSTEPバッジを重ねる
• 商品パッケージは背景の余白に斜めに浮かべる
• 規約はスクロールする固定高の白ボックスに入れる

Elevation & Depth

• カードは影なしで、細線の枠で区切る
• CTAボタンだけ下に薄い影を付ける
• 商品画像には自然な落ち影を付けて浮遊感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は有機的なブロブ形のカラー面に重ねて切り抜く。商品は背景を抜いて配置する
• セクション境界: ゆるいアーチ状の曲線で次の地色に移る。期間帯の下端も弧にする
• 手順カードと商品カードは四隅を内側に丸くえぐった飾り枠にする
• STEPバッジは焦げ茶の正円
• 規約ボックスは角丸12〜16pxの白
• 区切りは茶色の細い水平線

Components

• ブランドサイト誘導ボタン（button-primary）: 焦げ茶のピル型。白い明朝の2行で、右端に＞矢印
• キャンペーン期間帯（period-band）: FV直下の焦げ茶帯。日付を大きなセリフ数字で示し、下端は弧
• 英字＋和文見出し（section-heading）: 英字セリフのラベルの下に明朝の小見出しを置く。中央揃え
• キャスト紹介（cast-profile）: ブロブ形のカラー面に人物写真を重ね、斜体番号・名前・出演作を添える。左右交互に並べる
• 手順カード（step-card）: 白地で四隅をえぐった茶の線枠。上辺中央に丸いSTEPバッジ、中にスマホのモック画像と説明
• Check見出しラベル（check-label）: 焦げ茶のピル帯に白文字。左上に筆記体の英字を重ねる
• 商品×キャストカード（product-voice-card）: 金背景の上のクリーム色の飾り枠。人物写真の横に担当商品名を並べる
• 規約スクロールボックス（terms-box）: 白の角丸ボックス。中をスクロールさせ、●見出しと箇条書きを入れる

Do's and Don'ts

Do - 淡い朝の光の背景グラデーションを全体に流す - 濃色は焦げ茶だけにして、上品にまとめる - 緑の葉を前後のぼかしを付けて散らし、動きを出す - 手順はスマホの画面モックで具体的に見せる - 日付・期間はセリフ数字で大きく見せる

Don't - 真っ黒の文字や彩度の高い原色を使わない - カードに濃いドロップシャドウを付けない - 見出しをすべてゴシックにしない - 背景を均一な白一色にしない - 角の鋭い四角いボタンにしない

Page Structure

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

1. ファーストビュー（企画名と商品を一目で伝える）: 朝の空と街並みの写真の上に企画ロゴ、斜めに浮かぶ2商品、手書き風の添え書きを置く
2. キャンペーン期間（開催期間を明示する）: 焦げ茶の帯に大きなセリフの日付。下端は弧
3. コンセプト・リード（企画の魅力を伝える）: 若葉のボケ背景に明朝2行のコピーと中央揃えのリード文。下に全4商品を横一列に並べる
4. キャスト紹介（出演者で関心を高める）: グリーン地に番号付きのブロブ写真と名前・出演作を左右交互に置く
5. 参加方法（参加の手順を示す）: ピンク〜クリーム地に、STEPバッジ付きの飾り枠カードを3枚縦に並べる
6. 結果と期間（体験内容と視聴期間を示す）: 下向きのシェブロンと音符のイラストを添えたスマホ画面。期間は細線で上下を挟む
7. 補足機能（継続利用を促す）: Checkラベルの後に本文と注釈。下に朝に伸びをする人物の写真を大きく置く
8. 対象商品（購入対象を示す）: 金色グラデーション地に、商品2本と担当キャストのカードを1組ずつ置く
9. 利用規約（条件を開示する）: 明朝の大見出し、前文、スクロールする白ボックス
10. 問い合わせ・CTA（窓口を示し公式サイトへ誘導する）: 大きな電話番号と受付時間。最後に焦げ茶のピル型ボタン

Imagery

• 朝日が差し込む逆光の空と都市の風景。白っぽく飛ばした明るい色調
• 背景を抜いた商品パッケージを斜めにして浮遊させ、影を付ける
• 若葉のパーツを大小とぼかしの差をつけて散らす
• 人物は明るい正面のポートレートで、パステルのブロブ形に重ねる
• 音符・ハート・きらめきの細線イラストを金茶色で描く
• カーテン越しの光の中で伸びをする生活写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは商品を左、企画ロゴを右に置く横長構成にする
• PCではキャスト2名を横に並べる
• PCの手順カードは画像を左、説明を右に置く横長にし、左右の余白に商品を浮かべる
• PCの対象商品は商品とキャストカードを左右交互に配置する
• PCの本文幅は約70%に絞り、中央寄せにする

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