--- version: alpha name: Soft Greige Terracotta Wellness Supplement LP description: 生成り・グレージュの地に、テラコッタ・マスタードゴールド・くすみセージを差し色にした女性向けサプリLP。細い欧文セリフと字間の広いゴシックで上品さを出す。悩み→原因→成分→根拠→監修→価格と、情報を多く積み上げる訴求型の構成。 colors: primary: '#C27142' secondary: '#D3B943' cta: '#C8A848' on-cta: '#FFFFFF' accent-1: '#9AB5B4' accent-2: '#928C8C' dark-section: '#595146' background: '#FEFEFE' background-alt: '#F0DEAF' tint-1: '#F9F5E9' tint-2: '#E3E3ED' surface: '#FEFDFB' text: '#747069' text-body: '#6A625D' line: '#C7B7AC' cta-accessible: '#8D742A' accent-1-accessible: '#5B7C7B' primary-accessible: '#AD6338' accent-2-accessible: '#7B7575' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 500 lineHeight: 1.45 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em accent: fontFamily: Cormorant Garamond fontSize: 44px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em label-button: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 84px badge-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px stat-panel: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 170px worry-bubble: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 110px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 600px price-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 520px faq-item: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 40px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 220px --- # DESIGN.md — グレージュ×テラコッタの美容サプリLP（Soft Greige Terracotta Wellness Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、上品・高級、ナチュラル、情報量多め・訴求型 - **キーワード**: くすみカラー・生成り・テラコッタ・細い欧文セリフ・円形バッジ・字間広め - **地の質感**: シルク布や大理石風の淡い背景テクスチャ。ぼかした光と柔らかい影を重ねる - **形**: 正円バッジ、角を切った八角形の数値パネル、もくもく形の吹き出し、角丸カード - **温度感**: 暖かめのニュートラル。白とベージュが中心で、くすんだ青緑で少し冷やす ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C27142` | 強調見出し・ラベル帯・価格ヘッダー | 4% | 画素の実測 | | `secondary` | `#D3B943` | ブランド名の欧文・成分見出しの金色 | 3% | 画素の実測 | | `cta` | `#C8A848` | 主CTAボタン（ゴールドのグラデーション） | 1% | 推定 | | `on-cta` | `#FFFFFF` | CTAボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#9AB5B4` | 数値パネル・円形バッジのくすみセージ | 5% | 画素の実測 | | `accent-2` | `#928C8C` | 悩みの吹き出し・不足項目の円 | 3% | 画素の実測 | | `dark-section` | `#595146` | ダークブラウンのラベル帯・縦書き帯 | 1% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地色 | 22% | 画素の実測 | | `background-alt` | `#F0DEAF` | 成分セクション・価格周りの生成り地 | 8% | 画素の主要色に補正 | | `tint-1` | `#F9F5E9` | FAQ・全成分の薄いクリーム地 | 8% | 画素の実測 | | `tint-2` | `#E3E3ED` | 品質セクションの青グレー地 | 5% | 画素の実測 | | `surface` | `#FEFDFB` | グレージュの円・カード面 | 6% | 画素の実測 | | `text` | `#747069` | 見出しのグレーブラウン | 2% | 画素の実測 | | `text-body` | `#6A625D` | 本文 | 2% | 推定 | | `line` | `#C7B7AC` | 波線・区切り線・表の罫線 | 0% | 画素の実測 | | `cta-accessible` | `#8D742A` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#5B7C7B` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#AD6338` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#7B7575` | AA を満たす補正値（計算） | | 計算 | - 地色は白・生成り・薄グレージュを交互に使い、セクションを区切る - 見出しで強調したい語だけテラコッタにする。残りはグレーブラウン - 成分名・ブランド欧文・ラベル帯はマスタードゴールドにする - 数値の訴求パネルは、くすみセージの地に白抜きの細いセリフ数字を置く - 原色や純黒は使わない。文字はグレーブラウン系にする - 価格だけは赤みの強いテラコッタで大きく目立たせる - `button-primary` は文字 `#FFFFFF` × 背景 `#C8A848` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8D742A`、4.5:1）を使う。 - `badge-circle` は文字 `#FFFFFF` × 背景 `#9AB5B4` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#5B7C7B`、4.55:1）を使う。 - `label-band` は文字 `#FFFFFF` × 背景 `#C27142` のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AD6338`、4.55:1）を使う。 - `stat-panel` は文字 `#FFFFFF` × 背景 `#9AB5B4` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#5B7C7B`、4.55:1）を使う。 - `worry-bubble` は文字 `#FFFFFF` × 背景 `#928C8C` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#7B7575`、4.52:1）を使う。 - `price-card` は文字 `#C27142` × 背景 `#FEFEFE` のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AD6338`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・大見出し | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.4 | 0.12em | | `headline-lg` | セクションの見出し | ゴシック | Zen Kaku Gothic New | 500 | 28px | 1.45 | 0.1em | | `headline-md` | 小見出し・リード | ゴシック | Noto Sans JP | 500 | 18px | 1.5 | 0.12em | | `accent` | ブランド欧文・数値・英字見出し | 欧文セリフ | Cormorant Garamond | 400 | 44px | 1.1 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.08em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.04em | | `label-button` | CTA・ラベル帯 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.1em | | `headline-sm` | 円バッジ内の短い語 | ゴシック | Noto Sans JP | 700 | 16px | 1.35 | 0.05em | - 見出しは字間を0.1em以上取り、ゆったり見せる - 見出しは強調語だけ大きくし、色も変える - 数値と欧文は細いセリフ体で大きく扱い、和文と並べる - 強調語の上に傍点を打つ・下に波線を引く装飾を使う - 縦書き帯で短いコピーを見せることがある - 本文は行間2.0で、強調部分をテラコッタまたはゴールドで色付けする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円形バッジや特長は 3 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクション見出しは中央揃え。小ラベル→大見出しの順に積む - カードは左右の余白を約5%にし、大きな角丸で浮かせる - 写真は全幅で配置し、上下をグラデーションで地色になじませる - 比較表は自社列だけを色付きにして目立たせる - 数値パネルは写真の右側に重ね、半分はみ出させる ## Elevation & Depth - 白カードには薄く広い影を付ける（0 4px 20px rgba(0,0,0,.08)） - 円形バッジは影を付けず、太い縁取りで立たせる - 雑誌の掲載画像は少し傾け、影を付けて重ねる - CTAには影を付けない。グラデーションで立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 正円の切り抜き・角丸の長方形・下端を地色にフェードさせる全幅写真 - **セクション境界**: 緩い曲線のウェーブ、大きな円弧の地色、矢印型の切り欠き - 特長はグレージュの太い縁を付けた正円で見せる - 数値パネルは角を切った八角形にする - 悩みはもくもく形の吹き出しで表す - ラベル帯は角の立った長方形で、下に三角の尻尾を付ける ## Components - **主CTAボタン**（`button-primary`）: ゴールドのグラデーションのピル型。左端にテラコッタの円バッジ（初回限定などの短い語）を重ね、右端に三角矢印を置く - **円形特長バッジ**（`badge-circle`）: セージまたは白の正円。周りに欧文の細い文字を円状に添え、中に短い語を置く - **ラベル帯見出し**（`label-band`）: テラコッタ・ゴールド・ブラウンの帯に白文字を置き、下に三角の吹き出し尻尾を付ける - **数値訴求パネル**（`stat-panel`）: セージの八角形。上に小さな角丸ラベル、中央に大きなセリフ数字と単位を置く - **悩み吹き出し**（`worry-bubble`）: グレーブラウンのもくもく形に白文字を置き、要点の語だけ太くする。人物写真の周りに散らす - **比較表**（`compare-table`）: 左の項目列はゴールド地に白文字。自社列は淡いピンクベージュの地にテラコッタ文字で、上に突き出したヘッダーを付ける。他社列はグレー - **価格カード**（`price-card`）: テラコッタのヘッダー帯付きの白カード。取り消し線の通常価格→大きなテラコッタ価格、赤い円の割引バッジ、細枠のタグを並べる - **FAQ行**（`faq-item`）: クリーム地の帯にセージ色の「Q.」と質問文を置く。アコーディオン式 - **チェックリストカード**（`check-list`）: 白カードの各行に丸いチェックアイコンを付け、キーワードをゴールドの下線で強調する ## Do's and Don'ts **Do** - くすみトーン（グレージュ・セージ・テラコッタ・ゴールド）だけで構成する - 数値は細い欧文セリフで大きく見せ、根拠の注釈を添える - 強調語の色替え・傍点・波線で、見出しにリズムを付ける - 写真は柔らかい自然光で撮り、上下を地色にフェードさせる - 正円・八角形・吹き出しの柔らかい図形で情報を分ける **Don't** - 彩度の高い原色や蛍光色を多用しない（特典ブロック以外） - 純黒の文字や太い黒罫線を使わない - 字間を詰めた窮屈な見出しにしない - 角張った四角ボタンを主CTAにしない - 写真を硬い枠でそのまま切り貼りしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品とキャッチで世界観を伝える）: 女性の写真と商品ボトルを重ね、太い和文キャッチと細いブランド欧文を置く。下に3つの円バッジとCTAを並べる 2. **メディア掲載**（権威付け）: 細枠の中に誌面を傾けて重ねる。掲載告知の見出しはテラコッタにする 3. **SNS紹介**（共感と話題性を伝える）: 投稿風のフレームに写真を入れ、アイコン列を添える 4. **悩みの提起**（不調への共感）: 青グラデーションの地に人物写真を置き、周りに吹き出しを6つ散らす。中央に縦書きの帯を置く 5. **原因の解説**（不調の原因を図とグラフで示す）: 白カードに対比表を入れ、グレージュの円で影響を3つ示す。折れ線グラフで低下を見せる 6. **解決・成分紹介**（成分の網羅性を訴求する）: 円形に切り抜いた商品写真の周りに欧文を円状に回す。番号バッジを付け、成分の円を商品の周りに並べる 7. **比較表**（他社との差を示す）: 自社列だけを強調した縦長の表にする 8. **注目成分の詳細**（主要成分の効果を数値で示す）: 成分名の円を2つ交差させる。写真の上に八角形の数値パネルを重ね、棒グラフと不足項目の円も使う 9. **品質・製造**（安心感を伝える）: 青グレーの地に製造写真3枚と白い説明カードを置く 10. **監修医紹介**（専門家の信頼）: セージの帯に医師の写真と経歴を載せる 11. **開発の想い**（開発の背景に共感してもらう）: 人物写真に縦書きの帯とチェックリストカードを重ねる 12. **まとめ特長・利用者の声**（要点の再確認）: テラコッタ縁の円を3×2で並べる。イラストの人物と手書き風の吹き出しを添える 13. **価格・特典・CTA**（購入を促す）: 価格カードと緑の特典ブロック、黄色の大円で継続特典を見せる 14. **よくある質問・全成分**（不安を解消する）: 大きなセリフ体の見出しの下に、クリーム帯のアコーディオンと成分表記を並べる ## Imagery - 30〜40代女性のナチュラルメイクのポートレート。柔らかな窓明かりで撮る - 白いシルク布や石のテーブルに商品を置いた、明るく淡いトーンの物撮り - 果物・野菜・きのこを白背景で切り抜いた素材写真 - 細い線と淡い水彩で塗った女性の手描きイラスト - 太陽・月・人体シルエットなどの線画風アイコンを、ゴールドとセージで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像がないため、PCでは本文を最大幅約750pxの中央カラムにし、左右に背景テクスチャを敷くのを推奨 - 円バッジや特長は、PCでは横一列に並べる - 人物写真と説明文は、PCでは左右2カラムにする - 見出しのサイズは、PCではSPの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-44422bb6`（元 LP の URL から採番） - **元 LP**: https://lifeis-basement.com/lp?u=006&utm_source - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。