--- version: alpha name: Beige and Charcoal Diet Protein LP description: 明るいグレー地に、くすんだベージュゴールドとほぼ黒のチャコールを組み合わせた女性向けダイエットプロテインの LP。太いゴシック体の数字で訴求を強め、フレーバーごとに色を変えた全面写真の帯を並べる。黄緑は CTA と新商品だけに使う。 colors: primary: '#BEA782' dark-section: '#2A2A2A' background: '#F7F7F7' background-alt: '#ECEBE7' secondary: '#CDBEA1' tint-1: '#EBE5B2' tint-2: '#F7F2DF' text: '#131313' accent-1: '#B1A288' cta: '#A3D41B' on-cta: '#FAFBFB' accent-2: '#2B3362' surface: '#FBFBFB' line: '#4B433D' cta-accessible: '#617E10' accent-1-accessible: '#837256' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 36px fontWeight: 400 lineHeight: 1.0 headline-sm: fontFamily: Montserrat fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px 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.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px badge-circle: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px dark-band: backgroundColor: '{colors.dark-section}' typography: '{typography.display}' height: 200px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 110px point-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' height: 100px feature-number: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 70px faq-item: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 44px --- # DESIGN.md — ベージュ×チャコールの女性向けプロテイン LP（Beige and Charcoal Diet Protein LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、上品・高級、力強い・インパクト、シンプル・ミニマル - **キーワード**: ベージュゴールド・チャコール帯・太字の数字訴求・フレーバー別の色帯・比較表・注釈多め - **地の質感**: マットで平らな面。部分的に木目やぼかし写真を背景に敷く - **形**: 角が四角い帯とカード、丸いバッジ、斜めに切った帯、下向き三角のつなぎ - **温度感**: 温かいニュートラル。モノトーン寄りで落ち着いた雰囲気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BEA782` | ベージュゴールドの帯・バッジ・強調数字 | 11% | 画素の実測 | | `dark-section` | `#2A2A2A` | 悩み提起・比較のチャコール帯 | 10% | 画素の実測 | | `background` | `#F7F7F7` | 基本の明るいグレー地 | 25% | 画素の実測 | | `background-alt` | `#ECEBE7` | 使い方・FAQ のグレージュ地 | 12% | 画素の実測 | | `secondary` | `#CDBEA1` | テイストセクションの砂色地 | 8% | 画素の実測 | | `tint-1` | `#EBE5B2` | 淡いクリーム色の解説パネル地 | 3% | 画素の実測 | | `tint-2` | `#F7F2DF` | レシピセクションの生成り地 | 3% | 画素の実測 | | `text` | `#131313` | 見出しと本文の黒文字 | 4% | 画素の実測 | | `accent-1` | `#B1A288` | 見出し強調のベージュ文字 | 1% | 画素の実測 | | `cta` | `#A3D41B` | お試し CTA ボタンの黄緑 | 0% | 画素の実測 | | `on-cta` | `#FAFBFB` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#2B3362` | 新フレーバーのネイビー帯 | 5% | 画素の実測 | | `surface` | `#FBFBFB` | 白いカード・比較表 | 5% | 画素の実測 | | `line` | `#4B433D` | 区切りの細い線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#617E10` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#837256` | AA を満たす補正値（計算） | | 計算 | - 地は明るいグレー、グレージュ、砂色の 3 段階を交互に使う - 否定や課題の提示はチャコール帯に白文字で見せる - 強調したい数字や語はベージュゴールドの文字か、ベージュのマーカー面で目立たせる - 黄緑は CTA と新商品の訴求だけに使う - フレーバー紹介の帯は、味を連想させる色の写真を全面に敷く - 成分表の背景はフレーバーの色に合わせる - `button-primary` は文字 `#FAFBFB` × 背景 `#A3D41B` のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#617E10`、4.5:1）を使う。 - `feature-number` は文字 `#B1A288` × 背景 `#FBFBFB` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#837256`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と課題提示の大見出し | ゴシック | Noto Sans JP | 900 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 30px | 1.4 | 0.05em | | `headline-md` | 帯の中の小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | ※の注釈と出典 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | 見出しの背面に重ねる欧文の筆記体 | 欧文スクリプト | Great Vibes | 400 | 36px | 1.0 | 0.0em | | `headline-sm` | フレーバー名の欧文と英字の大見出し | 欧文サンセリフ | Montserrat | 700 | 28px | 1.2 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em | - 数字は本文の 2〜3 倍の大きさにし、単位は小さく添える - 見出しの背面に、薄いベージュの欧文筆記体を重ねる - 注釈は※番号を付けて小さく、右寄せか下に置く - 字間はやや広め（0.05em）にする - 強調する語だけをベージュ色にするか、ベージュのマーカーを敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列のグリッドも使う - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 見出しは中央揃え、本文は左揃え - 左右の余白は 20px 前後 - 比較は横棒グラフか表で見せる - フレーバー紹介は全幅の写真帯を縦に並べる - ポイント紹介は、黒いラベルの付いた白いカードにする ## Elevation & Depth - 基本は影なしの平面 - 商品のパッケージ写真には、柔らかい落ち影を付ける - 成分表のカードは影なしで、地の色との差で区切る ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 全幅の角型。円形にくり抜いた写真や丸いバッジも使う - **セクション境界**: 斜めのカット、下向き三角の吹き出し、上部を半円にした「さらに」の見出しタブ - バッジは正円にし、細い白線の縁を付ける - ラベルは角型か、片側を斜めに切った帯にする - CTA だけをピル型にする ## Components - **お試し CTA**（`button-primary`）: 黄緑のピル型ボタン。右端に矢印を付ける - **別商品への誘導ボタン**（`button-secondary`）: 白地のピル型に黒文字と三角アイコン - **特長の丸バッジ**（`badge-circle`）: ベージュの正円に白文字。3〜4 個を横に並べる - **課題提示の帯**（`dark-band`）: チャコールの全幅帯に白い太字の大見出しを置く - **他社比較の表**（`compare-table`）: 自社の列だけをベージュ地にし、数字を大きく見せる - **ポイントカード**（`point-card`）: 黒い斜めカットのラベルと、白い本文カードの組み合わせ - **特長の番号見出し**（`feature-number`）: 円の中に番号を入れ、その横に大きな見出しを置く。背面に筆記体を重ねる - **FAQ 項目**（`faq-item`）: Q はベージュの帯に白文字、A は地の上に本文で答える ## Do's and Don'ts **Do** - 大きな数字で効果量を示す - ベージュとチャコールの 2 色を軸に組み立てる - 訴求の主張には注釈番号を添える - フレーバーごとに色の違う全幅の写真帯にする - 見出しの背面に筆記体を薄く重ねる **Don't** - CTA と新商品以外で黄緑を使わない - 角丸を大きくしすぎない - 明るい原色を地の色に使わない（フレーバー帯は除く） - 見出しを細い書体にしない - グラデーションを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（理想の体型を想起させる）: 空を背景にした女性のポーズ写真に太字コピーを重ね、下に丸バッジを 4 つ並べる 2. **成分の解説**（必要な栄養を説明する）: クリーム色の地に、黒い枠線で囲んだ解説ボックスを置く 3. **悩みの提起**（食事やサプリで摂る難しさを示す）: チャコール帯の左に写真、右に白文字を置く 2 段構成 4. **解決の提示**（1 杯で摂れることを示す）: 商品の周りを成分ラベルで囲む 5. **数値の比較**（たんぱく質の不足量を示す）: ベージュの横帯で数字を並べ、比較表で示す 6. **味のこだわり**（美味しさの根拠を伝える）: 砂色地に欧文の大見出しを置き、黒い丸ポイントとカードで説明する 7. **無添加・安心**（体への安心を伝える）: 斜線入りの丸アイコンと、素材写真の帯 8. **フレーバー紹介**（味の選択肢を見せる）: フレーバーごとに色の違う全幅写真帯を並べ、欧文の味名を縦線で挟む 9. **特長 3 つ**（選ばれる理由を示す）: 番号見出し、表、横棒グラフを、ぼかした写真の背景に載せる 10. **使い方**（飲み方とアレンジを伝える）: 番号付きの見出し、栄養のボックス、2 列の写真カード 11. **アレンジレシピ**（活用例を示す）: 生成り地に、材料を点線のリーダーで並べ、黒いラベル付きの手順を置く 12. **よくある質問**（不安を解消する）: ベージュの Q 帯と、地の上に置いた回答 13. **関連商品・成分表**（詳細情報と別商品を案内する）: フレーバーの色で塗った成分表カードを 2 列に並べる 14. **CTA**（お試しセットへ誘導する）: グレー地に商品を並べ、価格と黄緑のピル型ボタンを置く ## Imagery - 屋外で青空を背景に撮った、スポーティな女性の写真 - フレーバーの素材とミルクのしぶきを宙に舞わせたシズル合成 - 黒いパウチの商品をやや斜めに置き、落ち影を付ける - 木目や粉など素材感のある写真を、ぼかして背景に敷く - シェイカーとグラスを使った、明るい生活感の写真 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 375〜750px の幅に SP の構成をそのまま置く - PC では左右の余白に地の色かぼかし写真を敷く - 成分表カードは PC で 3〜4 列に並べる - フレーバー帯は PC では写真を左右に広げる ## 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-41119d14`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/ultora/ul0001/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。