DESIGN.md — 漆黒×パパイヤオレンジの限定ガジェット記事LP（Dark Motorsport Premium Tie-up LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、上品・高級、スポーティ
• キーワード: 漆黒・パパイヤオレンジ・編集記事調・モータースポーツ・限定モデル・余白多め
• 地の質感: マットな黒地と、深いオレンジから焦げ茶へのグラデーション。写真は低めの光量で、金属や革の質感を見せる
• 形: 角丸なしの四角。写真を左右どちらかに寄せた非対称配置。細い水平線を見出しのアクセントにする
• 温度感: 暗くて温かい。黒の静けさにオレンジの熱を差す

Colors

• 前半は黒地に統一し、暗い製品写真とつなげて見せる
• 後半の製品詳細はオレンジのグラデーション面に切り替え、下に向かって焦げ茶へ落とす
• オレンジは面か細い線で使い、文字色には使わない
• イベント写真のキャプションだけは白地に黒文字にして、記事の流れに区切りを入れる
• CTAは白ベタのボタンに黒文字。暗い地の上で一番目立たせる
• 黒地のパネルとグラデーション地では文字をすべて白にする

Typography

• 見出しは太字にしすぎず中太で、字間を広めに取る
• 本文は行間2.0と広めの字間で、記事として読みやすくする
• 見出しは2〜4行に改行し、左揃えにする
• 欧文ラベルは大文字にして字間を大きく取る
• 強調は色ではなく、余白と文字サイズで行う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か片側に寄せた約80%幅
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 72px、基本単位 8px、カード内 32px（375px 幅換算）
• 写真と説明文のセットを左寄せ・右寄せと交互に並べる
• 黒パネルは画面の片側に寄せ、反対側を少し空けて非対称にする
• 見出しの下に、画面の端から伸びる細いオレンジ線を引く
• 本文の左右余白は約40pxで統一する
• セクションの間は60〜90pxと大きく空ける

Elevation & Depth

• 影はほぼ使わず、面の色の差で階層を作る
• 写真は暗いトーンにして、背景に溶け込ませる
• 雑誌の表紙画像だけ、薄い影で浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形で横長3:2前後。全幅、または片側に寄せて裁ち落とす
• セクション境界: 直線で区切る。背景色の切り替えとグラデーションでつなぐ
• 角丸は使わない
• SNSアイコンだけは丸にする
• 線は1〜2pxの細い直線にする

Components

• 写真上の大見出し（hero-overlay-title）: 暗い製品写真の下部に、白い太字の見出しを4行で重ねる
• 黒地の見出しパネル（dark-text-panel）: 濃いチャコールのパネルに見出しとオレンジ線、本文を入れ、写真に少し重ねる
• オレンジの細い線（accent-rule）: 見出しの下に置く2pxの水平線。画面の端まで伸ばす
• 写真と説明文のセット（photo-caption）: 写真の下に、小さな説明文を2〜3行で添える
• 2つのロゴを並べる表記（partner-logo-lockup）: 2つのロゴを縦線で区切って並べ、下に字間の広い欧文ラベルを置く
• 白い角型のCTAボタン（button-primary）: 白ベタで角丸なし、黒文字のボタン。グラデーション地の上で幅いっぱいに置く
• 下線つきのテキストリンク（underline-link）: 黒地の上の白文字と矢印に、細い白の下線を引く
• 年齢制限の注記（legal-note）: CTAの下に置く米印つきの注意書き。白文字

Do's and Don'ts

Do - 黒とオレンジの2色を主にし、ほかの色を増やさない - 製品写真は暗い背景にスポットライトを当てた写真を使う - 写真と説明文のセットを左右交互にずらして、リズムを作る - 見出しの下にはオレンジの細い線を入れる - CTAは白ベタの角型ボタンをひとつだけにする

Don't - 角丸ボタンやポップなバッジを使わない - オレンジを文字色にして読みにくくしない - 明るい背景色を多用して、暗い世界観を崩さない - 価格や割引を大きく打ち出す、売り込み型の装飾をしない - 影や立体的な効果を多用しない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（限定モデルの世界観を一目で伝える）: 暗い製品写真を全幅に置き、白い大見出しを下に重ねる。右上に小さなPR表記を置く
2. リード（商品の概要・価格・クレジットを示す）: 黒地に小見出し、短い本文、小さなクレジットを並べる
3. パートナー表記と導入文（コラボの背景を説明する）: 2つのロゴを並べた表記の後に、大きめの本文を置く
4. 理念の紹介（ブランドの思想を語る）: 光の輪を使ったキービジュアルの下に、黒パネルで見出し・オレンジ線・本文2段落を置く
5. イベントレポート（体験の様子で臨場感を出す）: 白地に写真と説明文のセットをずらして3つ並べる
6. 製品の登場（限定セットを紹介する）: 黒地にパッケージの写真を置き、下に半透明の黒パネルで見出しと本文を入れる
7. ディテール紹介（素材や意匠を一つずつ説明する）: オレンジのグラデーション地に、写真と説明文のセットを左右交互に4つ並べる
8. まとめとCTA（公式サイトへ誘導する）: 本文の後に白い角型ボタンを置き、その下に年齢制限の注記を入れる
9. フッター（関連リンクとSNSを示す）: 黒地に下線つきのリンク、丸いSNSアイコン、媒体ロゴを置き、その下にグレーのサイト共通フッターを続ける

Imagery

• 製品は黒背景で、横からの硬い光で金属や革の質感を出す
• 真鍮や銅の立方体・球などの小道具を添え、静物画のように撮る
• オレンジの差し色が写真の中にも入るように選ぶ
• レース関連は暗い背景に光の輪や発光を入れた、ドラマチックなビジュアルにする
• イベント写真は暗い会場にオレンジ照明を当てた、ドキュメンタリー調にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューの見出しを左下、リードを右下に分けて置く
• PCではパートナー表記と導入文を左右2カラムに並べる
• PCでは黒パネルを左に、キービジュアルを右に重ねて配置する
• PCのイベント写真は大小の写真をずらして重ねるコラージュにする
• PCのディテール写真は画面幅の約55%にし、左右交互に寄せる
• CTAとまとめ本文は、PCでは中央の約45%幅に収める

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 行書くと起動時に読み込まれる。