--- version: alpha name: Cool Metallic Gadget Feature LP description: 銀灰色のグラデーション地に、ハイライトとして青を差したクールなガジェット紹介 LP。機能ごとに『』で囲んだ見出しと大きな製品写真、数値グラフを縦に積み重ね、スペックを画像主体で訴求する構成。 colors: primary: '#3C89CB' background: '#FDFEFD' background-alt: '#ADB3BA' surface: '#F9FAFB' text: '#161D21' text-body: '#4D4F51' text-muted: '#767A81' dark-section: '#5F7F9C' on-dark: '#F9FAFB' accent-1: '#8B9DAC' secondary: '#4D4F51' tint-1: '#DBDEE3' accent-2: '#2F6FB0' primary-accessible: '#3077B3' text-muted-accessible: '#6F7279' dark-section-accessible: '#587691' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 800 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-bracket: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 32px feature-icon-grid: backgroundColor: '{colors.secondary}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px tech-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 20px check-list-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px graph-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 160px big-number: textColor: '{colors.text}' typography: '{typography.display}' height: 70px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.md}' height: 130px trust-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px guarantee-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 90px --- # DESIGN.md — 銀灰×青の先進ガジェット訴求 LP（Cool Metallic Gadget Feature LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: クール・先進的、情報量多め・訴求型、清潔・爽やか - **キーワード**: 銀灰グラデーション・メタリック製品写真・青アクセント・数値の大写し・機能アイコン・スペック図解 - **地の質感**: 金属光沢と霧がかった寒色グラデーション。HUD 風の線画やホログラムを背景にあしらう。 - **形**: 角丸 8〜12px のカード、円形アイコン、ラベル帯。直線的で整然とした構成。 - **温度感**: 寒色寄りで冷たく、清潔で精密な印象。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3C89CB` | ブランド青・強調ラベル | 3% | 画素の実測 | | `background` | `#FDFEFD` | 基本の銀灰地 | 30% | 画素の実測 | | `background-alt` | `#ADB3BA` | 濃いめの灰地 | 15% | 画素の実測 | | `surface` | `#F9FAFB` | 白カード・グラフ地 | 7% | 画素の主要色に補正 | | `text` | `#161D21` | 見出し文字 | 4% | 画素の主要色に補正 | | `text-body` | `#4D4F51` | 本文文字 | 3% | 画素の主要色に補正 | | `text-muted` | `#767A81` | 注釈・ラベル | 2% | 画素の実測 | | `dark-section` | `#5F7F9C` | スチールブルー帯 | 4% | 画素の主要色に補正 | | `on-dark` | `#F9FAFB` | 濃色帯上の文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#8B9DAC` | グラフ・波形の水色 | 4% | 画素の実測 | | `secondary` | `#4D4F51` | 機能アイコンの円 | 2% | 画素の主要色に補正 | | `tint-1` | `#DBDEE3` | 薄い青灰パネル | 8% | 画素の実測 | | `accent-2` | `#2F6FB0` | チェックアイコン青 | 0% | 推定 | | `primary-accessible` | `#3077B3` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#6F7279` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#587691` | AA を満たす補正値（計算） | | 計算 | - 地は銀灰〜青灰のグラデーションで統一し、純白はカードのみに使う - 青はラベル帯・チェック・矢印など点で差し、面積は 5% 以内 - 見出しはほぼ黒の濃灰、本文は中灰で階層を作る - 数値やグラフは水色の塗り＋灰の比較線で対比させる - 暖色は使わない。製品の金属色と寒色で揃える - 保証・認証などの信頼要素はスチールブルー帯に白文字 - `tech-label` は文字 `#F9FAFB` × 背景 `#3C89CB` のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3077B3`、4.55:1）を使う。 - `step-card` は文字 `#767A81` × 背景 `#F9FAFB` のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6F7279`、4.61:1）を使う。 - `trust-band` は文字 `#F9FAFB` × 背景 `#5F7F9C` のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#587691`、4.55:1）を使う。 - `guarantee-badge` は文字 `#3C89CB` × 背景 `#F9FAFB` のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3077B3`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 数値の大写し（時間・重量・%） | 欧文サンセリフ | Montserrat | 800 | 56px | 1.0 | 0.0em | | `headline-lg` | 『』付きセクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-md` | 機能名・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `headline-sm` | カード内見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.0em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | アイコン下ラベル・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字キャプション | 欧文セリフ | Playfair Display | 400 | 14px | 1.2 | 0.15em | | `label-button` | 青ラベル帯の文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.0em | - セクション見出しは二重かぎ括弧『』で囲み、中央揃えにする - 見出しは「機能名・効果」の形で中黒でつなぐ - 数値は欧文太字で特大にし、単位は小さく添える - 本文は中央揃えで 3〜4 行に収める - 技術名は青ラベル帯に白文字で文頭に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコンは 4 列グリッド、比較写真は 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 1 セクション 1 機能。見出し→ビジュアル→短文の順 - 製品写真は画面幅いっぱいに大きく置く - 機能アイコンは円形で 4 列 2 行に並べる - グラフは白い角丸カードに収める - 手順は 3 列の番号付きカードで示す ## Elevation & Depth - カードは影なしか、ごく薄い影（0 2px 6px rgba(0,0,0,.08)） - 製品写真は切り抜きで落ち影をつけ浮かせる - 認証画像は灰色の太枠フレームで囲む ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は角丸矩形か全幅、製品は背景切り抜き - **セクション境界**: 直線で背景色やグラデーションが切り替わる - 機能アイコンは濃灰の正円 - ラベル帯は角丸 4px の青長方形 - 保証バッジは白の角丸正方形 - 斜めや波形の区切りは使わない ## Components - **『』見出し**（`heading-bracket`）: 二重かぎ括弧で囲む中央揃えの太字見出し - **機能アイコングリッド**（`feature-icon-grid`）: 濃灰の円に白い線アイコン、下に短いラベルを 4×2 で並べる - **技術名ラベル**（`tech-label`）: 本文の頭に置く青い帯に白文字 - **おすすめチェックリスト**（`check-list-card`）: 薄い青灰パネルに青いチェックと悩みを 5 行並べる - **周波数グラフカード**（`graph-card`）: 白カードに水色の塗りグラフと灰の比較線、凡例付き - **数値大写し**（`big-number`）: 時間や重量を特大の欧文数字で示し、単位と注釈を小さく添える - **装着手順カード**（`step-card`）: 白カードに図と番号、下に一行説明を 3 列で並べる - **認証・説明帯**（`trust-band`）: スチールブルーの帯に白の見出しと説明文 - **保証バッジ**（`guarantee-badge`）: 白角丸正方形に青の大文字と小さな補足 ## Do's and Don'ts **Do** - 見出しは毎回『』で囲み、トーンを統一する - 製品写真は金属の反射を活かした高解像度の切り抜きにする - スペックは数値とアイコンで視覚的に示す - 背景は寒色グレーのグラデーションで階調をつける - 人物写真は自然光で穏やかな表情を選ぶ **Don't** - 赤やオレンジなど暖色を強調に使わない - 長い本文を段落で並べない - ピル型のポップなボタンを置かない - 手書き風・丸ゴシック書体を混ぜない - 背景に柄や派手なパターンを敷かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品と体験の印象づけ）: 人物の横顔と製品写真、商品名と特長 3 点を縦線区切りで配置、新登場バッジ 2. **イメージビジュアル**（ブランドの世界観提示）: グレー地に人物全身、英字セリフのキャプション 3. **機能一覧**（主要機能を俯瞰させる）: 『』見出し＋サブコピー、円アイコン 4×2 グリッド 4. **装着感の訴求**（快適さを伝える）: 左に角丸人物写真と吹き出し説明、右に製品写真 5. **おすすめの人**（悩みへの共感）: 青チェック付きで悩みを 5 行並べるパネル 6. **機能詳細**（各機能を 1 つずつ深掘り）: 『』見出し、全幅写真、技術名ラベル付き短文を繰り返す 7. **音質・グラフ**（性能を数値で証明）: 白カードの周波数グラフ、比較写真の前後対比 8. **スペック大写し**（防水・サイズ・再生時間・重量を印象づける）: 数値の特大表示と製品写真を交互に配置 9. **認証**（安全性の信頼付け）: スチールブルー帯に見出し、認証書画像を灰枠で表示 10. **使い方**（装着と操作の説明）: 3 列手順カード、タップ操作を 2 列アイコン表で整理 11. **同梱物**（内容物の明示）: パッケージと付属品を寸法線付きで斜め配置 12. **保証・サポート**（購入後の安心）: 白角丸バッジ 2 つを並べ、下に短い説明文 ## Imagery - 人物は若い男女、白シャツや黒トップスで自然光の穏やかな表情 - 製品はクロームの光沢を強調したスタジオ切り抜き - 分解図や青く光る内部構造で技術感を演出 - HUD 風の線画・ホログラム・音波を背景にあしらう - 空や雲、街中の写真は寒色に色調補正 - 寸法線・矢印を図解に重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は PC 幅でも 1 カラムの縦長画像型。SP でもそのまま縦積み - SP は機能アイコンを 4 列のまま縮小、ラベルは 10px - PC では本文幅を最大 750px に抑え中央配置 - 2 列写真や手順 3 列は SP でも維持し、文字は画像外に出す - グラフは SP で横幅いっぱいにして目盛を省略 ## 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-4af3f930`（元 LP の URL から採番） - **元 LP**: https://www.just-match.co.jp/F308 - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。