DESIGN.md — くすみパステルと花の女性向け軽自動車 LP（Pastel Floral Feminine Compact Car LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、ナチュラル
• キーワード: くすみパステル・生成り・水彩の花・欧文セリフ見出し・手書き添え文字・カタログ感
• 地の質感: 生成りの紙のような地に、水彩風の花の装飾と手書き風の注釈を重ねている。フラットな面で、影はごく弱い。
• 形: 角丸カード、片側だけ大きく丸めたパネル、少し傾けた写真、ピル型の小さなボタン。
• 温度感: 暖かめ。ピンクとベージュに、ブルーとグリーンで涼しさを加えている。

Colors

• 地は生成りにし、セクションごとにパステルの面を切り替える。
• 比較セクションは左をピンク、右をブルーの面で塗り分ける。
• ボタンは、置かれたセクションの色を濃くしたものにそろえる。
• 文字は純黒を使わず、墨色とグレーにする。
• 原色や彩度の高い色は使わない。緑と青のボタンだけは例外。
• button-primary は文字 #FDFBF6 × 背景 #CC8C8C のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B45757、4.57:1）を使う。
• grade-tabs は文字 #FDFBF6 × 背景 #CC8C8C のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B45757、4.57:1）を使う。

Typography

• 見出しは「和文リード → 細い欧文の大見出し → 小さな和文ラベル」の 3 段で、中央にそろえる。
• 欧文の大見出しはコンデンスドの細いセリフ体にする。
• 本文は小さめにし、行間を広く取る。
• 手書き風の文字は写真の脇に少し傾けて置く。
• 太字はほとんど使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は 2 列、動画サムネイルは 2 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは中央の大見出しから始める。
• 生成りのパネルを色面の上に浮かべ、外側に色面を見せる。
• 比較は左右に並べる。SP では縦に積む。
• 各セクションの末尾に小さなピル型ボタンを 1 つ置く。
• 余白は多めに取り、花の装飾を余白に配置する。

Elevation & Depth

• カードは影なしか、ごく薄い影にする。
• スライダーのカードにだけ柔らかい影を付ける。
• 写真には白い縁を付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形にする。一部は傾けて白縁を付ける。
• セクション境界: 色面を直線で切り替える。パネルの片方の角だけ大きく丸める。
• 比較パネルは外側の上角と下角を大きく丸める。
• ボタンは細身のピル型にし、右端に矢印を付ける。
• インテリア写真は少し回転させて重ねる。

Components

• ピル型ボタン（button-primary）: 細身の濃色ピルで、右に「>」を付ける。
• 枠線ボタン（button-outline）: 白地にグレーの枠を付けたサブ動線のピル。
• 3 段見出し（section-title）: 和文リード、欧文セリフの大見出し、和訳ラベルを中央に縦に積む。
• 比較パネル（compare-panel）: 左ピンク・右ブルーで、角を大きく丸めたパネル。中に車、写真、手書きコメントを入れる。
• スタイルカード（style-card）: 写真地の上にスタイル名と小さな部品写真を載せた角丸カード。2 列を互い違いに配置する。
• 動画サムネイル（video-thumb）: 中央に白い丸の再生アイコンを置き、上に斜線で挟んだ短いキャプションを付ける。
• グレードタブ（grade-tabs）: 小さな矩形のタブ。選択中は塗り、他は枠線のみ。
• カラーチップ（color-swatch）: ボディカラーを丸いチップで並べる。

Do's and Don'ts

Do - 見出しは必ず欧文セリフと和訳ラベルの組み合わせにする。 - 色面はくすみパステルに限る。 - 余白に水彩の花を淡く散らす。 - 写真に手書き風のコメントを添える。 - ボタンは小さく控えめなピル型にする。

Don't - 原色の大きなボタンや赤い煽り表現を使わない。 - 太いゴシックで大きな見出しを作らない。 - 純黒の文字や純白の地を広く使わない。 - 強い影やグラデーションの装飾を付けない。 - 情報を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（商品と世界観を一目で伝える）: グレー地のスタジオ写真に車と人物を置き、下端を花で縁取る。
2. タイアップ企画（話題性を出してキャンペーンへ誘導する）: ピンクの枠に生成りのパネルを置く。動画カードのスライダーとピル型 CTA を入れる。
3. スペシャルムービー（動画で魅力を伝える）: ベージュの枠に生成りのパネルを置く。横長サムネを 3 枚、縦長を 4 枚並べる。
4. サービスバナー（付帯サービスを告知する）: 白いバナーに 2 色のボタンを 2 つ並べる。
5. 価格・グレード（価格を比較させる）: 左ピンク・右ブルーの 2 列。タブ、価格、カラーチップ、ボタン 2 つを入れる。
6. デザイン比較（2 タイプの違いを見せる）: 角丸の色パネルを 2 枚並べ、写真と手書きコメントを入れる。
7. アクセサリー（カスタムスタイルを提案する）: スタイルカード 4 枚を 2 列で互い違いに配置する。
8. 便利な機能（機能を短い言葉で伝える）: キャプション付きの動画サムネイルを 3 列 2 段で並べる。
9. 室内空間（内装の質感を伝える）: からし色の帯に傾けた大きな写真を重ね、下に 3 つの特徴を角丸写真で並べる。
10. 環境性能（経済性を伝える）: セージグリーンの地に、角丸の大きな写真と白いテキストカードを置く。
11. 安全装備（安心感を伝える）: 水色の地に、切り抜いた車と人物、横断歩道のイラストを組み合わせる。

Imagery

• 写真は明るく柔らかい自然光で、彩度を少し抑える。
• 人物は 20〜30 代の女性。ナチュラルな服装で自然な笑顔にする。
• 装飾は水彩風の花（バラ、アジサイ、ラベンダー）を半透明で余白の隅に置く。
• 車はスタジオの白背景で正面から撮るか、切り抜きにする。
• 写真の脇に手書き風の矢印やコメントを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せのパネル（約 85% 幅）で、外側に色面を見せる。SP ではパネルを幅いっぱいにする。
• 比較 2 列は SP で縦積みにするか、タブで切り替える。
• PC の 3 列サムネは SP で 2 列か横スクロールにする。
• 欧文の大見出しは PC 約 56px、SP 約 40px。
• 花の装飾は 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 行書くと起動時に読み込まれる。