--- version: alpha name: Gallery White Minimal Gadget LP description: 深い紺の FV のあと、ほぼ白地に大判のライフスタイル写真と短い中央揃えコピーを交互に置く、雑誌やギャラリーのようなミニマル LP。装飾色は使わない。色は製品写真のパステルに任せる。英字のジオメトリック見出しと細い罫線で、静かな高級感を出す。 colors: primary: '#013565' on-primary: '#F7FCFB' background: '#FFFFFF' text: '#010101' text-muted: '#757577' line: '#283036' surface: '#ECEDED' background-alt: '#EFEFEF' secondary: '#DADADA' accent-1: '#5DBF8A' cta: '#FEFEFE' on-cta: '#060606' typography: display: fontFamily: Jost fontSize: 28px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em headline-md: fontFamily: Jost fontSize: 26px fontWeight: 400 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Jost fontSize: 9px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-fullbleed: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 470px photo-grid-2x2: height: 380px story-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px feature-card-tabs: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 560px carousel-dots: textColor: '{colors.text}' height: 340px spec-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 900px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 88px history-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 480px --- # DESIGN.md — 紺×白のギャラリー風ガジェット LP（Gallery White Minimal Gadget LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的、やさしい・柔らかい - **キーワード**: ギャラリー・余白・写真主役・モノトーン・パステル製品・英字見出し - **地の質感**: フラットな白地。影やグラデーションは使わず、写真の自然光だけで質感を出す - **形**: 四角い写真と細い罫線が基本。角丸は CTA 枠とアイコンタイルにわずかに付ける程度 - **温度感**: 中間〜やや涼しい。紺の FV は冷たく、写真のパステルが温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#013565` | FV の背景の深い紺 | 5% | 画素の実測 | | `on-primary` | `#F7FCFB` | FV 上の白抜きロゴ文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | ページ全体の白地 | 60% | 画素の実測 | | `text` | `#010101` | 見出しと本文の黒文字 | 2% | 画素の実測 | | `text-muted` | `#757577` | スペックの項目名と注釈のグレー | 0% | 画素の実測 | | `line` | `#283036` | スペック表の区切り罫線 | 0% | 画素の主要色に補正 | | `surface` | `#ECEDED` | 特長カードとアイコンタイルの薄い枠線 | 0% | 画素の主要色に補正 | | `background-alt` | `#EFEFEF` | 製品写真の背景の淡いグレー | 5% | 画素の実測 | | `secondary` | `#DADADA` | スライダーの未選択ドット | 0% | 画素の実測 | | `accent-1` | `#5DBF8A` | 沿革にある企業ロゴのグリーン | 0% | 推定 | | `cta` | `#FEFEFE` | 購入ボタンの白地 | 0% | 画素の実測 | | `on-cta` | `#060606` | 購入ボタンの文字と枠線 | 0% | 画素の実測 | - 地は白で統一する。色の面は FV の紺だけにする - 強調色は付けない。黒文字の太さとサイズだけで階層を作る - 色彩は製品写真のパステル（ピンク・ミント・イエロー）に任せる - 補足情報と注釈はグレー文字にする - 罫線は黒の 1px で区切る。カードの枠はごく薄いグレーにする - CTA も白地に黒枠のアウトラインにして、トンマナを崩さない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の英字ロゴ・記念年数の大きな数字 | 欧文サンセリフ | Jost | 400 | 28px | 1.1 | 0.02em | | `headline-lg` | コンセプトの大見出し（2 行） | ゴシック | Noto Sans JP | 700 | 26px | 1.7 | 0.04em | | `headline-md` | セクション英字見出し（特長・着用例・仕様・沿革） | 欧文サンセリフ | Jost | 400 | 26px | 1.2 | 0.0em | | `headline-sm` | 写真ブロックごとの短い見出し（句点で終える） | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.04em | | `body-md` | 中央揃えの短い本文 | ゴシック | Noto Sans JP | 400 | 12px | 2.1 | 0.03em | | `note` | スペックの項目名・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.02em | | `accent` | 沿革の小さな英字ラベル（大文字） | 欧文サンセリフ | Jost | 400 | 9px | 1.4 | 0.08em | | `label-button` | CTA の店舗名 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.05em | - セクション見出しは英字 1 語で左揃えにする - 和文の小見出しは太字で、句点で終えて言い切る - 本文は短い行で改行し、中央揃えで 2〜4 行に収める - 文字は大きくしすぎず、余白で読ませる - 数字と英字はジオメトリック系のサンセリフにする - 太字は見出しにだけ使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅、テキストは中央に寄せる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 写真ブロックとテキストブロックを交互に積む - テキストブロックの上下には 80px 以上の余白を取る - 写真は左右の余白なしで全幅に置く - スペックは項目名を上、値を字下げして下に置き、罫線でグループを区切る - 沿革は中央揃えで、モデルごとに縦に並べる ## Elevation & Depth - 影は基本的に使わない - 選択中のアイコンタイルにだけ、ごく薄い影と黒枠を付ける - 奥行きは写真の自然な陰影で出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。FV と写真は全幅で裁ち落とす - **セクション境界**: 直線で切り替える。区切りは余白と細い罫線だけで表す - 写真は角丸にしない - CTA は角丸 12px 前後の黒い細枠ボックスにする - アイコンタイルは角丸 4px の薄枠グリッドにする ## Components - **全幅 FV**（`hero-fullbleed`）: 紺の背景に製品と手の写真を置き、中央下に白い英字ロゴを重ねる - **カラー別 2×2 写真グリッド**（`photo-grid-2x2`）: 製品の色違いを 4 枚の正方形写真で、隙間なく並べる - **中央揃えストーリーブロック**（`story-block`）: 太字の短い見出しの下に、中央揃えの本文を 2 段落置く - **特長カードとアイコンタブ**（`feature-card-tabs`）: 写真と説明が入った薄枠カードの下に、線画アイコンのタブを 3×2 で並べて切り替える - **写真カルーセル**（`carousel-dots`）: 次の写真が少し見える横スライドにする。下に細い矢印とドットを付ける - **罫線スペック表**（`spec-list`）: 黒罫線でグループを区切り、グレーの項目名と黒の値を縦に並べる - **アウトライン購入ボタン**（`button-primary`）: 白地に黒の細枠。上段に店舗名、細線を挟んで下段に店舗区分を書く - **沿革モデルカード**（`history-item`）: 小さな英字ラベル、モデル名、白背景の製品写真、年号、短い説明を中央に縦に並べる ## Do's and Don'ts **Do** - 写真は大きく、余白はたっぷり取る - コピーは短く言い切り、中央揃えにする - 英字見出しはジオメトリック体で統一する - 製品の色違いを写真で見せて、彩りを出す - 情報は罫線とグレー文字で整理する **Don't** - 赤やオレンジの塗りつぶしボタンを使わない - グラデーション・影・バッジで装飾しない - 本文を長く詰め込まない - 写真に角丸や枠を付けない - ポップな手書き文字や吹き出しを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品の象徴的なビジュアルで世界観を伝える）: 紺の背景に、浮かぶ製品と手の写真を置き、白い英字ロゴを重ねる 2. **カラー紹介**（色のバリエーションを見せる）: 2×2 の正方形写真グリッドにする（PC は 4 列） 3. **コンセプト**（ブランドの思想を語る）: 大きな太字の 2 行見出しの下に、左揃えの本文を置く 4. **ベネフィット紹介（4 回）**（形・佇まい・携帯性・触感の価値を伝える）: 全幅写真と、中央揃えの見出し・本文を交互に置く 5. **特長**（機能を切り替えながら説明する）: 写真付きカードにアイコンタブを組み合わせる 6. **着用例**（使用シーンを見せる）: 横スライドのカルーセルにドットと矢印を付ける 7. **仕様**（製品情報を正確に伝える）: 罫線で区切った縦組みのスペックリストにし、注釈はグレーにする 8. **CTA**（予約・購入へ誘導する）: 受付期間のテキストの下に、アウトラインの店舗ボタンを置く 9. **沿革**（歴代モデルで信頼と物語を伝える）: 大きな記念数字・本文・年号付きのモデル紹介を縦に並べる（PC は横向きのタイムライン） ## Imagery - 白いデスクや棚に置いたインテリア的なライフスタイル写真にする - 柔らかい自然光で、明るく低コントラストに撮る - 製品の色はミント・ピンク・イエローなどのパステルにする - 手で持つ・置く仕草を入れて、サイズ感と親しみを出す - 単色背景（紺・ピンク・ミント）のファッション的なカットを混ぜる - アイコンは細い単線の線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は写真とテキストを左右 50% ずつに分け、ブロックごとに左右を入れ替える - PC のカラー写真は 4 列で 1 行に並べる - PC の FV は横長にし、上部に白文字のグローバルナビを置く - PC の特長カードは写真を左、説明とアイコンタブを右に置く - PC のスペックは項目名と値の 2 列表にし、中央の狭い幅に収める - PC の沿革は横向きのタイムライン（線と点）に並べる ## 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-2ca4069d`（元 LP の URL から採番） - **元 LP**: https://www.elecom.co.jp/pickup/egg-mouse/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。