--- version: alpha name: Iridescent Gray Smart Home Device LP description: ライトグレーの地に虹色のグラデーションと、色付きの丸いドット飾りを合わせたスマート照明の LP。字間を広くとった細いゴシック見出しと、暗い室内写真・アプリ画面を交互に並べ、機能を一つずつ見せていく。後半はくすんだセージやスレートの色帯に切り替え、規格表やスペック表で情報をしっかり伝える。 colors: background: '#E9E9E9' primary: '#5FB8C0' background-alt: '#909B8B' dark-section: '#6B6C6C' secondary: '#8D97A0' surface: '#FFFFFF' text: '#32333F' text-body: '#4A4A4A' on-dark: '#DEDFDE' accent-1: '#C4B9D3' accent-2: '#C0141E' tint-1: '#D3CACB' marker: '#F0EE80' line: '#A09691' dark-section-accessible: '#626363' typography: display: fontFamily: Montserrat fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.2em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.15em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.2em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-dot-pill: textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 40px label-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px icon-grid: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 80px case-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 160px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 56px saving-chart: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 200px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 180px spec-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 36px note-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 60px --- # DESIGN.md — ライトグレー×虹色グラデのスマート家電 LP（Iridescent Gray Smart Home Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: クール・先進的、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 虹色グラデ・ライトグレー・字間の広い細ゴシック・アプリ画面・丸ドット飾り・くすみ色帯 - **地の質感**: マットなグレーの地に、ホログラム風の虹色ぼかしを部分的に重ねる - **形**: 角のない写真ブロックに、ピル型やドットの飾りを添える - **温度感**: やや寒色寄りのニュートラル。光の色で温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#E9E9E9` | 基本の地色ライトグレー | 30% | 画素の実測 | | `primary` | `#5FB8C0` | ブランドのミントアクセント（ドット・見出し色） | 3% | 推定 | | `background-alt` | `#909B8B` | セージグリーンの色帯セクション | 12% | 画素の実測 | | `dark-section` | `#6B6C6C` | スペック表などのダークグレーの面 | 11% | 画素の実測 | | `secondary` | `#8D97A0` | スレートブルーグレーの色帯 | 6% | 画素の実測 | | `surface` | `#FFFFFF` | カード・表・説明ブロックの白 | 10% | 画素の実測 | | `text` | `#32333F` | 見出しの濃いグレー文字 | 2% | 画素の主要色に補正 | | `text-body` | `#4A4A4A` | 本文のグレー文字 | 2% | 推定 | | `on-dark` | `#DEDFDE` | 暗い面の上の白文字 | 2% | 画素の実測 | | `accent-1` | `#C4B9D3` | ラベンダーのドット飾り | 1% | 画素の実測 | | `accent-2` | `#C0141E` | 注意書きの赤 | 1% | 推定 | | `tint-1` | `#D3CACB` | 補足ボックスのくすみピンクグレー | 1% | 画素の実測 | | `marker` | `#F0EE80` | 重要な注記を囲む黄色ハイライト | 0% | 推定 | | `line` | `#A09691` | 罫線・区切り線のグレー | 0% | 画素の主要色に補正 | | `dark-section-accessible` | `#626363` | AA を満たす補正値（計算） | | 計算 | - 地はライトグレーを基本にし、セクションごとにセージ、スレート、ダークグレーの帯に切り替えてリズムをつける - 鮮やかな色は虹色グラデと製品の光の写真だけで出す。地は彩度を抑える - 見出しの右側（または左側）にミントやラベンダーの丸ドットと、グラデのピル飾りを添える - 警告や必須条件は赤の太字で、ごく一部にだけ使う - スペック表は濃いグレーの地に白文字で、白い細線で区切る - 料金の比較はミントのバーと、ボルドーの吹き出しで強調する - `spec-table` は文字 `#DEDFDE` × 背景 `#6B6C6C` のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#626363`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの英字ロゴ型見出し | 欧文サンセリフ | Montserrat | 600 | 40px | 1.1 | 0.2em | | `headline-lg` | 機能ごとのセクション見出し | ゴシック | Zen Kaku Gothic New | 400 | 26px | 1.3 | 0.15em | | `headline-md` | サブ見出し・手順の見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `accent` | 英字ラベル（機能・サイズ・スペックなど） | 欧文セリフ | Cormorant Garamond | 400 | 20px | 1.2 | 0.2em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `note` | 注釈・商標表記 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | ピル型ラベル・タブ名 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - 大見出しは細めのウェイトで、字間を 0.15em 以上広げる - 長い見出しは 2 行に分け、2 行目を右に寄せて段差をつける - 英字ラベルは細いセリフ体で字間を広げ、横に和文の見出しを添える - 本文は小さめの 11px 前後にし、行間は 1.6 にする - 数値（消費電力・料金など）は大きく、単位は小さく組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能アイコンは 4 列、比較写真や手順は 3〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は画面幅いっぱいか、片側の端まで寄せて配置する - アプリ画面のスマホを写真に重ねて、操作と結果を同時に見せる - 見出し → 短い説明 2 行 → 大きなビジュアル、の順にそろえる - スペック表は 2 列にし、左列を項目名にする - 注釈は各ブロックのすぐ下に小さく置く ## Elevation & Depth - 基本はフラット。影はスマホのモックアップにだけ薄くつける - 白カードは影をつけず、地色との差で浮かせる - 吹き出しには軽いドロップシャドウをつける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。イラストは円形に切り抜く - **セクション境界**: 直線で色帯を切り替える。波線のグラデ装飾を境目に重ねることがある - ラベルやタブはピル型にする - 見出しには円ドットとピルのグラデ飾りをペアで添える - 比較写真の下端には半透明のグレー帯を敷き、そこに数値を載せる ## Components - **ドット付き見出し**（`heading-dot-pill`）: 字間の広い細ゴシック見出しの横に、丸ドットとグラデのピル飾りを並べる - **ピル型ラベル**（`label-pill`）: 機能名を白いピルの中に入れ、スマホ画面の上に置く - **機能アイコン一覧**（`icon-grid`）: 線画アイコンの下に短い機能名を入れ、4 列で並べる - **連携事例ブロック**（`case-card`）: 大きな番号と英字ラベルを組み、下に設定例を白いピルで入れる。右側に円形のイラストを添える - **音声コマンドの吹き出し**（`speech-bubble`）: 写真の上に白い角丸の吹き出しを置き、話しかける文を入れる - **電気代比較グラフ**（`saving-chart`）: ミントの棒グラフの上に、ボルドーの円形吹き出しで差額を見せる - **手順ステップ**（`step-card`）: 黒い小さな番号バッジに線画イラストと短い説明を付け、4 列で並べる - **スペック表**（`spec-table`）: 濃いグレーの地に白文字を載せ、白い細線で区切った 2 列の表 - **補足ボックス**（`note-box`）: くすみピンクグレーの面に、箇条書きの補足を入れる ## Do's and Don'ts **Do** - 地は無彩色かくすみ色に保ち、虹色は光や装飾だけに使う - 機能は 1 セクションにつき 1 つにし、写真かアプリ画面で具体的に見せる - 見出しは細く、字間を広くして先進的な印象を保つ - 対応機器・規格・注意事項は表で正確に載せる - 色帯の切り替えでセクションを区切る **Don't** - 太く派手なゴシック見出しや原色の地は使わない - 影の強いカードや立体的なボタンを多用しない - 虹色グラデを本文の背景に敷かない - 赤の強調を見出しや装飾に使わない - 写真に角丸をつけたり、ゆるいイラストにしたりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品と対応プラットフォームを一目で伝える）: 虹色グラデの地に英字ロゴ型の見出しと製品写真を置き、対応サービスのバッジを並べる 2. **規格の紹介**（接続規格の価値を説明する）: グレーの地の三角グラデの上に、製品を中心にして周囲の対応機器を配置する 3. **機能一覧**（全機能をざっと見せる）: 英字ラベルと和文の見出しを組み、線画アイコンを 4 列のグリッドで並べる 4. **色彩・調色の機能**（光の表現力を見せる）: 暗い室内写真にアプリ画面を重ね、電球の比較写真を 3〜5 列で並べる 5. **調光・メモリー・シーン・音楽**（アプリの機能を説明する）: スマホ画面を 2 台並べて注記を引き出し線でつなぎ、人物写真と組み合わせる 6. **連携と対応機器**（接続の条件を示す）: 破線の接続図と、左列を濃いグレーにした対応機器の表で見せる 7. **音声操作・タイマー・自動化**（便利な使い方を伝える）: セージの色帯に写真と吹き出しを載せ、スマホを 3 台並べる。連携事例は番号付きで見せる 8. **リモート・グループ操作**（外出先や複数台での操作を伝える）: スレートの色帯にアプリ画面と建物の写真を合わせる 9. **節電**（経済性を数値で示す）: 3 枚の比較写真に数値の帯を載せ、白枠の中に電気代の比較グラフを置く 10. **購入前の確認**（必要な環境を伝える）: グラデの地に白いカードを 2×2 で並べ、注意事項を赤字で入れる 11. **使い方**（設定手順を示す）: グレーの帯見出しの下に、4 ステップの線画手順を 2 パターン並べ、QR コードを添える 12. **サイズ・スペック**（仕様を正確に伝える）: 寸法線入りの製品写真を見せ、ダークグレーの 2 列スペック表と認証マークを置く ## Imagery - 製品の切り抜き写真に、虹色のホログラム風の光をまとわせる - 暗めの洋風リビングを、色付きの間接照明で照らした写真 - 黒い UI のアプリ画面を、スマホのモックアップで正面から見せる - グレーの単色線画アイコンと、手順用の線画イラスト（黄色をポイントに使う） - パステルの虹色の波線やドットを、背景の端に浮かせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、以下は推奨。PC では本文の幅を 960px 前後に収め、色帯は画面幅いっぱいに広げる - 機能ごとのセクションは、写真とテキストを左右 2 カラムで交互に並べる - アイコン一覧は 6〜8 列、手順は 4 列のまま余白を広げる - 見出しは 1.4 倍程度に拡大し、字間はそのままにする ## 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-d58abd47`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/dmastore/esmt009/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。