--- version: alpha name: Bright Orange Kids Supplement Story LP description: オレンジを主色に、エメラルド緑と紺の暗色面を交互に挟む情報量多めの縦長記事型 LP。子どもの笑顔写真、手書き風丸ゴシック、黄色マーカー、斜め帯見出しで親しみと説得力を両立させる。 colors: primary: '#D77646' secondary: '#32BC93' background: '#F5F6F5' surface: '#FEFEFE' text: '#2B2B2B' dark-section: '#0B151E' on-dark: '#E2E7EC' marker: '#FDE594' accent-1: '#CA4344' background-alt: '#F9A583' accent-2: '#00A1EA' tint-1: '#E6D7C1' accent-3: '#F5E66A' primary-accessible: '#A54F24' accent-1-accessible: '#BC3536' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 64px fontWeight: 700 lineHeight: 1.0 rounded: sm: 4px md: 10px lg: 20px 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}' slanted-headline-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px worry-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px nutrient-hex-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 80px follower-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px testimonial-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 900px qa-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 60px symptom-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 150px connector-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px recipe-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px --- # DESIGN.md — 橙×緑の子ども向け栄養サプリ訴求 LP（Bright Orange Kids Supplement Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 子育て・オレンジ・マーカー強調・インフルエンサー体験談・斜め帯・六角形バッジ - **地の質感**: 紙・黒板・木目などの質感背景に写真を重ね、白カードと太い黒枠の吹き出しを載せる - **形**: 斜めに傾いた白帯見出し、黒枠の手書き風吹き出し、六角形・円形の成分バッジ - **温度感**: 暖色中心。問題提起部のみ紺・黒で冷たく沈める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D77646` | ブランド主色・帯見出し・強調面 | 12% | 画素の主要色に補正 | | `secondary` | `#32BC93` | 体験談セクションの緑地 | 14% | 画素の実測 | | `background` | `#F5F6F5` | 基本の明るいグレー地 | 25% | 画素の実測 | | `surface` | `#FEFEFE` | カード・吹き出しの白 | 10% | 画素の主要色に補正 | | `text` | `#2B2B2B` | 見出し・本文の濃グレー | 4% | 画素の実測 | | `dark-section` | `#0B151E` | 悩み・問題提起の紺地 | 8% | 画素の実測 | | `on-dark` | `#E2E7EC` | 暗色面上の白文字 | 1% | 画素の実測 | | `marker` | `#FDE594` | 本文強調の黄色マーカー | 1% | 画素の実測 | | `accent-1` | `#CA4344` | 警告・赤系強調文字 | 2% | 画素の実測 | | `background-alt` | `#F9A583` | ベージュ系の特長セクション地 | 12% | 画素の実測 | | `accent-2` | `#00A1EA` | 安心安全セクションの青 | 3% | 画素の実測 | | `tint-1` | `#E6D7C1` | 淡いクリーム地 | 6% | 画素の主要色に補正 | | `accent-3` | `#F5E66A` | 緑地上の黄色強調文字 | 1% | 推定 | | `primary-accessible` | `#A54F24` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BC3536` | AA を満たす補正値（計算） | | 計算 | - 地はグレー・オレンジ・緑・紺をセクション単位で切り替え、物語の転換を色で示す - 問題提起は紺や黒の暗色面＋白文字で不安感を出す - 解決・商品紹介はオレンジ主体に戻し明るく転換する - 本文中の重要文は黄色マーカーかオレンジ文字で強調 - 緑地の体験談では強調を黄色文字にする - 警告・数値は赤系で目立たせる - `nutrient-hex-badge` は文字 `#E2E7EC` × 背景 `#D77646` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A54F24`、4.51:1）を使う。 - `follower-badge` は文字 `#E2E7EC` × 背景 `#D77646` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A54F24`、4.51:1）を使う。 - `qa-bar` は文字 `#E2E7EC` × 背景 `#D77646` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A54F24`、4.51:1）を使う。 - `connector-pill` は文字 `#E2E7EC` × 背景 `#CA4344` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BC3536`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・各章の大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 900 | 28px | 1.35 | 0.04em | | `headline-md` | 体験談タイトル | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.04em | | `headline-sm` | 吹き出し・帯内の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.02em | | `body-md` | 本文・体験談 | 丸ゴシック | M PLUS Rounded 1c | 500 | 15px | 1.8 | 0.03em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 大きな番号・英字ラベル | 欧文サンセリフ | Montserrat | 700 | 64px | 1.0 | 0.0em | - 見出しは太く、数値だけを1.5〜2倍に拡大 - 見出し内の重要語は色替え（オレンジ/赤） - 本文は丸ゴシックで行間広め - 章番号はグレーの巨大数字を見出し背後に半分はみ出して置く - 「＼ ／」の囲みで短い導入句を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、悩み・症状は 2 カラムのカードグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 全幅の写真と色面を交互に積む - 体験談は写真→名前バッジ→見出し→本文→写真の順 - 見出しは斜め帯や吹き出しに入れてリズムを作る - 白カードは左右に約6%の余白 ## Elevation & Depth - 白カードにはうっすらした影 - 吹き出しは影なしで黒太枠 - 写真はわずかに傾けた白フチ付きで重ねる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 全幅の矩形写真、症状カードは角丸、人物は円形・六角形 - **セクション境界**: 斜めカットや、紙を破ったような波形の境界 - 成分は六角形や円形のバッジにする - 見出し帯は-3〜-5度傾ける - 吹き出しは不規則な黒枠の円形にする ## Components - **斜め帯見出し**（`slanted-headline-band`）: 白地の傾いた帯に太字見出しと巨大番号 - **悩み吹き出し**（`worry-bubble`）: 黒枠の白い円形吹き出しに短い悩みを入れて散らす - **成分六角バッジ**（`nutrient-hex-badge`）: 色違いの六角形に成分名と含有量 - **フォロワー数バッジ**（`follower-badge`）: オレンジ円に数値、横に名前とIDのピル - **体験談カード**（`testimonial-card`）: グレーまたは緑地の全幅ブロック、マーカー強調入り本文 - **Q&Aバー**（`qa-bar`）: オレンジ枠にQ見出し、回答は白カードに顔写真付き - **症状カード**（`symptom-card`）: 暗色地に角丸写真＋下部黒帯キャプションの2列 - **つなぎラベル**（`connector-pill`）: 「さらに」等の短語を円や台形のラベルで章間に置く - **レシピカード**（`recipe-card`）: 黒枠白カードにオレンジタイトル帯、材料の点線リスト、番号付き手順 ## Do's and Don'ts **Do** - 子どもの笑顔写真を大きく全幅で使う - 数値を大きく色替えして目立たせる - セクションごとに地の色を変えて流れを作る - 重要文は黄色マーカーで強調 - 専門家・メディア掲載を早い段階で見せる **Don't** - 細い明朝で上品にまとめない - 余白を広げすぎて情報密度を下げない - 暗色面を解決パートに使わない - 強調色を一文に3色以上混ぜない - 写真をくすんだ寒色に加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みと解決を一目で伝える）: 子どもの全幅写真に大きな見出し、商品写真と配合量バッジ、六角成分バッジ 2. **権威・共同開発**（信頼性付与）: 専門家写真と×で結ぶ実績ラベル、アプリ画面 3. **メディア掲載**（社会的証明）: 斜めストライプ地に雑誌・交通広告画像と帯見出し 4. **悩みの提起**（共感）: 暗色写真上に黒枠吹き出しを4つ散らす 5. **解決提示**（商品で解決できると示す）: 笑顔の子ども写真に縦書き大見出し、特長吹き出し 6. **お客様の声**（インフルエンサー体験談）: 写真＋フォロワーバッジ＋見出し＋マーカー本文を繰り返す 7. **専門家紹介・Q&A**（専門性の説明）: オレンジ地に吹き出し見出し、プロフィールカード、Q&A 8. **問題の深掘り**（不足の危機感を高める）: 警告アイコン、黒板・紺地、症状カード2列、棒グラフ 9. **原因説明**（摂取しにくい理由）: 白カード内で2種類比較、線画イラスト 10. **特長**（配合成分の優位性）: 金色エンブレム、番号付き斜め帯見出し、比較グラフ・図解 11. **配合成分**（栄養価の可視化）: 食材写真の反復、六角形成分グリッド 12. **安心・安全**（品質保証）: 青空と工場写真、赤い円形認証バッジ、無添加項目のオレンジ円 13. **レシピ**（使い方の具体化）: 料理写真とレシピカード、星の装飾 14. **締めのメッセージ**（想いを伝え購入へ）: 商品写真と大見出し、専門家の顔写真 ## Imagery - 自宅で食べる子どもの自然な笑顔・食事シーンを明るく撮る - SNS投稿風の家庭写真を白フチで傾けて重ねる - 問題提起では頭を抱える親子写真を暗く落とす - 食材写真（肉・野菜・魚）を切り抜きで配置 - 白い六角形を並べた幾何学パターンの商品パッケージ風装飾 - シンプルな線画イラストと星・紙吹雪の装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 750px）のカラムを置き、左右は淡色背景で埋める - PC でも1カラムの縦長構成を保つ - 症状カードは PC で3〜4列に広げてもよい - 見出しサイズは 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-9a31bf78`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/niconico-tetsubun/nct01/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（9/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。