DESIGN.md — ミント×黄×黒のレトロゲーム風サプリ LP（Retro Arcade Pop Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、レトロ
• キーワード: ミント×イエロー・黒い吹き出し・白フチの極太文字・もこもこ雲・レトロゲーム・ドット模様
• 地の質感: ベタ塗りの平面に、ドットや放射線、雲のイラストを重ねたコミック風。影は硬くて短いドロップシャドウ。
• 形: 角丸の黒い吹き出し、ギザギザの星形バッジ、白いピル型ボタン、円形のアバター
• 温度感: 暖色の黄色と寒色のミントが交互に出る、明るくて元気な中間の温度

Colors

• セクションごとに地の色をミント→黄→紫→白→ミントのようにはっきり切り替える
• 強調の吹き出しや見出しの帯は必ず黒の面に白い文字
• 黒地の中のキーワードは黄色の文字か黄色のマーカー帯で目立たせる
• 大きな数字や「減少」のスタンプには赤を使う
• 購入ボタンは白い面に黒い文字とし、暗い影でカラフルな地から浮かせる
• 雲の背景はクリームから黄色のグラデーションにして、FV と区切りのあいだに入れる
• arrow-down は文字 #FCFCFC × 背景 #5EC7B9 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2D8075、4.59:1）を使う。

Typography

• キャッチは極太にし、白フチと黒い硬い影を付けてステッカーのように見せる
• 見出しの中で、キーワードだけを 1.5〜2 倍の大きさにする
• 数字は特大にし、単位は小さくする
• 悩みはギザギザ吹き出しの中に縦書きで書く
• 本文は 2〜3 行で短く切り、キーワードを黄色にする
• 注釈は小さい文字にして、ブロックの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。価格比較だけ 2 カラムにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央揃えを基本にする
• 商品パッケージは画面幅の 70% 前後で大きく置く
• 悩みは写真と吹き出しを左右交互にずらして重ねる
• 黒い吹き出しは画面幅の 88% 前後にし、下に三角のしっぽを付ける
• 購入ボタンは商品と価格のすぐ下に毎回置く

Elevation & Depth

• 購入ボタンには下方向にぼかしの少ない濃い影を付ける
• 白い角丸カード（グラフや写真）には薄い影を付ける
• キャッチの文字には黒くて硬いオフセット影を付ける
• 黒い吹き出しには白フチを付けて地から切り離す

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は白フチの四角にして少し傾け、アバターは円形にし、成分写真はギザギザの星形の中に入れる
• セクション境界: もこもこの雲のシルエットと、下向き矢印の形で区切る
• 吹き出しは角丸で、しっぽは三角にする
• 悩みの吹き出しはギザギザのフチにする
• ラベルはピル型の黄色バッジにする
• 見出しの左右には短い斜線や放射線を付ける

Components

• 白いピル型購入ボタン（button-primary）: 白い面に販売サイトのロゴと文言、右端に矢印を置き、濃い影で浮かせる
• 黒い角丸吹き出し見出し（speech-dark）: 黒い面に白フチを付け、下にしっぽを出す。白い文字の見出しにする
• ギザギザの悩み吹き出し（spiky-bubble）: 黒いギザギザの円に縦書きの白い文字。キーワードは色を変え、端にドットを散らす
• 黄色のピル型ラベル（badge-pill）: 黄色の面に黒い文字の短いラベル。黒い細フチを付けることもある
• 商品名の黒い帯（product-name-bar）: 黒い横長の帯に白い文字で商品名を入れ、下に容量と価格を置く
• お客様の声の吹き出しカード（voice-card）: 円形アバターと黒い吹き出しを左右交互に置き、キーワードを黄色にする
• 実績の特大数字（big-number）: 赤い極太の数字に白フチと影を付け、単位と補足は黒で添える
• 流れを示す下向き矢印（arrow-down）: 白い線の矢印やミントの太い矢印で次の内容へ誘導する
• 注釈ボックス（note-box）: 黒い細線で囲んだ枠の中に、小さい文字の注釈を箇条書きでまとめる

Do's and Don'ts

Do - セクションごとに地の色を大きく切り替えて、テンポを出す - 見出しはできるだけ黒い吹き出しに入れる - キーワードは黄色の文字や黄色のマーカー帯で目立たせる - キラキラやドットなど小さい装飾を余白に散らす - 商品と購入ボタンのセットを 3 回以上くり返す - 大きな数字には根拠の注釈を添える

Don't - 淡い色だけで上品にまとめない - 細い明朝体を使わない - 購入ボタンをカラフルな地の色と同化させない - 1 つのセクションに長い本文を置かない - 影をふわっとした大きなぼかしにしない - 注釈を省略しない

Page Structure

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

1. ファーストビュー（対象者と効果を一目で伝える）: 雲の背景に極太キャッチを置き、ミントの地に大きな商品を配置する。円周に沿ったローマ字とキラキラで囲み、下に購入ボタンを置く
2. CM・話題性（認知度をアピールする）: 黄色の地に黒いピル見出しを置き、動画を枠いっぱいに埋め込む
3. 実績（累計の数字で信頼を得る）: 水色の放射線を背景に、赤い特大数字を置く。黒い吹き出しで商品紹介へつなぐ
4. 悩みの提起（共感を得る）: 雲の背景に人物写真とギザギザの縦書き吹き出しを左右交互に 3 つ並べる
5. 原因の説明（悩みの理由を示す）: 紫の地に斜めの黒帯で見出しを入れ、白いカードに棒グラフを載せる
6. 成分紹介（解決策を提示する）: 下向き矢印と黄色ラベルの後に黒い吹き出しを置き、ギザギザの星形の中に成分写真を入れる
7. 商品と CTA（購入へ誘導する）: 雲のキャッチの下に商品、黒い帯の商品名、価格、白いボタンを並べる
8. エビデンス（試験結果を示す）: 白い地に赤いスタンプとミントの矢印を置き、写真の横に赤い特大数字を出す。下に注釈を付ける
9. お客様の声（利用者の実感を伝える）: 黄色の地に英字見出しを置き、アバターと黒い吹き出しを交互に 3 件並べる
10. 限定訴求（今買う理由を作る）: オレンジのドット柄の地にロゴと商品を斜めに置いた物撮り写真を載せる
11. 価格比較と最終 CTA（容量を選ばせて購入へ誘導する）: ミントの地に雲形のラベルを付けた 2 カラムで容量と価格を並べ、それぞれにボタンを置く。最後に注釈ボックスを置く

Imagery

• 商品パッケージは切り抜きにして、正面から大きく見せる
• 悩みの写真は明るい室内で人物がお腹を気にするポーズにし、白フチで少し傾ける
• 声のアバターはシンプルなフラットイラストで、円の背景色を人ごとに変える
• 成分は切り抜き写真にして、ギザギザの色面の上に置く
• レトロゲームのドット柄やキャラクター風の装飾を散らす
• 背景はもこもこの雲、放射線、キラキラのアイコンで賑やかにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px の SP 幅のカラムを置き、左右に地の色や雲を広げる
• 価格比較は PC でも 2 カラムのまま幅に余裕を持たせる
• 悩みのセクションは PC で 3 列に並べてもよい
• キャッチの文字サイズは 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 行書くと起動時に読み込まれる。