--- version: alpha name: Golden Bokeh Luxury Supplement LP description: 金色の光のボケと焦げ茶のグラデーションを地にして、明朝の大見出しを置いた高級感のある美容サプリ LP。金の球体やダイヤ、六角形のバッジで成分やこだわりを示し、クリーム色のパネルで説明文を読みやすくしている。 colors: primary: '#6C3B0A' dark-section: '#372614' secondary: '#D8B883' accent-1: '#C9A04A' background: '#FBF4DE' surface: '#FEFEFC' background-alt: '#FEFEFC' text: '#341C06' text-muted: '#7D6E5B' on-dark: '#FFFFFF' marker: '#F0D27A' accent-2: '#E0782A' line: '#E0E0DD' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 26px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' diamond-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 64px gold-orb: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px point-row: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 70px hex-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 100px food-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px band-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 36px info-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px callout-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 90px --- # DESIGN.md — 金箔ボケ×焦げ茶の高級美容サプリ LP（Golden Bokeh Luxury Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、信頼・誠実、情報量多め・訴求型 - **キーワード**: 金の光のボケ・焦げ茶グラデーション・明朝の大見出し・金の球体バッジ・クリーム色パネル・製薬会社の信頼感 - **地の質感**: シャンパンゴールドのボケ写真、とろみのある金色の液体、光沢のあるメタリックなグラデーション - **形**: 円形の金バッジ、菱形の成分タグ、六角形の強調バッジ、ほぼ角のない四角パネル - **温度感**: 暖色。金・琥珀・焦げ茶でまとめ、白とクリーム色で抜けを作る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6C3B0A` | ブランドの焦げ茶（帯・見出し） | 12% | 画素の実測 | | `dark-section` | `#372614` | 最も暗い焦げ茶の地 | 8% | 画素の主要色に補正 | | `secondary` | `#D8B883` | シャンパンゴールド | 7% | 画素の主要色に補正 | | `accent-1` | `#C9A04A` | 金色のバッジ・ラベル | 4% | 推定 | | `background` | `#FBF4DE` | クリーム色の地 | 10% | 画素の主要色に補正 | | `surface` | `#FEFEFC` | 白い説明パネル | 11% | 画素の実測 | | `background-alt` | `#FEFEFC` | 薄いアイボリーの地 | 6% | 画素の実測 | | `text` | `#341C06` | 見出し・本文の濃い茶色 | 3% | 画素の実測 | | `text-muted` | `#7D6E5B` | 注釈のグレーブラウン | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地の上の白文字 | 2% | 画素の主要色に補正 | | `marker` | `#F0D27A` | 暗い地の上の金文字の強調 | 1% | 推定 | | `accent-2` | `#E0782A` | グラフ線・数値の強調オレンジ | 0% | 推定 | | `line` | `#E0E0DD` | 細い区切り線 | 1% | 画素の主要色に補正 | - 地は焦げ茶のグラデーションとクリーム色・アイボリーを交互に使い、セクションの切り替わりをはっきりさせる - 金色は球体・ラベル・強調文字に限り、面全体を金で塗らない - 暗い地では白文字を使い、強調する語句だけ金文字にする - クリーム色の地の上では見出しも本文も濃い茶色にし、真っ黒は使わない - オレンジはグラフなどデータの強調だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの商品名 | 明朝 | Shippori Mincho | 800 | 40px | 1.25 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 700 | 28px | 1.35 | 0.04em | | `headline-md` | リード文・中見出し | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.04em | | `headline-sm` | ポイントの小見出し・バッジ内の文字 | 明朝 | Noto Serif JP | 600 | 17px | 1.4 | 0.02em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.8 | 0.02em | | `note` | 特許番号などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | POINT ラベルの数字 | 欧文セリフ | Playfair Display | 700 | 26px | 1.0 | 0.0em | | `label-button` | 飲み方の帯見出し・料理名ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.06em | - 見出しも本文も明朝を基本にして高級感を出す - 見出しは強調したい語だけを 1.3〜1.5 倍に大きくし、ジャンプ率をつける - 使い方を説明するブロックだけはゴシックにして読みやすくする - 暗い地の上の見出しは金文字か白文字にする - 注釈は小さいグレーブラウンで右寄せにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分や料理の一覧は 2〜3 列のグリッドにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションの背景は端から端まで敷き、中のパネルは幅 90% で中央に置く - POINT は左に金のラベル、右に見出しと本文を置く横並びの行にする - 写真と文字は左右交互に組み、半分ずつ重ねる - 球体のバッジは円環や三角形に配置して関係を見せる - 区切り線は細い 1px にする ## Elevation & Depth - パネルには薄い影（0 4px 12px rgba(60,30,0,.15)）をつける - 金の球体には内側のハイライトと外側の発光をつけて立体感を出す - 商品パッケージの下には反射と影を置く ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 料理は円形に切り抜き、作業風景の写真は横長の長方形、人物と食材は角丸なしで裁ち落とす - **セクション境界**: 直線で切り替え、グラデーションの帯で区切る - 成分名は金の縁取りをつけた白い菱形のタグを千鳥に並べる - 強調バッジは金の縁取りをつけた六角形にする - こだわりや特許は金の球体の中に文字を置く - パネルはほぼ角のない四角にする ## Components - **菱形の成分タグ**（`diamond-tag`）: 白い菱形に金の縁取りをつけ、成分名を明朝で入れる。2 段の千鳥配置にする - **金の球体バッジ**（`gold-orb`）: 光沢のあるクリームゴールドの円の中に 2 行の短い語を入れる。円環状や三角形に並べる - **POINT 番号付きの行**（`point-row`）: 左に金のラベル（POINT と大きな数字）、右に明朝の見出しと 2 行の本文を置き、行の下に細線を引く - **六角形の強調バッジ**（`hex-badge`）: 茶色のグラデーションの六角形に金の縁をつけ、上に小さい語、下に大きい語を白文字で入れる - **料理名ラベル**（`food-label`）: 円形に切り抜いた料理写真の下に、茶色の帯と白文字で料理名を置く - **焦げ茶の帯見出し**（`band-heading`）: 幅いっぱいの焦げ茶の帯に白い太字ゴシックを中央揃えで置き、使い方ブロックの見出しにする - **白い説明パネル**（`info-panel`）: 左に見出し、縦の区切り線をはさんで右に本文を置く横長のパネル - **引き出し線つきの注釈ボックス**（`callout-box`）: 図の一点から線を引き出し、白い四角に見出しと小さな説明文を入れる ## Do's and Don'ts **Do** - 地の色は金・焦げ茶・クリーム色の 3 系統にとどめる - 見出しは明朝で、強調語を大きくする - 成分やこだわりは菱形・球体・六角形の金の図形で見せる - 暗い地と明るい地を交互に置いてリズムを作る - 特許番号などの根拠は注釈として小さく添える **Don't** - 原色や寒色をアクセントに使わない（青は成分写真の中だけ） - ピル型の派手なボタンやポップな丸ゴシックを使わない - 真っ黒の文字や、無彩色だけで作ったセクションを作らない - 金を平坦な黄色で表現しない（必ずグラデーションと光沢をつける） - 余白を詰めすぎて情報を窮屈に並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の格と全成分の数を一目で伝える）: 金のボケを背景に、左に明朝の商品名、右にパッケージを置く。下に菱形の成分タグを千鳥配置で並べる 2. **こだわり**（作り手の信頼と強みを示す）: 中央の大見出しを囲むように金の球体 5 つを円環状に置き、下に白い説明パネルと注釈を添える 3. **特長ポイント**（原料の品質を 4 つの観点で説明する）: 明朝の大見出しの下に、POINT 番号付きの行を 4 つ縦に並べる。右下に食材の写真を重ねる 4. **使いやすさ**（溶けやすさと見た目のクリアさを伝える）: 焦げ茶の地に、写真と白文字を左右交互に半分ずつ重ねて置く 5. **アレンジ提案**（合わせられる飲食物の幅を示す）: クリーム色のパネルに、円形の料理写真とラベルを 3 列 × 2 段で並べる。上下に金文字の見出しを置く 6. **品質・製造**（国内製造と認証で安心感を出す）: モノクロの工場写真の上に白い帯を重ね、明朝の見出しと認証マークを置く 7. **成分の訴求**（美容の印象を高める）: 人物と金の液体の写真の上に、明朝の大見出しを重ねる 8. **悩みの提起（データ）**（年齢とともに減ることを示す）: 白いパネルにオレンジの折れ線グラフを描き、右に強調文を置く。下に結論を一文で添える 9. **不安の解消**（においの悩みを解消する）: 焦げ茶の帯見出しの下に、パッケージと六角形のバッジ 2 つを × でつないで並べる 10. **製法**（原料の純度の高さを示す）: 金の逆三角形の図と、引き出し線つきの注釈ボックスを置き、下を暗い帯の一文で締める 11. **特許成分**（独自の配合を権威づける）: 茶色の地に金の球体 3 つを三角形に置いて線でつなぎ、本文と注釈を添える 12. **成分一覧**（成分ごとの役割を紹介する）: 円形に切り抜いた素材写真に、成分名と小さな説明を添えて 4 列＋3 列で並べる 13. **飲み方**（摂取量と使い方を案内する）: 焦げ茶の帯見出し 2 本の下に白いパネルを置き、ゴシックの説明文とスプーン・朝夜のイラストを並べる ## Imagery - シャンパンゴールドの光のボケを全面に敷いた暖色の背景 - とろりと垂れる金色の液体やカプセルのしずくをクローズアップで撮る - 料理や飲み物は真上か斜め上から撮り、円形に切り抜く - 工場や研究の写真はモノクロに寄せて清潔感を出す - 成分は素材写真（氷、液体、果実など）を円形にして並べる - 使い方は細い線のシンプルなイラスト（スプーン、カップ、お椀）で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は幅 1152px の縦長の画像を中央に置いた 1 カラム。SP でもそのまま 1 カラムにする - SP では菱形のタグを 3〜4 個ずつ 3 段に組み直す - 料理グリッドは SP で 2 列に、成分一覧は 3 列にする - SP で写真と文字を左右交互に組むときは、写真を上・文字を下に重ねて配置する - SP では大見出しを 26〜28px に抑え、2 行で改行する ## 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-acf494d3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/nippon-shinyaku-shop/4142yr/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（4/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。