--- version: alpha name: Morning Light Cafe-au-lait Campaign LP description: 朝の空と若葉の淡いグラデーションに、焦げ茶の明朝見出しと金色の帯を合わせた飲料キャンペーンLP。声のプレゼント企画を、キャスト紹介、手順、対象商品、規約の順に縦長1カラムで見せる。 colors: primary: '#812601' cta: '#822501' on-cta: '#FBF0E1' background: '#FEF6F2' surface: '#FDFBFC' secondary: '#F7DC9C' background-alt: '#FFFBDB' tint-1: '#FCFFE1' tint-2: '#FFEAF2' accent-1: '#2C8C9A' accent-2: '#BE4C54' text: '#622714' line: '#8E5A44' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px period-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 70px section-heading: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px cast-profile: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 260px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 290px check-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px product-voice-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 160px terms-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 340px --- # DESIGN.md — 朝の光と焦げ茶×金の飲料キャンペーンLP（Morning Light Cafe-au-lait Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: やさしい・柔らかい、上品・高級、清潔・爽やか - **キーワード**: 朝の光・淡いパステルグラデーション・焦げ茶×金・明朝見出し・舞う葉・飾り枠カード - **地の質感**: 光が差すぼかし背景と金色のサテン調グラデーション。白地のカードは平らで、細い焦げ茶線で囲む - **形**: 角を内側にえぐったクラシックな飾り枠、不定形のブロブ型人物切り抜き、ピル型CTA、ゆるいアーチ状の帯 - **温度感**: 暖かく穏やか。朝の柔らかな空気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#812601` | 期間帯・見出し・CTAの焦げ茶 | 6% | 画素の実測 | | `cta` | `#822501` | 主ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#FBF0E1` | ボタン上の文字 | 0% | 画素の実測 | | `background` | `#FEF6F2` | 下部の地・規約エリア | 14% | 画素の実測 | | `surface` | `#FDFBFC` | 手順カード・規約ボックスの白 | 12% | 画素の実測 | | `secondary` | `#F7DC9C` | 対象商品エリアの金色 | 9% | 画素の主要色に補正 | | `background-alt` | `#FFFBDB` | 手順下部のクリーム地 | 9% | 画素の主要色に補正 | | `tint-1` | `#FCFFE1` | キャスト欄の若葉グリーン | 5% | 画素の実測 | | `tint-2` | `#FFEAF2` | 手順欄の淡いピンク | 5% | 画素の実測 | | `accent-1` | `#2C8C9A` | 強調語・番号のティール | 0% | 推定 | | `accent-2` | `#BE4C54` | 女性キャスト名・番号のローズ | 0% | 画素の実測 | | `text` | `#622714` | 本文・見出しの茶色文字 | 3% | 画素の主要色に補正 | | `line` | `#8E5A44` | 飾り枠・区切り線の茶 | 0% | 推定 | - セクションごとに地色を変える。空の青→若葉グリーン→ピンク→クリーム→金→淡いピンクベージュ - 焦げ茶を唯一の濃色にする。見出し・本文・帯・CTAを焦げ茶系でそろえる - ティールとローズは2人のキャストの色。番号・名前・強調語にだけ使う - 金色グラデーションは対象商品セクション専用で、高級感を出す - カードは白地に焦げ茶の細線。影は付けない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインコピー（2行） | 明朝 | Shippori Mincho | 700 | 30px | 1.5 | 0.08em | | `headline-lg` | 規約・問い合わせなどの大見出し | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.05em | | `accent` | 英字のセクションラベル（CAST・HOW TOなど） | 欧文セリフ | Cormorant Garamond | 400 | 20px | 1.2 | 0.02em | | `headline-sm` | 英字ラベル下の和文小見出し・キャスト名 | 明朝 | Shippori Mincho | 700 | 17px | 1.5 | 0.05em | | `body-lg` | リード文（中央揃え） | 明朝 | Shippori Mincho | 600 | 15px | 1.9 | 0.05em | | `body-md` | 手順の説明・規約本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | CTAボタン（2行） | 明朝 | Shippori Mincho | 600 | 18px | 1.4 | 0.08em | - 見出しとリード文は明朝で、手順・規約などの実用テキストはゴシックにする - セクション見出しは、英字セリフのラベルと和文小見出しを中央に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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-fbce1d5c`（元 LP の URL から採番） - **元 LP**: https://cp.glico.com/cafeore-2026spr/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。