DESIGN.md — 紺×金×チョコ茶のコンビニスイーツ新商品 LP（Navy and Gold Premium Convenience Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ポップ・元気、シンプル・ミニマル
• キーワード: 紺グラデーション・金の帯・チョコ茶の太文字・シズル写真・点線の見出し下線
• 地の質感: 紺地は上から下へ濃くなるグラデーション。金の部分はメタリックな光沢グラデーション。中盤は白一色でフラット。
• 形: 円形の写真切り抜き、角丸の少ない金のボタン、白いピル型サブボタン、点線の区切り
• 温度感: 紺で落ち着いた冷たさに、チョコ茶と金で温かみを足す

Colors

• FV と締めの CTA セクションは紺のグラデーション地にする。
• 中盤の特長は白地にチョコ茶の文字だけで構成する。
• 金は告知帯・見出し帯・主ボタン・強調見出しに限って使う。
• 赤は関連商品バナーの写真の中だけに出す。
• 紺地の文字は白にし、点線は金色にする。
• round-seal は文字 #C31A21 × 背景 #DBB07C のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#EFDDC6、4.54:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一し、親しみやすさを出す。
• 本文も太字にし、行間は 2 倍以上と広く取る。
• 大見出しは金グラデーションで塗り、下に点線を入れる。
• Point 番号は欧文の太字にし、数字だけ少し大きくする。
• 特長本文は Point ごとに左揃えと右揃えを交互にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は特長部分が写真＋本文の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• FV は写真を全幅で敷き、商品名・価格・告知帯を重ねる。
• 特長セクションは文字と大きな円形写真を交互に置く。
• CTA セクションでは、見出し・写真・金ボタン・白ボタン・注釈を中央揃えで縦に積む。
• 関連商品は全幅のバナーを隙間なく縦に積む。

Elevation & Depth

• 影はほぼ使わない。
• 金ボタンには細い金枠と光沢グラデーションで立体感を出す。
• 写真の商品だけに自然な影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: FV は全幅の角版。特長写真は画面からはみ出す大きな円形。関連商品は全幅の角版。
• セクション境界: 直線で地の色を切り替え、境界に金の帯を挟む
• 主ボタンは角丸の小さい金のプレートにする。
• サブボタンは白いピル型にする。
• 矢印は丸の中に入れてボタンの左端に置く。

Components

• 発売日告知帯（announce-band）: FV の下に置く全幅の金帯。日付を茶の太字で入れる
• 点線見出し（heading-dotted）: 中央揃えの見出し。上下または下に点線を引く
• Point ラベル（point-label）: 欧文の太字で番号を書き、下半分に金のマーカー帯を敷く
• 価格表示（price-badge）: 白抜き文字に濃い縁取りを付け、本体価格と税込価格を 2 段で表示する
• 丸い金シール（round-seal）: FV に置く金の丸バッジ。商品の特徴を 2 語で入れる
• 金の店舗検索ボタン（button-primary）: 金のプレート。左に丸矢印、右に店舗アイコンを置く
• 白ピル情報ボタン（button-secondary）: 白いピル型。茶の丸矢印を付けた小さめのボタン
• 関連商品バナー（product-banner）: 全幅の写真に、商品名を太字・縁取り付きで重ねる

Do's and Don'ts

Do - 紺・白・金・チョコ茶の 4 色を軸にする。 - 商品写真は大きく、湯気やとろみが伝わるシズル感を優先する。 - 文章は 1 ブロック 4 行程度に短くまとめる。 - 金はグラデーションで光沢を出す。

Don't - 本文に細い明朝や細字を使わない。 - 白地のセクションに装飾を増やしすぎない。 - 金以外の派手な色をボタンに使わない。 - カードや影を多用して情報を詰め込まない。

Page Structure

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

1. ファーストビュー（商品名・価格・特徴を一目で伝える）: 紺地に商品のシズル写真を大きく置き、白い太字の商品名・丸シール・価格・提供形態の注記を重ねる
2. 発売日告知（発売開始日を知らせる）: 全幅の金帯に、茶の太字で日付を中央揃えで入れる
3. キャッチ見出し（味わいの魅力を短く打ち出す）: 白地に茶の小見出しと金の大見出しを置き、点線で挟む
4. 特長1（商品の組み合わせの魅力を伝える）: Point ラベルと左揃えの本文 4 行を置き、その下に大きな円形の商品写真を配置する
5. 特長2（改良点を伝える）: Point ラベルと本文を右揃えにして、特長1 と左右を変える
6. 来店 CTA（店舗検索へ誘導する）: 紺のグラデーション地に白見出しと金の点線を入れ、商品写真・金ボタン・白ピルボタン・注釈を並べる
7. おすすめ商品（関連商品へ回遊させる）: 金帯の見出しの下に、全幅の写真バナーを 3 本縦に積む

Imagery

• 商品は斜め上から撮り、暗めの背景で光沢やとろみを強調する。
• 周りにカカオ豆・板チョコ・スプーンを添えて、素材感を出す。
• カップ商品は白背景の切り抜きで、円の中に大きく入れる。
• 関連商品は赤やピンクの華やかな背景で、苺などを飛ばして見せる。
• パウダーが舞う演出で動きを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 960px 程度の幅に収め、FV は横長の構図にして商品名を左下に置く。
• PC の特長は、左に円形写真、右に Point1・2 を縦に並べる 2 カラムにする。
• PC の CTA は、左に見出し、右に写真を置き、ボタンはその下で中央揃えにする。
• PC の関連商品バナーは 3 列に横並びにする。

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