DESIGN.md — くすみグレー×白の車用小物EC LP（Muted Slate Car Accessory Product LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: シンプル・ミニマル、情報量多め・訴求型、親しみ・手作り感
• キーワード: 写真主体・くすみグレー・太ゴシック大見出し・手書き吹き出し・英字サブ見出し・EC商品画像
• 地の質感: 白地のフラットな面。写真の上に半透明の白やグレーの帯を重ねる
• 形: 斜めカットの帯、円形バッジ、角が欠けた多角形の吹き出し、星型のステップ番号
• 温度感: ややクールな中間色。ピンクやオレンジは差し色に留める

Colors

• 地は白で統一し、色は写真に任せる
• 見出しの帯やバッジはスレートグレー1色で揃える
• 強調語だけを赤オレンジにし、多用しない
• 青緑は英字や大見出しの縁取りに使う
• ピンク・オレンジは手書き装飾の差し色にとどめる
• 表は濃いグレーのラベルと淡いグレーの値セルで組む
• step-star は文字 #F6FFFF × 背景 #A9CFC9 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#477F76、4.53:1）を使う。
• point-badge は文字 #F6FFFF × 背景 #5E8A88 のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#557C7B、4.54:1）を使う。

Typography

• 大見出しは極太で、写真に重ねて大きく置く
• 日本語見出しの下か横に英字サブ見出しを添える
• 問いかけのコピーは縦書きか吹き出しにする
• 本文は太めのゴシックで短く2〜3行にまとめる
• 数字は特大にし、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅、補足写真は 2〜4 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションごとに全幅の写真から始める
• テキストは写真の余白や下端に重ねる
• 使用例は小さな写真を4列で並べる
• 手順は写真2枚＋全幅1枚の3ステップ
• スペック表は図の下に4行で置く

Elevation & Depth

• 影はほぼ使わない
• 写真を重ねるときは白フチで区別する
• 切り抜いた商品写真は軽い落ち影を付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の全幅写真と、背景を抜いた商品の切り抜き
• セクション境界: 直線。斜めカットの帯や半透明の帯で区切る
• 見出し帯の右端は斜めにカットする
• 強度などの数値は円形バッジに入れる
• 吹き出しは角が欠けた多角形か楕円
• ステップ番号は星形

Components

• 斜めカット見出し帯（label-band）: 濃いグレーの帯に白文字。右端を斜めに切る
• 数値円バッジ（badge-circle）: 大きなグレーの円に白い特大数字と短いコピー
• 手書き吹き出し（speech-bubble）: 白地に細い黒線の多角形や楕円。手書き風の文字と小さなイラスト
• 星形ステップ番号（step-star）: ミントの星に白数字。写真の左上に重ねる
• スペック表（spec-table）: 濃いグレーのラベルセルと淡いグレーの値セルで4行
• 三角マーカー列（arrow-markers）: オレンジと黄の逆三角を縦に並べて視線を下へ誘導
• POINTバッジ（point-badge）: ミントの円に電球アイコンと英字
• カラー展開（color-swatch）: 商品の切り抜き3色を横に並べ、英字の色名を添える

Do's and Don'ts

Do - 写真を主役にし、余白は白で残す - 大見出しは1セクション1つに絞って極太にする - 英字サブ見出しで見出しを2段構成にする - 強調の色は1セクションに1色まで - 手書き風の装飾で親しみを足す

Don't - ビビッドな地色を広く敷かない - 角丸の大きいカードUIにしない - 長い本文を続けない - 装飾フォントを本文に使わない - 強調の赤を見出し全体に使わない

Page Structure

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

1. ファーストビュー（商品と取り付け場所を一目で伝える）: 使用シーンを全幅写真で見せる。手書きのキャッチ、帯見出し、特大の商品名、3色の切り抜き
2. 悩みの提起（車内の困りごとに共感させる）: 縦書きの問いかけを楕円の吹き出しに入れ、写真の下端に短い本文
3. 商品紹介（使い方の簡単さを伝える）: 商品の切り抜きを大きく置き、多角形の吹き出しと特大見出し、斜めの帯
4. 強度の訴求（耐荷重の安心感）: 全幅写真に円バッジで数値、左に英字見出し
5. 使用例（掛けられる物の幅広さ）: 写真に手書きの帯、下に4列の小さな写真。縦書きコピーと赤の強調
6. 機能の訴求（回転・収納の便利さ）: 特大の数字見出し、青緑の大きな文字、三角マーカー、縦書きコピー
7. 素材のポイント（シートを傷めない安心感）: POINTバッジと極太見出し、拡大写真、素材の切り抜き
8. 取り付け方法（手順を示す）: 星形の番号を付けた3つの手順写真
9. サイズ・仕様（寸法を示す）: 商品画像に寸法の矢印、帯見出し、4行のスペック表
10. カラー展開・同梱（色を選ばせ、届く状態を示す）: 特大の数字と英字、3色の並び、箱の写真とCHECKの旗の吹き出し

Imagery

• 車内の実際の使用シーンを明るく撮る
• 商品は背景を抜いた切り抜きで大きく見せる
• ベージュ・黒・茶など落ち着いた色の小物と合わせる
• 手書きの線、キラキラ、指差しなど簡単なイラストを添える
• クラフトの箱で届く状態を撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、本文は中央の幅480〜640pxに収める
• 全幅写真は中央カラムの幅に合わせ、左右は白地にする
• 4列の写真はPCでも4列のまま広げる
• 特大見出しはPCで1.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 行書くと起動時に読み込まれる。