--- version: alpha name: Dark Motorsport Premium Tie-up LP description: 黒地に製品写真を大きく置き、後半をオレンジのグラデーション面に切り替える雑誌タイアップ型LP。ゴシック体の白文字と細いオレンジの線で、高級感とレースらしい熱さを出す。 colors: background: '#000000' dark-section: '#0B0C0E' primary: '#BB5708' accent-1: '#E86A10' secondary: '#4D2300' surface: '#FFFFFF' on-dark: '#FDFBF9' text: '#1E1917' cta: '#FEFEFE' on-cta: '#0B0B0B' background-alt: '#86878C' tint-1: '#6E6D72' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.25em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 32px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-overlay-title: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 560px dark-text-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 520px accent-rule: backgroundColor: '{colors.accent-1}' height: 2px photo-caption: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 280px partner-logo-lockup: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 120px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 52px underline-link: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 32px legal-note: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 60px --- # DESIGN.md — 漆黒×パパイヤオレンジの限定ガジェット記事LP（Dark Motorsport Premium Tie-up LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、上品・高級、スポーティ - **キーワード**: 漆黒・パパイヤオレンジ・編集記事調・モータースポーツ・限定モデル・余白多め - **地の質感**: マットな黒地と、深いオレンジから焦げ茶へのグラデーション。写真は低めの光量で、金属や革の質感を見せる - **形**: 角丸なしの四角。写真を左右どちらかに寄せた非対称配置。細い水平線を見出しのアクセントにする - **温度感**: 暗くて温かい。黒の静けさにオレンジの熱を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | メインの黒地 | 35% | 画素の実測 | | `dark-section` | `#0B0C0E` | 見出し・本文パネルの濃いチャコール | 10% | 画素の実測 | | `primary` | `#BB5708` | ブランドのパパイヤオレンジ（グラデーション面） | 18% | 画素の主要色に補正 | | `accent-1` | `#E86A10` | 見出し下の細いオレンジ線 | 0% | 推定 | | `secondary` | `#4D2300` | グラデーション終端の焦げ茶 | 5% | 画素の実測 | | `surface` | `#FFFFFF` | 画像の説明文エリアの白地 | 9% | 画素の実測 | | `on-dark` | `#FDFBF9` | 暗い地の上の白文字 | 3% | 画素の主要色に補正 | | `text` | `#1E1917` | 白い地の上の説明文 | 1% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | 白ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#0B0B0B` | ボタン上の文字 | 0% | 画素の実測 | | `background-alt` | `#86878C` | サイト共通フッターのグレー | 9% | 画素の実測 | | `tint-1` | `#6E6D72` | 雑誌告知パネルの濃いグレー | 5% | 画素の実測 | - 前半は黒地に統一し、暗い製品写真とつなげて見せる - 後半の製品詳細はオレンジのグラデーション面に切り替え、下に向かって焦げ茶へ落とす - オレンジは面か細い線で使い、文字色には使わない - イベント写真のキャプションだけは白地に黒文字にして、記事の流れに区切りを入れる - CTAは白ベタのボタンに黒文字。暗い地の上で一番目立たせる - 黒地のパネルとグラデーション地では文字をすべて白にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの写真上に置く大見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.5 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 500 | 24px | 1.5 | 0.08em | | `headline-sm` | リード部分の小見出し | ゴシック | Noto Sans JP | 400 | 15px | 1.6 | 0.02em | | `body-lg` | 黒地パネルやグラデーション地の本文 | ゴシック | Zen Kaku Gothic New | 400 | 15px | 2.0 | 0.08em | | `body-md` | 写真の説明文 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.9 | 0.06em | | `note` | クレジット・価格・注意書き | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | パートナー表記などの欧文ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.4 | 0.25em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 500 | 15px | 1.4 | 0.05em | - 見出しは太字にしすぎず中太で、字間を広めに取る - 本文は行間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 ```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-48e4b6ce`（元 LP の URL から採番） - **元 LP**: https://www.pen-online.jp/special/glo-mclaren/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。