--- version: alpha name: Teal Accent Stylish Lifestyle Device LP description: 白とライトグレーの地に、ティールを差し色として通した嗜好品デバイスのLP。大きな欧文アウトラインの透かし文字、円形の切り抜き写真、黒い帯状のラベルでファッション誌のような空気を作る。一方で、赤地の特典ボックスや実績数字を繰り返し入れ、訴求力も高めている。 colors: primary: '#02B4AB' background: '#FFFEFC' background-alt: '#E7E9E8' tint-1: '#CBE0E0' text: '#243247' dark-section: '#374548' secondary: '#151315' accent-1: '#D94624' accent-2: '#AED2F4' marker: '#F2E64A' cta: '#01B4AB' on-cta: '#FCFECD' accent-3: '#343DCA' text-muted: '#808A88' line: '#243247' cta-accessible: '#01817B' accent-1-accessible: '#E57B62' typography: display: fontFamily: Montserrat fontSize: 72px fontWeight: 600 lineHeight: 1.0 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Jost fontSize: 64px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 6px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 80px 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: 56px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px tag-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 26px label-black: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 28px campaign-box: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 440px stat-ring: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 120px faq-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 48px interview-card: backgroundColor: '{colors.accent-3}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 460px label-reason: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 26px --- # DESIGN.md — 白×ティールのスタイリッシュな電子デバイスLP（Teal Accent Stylish Lifestyle Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: クール・先進的、情報量多め・訴求型、清潔・爽やか、力強い・インパクト - **キーワード**: ティール差し色・欧文の透かし文字・円形の切り抜き・黒帯ラベル・数字で実績訴求・誌面風レイアウト - **地の質感**: フラットな白・グレーの面に写真を大きく敷く。装飾は線画のアウトライン文字と幾何学の円だけに絞る - **形**: 正円・半円・リング・ピル型を多用し、写真カードは片側だけ大きく丸める - **温度感**: 基本は寒色寄りでクール。キャンペーン部分だけ赤と黄で温度を上げる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#02B4AB` | ブランドの差し色（ティール） | 5% | 画素の実測 | | `background` | `#FFFEFC` | 基本の地色 | 30% | 画素の実測 | | `background-alt` | `#E7E9E8` | ライトグレーの地（FAQ・解説） | 12% | 画素の実測 | | `tint-1` | `#CBE0E0` | 淡いティールの円・特典の帯 | 4% | 画素の主要色に補正 | | `text` | `#243247` | 見出し・本文の濃紺 | 4% | 画素の主要色に補正 | | `dark-section` | `#374548` | 悩みセクションの暗い地 | 7% | 画素の実測 | | `secondary` | `#151315` | 黒帯ラベル・強調の面 | 4% | 画素の主要色に補正 | | `accent-1` | `#D94624` | キャンペーン枠の赤 | 4% | 画素の実測 | | `accent-2` | `#AED2F4` | キャンペーン背景の水色 | 3% | 画素の実測 | | `marker` | `#F2E64A` | 特典の番号ラベル・強調の黄色 | 1% | 推定 | | `cta` | `#01B4AB` | クーポンボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FCFECD` | ボタン上の文字（黄味がかった白） | 0% | 画素の主要色に補正 | | `accent-3` | `#343DCA` | インタビュー帯の青紫 | 3% | 画素の実測 | | `text-muted` | `#808A88` | 注釈のグレー文字 | 1% | 画素の主要色に補正 | | `line` | `#243247` | ピル枠・表の罫線 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#01817B` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E57B62` | AA を満たす補正値（計算） | | 計算 | - 地は白とライトグレーを交互に使い、セクションの切り替えを示す - ティールは数字・ラベル・リング・ボタンなど要所だけに使う - キャンペーンは赤枠＋水色地＋黄色の強調でまとめ、ページ内で浮かせる - 悩みのセクションは暗い紺グレーの地に写真を重ね、トーンを落とす - 商品バリエーションは各色の円をアクセントにし、色名の見出しもその色にする - 本文は純黒を避け、濃紺で書く - `button-primary` は文字 `#FCFECD` × 背景 `#01B4AB` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#01817B`、4.56:1）を使う。 - `campaign-box` は文字 `#243247` × 背景 `#D94624` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E57B62`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 実績数字・巨大な数字 | 欧文サンセリフ | Montserrat | 600 | 72px | 1.0 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.4 | 0.1em | | `accent` | 背景に敷く欧文アウトラインの透かし文字 | 欧文サンセリフ | Jost | 400 | 64px | 1.0 | 0.05em | | `headline-sm` | 小見出し・黒帯ラベルの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | ボタンとピル型タグ | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.1em | | `headline-md` | 英字の小ラベル（REASON-01など） | 欧文サンセリフ | Montserrat | 600 | 12px | 1.2 | 0.1em | - 和文の見出しは字間を0.1em前後広げ、誌面のような空気を出す - セクションごとに巨大な欧文の線画文字を画面からはみ出させて敷く - 数字は欧文書体で特大にし、単位は和文で小さく添える - 悩みの短文は縦書きにし、黒帯の上に白文字で置く - 強調語はティールまたは黄色のマーカーで色を変える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特徴やシーンは写真と文字を左右にずらして重ねる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真や円形の装飾は画面端まで裁ち落としにして余白を崩す - 見出しの上には英字の小ラベルを添える - 数値訴求は中央揃えで大きく見せる - キャンペーン枠は同じ内容をページ内で2回以上繰り返す - 比較表や計算UIは白い面の上に罫線で組む ## Elevation & Depth - 影はほぼ使わず、フラットな面と線で構成する - 主CTAだけは軽い影を付けて浮かせる - 写真カードは影を付けずに角丸と重なりで奥行きを出す ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 正円・半円・片側だけ大きく丸めた角丸に切り抜く - **セクション境界**: 直線で区切る。透かし文字がセクションの境界をまたぐ - タグとボタンは細い線のピル型にする - 円形のリングで進捗やパーセントを表す - フレーバーなどの選択肢は2つの円を並べて見せる ## Components - **クーポンCTA**（`button-primary`）: ティールのピル型ボタン。右端に回転テキスト付きの白い円形の再生アイコンを置く - **線枠ボタン**（`button-outline`）: 白地に紺の線のピル型ボタン。右端に矢印の円を置く - **ハッシュタグ・特徴タグ**（`tag-pill`）: 細い枠線の小さなピル型タグ。横に3つ並べる - **黒帯ラベル**（`label-black`）: 黒地に白文字の帯。縦書き・横書きの両方で使う - **特典ボックス**（`campaign-box`）: 赤枠の中の白い角丸カード。番号付きの3特典をティール系の帯で並べる - **パーセントのリング**（`stat-ring`）: ティールの円弧の中に大きな%数字を置く。写真入りのピル型カードと組み合わせる - **FAQアコーディオン**（`faq-item`）: グレーの地に白い角丸の行を並べる。ティールのQと+アイコンを付ける - **インタビューカード**（`interview-card`）: 写真と縦書きの帯コピーを組み、下にQ&Aを色付きの角丸ブロックで置く - **英字番号ラベル**（`label-reason`）: 細い枠線のピル型の中に、REASON-01のような英字の連番を入れる ## Do's and Don'ts **Do** - 見出しごとに大きな欧文の透かし文字を薄い線で入れる - ティールは要所だけに絞って使う - 実績は特大の数字と月桂樹の装飾で見せる - 写真は円や片側だけの角丸で切り抜く - CTAは特典ボックスとセットで繰り返し置く **Don't** - 本文を純黒にしない - ティールを広い面に塗らない - 影やグラデーションを多用しない - 丸ゴシックで可愛くしすぎない - 赤と黄色をキャンペーン以外で使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績と商品の印象を一度に伝える）: 最上部に実績の帯、人物の大写真、ランキングバッジ、ティールの大きなロゴ風コピー、特徴タグを並べる 2. **キャンペーン**（特典で行動を促す）: 水色地のバナーの下に赤枠の3大特典ボックスとCTAを置く 3. **商品紹介**（特徴を要約する）: ハッシュタグと円形写真のカルーセルで見せる 4. **選ばれる理由**（3つの強みを示す）: 色付きの大円の上に商品写真、番号ラベル、大きな見出しを重ねる 5. **お客様の声**（共感を得る）: 写真のタイルに縦書きの吹き出しコピーを載せる 6. **実績**（信頼を作る）: ベージュ地に特大の数字とランキングロゴを置き、暗い写真地に大きな%を載せる 7. **メディア・販売店**（認知度を示す）: CM動画のカードと店舗写真を並べ、店舗数を特大の数字で見せる 8. **節約シミュレーション**（コスト面のメリットを示す）: ティールの円形選択肢を並べ、線枠の結果ボタンを置く 9. **特長・機能**（機構の良さを説明する）: パーツの分解図に引き出し線で注記を付け、大きな数値を添える 10. **バリエーション**（選ぶ楽しさを伝える）: 色ごとに2つの円写真を並べ、その色の英字見出しを付ける 11. **悩みの提起**（利用シーンへの共感を得る）: 暗い地に番号付きの写真と縦書きの黒帯コピーを重ねる 12. **専門家コメント・解説**（根拠を示す）: 医師の写真カードと、図解した2枚組のテクニックカードを置く 13. **利用者インタビュー**（具体的な使用体験を見せる）: 色の違う角丸ブロックでQ&Aを組む 14. **よくある質問・安全性**（不安を解消する）: 白い角丸のアコーディオンと、3枚の写真カードを並べる ## Imagery - 人物は落ち着いた室内光で撮り、商品を自然に手に持たせる - 商品の単体写真は白背景の切り抜きにする - 食材などのフレーバー写真は寄りで撮り、円形に切り抜く - 悩みのシーンは暗く青みのあるトーンにする - 装飾は幾何学の円・リングと欧文の線画文字に限る - 解説図は黒い線画のシンプルなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約375pxの縦長カラムを置き、SPと同じ構成で見せる - PCのカラム外は商品とフルーツの写真を敷いた青グレーの背景にする - SPでは透かし文字を画面からはみ出させる - PCに広げる場合も、カラム幅は480px以内に保つ ## 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-7c56bed9`（元 LP の URL から採番） - **元 LP**: https://drvape.jp/lp?u=m2_shop - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。