DESIGN.md — 桜ピンク×抹茶グリーンの春限定アイスLP（Sakura Pink Seasonal Ice Cream Flavor LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、和風
• キーワード: 桜・春限定・三色だんご・丸い写真枠・花びらが舞う・ピンク×グリーン
• 地の質感: 淡いピンクの地にうっすら紙のような質感。ぼかした桜の花びらを前景に散らす
• 形: 大きな円形の写真枠、ピル型ボタン、だんごを並べたような丸の連続ライン
• 温度感: 暖かく甘い春の空気感

Colors

• 濃ピンク地と淡ピンク地をセクションごとに交互に切り替える
• 濃ピンク地の文字は白、淡ピンク地の文字はピンクにする
• グリーンはボタン・見出し帯・キーワード強調だけに使う
• セクション境界はピンク・白・緑の丸を並べただんご柄でつなぐ
• 黒や濃いグレーの文字は使わず、表の補助文字だけ淡いグレー
• 表の強調セルは濃ピンク塗り白文字
• page は文字 #C97996 × 背景 #FAE2EC のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#AB456A、4.53:1）を使う。
• button-detail は文字 #FFFFFF × 背景 #94C453 のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5C802C、4.59:1）を使う。
• button-white は文字 #C97996 × 背景 #FFFEFF のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#AB456A、4.54:1）を使う。
• circle-photo は文字 #C97996 × 背景 #FDDDEB のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#AB456A、4.53:1）を使う。
• story-box は文字 #C97996 × 背景 #FDDDEB のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#AB456A、4.53:1）を使う。
• ribbon-heading は文字 #FFFFFF × 背景 #A4CC4E のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#638025、4.52:1）を使う。
• info-bar は文字 #FFFFFF × 背景 #A4CC4E のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#638025、4.52:1）を使う。
• keyword-marker は文字 #FFFFFF × 背景 #8CC152 のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#5A812E、4.55:1）を使う。
• allergen-table は文字 #9A9A9A × 背景 #FFFEFF のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.51:1）を使う。

Typography

• 見出しは太い丸ゴシックで角を見せない
• キャッチ内のキーワードは緑の箱に白文字で置く
• Point見出しは左右に小さな矢印飾りを付ける
• 本文は短い行で改行し中央または左寄せにする
• 英字見出しは緑のリボン上で白い丸文字
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と文章を左右交互の 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 特長ブロックは円形写真を画面端からはみ出させて配置
• 文章ブロックは写真の反対側に幅 45% で置く
• 表は 4 列の等幅グリッド
• CTAボタンは 2 個横並び

Elevation & Depth

• 影はほとんど使わずフラット
• 円形写真枠にだけ淡いピンクのぼかし縁
• 前景の花びらはぼかして奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品のアップは正円に切り抜き、単品は背景を抜いた切り抜き
• セクション境界: 三色の丸を横一列に並べただんご柄の帯、または斜めの切り替え
• ボタンは必ずピル型で右端に丸い矢印アイコン
• コラム枠は角に装飾のある淡ピンクの四角
• 表セルは角丸の外枠に細い罫線

Components

• 詳細ボタン（button-detail）: 緑のピル型で右に白丸矢印
• 白いサブボタン（button-white）: 濃ピンク地に置く白ピル型、ピンク文字とピンク丸矢印
• だんご区切り（dango-divider）: ピンク・生成り・緑の小円を交互に並べた帯
• ポイント見出し（point-heading）: 英字Point+番号を黄緑で、左右に矢印飾り
• 円形写真枠（circle-photo）: 淡ピンクの縁付き大円に商品アップ、小円ラベルを重ねる
• コラム枠（story-box）: 淡ピンクの四角に虫眼鏡アイコン付き見出しとピンク本文
• リボン見出し（ribbon-heading）: 緑のアーチ型リボンに白い英字、両端に桜マーク
• 情報見出し帯（info-bar）: 緑の角丸帯に白太字
• キーワード箱（keyword-marker）: キャッチ内の語を緑の箱で囲む
• 情報表（allergen-table）: 白セルの4列表、該当項目はピンク塗り

Do's and Don'ts

Do - 地色は濃ピンクと淡ピンクを交互にする - セクション境界にだんご柄を入れる - 桜の枝と花びらを画面端と前景に散らす - 商品写真は大きく円形か切り抜きで見せる - ボタンはピル型で矢印アイコン付き

Don't - 黒地や寒色を使わない - 角ばった四角いボタンにしない - グリーンを広い面に使いすぎない - 細い明朝体で見出しを書かない - 写真を四角いまま並べない

Page Structure

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

1. ファーストビュー（新作であることと商品の華やかさを伝える）: 濃ピンク地にロゴと商品名、新作バッジ、桜背景の大きな商品写真、下端にだんご柄
2. リード（商品コンセプトを一言で伝える）: 白い太字キャッチに緑のキーワード箱、下に白文字の説明文
3. 構成図解（味の構成を見せる）: 大きな円に商品断面、線と注記ラベルで各層を指す
4. 特長ポイント（味のこだわりを説明）: 円形写真と文章を左右交互、Point見出し付き
5. 開発ストーリー（背景の物語で共感を得る）: 淡ピンクのコラム枠にピンク本文
6. おすすめの組み合わせ（併せ買いを促す）: 淡ピンク地、緑リボン英字見出し、切り抜き商品写真と緑の詳細ボタンを左右交互
7. 動画紹介（動画で魅力を補強）: 濃ピンク地に白見出しと角丸動画枠
8. SNSシェア・導線（拡散と一覧・店舗への誘導）: 丸いSNSアイコン、白ピル型ボタン2つ横並び
9. 成分・栄養情報（アレルギーやカロリーを示す）: 淡ピンク地、緑の見出し帯、白セルの表と注釈

Imagery

• 商品は明るく正面から撮り、質感がわかるアップを使う
• 背景はピンクのグラデーションと満開の桜
• 前景に大きくぼかした花びらを散らす
• 和菓子や緑茶を脇役として添える
• 単品は白背景から切り抜いて淡ピンク地に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、左右を淡ピンクの桜背景で埋める
• 特長の左右交互レイアウトは PC で余白を広げて維持
• 表は最大幅 600px 程度に抑える
• ボタンは PC でも横並び2つのまま

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