DESIGN.md — 苺レッド×練乳クリームの新作アイスLP（Strawberry Red Milky Collab Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: 苺レッド・練乳のとろみ・花形バッジ・金の縁取り・丸窓写真・季節の新作
• 地の質感: 赤地に微妙な明暗グラデーション。練乳がたれるような光沢のある3Dリボンと、小さなキラキラを散らす
• 形: 花形（5弁）バッジ、正円の写真フレーム、波打つ曲線のセクション境界、ピル型ボタン
• 温度感: 暖色中心で甘く温かい。クリーム色で柔らかく中和する

Colors

• 前半は苺レッド地を通し、明るい赤から深い赤への縦グラデで奥行きを出す
• 赤地の上の文字はクリーム色か白。黒文字は使わない
• 後半のおすすめ枠はピンク〜クリームイエローのグラデに切り替え、花形はコーラルピンク
• 情報エリアはクリーム地に白カードとこげ茶罫線
• 金色は境界の波線と写真フレームの縁だけに使う
• 該当する項目は赤ベタ塗りで強調し、該当しない項目はグレー文字にする
• flower-badge は文字 #D2443B × 背景 #E78C81 のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• info-table は文字 #A8A0A0 × 背景 #FEFEFD のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7E7373、4.54:1）を使う。

Typography

• 見出しは太い丸ゴシックで甘く元気な印象にする
• 大見出しは白文字にピンクと濃赤の二重縁取りを付け、斜体ぎみにする
• 小見出しは斜線ではさむ（\ 〇〇 /）
• 本文は字間を広めにして短い行で改行する
• Point番号は欧文スラブセリフにし、左右に花のアイコンを添える
• 注釈は※付きの小さな文字で写真の近くに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と文章を左右交互に並べる2分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 主役の商品写真は画面幅いっぱいに大きく置く
• 特長は丸窓写真を左右交互に配置し、反対側にテキスト
• 断面写真には引き出し線とラベルで構成要素を示す
• おすすめ枠は写真と花形カードを互い違いに重ねる
• 情報表は4列グリッドで白セル、罫線は細い
• ボタン2つを横並びで等幅に

Elevation & Depth

• カードと動画枠は白い太枠に柔らかい影
• 商品写真には下に淡い影を付けて浮かせる
• 練乳リボンの装飾は光沢のあるハイライトと影で立体的に見せる
• 情報表はフラット。影なし

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 断面写真は金縁の正円で切り抜く。商品は背景を抜いた切り抜き
• セクション境界: 金の縁取りが付いた緩やかな波曲線
• バッジは5弁の花形
• Point見出しはクリームのピル型
• 動画やカードは角丸12〜20pxに白枠
• 表の外枠は角丸8px

Components

• 花形バッジ（flower-badge）: ピンクの5弁花の中に商品名を2〜3行の濃赤太字で入れる
• Point見出しラベル（point-label）: クリームのピルの中に欧文で番号を入れ、両脇にピンクの花
• 丸窓写真（circle-photo）: 金縁の正円で断面を見せる。2枚を重ね、交点に×印
• 引き出しラベル（callout-label）: クリームの帯ラベルから赤い点線を写真の上へ伸ばす
• 開発秘話カード（story-card）: クリームの角丸カード。虫眼鏡アイコンの見出しとキャラクターを添える
• 詳細ピルボタン（button-pill）: クリームのピル。右端にこげ茶の丸い矢印アイコン
• 動画枠（video-frame）: 白い太枠と角丸を付けた16:9の埋め込み枠
• 情報グリッド表（info-table）: 白セルの4列表。該当セルは赤ベタに白文字、非該当はグレー文字
• 特設サイトバナー（banner-card）: ピンク地のバナー。下部は赤帯に白文字のリンクを入れる

Do's and Don'ts

Do - 赤地の上に練乳色のとろりとした曲線装飾を散らす - 花形・円・波など柔らかな形でそろえる - 商品写真は大きく、ツヤと質感が伝わるように見せる - 苺やケーキの小物を画面端から少しはみ出させて置く - 注釈は※を付けて小さく添える

Don't - 寒色や黒の大きな面を使わない - 角張った四角いボタンにしない - 赤地に赤文字や茶文字を置かない - 直線だけでセクションを区切らない - 装飾を本文の上に重ねない

Page Structure

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

1. ファーストビュー（季節の新作とコラボを告知する）: 赤地にピル型の月ラベルとロゴを置く。花形バッジと特大の商品写真に、キャラクターとサブ商品を添える
2. リード（味のコンセプトを伝える）: 波線の下にクリーム色の太字で4行のコピー。その下に白い説明文
3. 構成解説（中身の構成要素を見せる）: 断面写真に引き出しラベルを3〜4本付ける
4. 特長（こだわりを2点説明する）: Pointラベルと丸窓写真を左右交互に置く
5. 開発ストーリー（誕生の背景で共感を得る）: クリームのカードにアイコン見出しを置き、キャラクターを添える
6. サブ商品紹介（同時発売品を紹介する）: 白い曲面の上に写真を置き、花形バッジと斜線見出しを添える
7. 特設サイト誘導（関連キャンペーンへ送客する）: ピンクのバナーカードと赤帯リンク
8. おすすめの組み合わせ（併せ買いを提案する）: ピンク〜黄のグラデ地に縁取り大見出し。写真と花形カードを交互に重ねる
9. 動画（CMと紹介動画を見せる）: 赤地にクリーム見出しと白枠の動画を2本
10. 導線ボタン（一覧・店舗検索へ誘導する）: クリームのピルボタンを2つ横並び
11. シリーズ説明（新作企画の趣旨を伝える）: 水色〜ピンクのグラデカード。左にロゴ、右に点線区切りの3行
12. アレルギー・栄養情報（必要な情報を開示する）: クリーム地に白の見出し帯とグリッド表。赤とピンクで強調する

Imagery

• 商品はスタジオで切り抜き撮影し、ツヤと断面の質感を強調する
• 練乳がたれるリボン状の3D装飾を、画面の端に配置する
• 苺やショートケーキの小物を、写真の切り抜きで散らす
• レトロ可愛いキャラクターのイラストを添える
• 白いキラキラや星を小さく散らす
• 皿・スプーン・カップなどの小道具で、場面を作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480px幅のSPデザインを置き、左右を赤地で埋める想定にする
• PCで広げる場合は、特長の2分割の比率を保ったまま余白を増やす
• 動画は最大幅を制限して中央に置く
• 表は4列のまま最大幅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 行書くと起動時に読み込まれる。