DESIGN.md — 橙×紫グラデと生成り紙の食品LP（Vivid Orange Purple Gradient Food Product LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 橙→紫グラデーション・白抜き太字・シロップの滴り・波形の境界・和紙風の生成り地・吹き出し
• 地の質感: 前半はなめらかな発色グラデーション。後半は細かな繊維が入った生成りの紙テクスチャ。
• 形: 角丸の白カード、ピル型の帯見出し、楕円の吹き出し、ポラロイド風の傾いた写真、液体のような波形の境界。
• 温度感: 高温・暖色寄り。焼き色や甘さを感じさせる熱量の高い配色。

Colors

• 前半はオレンジ→朱赤→ボルドー／紫の縦グラデ地に白文字を載せる。
• メッセージは赤紫の単色地で区切り、白カードに焦茶文字で読ませる。
• レシピ部は生成り紙地に切り替え、焦茶文字で落ち着かせる。
• 帯見出しは紫と黄を交互に使い、紫は白文字・黄は焦茶文字。
• 本文中の強調はオレンジ文字のみで行う。
• ボタンはオレンジ→赤紫のグラデに白文字。
• button-primary は文字 #FFF8E8 × 背景 #FF7007 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BF5100、4.52:1）を使う。
• button-outline は文字 #FFF8E8 × 背景 #FF7007 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BF5100、4.52:1）を使う。

Typography

• グラデ地の文字はすべて白の太字丸ゴシックで中央揃え。
• 見出しは文字に色付きの縁取りやドロップシャドウを入れて立体感を出す。
• 紙地パートは明朝体に切り替え、上質な食卓感を出す。
• FVのキャッチは縦書きの2列で写真の左右に配置する。
• 本文は字間を少し広め（0.05em）、行間は1.8前後。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右16〜20pxの余白で横いっぱいに使う。
• 写真はポラロイド風に左右交互へ傾けて配置。
• 吹き出しと写真をジグザグに重ねてストーリーを進める。
• レシピは帯見出し→写真→説明文の縦3段を繰り返す。
• 紙地パートは細い縦罫線で額縁のように囲む。

Elevation & Depth

• 白カード・吹き出しに柔らかいドロップシャドウ。
• ポラロイド写真に白フチと影を付け浮かせる。
• 見出し文字に濃色のテキストシャドウ。
• 紙地パートはフラットで影をほぼ付けない。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は丸切り抜きか背景透過、料理は角写真、行程写真は白フチのポラロイド風に傾ける
• セクション境界: 黄色いシロップが流れるような波形曲線で区切る
• 帯見出しはピル型（全角丸）。
• 主ボタンは角丸8px程度の長方形。
• 吹き出しは大きな角丸にしっぽを付ける。
• シロップの滴りやしずくの形を装飾に使う。

Components

• グラデボタン（button-primary）: オレンジ→赤紫グラデに白太字、右に丸い＋アイコン
• 枠付きサブボタン（button-outline）: グラデ地に白枠を付けた細めのリンクボタン
• 帯見出し（heading-band）: レシピ名を載せるピル型帯。紫と黄を交互に
• 吹き出し（speech-bubble）: 白い角丸にしっぽ付き。人物のひと言を中央揃えで
• メッセージカード（message-card）: 赤紫地に置く白い大カード。下に人物丸写真
• 楽しみ方スライダー（slider-card）: 白カードに大きな番号と黄マーカー見出し、写真、左右矢印、ドット
• カテゴリタグ（tag-pill）: 紫と黄の小さなピルを2つ並べる
• 記念ピル帯（pill-banner）: 白枠ピルの中央に大きな数字を赤丸で強調

Do's and Don'ts

Do - グラデ地は暖色から紫へ縦に流し、セクションの区切りに波形を使う。 - 白抜き文字には影か縁取りを付けて読みやすくする。 - 料理写真は湯気や照りが出る暖色の照明で見せる。 - 吹き出しで人物の声を入れ、親しみを出す。 - レシピ部は紙地＋明朝で雰囲気を切り替える。

Don't - 寒色系の地色を広く使わない。 - グラデ地に細い文字や黒文字を置かない。 - 帯見出しを紫・黄以外の色にしない。 - 写真を傾けずに整然と並べすぎない。 - 紙地パートに強いグラデを持ち込まない。

Page Structure

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

1. ファーストビュー（商品とタレントを一目で印象づける）: オレンジ→紫グラデに浮遊する食材写真、縦書きキャッチ2列、人物、白抜き商品名
2. 記念・コンセプト（開発の背景を伝える）: 記念ピル帯とロゴ、白文字の中央揃え本文
3. 人物メッセージ（起用人物の想いで共感を作る）: 赤紫地に白い吹き出しカード、下に丸切り抜き写真と署名
4. 開発ストーリー（開発の過程を物語で見せる）: 波形境界から始まるグラデ地、傾けた写真と吹き出しをジグザグに配置
5. 楽しみ方（使用シーンを提案する）: 番号付き白カードのスライダー
6. アレンジレシピ（具体的な食べ方で購入意欲を高める）: 生成り紙地、タグと明朝見出し、帯見出し＋写真＋説明の繰り返し、もっと見るボタン
7. 締めのひと言（人物の言葉で余韻を残す）: 吹き出しと人物の切り抜きを右下に
8. 動画（CMで話題性を伝える）: ベージュ地に動画埋め込みを縦に並べる
9. 購入導線・フッター（購入先とSNSへ誘導）: 白地に枠付きの販売先バナー、ロゴ、SNSアイコン、赤帯コピーライト

Imagery

• 食材が宙を舞い、シロップが垂れる躍動的なシズル写真。
• 人物は背景透過で座りポーズや食べるしぐさ。
• 開発風景は白フチ付きのポラロイド風スナップ。
• 料理は木やクロスの上で暖色照明、真上か斜め上から。
• シロップのしずくや焼き面の円形を装飾に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央にSP幅の縦長カラムを置き、左右は余白にする。
• PCのFVだけ横長に広げ、左に商品名、右に食材写真を配置。
• FV以外の内容はSPと同じ構成を中央カラムで見せる。
• PCでスライダーや動画を横並びにする場合は2〜3カラムまで。

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