--- version: alpha name: Cool Gray Wellness Gadget LP description: 白〜淡いグレーのグラデーション地に、チャコールの製品写真とオレンジの強調文字を合わせた家電 LP。字間を広くとった細めのゴシックと大きな数字で、清潔感と信頼感を出している。悩みのパートだけはコンクリート調のダーク地に切り替えて変化をつける。 colors: background: '#FEFEFE' background-alt: '#E4E5E9' tint-1: '#F4F3F1' primary: '#F07A1E' secondary: '#6C615F' dark-section: '#535353' on-dark: '#F3F3F0' text: '#444444' text-body: '#4A4A4C' text-muted: '#95989D' line: '#CFD5D6' accent-1: '#B99825' marker: '#F27A1A' primary-accessible: '#BA590C' typography: display: fontFamily: Noto Sans JP fontSize: 56px fontWeight: 500 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Oswald fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 28px feature-number: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 64px product-name-box: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px worry-checklist: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px spec-icon-grid: textColor: '{colors.text-body}' typography: '{typography.note}' height: 220px pill-tag: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px stat-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.full}' height: 180px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 300px --- # DESIGN.md — グレー×オレンジの美容健康家電 LP（Cool Gray Wellness Gadget LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 清潔・爽やか、シンプル・ミニマル、信頼・誠実、情報量多め・訴求型 - **キーワード**: 淡グレーのグラデーション・オレンジのポイント強調・大きな数字・字間広めの細ゴシック・曲線のワイヤーライン装飾 - **地の質感**: 白から薄いグレーへのなめらかなグラデーションに、細い線を重ねた波模様。悩みパートはコンクリート調。 - **形**: 角丸は小さめで、四角いカードと帯ラベルが中心。丸い写真枠やアイコンをアクセントに使う。 - **温度感**: クールなグレー地に、暖色のオレンジで少し温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#E4E5E9` | 淡グレーのセクション地 | 25% | 画素の実測 | | `tint-1` | `#F4F3F1` | ごく薄いグレー地 | 10% | 画素の実測 | | `primary` | `#F07A1E` | 強調文字のオレンジ | 3% | 推定 | | `secondary` | `#6C615F` | 製品とラベル帯のチャコール | 6% | 画素の主要色に補正 | | `dark-section` | `#535353` | 悩みセクションのダーク地 | 6% | 画素の実測 | | `on-dark` | `#F3F3F0` | ダーク地の上の白文字 | 1% | 画素の実測 | | `text` | `#444444` | 見出しと大きな数字 | 3% | 画素の実測 | | `text-body` | `#4A4A4C` | 本文 | 2% | 推定 | | `text-muted` | `#95989D` | 注釈と英字ラベル | 1% | 画素の主要色に補正 | | `line` | `#CFD5D6` | 枠線と区切り線 | 1% | 画素の主要色に補正 | | `accent-1` | `#B99825` | 累計実績のゴールド | 1% | 画素の実測 | | `marker` | `#F27A1A` | オレンジ地に白文字の強調 | 1% | 推定 | | `primary-accessible` | `#BA590C` | AA を満たす補正値（計算） | | 計算 | - 地の色は白と淡グレーのグラデーションを交互に使い、セクションを区切る。 - 強調したい語句だけをオレンジ文字にする。1 行に 1〜2 か所までにとどめる。 - 悩みパートだけはチャコールのダーク地にして、白文字にする。 - ラベル帯と製品のイメージはチャコール系でそろえる。 - 実績の数字にだけゴールドを使い、ほかには使わない。 - 注釈は小さなグレー文字にする。 - `stat-badge` は文字 `#F07A1E` × 背景 `#FEFEFE` のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BA590C`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大きな数字のインパクト訴求 | ゴシック | Noto Sans JP | 500 | 56px | 1.1 | 0.0em | | `headline-lg` | セクションの主見出し | ゴシック | Noto Sans JP | 500 | 26px | 1.5 | 0.12em | | `headline-md` | 特長の小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.08em | | `headline-sm` | カード見出しとラベル帯 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.08em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字の小ラベルと商品名 | 欧文サンセリフ | Oswald | 400 | 24px | 1.2 | 0.1em | | `label-button` | ピル型タグと帯ラベル | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.1em | - 見出しは字間を広く（0.1em 前後）とり、細めのウェイトで上品に見せる。 - 数字は特大にし、単位や助詞は小さく添えて大小の差を出す。 - 強調する語句だけ太字にして、オレンジ色にする。 - 強調語の上に小さな点の傍点を打つ。 - FV やモデル写真の上では、縦書きのコピーを白い帯に載せる。 - 英字の小ラベル（PROBLEM、FEATURES など）は見出しの上に灰色で置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコン一覧と写真グリッドは 3 列。 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は画面幅いっぱいに配置する。 - テキストは中央揃えを基本にする。 - セクションの間を細い縦線でつなぐ。 - 特長は番号ブロック・見出し・写真・説明の順に並べる。 - 注釈は該当する要素のすぐ下に、右寄せで置く。 ## Elevation & Depth - カードには薄い影（0 2px 8px rgba(0,0,0,.08)）をつける。 - 番号ブロックは右下に影のような三角をつける。 - ほかの要素はフラットにし、影を使わない。 ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角で全幅か、カード幅に収める。製品は大きな円の中に置くこともある。 - **セクション境界**: 基本は直線で区切る。悩みパートの下端だけ下向きの三角にする。 - タグは細い枠線のピル型にする。 - ラベル帯は角丸なしのチャコール帯にする。 - 悩みの代弁は円形のアイコンカードにする。 - 比較の表は細い線の格子で組む。 ## Components - **チャコール帯ラベル**（`label-band`）: 写真の上端に重ねる帯。白文字でポイントを短く書く。 - **特長番号ブロック**（`feature-number`）: 英字ラベルの帯の下に、大きな 2 桁の番号を置いた四角いブロック。 - **商品名枠**（`product-name-box`）: 英字の商品名の下に、細い枠で囲んだカナ表記を置く。 - **声カード**（`review-card`）: 白いカードに、オレンジで強調した感想と、右下に年代ラベルを置く。 - **悩みのチェックリスト**（`worry-checklist`）: ダーク地にオレンジのチェック印を並べ、悩みをマーカーで強調する。 - **スペックのアイコングリッド**（`spec-icon-grid`）: 細線アイコンと 2 行のテキストを、3 列 2 段の区切り線付きで並べる。 - **ピル型タグ**（`pill-tag`）: 利用シーンや状況を、細い枠線のピル型タグで横に並べる。 - **円形の実績バッジ**（`stat-badge`）: オレンジの円弧の中に、大きな数字と注釈を入れる。 - **スペック表**（`spec-table`）: 灰色地の項目名と白地の値を、細線で区切る 2 列の表。 ## Do's and Don'ts **Do** - 強調はオレンジ文字と傍点に限定する。 - 数値の訴求は特大の数字にし、根拠の注釈を必ず添える。 - 白から淡グレーへのグラデーションに細いワイヤー線を重ね、軽さを出す。 - 製品はチャコールで写し、明るい生活シーンの写真と交互に並べる。 - 見出しは字間を広げ、ゆったり組む。 **Don't** - 原色の赤や青をベタ塗りで使わない。 - ダーク地を悩みのパート以外で多用しない。 - オレンジを面の塗りに広く使わない。 - 角丸の大きいポップなボタンや、丸文字の書体を使わない。 - 文字を詰めすぎない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みの解消を一目で伝える。）: 全幅のモデル写真に、縦書きのコピー帯と付属品のバッジを重ねる。 2. **数値のインパクト**（性能の大きさを伝える。）: グラデーション地に特大の数字を置き、下に製品のアップ写真を続ける。 3. **ビフォーアフター**（効果を数値で示す。）: 写真 2 枚を横に並べ、下にチャコール帯でラベルを付ける。大きなパーセント表示を添える。 4. **実績と登場**（信頼感を出し、製品を紹介する。）: 白いカードにゴールドの販売数を載せ、その下に大きな文字と製品写真を置く。 5. **対象部位**（使える範囲を見せる。）: 線画アイコンを 3 列 2 段で並べ、部位をオレンジで塗る。 6. **満足度と声**（社会的な証明を示す。）: 円形の数値バッジを置き、その下に白い声カードを縦に並べる。 7. **悩みの提起**（共感を得て、問題を自覚してもらう。）: ダーク地にチェックリスト・円形の代弁アイコン・症状の格子表を置き、下端を三角にする。 8. **解決策の提示**（製品が答えだと示す。）: 生活シーンの写真に縦書きのコピーを重ね、スペックのアイコングリッドを続ける。 9. **特長 01〜03**（機能を詳しく説明する。）: 番号ブロック・見出し・写真・図解（サーモグラフィなど）の順に繰り返す。 10. **付属品の紹介**（付属品ごとの用途を示す。）: 付属品ごとにアイコン・見出し・大きな写真・3 列の使用例写真を並べる。 11. **こだわりと利用シーン**（生活への馴染みやすさを伝える。）: 吹き出し風の枠線付き見出しと、シーン別の写真カードを縦に並べる。 12. **お客様の声**（具体的な体験を見せる。）: イラストの人物と星評価を入れたカードのスライダー。番号を大きく表示する。 13. **使用方法とスペック**（操作と仕様を明示する。）: 製品写真にボタン名の引き出し線を付け、同梱品の写真と仕様表を続ける。 14. **注意事項**（安全上の情報を示す。）: 黒丸の箇条書きにし、最後に灰色帯の見出しで注意を囲む。 ## Imagery - 白い室内で、白い服のモデルがリラックスする自然光の写真。 - 製品はチャコールのマットな質感で、白い台の上に置いてスタジオ撮影する。 - 脚の周りに青い光の輪や動きの線を重ね、効果を可視化する。 - 背景に、細いグレー線を重ねた波状のワイヤー模様を入れる。 - オレンジを差し色にした細い線画アイコン。 - 写真の上には、薄い英字（例: type 名）を大きく透かして入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央を 375〜750px 幅のカラムに収め、左右は淡グレーのグラデーション地にする。 - アイコンや写真のグリッドは、PC で 3 列から 6 列に広げてよい。 - 特長セクションは、PC で写真とテキストを左右 2 カラムにする。 - 特大の数字は、PC で 1.5 倍程度まで大きくする。 ## 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-4b36d471`（元 LP の URL から採番） - **元 LP**: https://www.amepla.jp/c/e-rakuna/7532/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。