--- version: alpha name: Pastel Gradient Kids Nutrition Snack LP description: ピーチ・ミント・レモンのパステルグラデーションを、セクションごとに切り替えて背景にする子ども向け栄養サプリの通販 LP。赤い価格表示と、オレンジからピンクへのグラデーションの帯・ピルボタンで訴求する。手描きのイラスト、浮かぶお菓子の写真、波形のセクション境界で、明るく親しみやすい雰囲気を作る。 colors: primary: '#C8202A' cta: '#F26A3C' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#F3E5DD' tint-1: '#D4F1FB' tint-2: '#FFFFE6' surface: '#FEFEFE' text: '#3A3D3E' text-muted: '#8B8B8B' accent-1: '#1BA9D6' accent-2: '#0C939C' accent-3: '#F5B800' dark-section: '#97A9A8' line: '#F07A5A' cta-accessible: '#F58965' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Yomogi fontSize: 14px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px 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.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px price-block: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 420px ribbon-heading: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 56px number-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 60px voice-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px nutrient-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px --- # DESIGN.md — パステル虹色グラデの子ども向け栄養菓子 LP（Pastel Gradient Kids Nutrition Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステルグラデ・浮遊するお菓子・赤い価格訴求・手描きイラスト・波形境界・子育て家庭 - **地の質感**: 淡いグラデーションの地と放射光のエフェクト。透明感のあるお菓子の写真を散らす - **形**: 角丸の大きいカード、ピル型の帯とボタン、円形の写真、波線の区切り - **温度感**: 暖色寄り。セクションごとにミントや水色の寒色を交互に挟む ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C8202A` | ブランドの赤（価格・強調文字・帯） | 4% | 推定 | | `cta` | `#F26A3C` | 購入ボタンのグラデ（オレンジ→ピンク）の代表色 | 3% | 推定 | | `on-cta` | `#FFFFFF` | グラデ帯の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地・カード | 11% | 画素の実測 | | `background-alt` | `#F3E5DD` | ピーチベージュの地 | 10% | 画素の実測 | | `tint-1` | `#D4F1FB` | ミントの地 | 10% | 画素の実測 | | `tint-2` | `#FFFFE6` | クリームイエローの地 | 9% | 画素の実測 | | `surface` | `#FEFEFE` | 薄いグレーのカード地 | 7% | 画素の実測 | | `text` | `#3A3D3E` | 見出しと本文の濃いグレー | 3% | 画素の実測 | | `text-muted` | `#8B8B8B` | 注釈文字 | 1% | 画素の実測 | | `accent-1` | `#1BA9D6` | 問題提起の水色（人型アイコン・ラベル） | 2% | 推定 | | `accent-2` | `#0C939C` | 栄養素のティール | 1% | 画素の実測 | | `accent-3` | `#F5B800` | ビタミン系のイエロー | 2% | 推定 | | `dark-section` | `#97A9A8` | 問題提起セクションのグレー地 | 5% | 画素の主要色に補正 | | `line` | `#F07A5A` | FAQ の下線（オレンジ→ピンク） | 0% | 推定 | | `cta-accessible` | `#F58965` | AA を満たす補正値（計算） | | 計算 | - セクションごとに背景をピーチ・クリーム・ミント・水色のパステルグラデへ切り替える - 価格・割引率・強調語は primary の赤で太く表示する - 帯・ボタン・番号の丸はオレンジからピンクへのグラデーションにする - 問題提起だけはグレー地に水色のアイコンを置き、トーンを落とす - 味ごとにチョコ茶・紫・黄・赤のテーマ色を使い分け、セクション全体をその色で染める - 白いカードで情報を区切り、地のグラデーションと分ける - `button-primary` は文字 `#3A3D3E` × 背景 `#F26A3C` のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#F58965`、4.51:1）を使う。 - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#F26A3C` のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#F58965`、4.54:1）を使う。 - `number-badge` は文字 `#FFFFFF` × 背景 `#F26A3C` のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#F58965`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチと大きな数値 | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.2 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.03em | | `headline-md` | カード見出しと理由の番号見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.02em | | `headline-sm` | 小見出しとラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | | `body-md` | 本文と口コミ | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | 注釈と定期便の条件 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字見出しと手書き風の吹き出し | 手書き・筆 | Yomogi | 400 | 14px | 1.4 | 0.0em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.03em | - 強調語だけを 1.5〜2 倍に拡大し、色を変えるジャンプ率の高い組み方にする - 価格の数字は特大の赤い太字にし、税込・円は小さく添える - 見出しは中央揃えで 2 行に分ける - 数字や%はさらに大きくし、グラデーションで塗ることもある - 吹き出しの中は手書き風の書体にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典や栄養素のカードは 3 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しはすべて中央揃え - 価格ブロックは角丸の大きい白カードにまとめる - 栄養素は円形の写真を 3〜5 列で並べる - 比較表は 2 列にし、中央に項目ラベルを縦に置く - 写真は左右にずらし、ジグザグに配置する ## Elevation & Depth - 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.06)）を付ける - 購入ボタンには立体感のある影と光沢のグラデーションを付ける - お菓子の写真を切り抜いて浮かせ、奥行きを出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 人物の写真は円形か不定形の丸。商品は切り抜いて浮かせる - **セクション境界**: ゆるい波線と、下向き三角の吹き出し状の切り替え - 帯・ラベル・ボタンはピル型にする - ポイントは丸いバッジで示す - カードの角丸は 16px 以上 - 見出し帯の両端をリボン形にカットすることもある ## Components - **購入ボタン**（`button-primary`）: ミントからオレンジへのグラデーションのピル型ボタン。左端に割引率の丸バッジを重ねる - **価格カード**（`price-block`）: 通常価格に打ち消し線、割引のピルを並べ、赤い特大の価格を表示する - **リボン見出し**（`ribbon-heading`）: グラデーションの帯の両端をリボン形にした見出し - **番号の丸**（`number-badge`）: オレンジのグラデーションの丸に白い数字を入れ、カードの上に重ねる - **特典カード**（`benefit-card`）: 白い角丸カード。強調語は赤い太字にする - **吹き出し**（`speech-bubble`）: 白地に黒線の手書き風吹き出し - **口コミカード**（`voice-card`）: 左に円形の顔写真、右に本文と属性を置くクリーム地のカード - **栄養素カード**（`nutrient-badge`）: 上に色付きの丸いアイコン、下に白カードで効能を書く - **FAQ 行**（`faq-item`）: Q 付きの質問、右に開閉の矢印、グラデーションの下線 ## Do's and Don'ts **Do** - セクションごとに背景のパステル色を切り替え、リズムを作る - 数字（%・円・種類の数）を最大級に大きく見せる - 人物は子どもと親の笑顔の写真を円形に切り抜く - お菓子の写真を余白に散らし、楽しさを出す - 価格カードと購入ボタンは中盤と終盤で 2 回繰り返す **Don't** - ダークで重い配色をページの基調にしない - 細い明朝体を使わない - 角ばった四角いボタンにしない - 強調色を赤以外に広げすぎて焦点をぼかさない - 注釈を省かない（小さいグレー文字で必ず添える） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（成長への期待と商品を一目で伝える）: ピーチ地に子どもの写真、大きな手書き風キャッチ、浮かぶお菓子、権威の丸バッジ 3 つと効果を示す六角ラベル 4 つ 2. **お試し価格**（初回の割引で購入を促す）: リボン見出し、味を選ぶパッケージ 4 種、赤い大きな価格、グラデのピルボタン、条件の注釈 3. **特典**（購入の後押し）: 斜めストライプ地に番号付きの白カード 6 枚を 1 列・3 列の混在で並べる 4. **実績・著名人**（社会的な証明）: 円形の写真とピンクの不定形ラベル、チェックリスト 5. **満足度**（味の評価を示す）: 大きなドーナツグラフ、手書きの吹き出し、浮かぶお菓子 6. **専門家の監修**（信頼性）: 円形の顔写真、ピル型の肩書きリスト、吹き出し型のコメントカード 7. **比較**（一般品との違い）: 2 列の比較表に線画イラストを添える 8. **問題提起**（栄養不足への気づき）: グレー地に水色の人型アイコンを並べ、赤い吹き出しで問いかける 9. **悩みへの共感**（親の負担に共感する）: 手描きイラストのママの周りに悩みの吹き出しを 4 つ置く 10. **選ばれる理由**（栄養・効率・コスパを示す）: 番号付き見出し、円形の食材写真グリッド、グラデーションの棒グラフ、大きな数字 11. **味の紹介**（各味の魅力を伝える）: 味ごとにテーマ色の背景、パッケージ写真、色付きのピルバッジ 2 つ 12. **お客様の声**（共感と安心）: 顔写真付きのクリーム地カードを縦に 3 枚 13. **想い・成分解説**（体と頭への効果を伝える）: グラデのピル見出し、放射光の背景、栄養素カードを 3 列 14. **よくある質問**（不安を解消する）: 波形の境界、英字見出し、グラデの下線付きアコーディオン ## Imagery - 自然光の室内で、子どもが笑顔でお菓子を食べる写真 - グミやチョコを切り抜き、余白にランダムに浮かべる - 黒線の太めの手描きイラスト（親子・悩み・比較） - 食材を白い円形に切り抜いた写真のグリッド - 放射光やしずく・果汁のしぶきのエフェクト - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 750px）のカラムを置き、左右はグラデーションの背景を延長する - カードのグリッドは PC でも 3 列のまま、余白だけ広げる - FV は PC で写真を横長にし、キャッチを左に寄せてもよい - 文字サイズは PC で 1.2〜1.4 倍程度にする ## 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-d449ed22`（元 LP の URL から採番） - **元 LP**: https://goona.jp/pages/special_lp_2025_ga - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。