DESIGN.md — ビビッドピンク×金文字の食品宅配セールLP（Festive Pink Sale Meal-Kit Trial LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、親しみ・手作り感
• キーワード: セール祭り感・金グラデ極太数字・シズル料理写真・手書き風コピー・ピンク地CTA・ベージュの信頼パート
• 地の質感: ピンク地にうっすら粒子ラメ。FVは放射状の虹色集中線と紙吹雪。後半はフラットなベージュと白。
• 形: 丸角の白ピルラベル、リボン型見出し、円形バッジ、角丸カード
• 温度感: 暖色寄りで高揚感が強い。後半はやわらかく温かい

Colors

• 前半のセール・CTAはビビッドピンク地で統一する。
• 価格数字は金の立体グラデか朱赤で表し、黒はOFF率の帯とバッジにだけ使う。
• 購入ボタンは黄色グラデ1色に固定し、ほかで黄色の面は使わない。
• 後半の信頼パートはベージュと白とグレーにし、強調色は金茶だけにする。
• 黄色マーカーは口コミの要点やキャッチの帯に絞って使う。
• 注釈は淡ピンク帯か、白地にグレー小文字で置く。
• section-label-pill は文字 #F33469 × 背景 #FFFFFF のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E90E4B、4.54:1）を使う。

Typography

• 価格や割引率は数字を最大にし、単位と「税込」は小さく添える。
• 商品名は縦書きの明朝寄りの太字で、写真の左端に置いてもよい。
• 写真上の手書きコピーは-8°前後傾け、白字に影を付ける。
• 後半の見出しは字間を0.1em空け、下に金茶の短い線を引く。
• 注釈は必ず※で始め、10px程度のグレーにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績バッジとギャラリーは3列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品ごとに「ピンク帯見出し→全幅の料理写真→口コミカード→調理工程写真」の流れをくり返す。
• 料理写真は画面幅いっぱいに置き、余白をとらない。
• CTAブロック（価格カード・期限ピル・クーポン・購入ボタン・安心文言）は同じ形で3回置く。
• 口コミカードは写真の下端に半分重ねる。
• 後半の信頼パートは白カードを左右16pxの余白で中央に置く。

Elevation & Depth

• 購入ボタンは下に濃い影の段を付け、立体的な押せる見た目にする。
• クーポンボタンは白地に淡い影を付け、カード状にする。
• 口コミカードは影なしの白地に、角の折り目風の装飾を付ける。
• 後半のカードはフラットにし、細い線か白地の差だけで区切る。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理写真は全幅の長方形。サムネは正方形。アイコン人物は円形に切り抜く。
• セクション境界: 直線で切り替える。FVの下端だけ価格カードを重ねて連続させる
• セクションのラベルは白地のピルにピンク文字で載せる。
• 「10分で完成」はタイマー型の円形バッジにする。
• 評価や実績は月桂樹・王冠付きの円形メダルで見せる。
• 見出しにはリボン型の帯を使う。

Components

• 購入ボタン（button-primary）: 黄色グラデのワイドボタン。小さい前置き文と太字の動詞の2段構成で、右に▶を付ける。
• クーポン取得ボタン（button-coupon）: 白地のカード型ボタン。左下にピンクの斜め帯を入れ、右に商品の切り抜き写真を置く。
• 価格オファーカード（price-card）: 朱赤の枠の白カード。商品写真、OFFの円バッジ、朱赤の極大価格、条件ラベル2つ、送料無料を並べる。
• 期限ピル（deadline-pill）: 朱赤のピルに白文字で締切日時を入れ、カードの下端に重ねる。
• 白ピルラベル（section-label-pill）: ピンク帯の上に置く白い丸角ラベル。中の文字はピンクの太字。
• 口コミカード（review-card）: 白カード。左に線画の人物アイコン、右にピンクの見出し、本文の要点は黄色マーカー。
• 実績メダル（badge-medal）: 金茶の円に王冠を載せ、No.1や%を白抜きで表示する。
• FAQアコーディオン（faq-item）: グレーの行に金茶の丸Qアイコンと右端の＋。上に会話の吹き出しを置く。
• カウントダウン帯（countdown-bar）: 黒地の最上部に白文字で、締切までの残り時間を大きく表示する。

Do's and Don'ts

Do - 価格・割引率・期限を前半で何度もくり返す。 - 料理写真は湯気やツヤの出たシズル感のあるものにし、全幅で大きく見せる。 - CTAブロックは毎回同じ構成で置く。 - 後半では色数を絞り、ベージュと金茶で信頼感を出す。 - 手書きコピーで食感や味を補う。

Don't - 後半の信頼パートにピンクの面を持ち込まない。 - 購入ボタンの色を黄色以外にしない。 - 価格数字を細い書体にしない。 - 注釈を省略しない。 - 写真を小さなサムネだけで並べない。

Page Structure

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

1. カウントダウン帯（期限で今すぐの行動を促す）: 黒地に白の太字タイマーを置く
2. ファーストビュー（セールの価格と割引率を一瞬で伝える）: 虹色の集中線と紙吹雪の上に金立体の価格。料理を並べ、下に黒帯の割引率を置く
3. オファー・CTA（申込への導線）: ピンク地に価格カード、期限ピル、クーポンボタン、黄色の購入ボタンを並べる
4. 目玉商品紹介（看板商品の魅力を伝える）: リボン見出し、縦書きの商品名、全幅写真、口コミを縦帯で重ねる
5. 商品紹介（くり返し）（セット内容を1品ずつ見せる）: ピンク帯見出し、全幅写真、口コミカード、時短の工程写真
6. 特典紹介（おまけで背中を押す）: 朱赤の枠とリボン見出しで、特典の写真を見せる
7. CTA再掲（読了後の申込）: FVの縮小版とオファーカードをくり返す
8. ブランド実績（信頼の獲得）: 料理の俯瞰写真の上にロゴとコピー。月桂樹メダルと王冠バッジを3列で並べる
9. メディア掲載（第三者の評価）: ベージュ地に白カードの番組リストを置く
10. お客様の声（共感と安心）: グレー地に、写真付きの口コミカードをスライダーで見せる
11. よくある質問（不安の解消）: 会話の吹き出しとアコーディオン
12. 保証（リスクの軽減）: ベージュ地に、線画アイコン付きの白カードを置く
13. こだわり・取り組み（企業姿勢を伝える）: 金茶の線付き見出しと全幅のビジュアルスライダー
14. 最終CTA・商品一覧・フッター（締めの申込と内容の確認）: CTAをくり返した後に、商品サムネのグリッドと問い合わせボタンを置く

Imagery

• 料理は温かみのある木のテーブルで斜め上から撮り、湯気・とろける卵・ツヤを強調する。
• 皿は黒やグレーの陶器にし、具材の色を際立たせる。
• 調理工程は手元のフライパンを寄りで撮る。
• 人物は写真ではなく、白黒の線画アイコンにする。
• FVは放射状の虹色集中線、三角旗のガーランド、紙吹雪で祭り感を出す。
• 信頼パートは水彩風の風景イラストや、ミニマルな静物写真にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では中央に幅480〜600pxのSPカラムを置き、左右は淡いピンクかベージュで埋めることを推奨する。
• 全幅の料理写真はカラム幅に合わせ、比率を保つ。
• 実績メダルと商品サムネは、PCで4列まで広げてよい。
• 購入ボタンは最大幅400pxで中央に置く。

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