DESIGN.md — 橙×オリーブの方眼地 軽トラック車種LP（Industrial Orange and Olive Light Truck LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 力強い・インパクト、信頼・誠実、情報量多め・訴求型
• キーワード: 2モデル比較・斜めカットのボタン・方眼の背景・働く車・仕様の数値
• 地の質感: 白地と#FAFAFAの面を交互に置き、動画セクションだけ薄グレーの方眼パターンを敷く。影はほぼ使わない。
• 形: 平行四辺形のボタンと見出しマーク、角丸の小さい枠ボタン、四角い写真
• 温度感: オレンジの暖色とオリーブの中間色が並ぶ。全体はニュートラルでややクール。

Colors

• 上位モデルにはオレンジ、標準モデルにはオリーブを必ず割り当て、左右の列でずっと同じ色を使う。
• 見出しマークはオレンジとオリーブの平行四辺形を重ねる。
• 主ボタンは黒の斜めカットにする。ブランド色をボタンには使わない。
• セクションの地は白と#FAFAFAを交互にし、動画のセクションだけ方眼のグレー地にする。
• 青と赤は小見出しと数値の強調にだけ、ごく少量使う。
• model-label は文字 #E1E1E1 × 背景 #EE8A12 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#92540A、4.6:1）を使う。

Typography

• 大見出しはとても太いゴシックで黒にし、左に2色のマークを付ける。
• 数値は大きく、単位は小さく並べる。
• 本文は中央揃えで、短い行を3〜4行に収める。
• 注釈は10px前後のグレーで、※を付けて列挙する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。モデル比較は2列で並べるか、上下に積む。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは「見出し→リード→2モデル並列→もっと見るボタン」の順に組む。
• モデルのラベルは各列の上に中央揃えで置く。
• ページ上部に枠線ボタンのナビを並べ、各セクションへ飛べるようにする。
• セクション間の境界には薄い影のような帯を入れる。

Elevation & Depth

• 影は基本的に使わない。面の明るさの差で区切る。
• セクションの境界には、ごく薄いグラデーションの影帯を入れてもよい。
• 動画サムネイルには白枠を付け、浮いたように見せる。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま切り抜く。車両は白抜きにする。
• セクション境界: 直線の切り替え（下に薄い影帯）
• 主ボタンは左右を斜めに切った平行四辺形にし、右端に矢印を付ける。
• グレード切り替えのボタンだけピル型にする。
• 燃費の比較枠は角丸10pxの細線で囲む。
• 締めのバナーには斜めのオレンジ帯を入れる。

Components

• 斜めカットのボタン（button-primary）: 黒い平行四辺形で、白い文字と右矢印を入れる。
• 2色マーク付きの大見出し（heading-mark）: オレンジとオリーブの平行四辺形を重ねたマークの横に、極太の見出しを置く。
• モデルのラベル（model-label）: モデル色で塗った横長の札に、白い車アイコンと名前を入れる。
• セクション内リンクのタブ（nav-tab）: 白地に黒の細い枠を付けた小さなボタン。下に三角を添える。
• グレード切り替え（grade-pill）: 選択中は黒地に白文字、選択していないものは白地に枠線のピル型。
• 罫線付きの小見出し（line-heading）: 左に太字の小見出しを置き、右へ黒い細線を伸ばす。
• 価格の行（price-row）: 左に駆動方式を小さく、右に大きな数字で価格を置き、末尾に小さく「円」を付ける。
• 燃費の比較枠（spec-box）: 角丸の細線枠の中に、2モデルの数値を左右に並べる。
• 機能名の見出し（feature-tag）: 左に2色の縦線を引き、太字の機能名を置く。下に写真を付ける。

Do's and Don'ts

Do - 2モデルは必ず左右（SPでは上下）に同じ構成で並べて比較させる。 - 各セクションの最後に黒い斜めボタンを中央に置く。 - 数値は大きく太く見せ、注釈で根拠を添える。 - 働く場面と遊ぶ場面の写真を混ぜる。

Don't - 2モデルの色を入れ替えたり、別の色に変えたりしない。 - ボタンを丸いピル型やグラデーションにしない。 - 装飾的な曲線や手書き風の書体を使わない。 - 強い影や立体的な効果を多用しない。

Page Structure

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

1. ファーストビュー（2モデルの存在感と利用シーンを伝える）: 青空と緑を背景に車を2台並べる。左右に働く人の写真をコラージュする。
2. 導入文とバナー（シリーズ全体の価値を伝え、特別仕様やキャンペーンへ誘導する）: 中央揃えの短い文を4行置き、その下にバナーを2〜3枚並べる。
3. ページ内ナビ（各セクションへジャンプさせる）: 枠線ボタンを4列×2段で並べる。
4. 動画（CMやタイアップ動画で興味を深める）: 方眼地に、罫線付きの小見出しと再生ボタン付きのサムネイルを3列で並べる。
5. 価格・グレード（グレード・色・価格を比較させる）: モデルのラベル、グレードのピル、車両の切り抜き、カラーの丸、価格の行、黒いボタン2つの順に置く。
6. デザイン（外観の魅力を見せる）: 2列の写真グリッドにし、最後にもっと見るボタンを置く。
7. 積載性（荷台の寸法と使い勝手を数値で示す）: 作業中の写真と寸法図を2列に並べ、赤い数値と注釈を添える。
8. 室内空間（居住性と収納を伝える）: 運転席の写真を2列で並べ、下に収納の写真をモザイク状に組む。
9. 走行・環境性能（悪路での走りと燃費を訴求する）: 大きな写真、機能写真3列、燃費の比較枠の順に置く。
10. 安全装備（安心感を伝える）: 左に青い見出しとボタン、右に横断歩道のシーンのイラストと車両を置く。
11. アクセサリー（関連ページへ送客する）: オレンジの斜め帯に車両を載せ、大きな欧文の見出しを入れたバナーにする。

Imagery

• 車両は真横から斜め前の角度で撮り、白抜きで切り抜く。
• 利用シーンは畑・山道・現場などの屋外で、自然光の明るい写真にする。
• 人物は作業着やアウトドアの服装で、笑顔の人を選ぶ。
• 寸法図は白い車体に引き出し線と赤い数値を重ねる。
• 動画のサムネイルには赤い丸の再生ボタンを中央に置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは幅約680pxの中央寄せで、2モデルを左右2列に並べる。
• SPでも比較の画像は2列を保ち、本文と価格は上下に積む。
• 動画のサムネイルはPCの3列からSPでは1〜2列にする。
• ナビはSPで2列×4段にする。
• 安全装備セクションのPCの左右配置は、SPでは上下に積む。

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