DESIGN.md — ネオンライム×黒のEVスポーツカーLP（Neon Lime Electric Sports Car LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 力強い・インパクト、スポーティ、クール・先進的、ポップ・元気
• キーワード: 蛍光ライム・黒の高コントラスト・白抜き英字見出し・角ばったボタン・全幅写真・夜の都市
• 地の質感: フラットな単色ベタ面。グラデーションや影は使わず、写真の光沢感で質感を出す
• 形: 角丸なしの矩形。ボタン・枠・表はすべて直角
• 温度感: 高彩度で刺激的。ライムは熱量、黒は冷たさと緊張感を担う

Colors

• 地色はライム→黒→ダークグレー→ライムの順に大きな帯で切り替える
• ライム地では文字・ボタン・枠をすべて黒にし、中間色は使わない
• 黒地の文字は白。見出しは白抜き英字にする
• 黒地ではスライダーの現在位置にライムを差し色として使う
• 非選択タブにはライムを暗くしたオリーブ色を使う
• 赤は注記の強調だけに使う

Typography

• セクション見出しは英大文字。ライム地・黒地とも白抜き（中を地色、輪郭を黒または白）にする
• 価格や性能値は極太の欧文数字で大きく、単位は小さく添える
• リード文は太字・中央揃えで、1〜2文節ごとに改行する
• 説明本文は左揃えで、行間を2.0前後と広くとる
• 日本語はすべてゴシック。明朝・丸ゴシックは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ギャラリーは 2 カラム、機能アイコンは横スクロール）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの区切りには、全幅の車両写真を高さ約180pxで挟む
• 各セクションは英字見出し→中央リード→画像→小見出し→本文→ボタンの順に並べる
• ボタンは左右余白約20pxで、ほぼ全幅にする
• スライダーは中央の1枚を大きく出し、左右の隣を少し見せる
• スペック表は画面幅いっぱいで、2〜3列の罫線表にする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは地色の切り替えと写真のコントラストで出す
• カードは影ではなく黒の1px枠で区切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。全幅または余白付きの横長で切る
• セクション境界: 直線で地色を切り替え、境目に全幅写真を挟む
• 角丸は一切使わない
• 機能アイコンだけは黒線の正円枠にする
• ボタン右端に▶記号を置く
• スライダーのインジケータは短い横棒にする

Components

• 黒ベタボタン（button-primary）: 黒い矩形に白太字、右端に▶。詳細・ストーリーへの誘導に使う
• 黒枠ボタン（button-outline）: ライム地に黒の2px枠、英字ラベルと右端アイコン。サウンド再生などの副操作に使う
• 白抜き英字見出し（heading-outline-en）: 極太英字のアウトラインをセクション冒頭の中央に置く
• 価格ブロック（price-block）: グレード名（英字極太）、ボディ名、小さいラベル、大きな数字価格＋円
• 限定バッジ（badge-limited）: 黒1px枠の小さな矩形タグ
• 枠付き案内カード（bordered-card）: 黒1px枠の中に中央揃えの告知文と黒ボタンを入れる
• 黒地バナー（banner-dark）: 上半分に車両写真、下半分は黒地にライム文字とライムの小ボタン
• 横棒インジケータ（slider-indicator）: 白い短い横棒を並べ、現在位置だけ色を変える
• 性能数値（stat-number）: 黒地に英字ラベルと巨大な白数字、単位を小さく添える
• スペックタブと表（tab-spec）: 選択中は黒地に下向き三角、非選択はオリーブ。表見出しは黒帯に白文字

Do's and Don'ts

Do - ライム地と黒地の大きな切り替えでリズムを作る - 見出しは英字の白抜き、本文は太字ゴシックで統一する - ボタンとカードは直角の黒で、強く締める - 数字は極太欧文で大きく見せる - 写真は全幅で大胆に使い、テキスト帯と交互に並べる

Don't - 角丸・ピル型・影を使わない - パステルや中間色のグラデーションを入れない - ライム地で灰色の文字を使わない - 明朝体や手書き書体を混ぜない - 装飾イラストやアイコンを多用しない（機能アイコンは線画の円形のみ）

Page Structure

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

1. ファーストビュー（夜景の中の車両で世界観を見せる）: 黒ヘッダー＋全幅の夜景写真。左上に白の英字車名を置く
2. コンセプト導入（製品の思想を伝える）: ライム地に黒のシンボルロゴ、太字見出し、中央揃えの短い改行リード
3. 価格・グレード（価格をすぐ示す）: 英字極太のグレード名と大きな価格数字。限定バッジと黒ボタン、黒地バナー、枠付きカードを続ける
4. 特長1（サウンド）（体験価値を訴求する）: 全幅写真→白抜き英字見出し→写真→小見出し・本文→黒枠ボタン→黒ボタン
5. 特長2（外装・内装）（デザイン性を見せる）: 英字見出し＋左右の隣が見えるスライダー＋横棒インジケータ
6. 安全機能（安心感を補う）: 円形線画アイコンと見出し・説明を横スクロールで並べ、注記を添える
7. 性能（走行性能を数値で示す）: 黒地に白抜き英字見出し、写真、本文、巨大な白数値
8. 機能・ナビ（装備の利便性を伝える）: 黒地のスライダー。インジケータにライムを差す
9. 動画・ギャラリー（ビジュアルをまとめて見せる）: ダークグレー地に再生ボタン付き動画と2列の写真グリッド
10. ラインナップ（価格の再提示）: ライム地に黒の極太英字見出しと価格ブロックを右揃えで並べる
11. スペック表（詳細仕様を示す）: 3つのタブ＋黒見出し帯付きの罫線表、細かい注記
12. 最終CTA（販売店検索・プランへ誘導する）: 全幅の黒ボタンと黒地バナー

Imagery

• 蛍光色の車体を夜の都市やネオンのトンネルで撮り、高コントラストに仕上げる
• 流し撮りで疾走感を出した走行写真を全幅で使う
• 内装はダークトーンのクローズアップにする
• エンブレムやディテールを寄りで撮ったカットを入れる
• アイコンは黒の太線で描いた正円の線画にする
• 光の帯のような抽象グラフィックを差し込む
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約60%に絞り、中央に寄せる
• PCの特長セクションは画像左・テキスト右の2カラムにする
• PCのスライダーは中央の大画像と小さなサムネイル列に、矢印ボタンを付ける
• PCの安全機能は3列グリッド、性能数値は横3列に並べる
• PCのボタンは幅約260pxの小さめ中央配置にする
• PCのラインナップは2グレードを横に並べる

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