DESIGN.md — 桜ピンク×金の飾り枠で彩るアニメコラボ菓子 LP（Pink Gold Anime Collab Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、上品・高級、情報量多め・訴求型
• キーワード: 桜ピンクのぼかし・金の飾り罫・明朝体の告知・限定特典・商品の整列陳列
• 地の質感: 花びらが舞うような柔らかいピンクのグラデーションと光のボケ。告知ブロックは白に近い薄ピンク地を使う。
• 形: 四隅に唐草装飾を付けた細い金枠のパネル、角丸の小ボタン、円形の数量バッジ、ピル型の金ボタン。
• 温度感: 暖かく甘い。ピンクとベージュゴールドが中心。

Colors

• 地は薄ピンクとピンクぼかしを交互に敷き、セクションを分ける
• 金茶は飾り罫・告知見出し・CTA だけに使い、高級感を出す
• 濃いピンクは特典・限定を伝える帯ラベルだけに使う
• 赤は数量限定バッジと特典名の強調だけに絞る
• 黒は使わず、文字は焦げ茶にする
• 別サービスの紹介ブロックだけ、空色・緑・黄色のポップな配色に切り替える
• button-primary は文字 #FFFCFC × 背景 #BEA144 のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#89732F、4.52:1）を使う。
• ribbon-label は文字 #FFFCFC × 背景 #EC848C のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE2C39、4.55:1）を使う。

Typography

• 告知と本文は明朝体で統一し、上品なトーンにする
• ブランドのロゴ見出しだけ極太の装飾書体にし、縁取りと影を付ける
• 見出しは中央揃えにし、左右に飾り罫を添える
• 特典名は赤の太字明朝にする
• 価格は数字を特大にし、円と税込は小さく添える
• サービス紹介部だけ太い丸ゴシックに切り替える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長写真と特典パネルは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションはロゴ見出し→リード→商品陳列の順に置く
• 商品は 5 個×2 段で隙間なく並べる。SP では 3〜5 個×複数段
• 告知情報は金枠のパネル内に中央揃えで置く
• 価格ブロックとCTAは陳列セクションの直後に毎回入れる
• Point ごとに飾り枠パネルを区切る

Elevation & Depth

• 影はほぼ使わず、細い金の線枠で区切る
• CTA の下だけに薄い影を付ける
• ロゴ見出しには茶色の縁取りとドロップシャドウを付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで整列させる。説明写真は白地の四角
• セクション境界: 直線で背景色を切り替える。ぼかし背景はそのまま次の地へつなぐ
• パネルは角を立てた細線枠にし、四隅に唐草の飾りを付ける
• 数量のバッジは正円にする
• バージョン名ラベルは小さなピル型にする
• ボタンは横幅いっぱいのピル型にする

Components

• 金色の購入ボタン（button-primary）: 金のグラデーションを使ったピル型のボタン。白い明朝体の文字と右端に三角の矢印を置く
• ロゴ風見出し（logo-heading）: 黄色の極太文字に茶色の縁取りを付け、中に星を入れる。各陳列セクションの頭に置く
• 唐草飾り枠パネル（ornament-frame）: 白地に細い金線の枠を付け、四隅に飾りを入れたパネル。告知・特典・Point に使う
• ピンク帯ラベル（ribbon-label）: 特典を伝えるピンクの横長帯。白い明朝体の文字を載せる
• 数量限定バッジ（badge-limited）: 赤い正円に白い太字で数量を入れる。パネルの右上にはみ出して置く
• 価格ブロック（price-block）: 左にピンクの円形条件バッジ、中央に金地の送料込みラベル、右に特大の価格数字を置く
• 飾り罫付き小見出し（ornament-subhead）: 金茶の明朝体の左右に、渦巻き状の細い罫を付ける
• 黄色サブボタン（button-secondary）: 黄色地に黒枠を付け、黒い丸ゴシックの文字と丸い矢印を置く。別サービスへの誘導に使う

Do's and Don'ts

Do - 見出しの左右とパネルの四隅には、必ず金の飾り罫を付ける - 限定・特典は、ピンク帯と赤バッジの両方で目立たせる - 商品は同じサイズで並べ、コレクション感を出す - 陳列のあとに、毎回価格とCTAを繰り返す - ピンクのぼかしと光のボケで、華やかな地を作る

Don't - 文字に純黒や寒色系を使わない（サービス紹介部を除く） - 角丸の大きいカードを多用しない（飾り枠と調和しない） - 本文にゴシック体を使わない - CTA を金以外の色にしない - 白一色のフラットな背景にしない

Page Structure

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

1. ファーストビュー（コラボの世界観とロゴを見せる）: 全面にキャラクターのビジュアルを敷き、上部に両ブランドのロゴと極太のコラボ名を置く。右上に商品を配置する
2. コラボ紹介（企画の背景を伝える）: ピンクのぼかし地にロゴ見出しを置き、短い明朝文を左に、キャラクターを右に配置する。下に商品を並べる
3. 販売概要（発売日・期間・発送日・数量を知らせる）: 薄ピンク地に金の飾り罫で挟んだ告知を置き、ピンク帯と大きな日付を入れる。小見出しの下に星印のリストを並べる
4. 特典告知（限定特典をアピールする）: 飾り枠パネルの中に、左は文字、右は特典画像を置く
5. 商品陳列（全種類を一覧で見せる）: ロゴ見出しとリードの下に、商品を5個×2段で並べる
6. 仕様・特典パネル（箱・個包装・特典を説明する）: 2列の飾り枠パネルを置き、その下に赤バッジ付きの幅広い特典パネルを置く
7. 価格・CTA（購入を促す）: 条件バッジ・送料込みラベル・特大価格を並べ、金色ピルボタンと注記を置く
8. おすすめポイント（デザインと箱のこだわりを伝える）: Point 番号を見出しにした飾り枠に、2列の写真とキャプションを入れる
9. 繰り返しの陳列とCTA（購入をもう一度促す）: 陳列・パネル・価格・CTAを再度配置する
10. 関連サービス紹介（別サービスへ誘導する）: 空と芝生のイラスト背景にする。Before/After のクリームカードと用途例を並べ、黄色ボタンを置く

Imagery

• キャラクターと商品パッケージは切り抜いて、正面から並べる
• 背景はピンクのグラデーションに花びらと光のボケを散らす
• 金の唐草・渦巻きの線画装飾を使う
• 商品写真は白背景で、箱の開封状態や大きさの比較を撮る
• 関連サービス部は空・雲・芝生・音符のポップなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC 版のみで、本文幅は約 900px 中央寄せ。SP では幅 90% の 1 カラムにする
• 商品陳列は SP で 3 列程度に折り返す
• 2列パネルは SP でも 2 列を保つ。文字が多い場合は 1 列に落とす
• 特典パネルは SP で文字→画像の縦積みにし、バッジは右上に残す
• 価格ブロックは SP でバッジを上、価格を下に積む

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