DESIGN.md — 深緑×山吹の健康食品オファー型 LP（Deep Green and Mustard Healthy Noodle Offer LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 情報量多め・訴求型、ナチュラル、信頼・誠実、力強い・インパクト
• キーワード: シズル料理写真・深緑の帯・山吹色の割引バナー・茶色の丸見出し・繰り返しの価格カード
• 地の質感: 木の卓や暗い背景で撮った料理写真に、ベタ塗りの面と細い線のカードを重ねる。
• 形: 角丸カード、正円の番号バッジ、下向き三角の吹き出し、斜めストライプ
• 温度感: 暖かめ。茶・ベージュ・山吹色を深緑で引き締める。

Colors

• 地は白。グラフ区画だけ薄いグレージュにする。
• 深緑はオファー見出し帯、サブボタン、フッターに使う。
• 割引バナーは黄色地に深緑の大きな数字を載せる。
• 価格と割引率は赤だけで強調する。
• 見出しは茶色にし、食の温かみを出す。
• メディア掲載は紺地、こだわり区画は黒地に金で、空気を切り替える。
• button-coupon は文字 #E39A18 × 背景 #FFFFFF のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#9E6B11、4.6:1）を使う。

Typography

• 見出しは太めの丸ゴシックで、2〜3行に改行して中央に揃える。
• 数字は極太にし、単位は小さくする。
• 注釈は※付きの小さい文字で、根拠のすぐ下に置く。
• 手書き風の書体はFVだけに使う。
• 見出しの前に斜線の装飾（＼ ／）を付けることがある。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長・お悩みは 3 列、SNS 投稿は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面幅いっぱいに置く。
• テキストブロックは左右に約 5% の余白を取る。
• オファーのまとまり（帯→バナー→価格カード→2 ボタン）を 3 回以上繰り返す。
• 特長は番号→見出し→本文→写真の順で縦に並べる。
• 注釈は薄いグレーの角丸ボックスにまとめる。

Elevation & Depth

• 影は基本的に使わず、平面にする。
• CTA ボタンは下に濃い色の段差を付けて立体に見せる。
• 価格カードは深緑の太い枠線と下向きの三角で浮かせる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角で全幅に置く。料理の皿は円形のまま画面の端で切る。
• セクション境界: 直線で切り替える。下向き三角の吹き出しで次の区画へ視線をつなぐ。
• 特長の要約は茶色の線の正円 3 つ。
• 価格の割引表示はチケット型の赤枠。
• 送料無料は赤い正円のバッジ。
• ボタンは角丸 12px 前後の長方形。

Components

• クーポン取得ボタン（button-coupon）: 白地に山吹色の太枠。角に斜めの帯を付け、2 行のオレンジ文字を置く。下に段差の影を付ける。
• 直接申込ボタン（button-secondary）: 深緑のベタ塗りに白文字 2 行。下に濃い段差を付ける。
• 価格カード（offer-price-card）: 深緑の枠に白地。商品名、グレーのピル型ラベル、深緑の帯ラベル、取り消し線の通常価格、赤の大きな価格、注釈の順に並べる。
• 割引バナー（offer-banner）: 深緑の帯見出しの下に、黄色地の斜めストライプと深緑の巨大な割引率を置き、商品写真を添える。
• お悩みカード（worry-card）: ベージュの角丸カードを 3 列に並べ、茶色の太字を 3 行で置く。
• 番号付き円バッジ（feature-circle）: 茶色の線の正円に、番号と短い特長を入れる。小さな吹き出しを添える。
• 月桂樹の実績バッジ（award-badge）: 金色の月桂樹で、深緑の No.1 表記を挟む。
• メディア引用（media-quote）: 紺地の上の白いボックスに、カギ括弧と黄色マーカーの引用、線と媒体名を置く。
• FAQアコーディオン（faq-item）: 白地に細い線の行。左に Q、右に＋を置く。

Do's and Don'ts

Do - オファーのまとまりを、ページの序盤・中盤・終盤に繰り返し置く。 - 主張には※注釈を付け、根拠をすぐ近くに示す。 - 料理写真は湯気やツヤが伝わるシズル感のあるものを全幅で使う。 - 数字は極太で大きくし、実績の帯で信頼を示す。 - 見出しは茶色の丸ゴシックで温かみを保つ。

Don't - 価格以外に赤を使わない。 - 深緑と山吹色以外の鮮やかな色をボタンに使わない。 - ネオン調などの派手な色を使わない。 - 本文を詰め込みすぎず、行間を 1.7 前後に保つ。 - 写真に強いフィルターをかけない。

Page Structure

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

1. ファーストビュー（おいしさと健康価値を一目で伝える）: 暗い木の卓の料理写真に、白い手書き風の大コピーを重ねる。下部に深緑のラベルと白い帯のキャッチ、注釈を置く。
2. 実績バッジ（第三者評価で信頼を示す）: 生成り地に月桂樹のバッジを 3 つ並べ、注釈を添える。
3. 販売実績（多くの人に選ばれていることを示す）: 暗くした写真の上に、白の巨大な数字と黄色の下線を置く。
4. オファー（割引価格で申込を促す）: 深緑の帯、黄色の割引バナー、価格カード、クーポンボタン、深緑のボタンの順に並べる。
5. 悩みの提起（対象者に自分ごとと思わせる）: 斜線で挟んだ見出しの下に、ベージュのカードを 3 枚並べる。
6. 商品紹介（商品の価値を要約する）: 全幅の料理写真に白の大きな文字を重ね、正円の番号バッジ 3 つで特長を要約する。
7. 特長（根拠を順に説明する）: 大きな番号、茶色の見出し、本文、写真または比較グラフ、注釈ボックスの順に並べる。
8. 専門家の声（プロのおすすめで権威を示す）: 上下を二重線で区切り、左にコメント、右に人物の切り抜き写真を置く。料理写真を 3 枚横に並べる。
9. SNS投稿（利用者の生の声を見せる）: タブの下に、角丸の投稿カードを 3 列のグリッドで並べ、枠線だけの「もっと見る」ボタンを置く。
10. メディア掲載（話題性を示す）: 紺地に白ボックスの引用を置き、雑誌の表紙を横一列に並べる。
11. こだわり（原料と製法の価値を伝える）: 黒地の写真に金の円バッジを置き、金の角線の付いた白カードで説明する。料理を 4 分割した写真も使う。
12. まとめCTA（最後に購入を後押しする）: 山吹色の丸い特長バッジと見出しの後に、オファーのまとまりを再掲する。
13. よくある質問（不安を解消する）: 下線付きの見出しの下に、Q と＋の付いたアコーディオンを並べる。
14. 商品情報・フッター（原材料表示と会社情報を載せる）: 枠線の表示ボックスとグレーのピル型ラベルの下に、深緑のフッターを置く。

Imagery

• 料理は真上か斜め 45 度から寄って撮る。麺を持ち上げた瞬間や湯気でシズル感を出す。
• 背景は木の卓やグレーの石目にし、自然光でやや暖色寄りにする。
• 原料は木の器に盛り、暗めの背景で質感を見せる。
• 実績の帯の背景写真は暗く落とし、集中線の装飾を加える。
• 割引バナーには斜めストライプと三角の紙吹雪を付ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の画像を中央の 600px 前後の幅に置き、左右を白か淡い色で埋める構成を推奨する。
• PC ではカード類を 3〜4 列に広げてもよい。
• オファーのまとまりは PC でも縦積みのまま、幅 600px 以内に収める。
• 文字サイズは SP の 1.2 倍程度にする。

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