DESIGN.md — 苺赤グラデの季節限定氷スイーツ LP（Strawberry Red Gradient Frozen Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト
• キーワード: 苺赤・縦グラデーション・円形パネル・シズル写真・スクリプト番号・季節限定
• 地の質感: ベタ塗りの赤とグラデーションの上に、半透明の白い苺の線画を壁紙のように散らす
• 形: 大きな正円や半円のパネル、ミルクが垂れる形の曲線、角丸のボタン
• 温度感: 暖色中心。ひんやり感はアイスブルーの斜めの帯で少しだけ足す

Colors

• ページの上から下へ、深い苺赤→朱赤→サーモン→淡いピンクと少しずつ明るくしていく
• 赤地の上の本文は白、小見出しと強調語はクリーム黄にする
• 商品写真は大きな深赤の円で囲み、地のグラデーションから浮き立たせる
• 白地は発売日の帯と関連商品の見出し帯だけに使い、区切りとして効かせる
• 主 CTA は赤地に白文字。淡ピンク地の上に置いて目立たせる
• 寒色はアイスブルーの斜めの帯 1 か所だけにして、冷たさを補う程度にする

Typography

• 欧文スクリプトの数字を和文の小見出しより大きく置き、手書きのような装飾として見せる
• 説明文は字間を広め・行間を 2.0 にし、短く改行して 4〜5 行に収める
• コピーの中で強調したい語だけクリーム黄に変える
• 商品名は太字のゴシックにし、難しい漢字にはルビを振る
• 価格は欧文の数字を極太にして大きく、税込価格は括弧で囲む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは写真と円パネルを左右交互に重ねる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• ポイントの円パネルは画面の端からはみ出させ、左寄せと右寄せを交互にする
• 商品写真は円パネルの反対側に重ねて置く
• テキストは円の中に左揃えで入れる
• CTA は中央に縦に 2 段で並べる
• 関連商品のバナーは全幅で縦に積む

Elevation & Depth

• 影はほぼ使わない。写真の切り抜きに柔らかい落ち影を付ける程度
• 主 CTA は白い細枠を内側に入れた二重枠で厚みを出す
• 奥行きは円パネルと散らした苺シルエットの重なりで作る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。円パネルに重ねるか、はみ出させて配置する
• セクション境界: 大きな円弧や、ミルクが垂れる形の曲線。FV の下は直線の白い帯
• 円パネルは画面幅の 70〜80% の正円にする
• サブボタンは小さな黄色のピル型で、右に三角の矢印を付ける
• 主 CTA は角を少し落とした長方形に二重枠を付ける
• 角張った硬い四角の箱は使わない

Components

• 店舗検索 CTA（button-primary）: 赤地に白い細い内枠。左に黄色い丸矢印、右に小さなアイコンを置く
• 情報リンクボタン（button-secondary）: 白地に赤枠のピル型。左に赤い丸矢印を付ける
• 詳しくはピル（button-pill-small）: 円パネル内に置く小さな黄色のピル。右に赤い三角を付ける
• ポイント円パネル（point-circle）: 深赤の大きな正円の中に、スクリプトの番号・黄色の小見出し・白の本文を入れる
• 欧文スクリプト見出し（script-heading）: 白い欧文の筆記体を波線ではさみ、その下に小さな和文のサブ見出しを添える
• 丸バッジ（badge-round）: クリーム色の円に、赤文字で素材の特長を 2〜3 行で入れる
• 発売日帯（date-band）: 白い全幅の帯に、赤茶の太字で発売日を入れる。数字を大きくする
• 注釈リスト（note-list）: 淡ピンク地に、赤茶の小さな文字で※注釈を並べる

Do's and Don'ts

Do - 地の色は必ず上から下へ赤→ピンクのグラデーションにする - 白い苺の線画を半透明にして背景全体に散らす - ポイントは円パネルと切り抜き写真を交互に組む - 強調はクリーム黄の文字と、欧文スクリプトで行う - シズル感のある果物の写真をフレームの外にはみ出させる

Don't - 青や緑の面を大きく使わない（冷たさの演出は帯 1 か所まで） - 四角いカードをグリッドに並べない - 赤地の上に黒い本文を置かない - スクリプト体を本文に使わない - 影を重くしたり立体的なボタンにしたりしない

Page Structure

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

1. ファーストビュー（商品名・価格・特長を一目で伝える）: 赤地に苺のシルエットを散らし、上部に白い太字の商品名。中央にカップの切り抜き写真、右に丸バッジと縦書きのコピー、右下に大きな価格を置く
2. 発売日の告知（いつから買えるかを伝える）: 白い全幅の帯に赤茶の太字で日付を入れる
3. コンセプト（商品の魅力をひと言で伝える）: 赤地の左に 3 行の白いコピー（一部はクリーム黄）。右に商品写真と、ミルクが垂れる形の白い曲線を置く
4. ポイント見出し（特長のパートが始まる合図）: 欧文スクリプトを波線ではさみ、和文のサブ見出しを添える。左右に苺の写真
5. 特長（3 ポイント）（素材・クリーム・食べ方を説明する）: 深赤の円パネルを左右交互に置き、スクリプトの番号・黄色の小見出し・白の本文を入れる。写真を円に重ねる
6. CTA（店舗へ誘導する）: 淡ピンク地に赤文字の呼びかけ、円の中に商品写真。主 CTA とサブボタンを縦に並べる
7. 注釈（価格や取り扱いの注意事項を示す）: 淡ピンク地に、赤茶の小さな文字で※を列挙する
8. 関連商品（ほかの商品へ回遊させる）: 白い帯に赤い見出しを置き、その下に全幅の商品バナーを縦に積む

Imagery

• 商品は透明なカップの切り抜き写真。白いソフトクリームの渦と、赤い果肉の層を明るく写す
• 生の苺は葉付きで、つやを強めて切り抜き、浮遊感が出るように配置する
• カットした果実やスプーンなど、シズルを感じる小物を添える
• 背景の苺は白の線画やハーフトーンにして、半透明（20〜40%）で散らす
• ミルクが垂れる形の白い曲線で、なめらかさを表現する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 960px の幅で、地のグラデーションと苺の散らしは全幅に広げる
• PC の FV は商品名を左下、写真を中央、価格を右に置く横長の構図にする
• PC のポイントも円パネルと写真の左右交互配置を保ち、円は約 300px に縮める
• PC の CTA セクションはボタンを左、商品写真を右に置く 2 カラムにする
• 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 行書くと起動時に読み込まれる。