--- version: alpha name: Neon Lime Electric Sports Car LP description: 蛍光ライムの地に黒の太字と黒い角張ったボタンを合わせた、強いコントラストの自動車LPです。中盤は黒地とダークグレー地に切り替え、性能・機能を夜の雰囲気で見せます。英字の白抜き見出し、全幅の車両写真、スライダー、スペック表で構成します。 colors: primary: '#DAEE34' background: '#DAEE34' cta: '#010001' on-cta: '#FCFEFC' text: '#010101' dark-section: '#000000' on-dark: '#F8F9F7' background-alt: '#343434' secondary: '#82911C' line: '#4D4B37' surface: '#1D1D1B' accent-1: '#55A4CD' marker: '#E0201C' typography: display: fontFamily: Archivo Black fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Archivo Black fontSize: 26px fontWeight: 900 lineHeight: 1.15 headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px 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}' height: 46px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px heading-outline-en: textColor: '{colors.text}' typography: '{typography.display}' height: 40px price-block: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 160px badge-limited: textColor: '{colors.text}' typography: '{typography.note}' height: 24px bordered-card: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 260px banner-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 210px slider-indicator: backgroundColor: '{colors.on-dark}' height: 5px stat-number: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 90px tab-spec: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px --- # DESIGN.md — ネオンライム×黒のEVスポーツカーLP（Neon Lime Electric Sports Car LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 力強い・インパクト、スポーティ、クール・先進的、ポップ・元気 - **キーワード**: 蛍光ライム・黒の高コントラスト・白抜き英字見出し・角ばったボタン・全幅写真・夜の都市 - **地の質感**: フラットな単色ベタ面。グラデーションや影は使わず、写真の光沢感で質感を出す - **形**: 角丸なしの矩形。ボタン・枠・表はすべて直角 - **温度感**: 高彩度で刺激的。ライムは熱量、黒は冷たさと緊張感を担う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DAEE34` | ブランドの蛍光ライム地 | 45% | 画素の実測 | | `background` | `#DAEE34` | メインの背景（ライム） | | 画素の実測 | | `cta` | `#010001` | 黒ベタのボタン | 2% | 画素の実測 | | `on-cta` | `#FCFEFC` | 黒ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#010101` | ライム地上の見出し・本文 | 3% | 画素の実測 | | `dark-section` | `#000000` | 性能・機能セクションの黒地 | 17% | 画素の実測 | | `on-dark` | `#F8F9F7` | 黒地上の白文字 | 1% | 画素の実測 | | `background-alt` | `#343434` | 動画・ギャラリーのダークグレー地 | 6% | 画素の実測 | | `secondary` | `#82911C` | 非選択タブのオリーブ | 0% | 画素の実測 | | `line` | `#4D4B37` | スペック表・枠線 | 0% | 画素の主要色に補正 | | `surface` | `#1D1D1B` | ヘッダー帯 | 0% | 画素の実測 | | `accent-1` | `#55A4CD` | スライダーの現在位置インジケータ | 0% | 画素の実測 | | `marker` | `#E0201C` | 注記内の強調リンク | 0% | 推定 | - 地色はライム→黒→ダークグレー→ライムの順に大きな帯で切り替える - ライム地では文字・ボタン・枠をすべて黒にし、中間色は使わない - 黒地の文字は白。見出しは白抜き英字にする - 黒地ではスライダーの現在位置にライムを差し色として使う - 非選択タブにはライムを暗くしたオリーブ色を使う - 赤は注記の強調だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字見出し（白抜き） | 欧文サンセリフ | Archivo Black | 900 | 30px | 1.1 | 0.02em | | `headline-lg` | グレード名・価格の数字 | 欧文サンセリフ | Archivo Black | 900 | 26px | 1.15 | 0.0em | | `headline-md` | 日本語のキャッチ見出し | ゴシック | Noto Sans JP | 900 | 21px | 1.4 | 0.02em | | `headline-sm` | カード・スライドの小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `body-lg` | 中央揃えのリード文 | ゴシック | Noto Sans JP | 700 | 14px | 2.1 | 0.02em | | `body-md` | 左揃えの説明本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.0 | 0.02em | | `note` | ※注記・免責 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.0em | | `label-button` | 黒ボタンのラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.03em | - セクション見出しは英大文字。ライム地・黒地とも白抜き（中を地色、輪郭を黒または白）にする - 価格や性能値は極太の欧文数字で大きく、単位は小さく添える - リード文は太字・中央揃えで、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 ```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-4154054a`（元 LP の URL から採番） - **元 LP**: https://www.abarth.jp/500e/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。