DESIGN.md — 星空ネイビー×ピンクのコラボアイス LP（Galaxy Night Collab Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: 宇宙・星のきらめき・コラボ・新作フレーバー・ポップ・グラデーション
• 地の質感: 写真の星空とレンズフレアの光彩。後半はフラットな水色地。
• 形: 円形の写真切り抜き、角丸カード、ピル型ボタン、斜めのセクション境界。
• 温度感: 前半は寒色で幻想的。後半はピンクが入って明るく、親しみやすい。

Colors

• 前半の商品紹介は濃紺の星空写真を全面に敷き、文字は白にする。
• ポイント見出しは金色の欧文セリフ体にし、細い金の線を添える。
• 後半の情報エリアは水色地にして、白いカードと白枠の動画を置く。
• 主ボタンと見出しはピンク一色に統一する。
• アレルギー表とカロリー表は紫系でまとめ、該当するセルだけ濃い紫で塗る。
• おすすめのブロックは青から黄色への鮮やかなグラデーション地にする。
• button-pill は文字 #FFFFFF × 背景 #F04E9A のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E31375、4.55:1）を使う。
• button-bar は文字 #FFFFFF × 背景 #F04E9A のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E31375、4.55:1）を使う。
• badge-new は文字 #F04E9A × 背景 #FFFFFF のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E31375、4.55:1）を使う。
• allergy-grid は文字 #999999 × 背景 #FFFFFF のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#757575、4.61:1）を使う。

Typography

• 本文も太字寄りにし、暗い地の上でも読みやすくする。
• 見出しは中央揃え、本文は左揃えで均等割り付け気味にする。
• 小見出しは「＼ ／」で挟む装飾にする。
• 欧文セリフ体は Point 番号だけに使う。
• 大見出しは斜体のゴシックにピンクの影を付けて立体感を出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイント部分は写真と文章を左右交互に配置する。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ポイントは円形の写真と文章を左右交互に並べる。
• おすすめのカードは写真をカードの外へはみ出させる。
• ボタンは横幅 88% の 1 本か、2 本並びにする。
• アレルギー表は 4 列のグリッドにする。
• セクションの間は十分に空けて、星空写真を見せる。

Elevation & Depth

• 白いカードには、青みのある淡い影をずらして付ける。
• 動画枠は白い太枠に、灰色の影を付ける。
• 商品写真には白い光彩とレンズフレアを付ける。
• 暗いパネルは半透明の濃紺にし、影は付けない。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 拡大写真は細い銀枠付きの円形に切り抜く。商品写真は背景を抜く。
• セクション境界: 宇宙エリア内は斜めの光の線で区切る。明るいエリアとの境は直線にする。
• サブボタンはピル型のピンクにし、右端に白丸の矢印を付ける。
• 大きなボタンは角丸 sm の長方形にする。
• カードは角丸 lg にする。
• 表は紫の細線で囲み、外枠を角丸にする。

Components

• ピンクのピルボタン（button-pill）: 白文字に白丸の矢印アイコンを付けた詳細リンク
• 情報見出しのボタンバー（button-bar）: 横幅いっぱいのピンクの帯で、情報見出しを兼ねる
• Point 見出し（point-heading）: 金色の欧文セリフ体に、細い金の下線を付ける
• 円形の拡大写真（circle-photo）: 素材のアップを銀枠付きの円に収め、吹き出し型の小円を添える
• 開発秘話パネル（story-panel）: 半透明の濃紺パネル。上部にアイコン付きの見出しを置く
• おすすめ商品カード（product-card）: 白いカードにピンク見出しとピンクの下線を付け、商品写真をはみ出させる
• 新作バッジ（badge-new）: 白丸に月数と NEW のピンクのリボンを付けたバッジ
• アレルギー表（allergy-grid）: 4 列の白いセル。該当するセルだけ紫地に白文字
• 部位ラベル（part-label）: 商品の部位を、金色の文字と細い引き出し線で示す

Do's and Don'ts

Do - 前半は星空の写真を途切れさせずにつなげる。 - 商品写真は大きく中央に置き、光彩を付ける。 - ボタンと見出しのピンクは 1 色に揃える。 - 注釈は淡い水色の帯にまとめる。 - 写真と文章は左右交互に配置して、リズムを作る。

Don't - 宇宙エリアに白いベタ地を挟まない。 - ピンク以外の色をボタンに使わない。 - 細い明朝体を本文に使わない。 - 表の該当セル以外を濃い色で塗らない。 - 写真を四角いままベタ貼りしない。

Page Structure

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

1. ファーストビュー（コラボであることと新作の商品名を一目で伝える）: 上部にロゴと新作バッジ、その下に多色のディスプレイ書体の商品名を置く。星空の上に光る商品写真とキャラクターを配置する。
2. 商品の概要（味の組み合わせを伝える）: 白い太字のリード文を 3 行、中央揃えで置き、その下に左揃えの本文を続ける。
3. 商品の構成図（素材の内訳を見せる）: 商品の拡大写真に、金色の引き出し線と部位ラベルを付ける。
4. 特長（Point）（色やお菓子のこだわりを伝える）: 円形の写真と金色の Point 見出しの文章を、左右交互に配置する。
5. 開発秘話（開発のストーリーで共感を得る）: 半透明の濃紺の角丸パネルに、虫眼鏡アイコン付きの見出しを置く。
6. キャンペーンバナー（特設サイトへ誘導する）: 白枠の角丸バナーの下部に、リンクの帯を付ける。
7. 注意事項（着色料の注意を伝える）: 淡い水色の帯に、黒い太字の注釈を置く。
8. おすすめの組み合わせ（一緒に買う商品を提案する）: グラデーション地に斜体の大見出しを置き、白いカードと商品写真を左右交互に並べる。
9. 動画（CM と商品紹介の動画を見せる）: ピンクの見出しの下に、白枠の動画埋め込みを置く。
10. シェアとリンク（SNS での拡散と回遊を促す）: 丸い SNS アイコン 2 つと、ピンクのピルボタン 2 つを並べる。
11. 新作の説明（新作の取り組みを説明する）: ピンク系グラデーションのカードに、バッジと点線で区切った文章を置く。
12. アレルギー・カロリー情報（成分の情報を提供する）: ピンクのバー見出しの下に、紫の表とボックスを置く。

Imagery

• 商品は真上やや斜めから撮り、背景を抜いて白い光彩を付ける。
• 背景は青い星雲と白い十字のきらめきで構成する。
• トゲのある宝石状の小物を、四隅に散らす。
• 素材の質感は極端なアップにして、円の中に見せる。
• キャラクターや星のモチーフは、立体的な CG 調にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、中央に幅 480〜600px のカラムを置き、左右は星空を延長する。
• ポイントの交互配置は PC でもそのまま使い、写真を大きくする。
• おすすめのカードは PC では 2 列に並べてよい。
• 表とボタンは最大幅 640px に制限する。

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