DESIGN.md — ラムネ青と雲柄の夏スイーツ新商品 LP（Ramune Blue Summer Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 清潔・爽やか、ポップ・元気、レトロ
• キーワード: ラムネブルー・網点の雲・きらめく星・夏のかき氷・白抜き見出し
• 地の質感: 網点（ハーフトーン）の雲、放射状の集中線、白い和紙のような質感を重ねたレトロ印刷風
• 形: 四角い全幅の帯セクション。ボタンは角丸かピル型、説明ボックスは白くぼかした角丸
• 温度感: 涼しく爽やか。青緑が主役で、温かい色は価格と果物の写真だけ

Colors

• 地は濃い青緑から水色への縦グラデーションを、セクションごとにくり返す
• 青い地の上の文字はすべて白にする。強調は太字にして色は変えない
• 茶色は商品名ロゴ・価格・発売日だけに使い、本文には使わない
• 黄・赤は小さな星やハートの飾りだけに使う
• ページ末の CTA と注意書きは白い紙地に切り替え、青緑の文字で書く
• サブボタンは白地に青緑の枠と文字。主ボタンは青緑の塗りに白文字
• glow-info-box は文字 #62B2BA × 背景 #ECFDFD のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#3A7D84、4.51:1）を使う。
• button-more は文字 #33B1C2 × 背景 #EFFEFF のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#257F8B、4.52:1）を使う。
• button-primary は文字 #F8FAF9 × 背景 #12A1B4 のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0E7E8D、4.57:1）を使う。
• button-secondary は文字 #33B1C2 × 背景 #FCFBFC のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#257F8B、4.53:1）を使う。

Typography

• 見出しも本文もすべて中央揃えにする
• 見出しは字間を広く（0.1em 前後）とり、ゆったり見せる
• 本文は 1 行 20 字前後で改行し、行間 2.0
• 商品名は白い吹き出し型の上に斜めの文字をのせ、太いロゴ風に見せる
• 英字ラベルは小さめにして、両側の罫線と星で挟む
• 注意書きは「※」から始め、本文より小さく 10px 程度にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで写真を全幅に。PC は写真とテキストを左右交互に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 32px（375px 幅換算）
• 素材ごとに見出し → 説明 → 写真の順で 1 セクションにまとめる
• 写真はセクション下端で切り、次のセクションとの境目にする
• 見出しは上下を罫線で挟み、左右端に星を置く
• 説明ボックスは左右 10% ずつ余白をとった中央配置
• CTA ボタンは幅 80〜90% を縦に積む

Elevation & Depth

• 影はほとんど使わず、平面的に見せる
• 説明ボックスは白いぼかしの縁取り（内側グロー）で浮かせる
• 主ボタンは下に濃い青の細いずらし影をつけ、立体的に見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品写真は切り抜きにし、カップの一部をアップにして下端を枠で裁ち落とす
• セクション境界: 直線で区切る。FV だけは白い紙地を斜めに切り込ませる
• サブボタンと「詳しく」ボタンはピル型
• 主ボタンは角丸 8px の長方形に二重の枠
• 見出し罫線は 1〜2px の白い細線で、両端に星
• 商品名は白いギザギザの吹き出し形にのせる

Components

• ファーストビュー（hero-product）: 網点の雲柄の青地に切り抜いた商品写真を大きく置く。上に商品名ロゴ、右下に茶色の価格、下に生成りの発売日帯
• 英字ラベル付き罫線見出し（headline-ruled）: 上の罫線の中央に英字ラベルを置き、日本語見出しの下にも罫線を引く。両端に星
• ぼかし縁の説明ボックス（glow-info-box）: 淡い水色の面を白いぼかしで囲む。上にハの字の飾りがついた見出し、下に中央揃えの説明文
• 詳しくボタン（button-more）: 白いピル型に青緑の文字。先頭に「>」をつける
• 店舗検索ボタン（button-primary）: 青緑の塗りに白文字。左に丸い矢印アイコン、右に店舗のイラスト。二重の枠
• 情報リンクボタン（button-secondary）: 白地のピル型に青緑の枠と文字。左に丸い矢印アイコン
• 具材の注記ラベル（ingredient-callout）: 写真の上に具材名を白・黄・赤の小さい文字で置き、点線で層を示す
• おすすめ商品バナー（related-banner）: 全幅の商品画像バナーを隙間なく縦に積む。バナーごとに配色は自由

Do's and Don'ts

Do - 青緑のグラデーション地に網点の雲と星をちりばめる - 見出しは白の丸ゴシックで、罫線と星で挟む - 素材ごとに写真をアップで見せ、下端で裁ち落とす - 価格と発売日は茶色の太字で、FV の中で目立たせる - 末尾は白い紙地に切り替え、ボタンと注意書きをまとめる

Don't - 本文に黒や濃い灰色を使わない（白か青緑にする） - 青緑以外の寒色・紫を主役にしない - 強い影やグラデーションのボタンを使わない - テキストを左揃えにしない - 装飾の星を大きくしすぎて写真を隠さない

Page Structure

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

1. ファーストビュー（新商品の見た目と価格、発売日を一目で伝える）: 雲柄の青地と斜めに入る白い紙地。商品を中央に大きく置き、ロゴ・価格・発売日帯を配置
2. 導入キャッチ（商品の登場を印象的に告知する）: 放射線と星柄の青緑地に、白い大見出しを 3 段で積む
3. 商品カテゴリの説明（デザートの由来を短く説明する）: ぼかし縁の淡い水色ボックスに、見出しと 4〜5 行の本文
4. 素材紹介 1（トッピング素材のこだわりを伝える）: 罫線見出し → 2 行の説明 → 詳しくボタン → 素材写真のアップ
5. 素材紹介 2（中の具材の楽しさを伝える）: 罫線見出しと説明。断面写真に具材名を注記する
6. 素材紹介 3（シロップと食感の特長を伝える）: 2 段の見出しと 4 行の説明、カップ下部のアップ写真
7. 来店の呼びかけ（購入をうながす）: 青緑の帯に白い大見出し。左右に商品写真を半分見切れで置く
8. CTA・注意書き（店舗検索と成分情報へ誘導する）: 白い紙地に主ボタンとサブボタンを縦に積み、その下に青緑の小さい注意書き
9. おすすめ商品（他の商品へ回遊させる）: 青緑文字の見出しの下に、全幅の商品バナーを縦に並べる

Imagery

• 商品は白背景で正面から撮って切り抜き、カップの透け感と層を見せる
• 雲は網点（ハーフトーン）で描き、白〜水色の半透明で地に重ねる
• 星は線画の 8 角星と小さな塗りの星を混ぜ、白・黄・赤でちりばめる
• 背景に放射状の集中線を薄く入れ、はじける感じを出す
• 商品の周りに短い白い線を描き、きらめきや動きを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横長にし、商品名を写真の左、価格を右に置く
• PC の導入キャッチは 1〜2 行の横長にまとめる
• PC の素材紹介は写真とテキストを左右交互に配置する
• PC の来店の呼びかけは左右に商品写真を 2 つずつ並べる
• PC のおすすめ商品バナーは 3 列に並べる
• PC でも本文ブロックの幅は約 600px に抑えて中央に置く

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