--- version: alpha name: Retro Arcade Pop Supplement LP description: ミントグリーンと鮮やかな黄色の地に、黒い吹き出しと白フチの極太見出しを重ねたポップなサプリ LP。もこもこの雲、キラキラ、ギザギザの吹き出しでゲームや CM のような賑やかさを出し、商品パッケージと白いピル型購入ボタンをくり返し見せる。 colors: primary: '#5EC7B9' secondary: '#FDE94C' dark-section: '#2A2A2A' on-dark: '#FCFCFC' background: '#F3F5F4' background-alt: '#FCF2BC' accent-1: '#8674A8' accent-2: '#E10217' marker: '#FAF167' tint-1: '#A5D9CC' accent-3: '#FEC335' cta: '#FDFEFE' on-cta: '#111F2A' text: '#333231' primary-accessible: '#2D8075' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 6px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px speech-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 110px spiky-bubble: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 220px badge-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px product-name-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px voice-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 200px big-number: textColor: '{colors.accent-2}' typography: '{typography.display}' height: 120px arrow-down: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 80px note-box: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' height: 180px --- # DESIGN.md — ミント×黄×黒のレトロゲーム風サプリ LP（Retro Arcade Pop Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、レトロ - **キーワード**: ミント×イエロー・黒い吹き出し・白フチの極太文字・もこもこ雲・レトロゲーム・ドット模様 - **地の質感**: ベタ塗りの平面に、ドットや放射線、雲のイラストを重ねたコミック風。影は硬くて短いドロップシャドウ。 - **形**: 角丸の黒い吹き出し、ギザギザの星形バッジ、白いピル型ボタン、円形のアバター - **温度感**: 暖色の黄色と寒色のミントが交互に出る、明るくて元気な中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5EC7B9` | 商品と FV の地のミントグリーン | 14% | 画素の主要色に補正 | | `secondary` | `#FDE94C` | お客様の声と CM セクションの黄色の地 | 12% | 画素の実測 | | `dark-section` | `#2A2A2A` | 吹き出しと見出し帯の黒 | 12% | 画素の実測 | | `on-dark` | `#FCFCFC` | 黒い吹き出しの上の白い文字 | 2% | 画素の主要色に補正 | | `background` | `#F3F5F4` | 臨床データ部分の白に近い地 | 10% | 画素の実測 | | `background-alt` | `#FCF2BC` | 雲の背景の淡いクリーム | 9% | 画素の実測 | | `accent-1` | `#8674A8` | 原因説明セクションのくすんだ紫 | 9% | 画素の実測 | | `accent-2` | `#E10217` | 大きな数字や強調スタンプの赤 | 3% | 画素の実測 | | `marker` | `#FAF167` | 黒地の上で強調する黄色の文字 | 1% | 画素の実測 | | `tint-1` | `#A5D9CC` | 比較セクションの淡い水色の地 | 6% | 画素の主要色に補正 | | `accent-3` | `#FEC335` | 限定訴求セクションのオレンジ | 4% | 画素の実測 | | `cta` | `#FDFEFE` | 白い購入ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#111F2A` | 購入ボタンの文字 | 1% | 画素の実測 | | `text` | `#333231` | 明るい地の上の見出しと本文 | 4% | 画素の主要色に補正 | | `primary-accessible` | `#2D8075` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地の色をミント→黄→紫→白→ミントのようにはっきり切り替える - 強調の吹き出しや見出しの帯は必ず黒の面に白い文字 - 黒地の中のキーワードは黄色の文字か黄色のマーカー帯で目立たせる - 大きな数字や「減少」のスタンプには赤を使う - 購入ボタンは白い面に黒い文字とし、暗い影でカラフルな地から浮かせる - 雲の背景はクリームから黄色のグラデーションにして、FV と区切りのあいだに入れる - `arrow-down` は文字 `#FCFCFC` × 背景 `#5EC7B9` のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2D8075`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と区切りに置く巨大なキャッチ（白フチと影つき） | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | セクションの大見出しと大きな数字 | ゴシック | Noto Sans JP | 900 | 34px | 1.25 | 0.02em | | `headline-md` | 黒い吹き出しの中の見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.45 | 0.03em | | `headline-sm` | 小見出しや悩みの縦書きテキスト | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.05em | | `body-md` | お客様の声などの本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.03em | | `note` | 表示義務の注釈や出典 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 英字の見出しや円周に沿って並ぶローマ字 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.2 | 0.05em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.2 | 0.03em | - キャッチは極太にし、白フチと黒い硬い影を付けてステッカーのように見せる - 見出しの中で、キーワードだけを 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-0a77e84b`（元 LP の URL から採番） - **元 LP**: https://lp.svelty.jp/023 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。