--- version: alpha name: Cinematic Monochrome Camera Product LP description: 黒・明るいグレー・チャコールの3色の地を切り替えて、大きな作例写真とモノクロの製品カットを見せる、映画のような雰囲気のデジタルカメラLP。文字は小さく控えめにし、明朝の大見出しと細い線で上品さを出す。黄色は最後の購入ボタンだけに使う。 colors: primary: '#000000' background: '#DADBDD' dark-section: '#525355' surface: '#38393B' on-dark: '#FAFBFC' text: '#0C0C0E' text-muted: '#8A8B8D' cta: '#FCE202' on-cta: '#000000' secondary: '#151314' line: '#BBBBB9' accent-1: '#4482B3' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px 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: 52px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px feature-circle-badge: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px spec-icon: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 40px accordion-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px text-link-arrow: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 20px quote-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 100px profile-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 180px section-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 24px --- # DESIGN.md — 黒×グレーの写真主役カメラ製品LP（Cinematic Monochrome Camera Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 上品・高級、クール・先進的、シンプル・ミニマル、ラグジュアリー・ダーク - **キーワード**: 写真が主役・モノクロ基調・映画のような雰囲気・余白・細い線・明朝の見出し - **地の質感**: マットでフラット。製品写真は端を白やグレーにぼかしてグラデーションで地になじませる - **形**: 四角い写真が基本。細線の正円バッジと、角丸が小さいアコーディオンを使う - **温度感**: クール寄りのニュートラル。作例写真の夕焼けや青空で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | ブランド面・導入の黒地 | 14% | 画素の実測 | | `background` | `#DADBDD` | スペック紹介の明るいグレー地 | 20% | 画素の実測 | | `dark-section` | `#525355` | インタビュー・解説のチャコール地 | 24% | 画素の実測 | | `surface` | `#38393B` | アコーディオンのカード面 | 3% | 画素の実測 | | `on-dark` | `#FAFBFC` | 暗い地の上の文字・線画 | 2% | 画素の実測 | | `text` | `#0C0C0E` | 明るい地の上の見出し | 1% | 画素の実測 | | `text-muted` | `#8A8B8D` | 見出しのうち強調しない語のグレー | 0% | 推定 | | `cta` | `#FCE202` | 購入ボタン | 1% | 画素の実測 | | `on-cta` | `#000000` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#151314` | 製品詳細へのサブボタン | 0% | 画素の実測 | | `line` | `#BBBBB9` | 細い区切り線・丸バッジの縁 | 0% | 画素の主要色に補正 | | `accent-1` | `#4482B3` | 作例写真に多い空の青 | 4% | 画素の実測 | - 地の色は黒→明るいグレー→チャコールの順に、章ごとに切り替える - 色を担うのは写真だけ。UIは無彩色で作る - 黄色は最後の購入ボタンだけに使い、ほかでは使わない - 見出しは強調する語を濃く、残りの語をグレーにして2トーンで組む - 暗い地の上の文字と線画は白か淡いグレーにする - 製品写真の端は地の色へグラデーションで溶かす ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英語の大見出し・機能名 | 明朝 | Shippori Mincho | 400 | 36px | 1.3 | 0.02em | | `headline-lg` | セクションの見出し（強調語あり） | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.04em | | `headline-md` | インタビューの引用見出し | ゴシック | Noto Sans JP | 400 | 18px | 1.6 | 0.04em | | `headline-sm` | アコーディオンの項目名 | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.04em | | `body-md` | 導入文・プロフィール本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.04em | | `note` | 箇条書き・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | 英字の小見出しラベル・縦書きの英字 | 欧文サンセリフ | Montserrat | 600 | 12px | 1.4 | 0.15em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em | - 大見出しは明朝の細めのウェイトで大きく置く - 日本語の見出しは太いゴシックで2行にまとめ、一部の語だけ濃くする - 本文は小さめにして行間を広く取る - 英字ラベルは中央に置き、下に短い線を添える - 背景に、極太の欧文を半透明で大きく敷く - FVのキャッチは縦書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。作例写真は不規則なグリッドで並べる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は画面幅いっぱいか、左右に16pxの余白を取って置く - 導入では写真を左右に互い違いにずらして配置する - スペックは「アイコン→名称→見出し→箇条書き→製品写真→作例」の順を繰り返す - 作例ギャラリーは大小の写真を2〜3列のモザイクで隙間なく並べる - インタビューは「引用→動画→プロフィール→横スクロールの作例」の順にする - CTAはページ最後に縦に2つ並べる ## Elevation & Depth - 影はほぼ使わない - 奥行きは、製品写真をグラデーションで地に溶かして表現する - 作例写真の右上に、半透明の暗い丸い＋ボタンを重ねる ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの四角。プロフィール写真のみ正円 - **セクション境界**: 直線で地の色を切り替える。製品写真のグラデーションでつなぐ箇所もある - 機能バッジは白い細線の正円 - アコーディオンは角丸が小さい暗いカード - CTAボタンは全幅のピル型 - アイコンは白い円の中に黒い線画で描く ## Components - **購入CTA**（`button-primary`）: 黄色い全幅のピル型ボタン。左にカートアイコンを置く - **詳細ボタン**（`button-secondary`）: 黒い全幅のピル型ボタン - **機能の丸バッジ**（`feature-circle-badge`）: 白い細線の正円に、項目名と数値を入れる。4つ横に並べる - **機能アイコン**（`spec-icon`）: 白い円の中に黒い線画アイコン。直下に明朝の機能名を置く - **番号付きアコーディオン**（`accordion-card`）: 左上に小さな番号の丸、中央にアイコンと項目名、右端に＋を置く - **矢印テキストリンク**（`text-link-arrow`）: 下線付きの小さな文字に、丸い矢印アイコンを添える - **引用見出し**（`quote-heading`）: 左右に大きな引用符を置き、写真の上に白文字を重ねる - **人物プロフィール**（`profile-block`）: 丸い顔写真の横に、名前・肩書き・SNSアイコン。下に本文を置く - **英字ラベル**（`section-label`）: 中央寄せの小さな英字。下に短い線を添える ## Do's and Don'ts **Do** - 作例写真を大きく、数多く見せる - 地の色は無彩色の3トーンだけで切り替える - 見出しの強調は濃淡の2トーンで行う - 製品写真はモノクロに寄せ、端をぼかす - CTAの黄色は最後だけに使う **Don't** - 鮮やかな色の帯や装飾を使わない - 太い影や立体的なボタンにしない - 文字を詰め込みすぎない - 写真に角丸や枠線を付けない - 黄色を見出しやアイコンに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（情緒的なポートレートで世界観を見せる）: 全幅の人物写真に縦書きの短いコピーを重ね、左下にロゴと製品写真を置く 2. **導入メッセージ**（撮る喜びを詩のように語る）: 黒地に小さな白文字を短い行で並べ、写真を互い違いに配置する。左端に縦書きの英字 3. **製品概要**（主な性能を一目で伝える）: 英字ラベルの下に明朝の見出しを置き、丸バッジを4つ並べる。手に持った製品写真を添える 4. **作例ギャラリー**（画質を写真そのもので証明する）: 大小の写真を隙間なく敷き詰めるモザイク 5. **スペック紹介**（機能ごとに利点を説明する）: グレー地に「アイコン・明朝の機能名・2トーン見出し・箇条書き・溶け込む製品写真・作例」を繰り返す 6. **ユーザーインタビュー**（写真家の声で共感をつくる）: チャコール地に引用見出し、動画サムネ、プロフィール、横スクロールの作例を並べる 7. **技術解説**（規格の優位性を図で説明する）: 白い線画のイラストと、番号付きアコーディオン4項目、サイズ比較の図 8. **エンジン紹介**（処理性能を伝える）: 暗い基板の写真に明朝の見出しを置き、本文と注釈を続ける 9. **CTA**（詳細ページや購入へ誘導する）: 黒いピル型ボタンと黄色いピル型ボタンを縦に並べる ## Imagery - 自然光で撮った、浅い被写界深度の作例写真。空・海・夕暮れ・人物・動物など - 人物は風や逆光を生かした、映画のような情緒的な写真 - 製品はモノクロで質感を強調し、端を白やグレーにぼかす - 図解は白い細線の線画で描く - アイコンはシンプルな線のピクトグラム - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はスマホ幅の1カラムで作られている。PCでは中央の約480〜640px幅に収め、左右を地の色で埋める - PCではギャラリーを3〜4列に増やしてもよい - 丸バッジは、SPでもPCでも4つを横一列に保つ - CTAは、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-c7e69d47`（元 LP の URL から採番） - **元 LP**: https://nij.nikon.com/sp/z5_2/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。