DESIGN.md — チャコール×オレンジの軽商用車アウトドアLP（Dark Charcoal Outdoor Utility Vehicle LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 力強い・インパクト、スポーティ、クール・先進的、情報量多め・訴求型
• キーワード: チャコール地・オレンジ斜め帯・平行四辺形ラベル・寸法図解・アウトドア写真・No.1バッジ
• 地の質感: 細かいノイズ入りのマットな濃灰の地。写真は高彩度で屋外の光が強い
• 形: 平行四辺形・斜めカットが基本。写真の端も斜めに切る。角丸は控えめ
• 温度感: 暗い地にオレンジが映える、やや温かく力強い印象

Colors

• 地はほぼ全面を濃灰にし、価格と安全技術だけ白い面で区切る
• オレンジは見出し帯とバナーに限って使い、本文には使わない
• セクションタイトルは白い平行四辺形に黒文字。白地では黒い平行四辺形に白文字
• ボタンは黒地に白文字と細い矢印線
• 注釈は暗地では灰色の小さい文字にする

Typography

• 見出しは太いゴシックで短く2行に分ける
• 数字は太めのコンデンス欧文で大きく、単位は小さく
• 英字の装飾見出しは極太の大文字
• 注釈は※と番号で本文から分ける
• 説明文は暗地で白、行間は広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。装備写真は2列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション名は中央に置き、平行四辺形ラベルで始める
• キャッチ帯は左端から食い込ませ、写真の上に重ねる
• 大判写真は左右いっぱいか、片側だけ端まで広げる
• 寸法図解は写真に白線と数字を直接載せる
• 装備一覧は写真とキャプションの2列カードにする

Elevation & Depth

• 影はほぼ使わず、面の色差で階層を出す
• バナーに薄い枠線をつける
• 白いカードは角丸の白面だけでフラットにする

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形か、片辺を斜めにカットした台形
• セクション境界: 斜めのカット線と色面の切り替え
• ラベルとボタンは平行四辺形にする
• 写真の角は四角か斜めカット
• 吹き出しはオレンジ枠の四角
• 拡大ボタンだけ小さいピル型にする

Components

• 平行四辺形セクション名（section-label）: 白い斜め四角に黒の太字を中央寄せで載せる
• オレンジ斜め帯キャッチ（catch-band）: 2段に段差をつけた傾きのあるオレンジ帯。写真の左上に重ねる
• 黒の斜めボタン（button-primary）: 平行四辺形の黒地に白文字と右向きの線矢印
• ページ内ナビ（anchor-nav）: 白い小ボタンを4つ横に並べ、下矢印をつける
• No.1丸バッジ（no1-badge）: 黒い円に白文字と月桂樹で、クラス最大を示す
• 寸法図解（dimension-callout）: 写真の上に白線の矢印と大きい数字＋mmを載せる
• 装備写真カード（feature-card）: 写真の右下に拡大ピル、下に白いキャプション
• 価格表示（price-row）: 小さい仕様ラベルと大きい太字の価格、下に税抜の小さい文字
• カラーチップ（color-swatch）: 小さい丸に車体色を入れて横に並べる

Do's and Don'ts

Do - 濃灰の地とオレンジの対比を全体で保つ - 見出しやボタンは斜めの形にそろえる - 数値は大きい数字で目に入るようにする - 屋外で人が使っている写真を必ず入れる - 注釈は灰色の小さい文字で各図の下にまとめる

Don't - パステル色や淡い地でページを組まない - 丸いピル型の主ボタンにしない - オレンジを本文の文字色に使わない - 寸法を別の表だけにして写真から外さない - 影やグラデーションを強くかけない

Page Structure

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

1. ファーストビュー（新しい仕様とライフスタイルを打ち出す）: 山の景色に車と人の全幅写真。左上にロゴ、下端にオレンジの2段キャッチ帯
2. シーン写真帯（使うシーンを広げて見せる）: 横長の写真を5枚、横一列に並べる
3. バナー・ナビ（キャンペーンへの誘導と目次）: バナー2枚を並べ、その下に白いアンカーボタン4つ
4. 価格・グレード（価格と仕様を示す）: 白地。左に車両の切り抜き、右に大きい価格。カラーチップと黒ボタン2つ
5. ボディーカラー（色の展開を見せる）: 暗地に4色の車を横並びにし、色名を下に入れる
6. 室内空間（居住性を訴求する）: 斜め帯キャッチ、大判の室内写真、No.1バッジと寸法図解
7. 装備詳細（便利な機能を説明する）: オレンジの小見出しで2列にし、写真と説明文を置く
8. 荷台スペース（積載性を数値で示す）: 斜め帯キャッチ、寸法線を入れた荷台写真、斜めカットの積載例写真と吹き出し
9. 特別装備（専用パーツを一覧で見せる）: 2列の写真グリッドに拡大ボタンとキャプション
10. 動画（動画への導線）: 方眼の淡灰パネルの中央に再生サムネイル
11. アクセサリー（関連ページへ誘導）: オレンジの斜めストライプバナーに極太の英字と黒ボタン
12. 安全装備（安心感を出す）: 角丸の白カードに青いアイコンをシーン別のグリッドで並べ、黒ボタンで締める

Imagery

• 晴れた山・湖・雪山など、屋外の高彩度な写真
• 若い男性が車を趣味に使う、自然な表情の場面
• 車両は白背景の切り抜きで、斜め前から撮る
• 荷台や室内は広角で撮り、白い寸法線を重ねる
• 安全装備は青白のフラットなピクトアイコン
• 装飾はオレンジと黒の斜めストライプ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは価格ブロックを縦積みにし、車両写真を上に置く
• カラー4色はSPで2×2にする
• アンカーナビはSPで2×2のボタンにする
• 装備グリッドはSPでも2列のまま縮める
• キャッチ帯はSPで画面幅の85%程度にする
• 安全アイコンはSPで3列にする

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