DESIGN.md — 黒×グレーの写真主役カメラ製品LP（Cinematic Monochrome Camera Product LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル、ラグジュアリー・ダーク
• キーワード: 写真が主役・モノクロ基調・映画のような雰囲気・余白・細い線・明朝の見出し
• 地の質感: マットでフラット。製品写真は端を白やグレーにぼかしてグラデーションで地になじませる
• 形: 四角い写真が基本。細線の正円バッジと、角丸が小さいアコーディオンを使う
• 温度感: クール寄りのニュートラル。作例写真の夕焼けや青空で温かみを足す

Colors

• 地の色は黒→明るいグレー→チャコールの順に、章ごとに切り替える
• 色を担うのは写真だけ。UIは無彩色で作る
• 黄色は最後の購入ボタンだけに使い、ほかでは使わない
• 見出しは強調する語を濃く、残りの語をグレーにして2トーンで組む
• 暗い地の上の文字と線画は白か淡いグレーにする
• 製品写真の端は地の色へグラデーションで溶かす

Typography

• 大見出しは明朝の細めのウェイトで大きく置く
• 日本語の見出しは太いゴシックで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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。