--- version: alpha name: Black Gold Matcha Green Protein Drink LP description: 明るいグレーのコンクリート調の背景と黒の帯面を交互に置き、金茶色の斜め帯と丸い円バッジで成分を伝える健康飲料LP。フレーバーごとに抹茶グリーンとグレージュの面を切り替え、味の違いを色で見せる。 colors: primary: '#C49554' background: '#FFFFFF' background-alt: '#F4F4F4' dark-section: '#1A1A1A' on-dark: '#FEFEFE' secondary: '#BBE26B' accent-1: '#326400' accent-2: '#4A4A48' tint-1: '#FFFAE7' surface: '#E3E6ED' text: '#000000' line: '#2E2E2B' tint-2: '#A7A392' primary-accessible: '#976E34' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Caveat fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 6px lg: 8px 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}' diagonal-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px quote-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px section-label: textColor: '{colors.text}' typography: '{typography.label-button}' height: 70px problem-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px check-chip: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 50px flavor-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 30px price-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 90px spec-table: textColor: '{colors.text}' typography: '{typography.note}' height: 600px --- # DESIGN.md — 黒×金×抹茶グリーンのプロテイン飲料LP（Black Gold Matcha Green Protein Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: クール・先進的、上品・高級、スポーティ、情報量多め・訴求型 - **キーワード**: 黒×金茶・抹茶グリーン・斜め帯・円バッジ・コンクリート質感・モダン健康志向 - **地の質感**: 薄いグレーのコンクリート・石膏調の写真背景。黒の面には微妙なグラデーションをかける。粉末やミルクのしぶきで動きを出す - **形**: 斜めに傾けた金茶の帯、線だけの円バッジ、下向き三角の切り欠き、引用符付きの見出し - **温度感**: ややクール。金茶色とクリーム色で温かみを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C49554` | 金茶色（斜め帯・強調文字・チェックバッジ） | 5% | 画素の実測 | | `background` | `#FFFFFF` | 白い地 | 17% | 画素の実測 | | `background-alt` | `#F4F4F4` | 薄いグレーのコンクリート調の地 | 10% | 画素の実測 | | `dark-section` | `#1A1A1A` | 黒の訴求セクション | 14% | 画素の実測 | | `on-dark` | `#FEFEFE` | 黒い面の上の白文字 | 1% | 画素の実測 | | `secondary` | `#BBE26B` | 抹茶グリーンのフレーバー面 | 14% | 画素の実測 | | `accent-1` | `#326400` | 抹茶の濃い緑の見出し文字 | 1% | 画素の実測 | | `accent-2` | `#4A4A48` | 黒ゴマ味のグレーのラベル | 1% | 推定 | | `tint-1` | `#FFFAE7` | クリーム色の解決策ボックス | 9% | 画素の実測 | | `surface` | `#E3E6ED` | 悩みカードの薄いグレーの面 | 2% | 画素の実測 | | `text` | `#000000` | 見出しと本文の黒文字 | 3% | 画素の実測 | | `line` | `#2E2E2B` | 表や仕切りに使う濃いグレーの線 | 1% | 画素の主要色に補正 | | `tint-2` | `#A7A392` | グレージュのフレーバー面 | 5% | 画素の主要色に補正 | | `primary-accessible` | `#976E34` | AA を満たす補正値（計算） | | 計算 | - 地はグレー・黒・白・クリームをセクションごとに交互に切り替え、メリハリをつける - 金茶色は斜め帯・円バッジの線・強調語・チェックバッジだけに使う - 黒い面では白文字を基本にし、キーワードだけ金茶色にする - フレーバーの色を面に使う。抹茶は黄緑、黒ゴマはグレージュ - 成分表は各フレーバーの地色の上に、細い濃いグレー線で組む - 赤やビビッドな青は使わない - `diagonal-band` は文字 `#FEFEFE` × 背景 `#C49554` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#976E34`、4.53:1）を使う。 - `check-chip` は文字 `#FEFEFE` × 背景 `#C49554` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#976E34`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.3 | 0.04em | | `headline-lg` | 引用符付きのセクション見出し（金茶色） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.1em | | `headline-md` | フレーバー名・商品名 | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.02em | | `headline-sm` | 小見出し・斜め帯の文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.08em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.08em | | `note` | 注釈・成分表 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字の筆記体ラベル（Attention・Problem など） | 欧文スクリプト | Caveat | 500 | 28px | 1.2 | 0.02em | | `label-button` | 英字のセクションラベル・価格の数字 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.2 | 0.12em | - 見出しは極太ゴシックにし、字間をやや広げる - 本文は中央揃えで、行間を2.0前後とたっぷり取る - 強調語は太字にし、金茶色かフレーバーの色に変える - 英字ラベルは大文字のサンセリフにし、上に小さくカナ読みを添える - 筆記体の英字を見出しの上に添え、手書きの軽さを出す - 価格の数字は大きく太くし、単位と税込表記は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円バッジは 3〜4 個を横並びにし、悩みカードは 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅の色面で区切る - 見出しの上下に余白を大きく取り、中央に揃える - 商品写真と説明文は左右に並べる（写真は左に寄せる） - 解決策のパートはクリーム色の枠付きボックスにまとめる - 価格ブロックは左に商品写真、右に商品名・フレーバーラベル・価格を置く ## Elevation & Depth - 影はほぼ使わない。平面の色面と細い線で構成する - 商品パッケージの写真に、ごく弱い落ち影を付ける程度にとどめる - 白いボックスは黒い地の上に置いて浮かせる（影は付けない） ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸のない長方形、または切り抜いた商品写真 - **セクション境界**: 斜めの帯、下向きの三角の切り欠き、まっすぐの切り替え - 成分バッジは線だけの正円にし、上にアイコンを重ねる - 斜め帯は-5°前後に傾けて重ねる - 見出しの下の横線には下向きの小さな三角を付ける - ラベルは角丸の小さい長方形にする ## Components - **斜めの訴求帯**（`diagonal-band`）: 金茶色の帯を傾けて置き、白い太字で成分を訴求する。2本を×印でずらして重ねる - **成分の円バッジ**（`circle-badge`）: 線だけの正円で、上端に小さなアイコンを重ねる。数値を大きく見せる - **引用符付きの見出し**（`quote-heading`）: 金茶の文字を上下の横線ではさみ、大きな薄い引用符と下向き三角を添える - **英字のセクションラベル**（`section-label`）: 大文字の英字の左右に縦線を引き、上に小さなカナ読みを置く - **悩みカード**（`problem-card`）: 薄いグレーのカード。上に三角アイコンと筆記体の番号を置き、下に素材写真を添える - **チェック付きチップ**（`check-chip`）: 金茶色の面にチェックマークと縦線を入れ、成分名を白文字で書く - **フレーバーのラベル**（`flavor-label`）: 緑とグレーの長方形のラベルに、白文字でフレーバー名を書く - **価格ブロック**（`price-block`）: 左に縦線を引き、大きな数字の価格と小さな税込表記を並べる。上に入数の円バッジを置く - **成分表**（`spec-table`）: フレーバーの色の地の上に細線の表を置く。左の項目欄は中央揃え ## Do's and Don'ts **Do** - 黒・グレー・クリーム・緑の面を交互に配置してリズムを作る - 成分の数値は円バッジで繰り返し見せる - 強調語は金茶色の太字にする - フレーバーごとに色を固定する - 見出しには筆記体の英字やカナ読みを添える **Don't** - ピル型のポップなボタンや原色の赤は使わない - 金茶色を本文の地に広く敷かない - 強い影やグラデーションのボタンで質感を崩さない - 本文を左揃えで詰めて組まない - 可愛すぎる丸ゴシックやイラストは使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（手軽さと主な成分を一目で伝える）: グレーのコンクリート調の地に極太の見出しを置き、金茶の斜め帯2本、商品の並び写真、円バッジ4つを配置する 2. **呼びかけ**（ターゲットに語りかける）: 筆記体の英字と、字間を広げた見出しを置く。商品と粉末・ミルクのしぶきの写真を組み合わせ、最後に斜め帯で次のセクションへ移る 3. **共感・提案**（今の習慣からの乗り換えを促す）: 黒い地に中央揃えの白文字を置き、強調語は金茶にする。波線の下線を引き、金茶の線の円を3つ並べる 4. **フレーバー紹介**（味の違いを伝える）: 下向き三角で切り替え、緑の面とグレージュの面に商品写真と味の説明を左右に並べる 5. **価格**（セット内容と価格を提示する）: 白い地に左は商品の山積み写真、右は商品名・フレーバーのラベル・大きな価格を置く 6. **悩みの提起**（栄養の偏りに気づかせる）: 黒い枠の中の白いボックスに引用符付きの見出しを置き、悩みカードを3列並べる 7. **解決策**（成分のバランスをよく配合していることを示す）: クリーム色の枠付きボックスにチェックチップと天秤のアイコンを置き、手に持った写真と円バッジ・注釈を続ける 8. **こだわり**（毎日続けられる味を訴求する）: 引用符付きの見出し、生活シーンの写真、中央揃えの本文を順に置く 9. **価格（再掲）**（購入の判断を後押しする）: 前出の価格ブロックを再掲する 10. **成分表**（成分の詳細を開示する）: フレーバーごとに緑の地とグレーの地を分け、細線の表を組む ## Imagery - 商品はコンクリートや石膏の質感の明るいグレーの背景の上で撮る - 抹茶やきなこの粉末、ミルクのしぶき、茶葉、ゴマを周囲に散らして動きを出す - 手でパッケージを持つ写真で手軽さを伝える - 円バッジのアイコンはレモン・力こぶ・肉・葉など、細い線の単色アイコンにする - 悩みカードには卵・肉・錠剤・砂糖など、素材を切り抜いた写真を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文の幅を 960px 前後に収め、色面だけを全幅にする - フレーバーと価格のブロックは PC で写真と文字を2カラムにする - 円バッジや悩みカードは PC でも横1列に並べ、サイズを大きくする - 見出しの文字サイズは 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-e39e48d9`（元 LP の URL から採番） - **元 LP**: https://ultora.co.jp/shop/products/U0430001?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。