DESIGN.md — ベリーピンク×生成り麻の薬膳スープ定期便LP（Warm Herbal Soup Subscription LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 薬膳・麻布テクスチャ・ベリーピンク・明朝見出し・白皿の俯瞰写真・定期便価格訴求
• 地の質感: 生成りの麻布・クラフト紙・淡い紙の質感を背景に敷き、写真は木のテーブルで暖かい色味
• 形: 波形のセクション境界、円形の切り抜き皿写真、片側を斜めに折ったリボン帯、六角形バッジ
• 温度感: 暖色寄り。ピンクとベージュでぬくもり、ダークグレーで引き締め

Colors

• 地は白・麻布ベージュ・淡クリームを交互に使い、セクションごとに切り替える
• 見出しは黒の明朝で、キーワードだけをベリーピンクに変える
• ピンクの面はリボン帯・価格バッジ・グラフに限定する
• 購入導線のボタンだけはコーラル系のオレンジ赤にして主色と分ける
• 悩み提起だけダークチャコール地にし、吹き出しはくすんだピンク/グレー
• 本文の重要文は黄色マーカーで下半分〜全体を塗る
• button-primary は文字 #FFF7EE × 背景 #E16D54 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC4224、4.53:1）を使う。
• button-detail は文字 #FFF7EE × 背景 #E16D54 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC4224、4.53:1）を使う。

Typography

• 見出しは明朝、本文と注釈はゴシックで分ける
• 見出しの強調語はピンクで1段大きく、助詞は小さく黒にする
• 番号は細い明朝の大きな数字にし、上に弧状の欧文ラベルを載せる
• 英字の筆記体は淡いグレーやピンクで写真脇に薄く重ねる
• 価格は明朝の極太サイズ、税込表記は小さく右上に
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品一覧は画像左・テキスト右の2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文は左右余白約22pxで左揃え
• 見出しは中央揃え
• 写真と白い本文ボックスを少しずらして重ねる
• 価格ボックスは細い枠線で囲み、内部を点線で区切る
• 割引率は3つの枠を横並び

Elevation & Depth

• 写真や白ボックスに右下へ柔らかい影を落とす
• カード・ボタンはほぼフラット
• クリップのあしらいで紙を留めた立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 皿は円形の切り抜き、その他は角型で影付き
• セクション境界: なだらかな波形カーブ、またはクラフト紙帯
• リボン帯は右上角を三角に折り返す
• 円形の丸スタンプバッジに弧状の英字
• 悩みは不定形の楕円ブロブ
• ボタンは小さめ角丸の長方形

Components

• 診断CTAボタン（button-primary）: コーラル地に白太字2行、左に円形の小バッジ、右に矢印
• 商品詳細ボタン（button-detail）: 商品名の下に置く小型のコーラルボタン
• 折り返しリボン帯（ribbon-heading）: ピンク帯に白明朝2行、右上を折った形
• 特長番号（feature-number）: 弧状の欧文ラベル＋細明朝の大数字
• クラフト紙の見出し帯（craft-title-bar）: 全幅の茶色紙テクスチャに白明朝の大見出し
• 丸スタンプバッジ（round-stamp）: 白円にピンク細線、弧状の英字と中央に短い訴求
• 価格オファーボックス（price-box）: 細枠の白ボックス、取り消し線の通常価格→矢印→ピンクの大きな価格、斜めカットの限定タグ
• 悩み吹き出し（worry-blob）: ダーク地に線画人物と不定形ブロブ、白文字2行
• 黄色マーカー（text-marker）: 本文中の重要文を黄色で塗る

Do's and Don'ts

Do - 見出しのキーワードだけをピンクにし、黒の明朝と組み合わせる - 背景に麻布や紙の質感を敷いて手仕事感を出す - スープは白い器に入れ、俯瞰か斜め上から撮った温かい写真を使う - セクションの境は波形カーブでやわらかく区切る - 価格は通常価格の取り消し線と割引後の価格を並べる

Don't - ビビッドな原色や蛍光色を多く使わない - 見出しを太いゴシックだけで組まない - CTA以外にコーラル色を使わない - 背景を全部無地の白にしてのっぺりさせない - 角丸の大きいピル型ボタンにしない

Page Structure

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

1. ファーストビュー（商品の世界観と手軽さを伝える）: マゼンタの波形ヘッダーにロゴ、木卓のスープ写真に白明朝のキャッチ、丸スタンプと六角形バッジを配置
2. 使い方（調理の簡単さを伝える）: クリーム地に両手で持つ器の写真、鉤括弧の見出し、円形写真とStep番号バッジ
3. 購入方法（選び方を2通りで説明する）: クラフト紙帯の見出し、HOW TO BUY番号、皿写真の組み合わせ図と手書き吹き出し
4. 初回オファー（初回割引で申込を促す）: グレー地にリボン見出しと大きな割引率、細枠の価格ボックス、スクロール式の注意書き
5. ブランドストーリー（開発背景と想いを伝える）: スープ俯瞰の全幅写真、筆記体の英字見出し、中央揃えの明朝本文
6. 開発拠点（実店舗での信頼性）: 麻布地に店舗写真とピンク円、縦書きの大見出し
7. お客様の声（SNS投稿で実感を示す）: 3×3の白枠付き投稿写真グリッド
8. 悩みの提起（体調の悩みに共感する）: ダーク地に線画人物と不定形ブロブで悩みを5つ並べる
9. 解決提示（商品が悩みに寄り添うと伝える）: 暗めの写真上にピンクリボン＋白明朝の大見出し
10. 特長（5つの特長を説明）: FEATURES番号、ピンク強調見出し、リボン帯、マーカー本文、写真と白ボックスの重ね
11. 継続割引（長く続ける利点を示す）: 割引率の3枠と斜線ストライプの棒グラフ、手書き吹き出し、診断CTA
12. 商品一覧（全メニューを紹介）: MENU見出し、円形皿写真＋ピンクの効能ラベル＋明朝商品名＋詳細ボタンを罫線で区切る
13. 最終オファー（再度申込を促す）: 初回限定タグと大きな割引見出し、価格ボックスを繰り返す

Imagery

• 白い陶器の器に盛ったスープを木のテーブルで暖色光のもと撮る
• 単品は真上からの俯瞰で白皿を円形に切り抜く
• 生薬や乾物を小皿に並べた俯瞰写真で素材感を出す
• 悩みは細い黒線の人物線画イラスト
• 手書き風の吹き出しや矢印、キラキラの線をあしらう
• 麻布・クラフト紙・紙の質感テクスチャを背景に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅のSPレイアウトを置き、左右を背景色で埋める
• PCでは商品一覧を2〜3列のカードにしてもよい
• 写真と本文の重なりはPCで左右2カラムに広げる
• 見出しの文字サイズはPCで1.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 行書くと起動時に読み込まれる。