DESIGN.md — 霜色グレー×墨黒×黄の自動車タイヤ LP（Frosty Monochrome Automotive Tire LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル、清潔・爽やか
• キーワード: 霜色グレー・墨黒の帯見出し・黄色アクセント・欧文コンデンス・運転シーン写真・比較データ
• 地の質感: 白〜青みグレーの地に、うっすら紙のようなノイズと大きなぼかし円を重ねた冬の空気感
• 形: 角丸ほぼなしの矩形。黒い帯ラベル、ピル型の小バッジ、薄影の白カード
• 温度感: やや寒色寄り。人物写真の暖かさで冷たさを和らげる

Colors

• 地は白と霜色グレーを交互に使い、セクションを区切る
• 見出しラベル・主ボタンは墨黒の面に白文字
• 黄色は写真上の見出し下線、自社品ラベル、再生ボタンなど自社の強調だけに使う
• 赤は性能チャートの自社線と口コミ中の強調文に限定
• 暗いセクションは動画やマーク紹介など1〜2箇所に絞る
• グレー地には大きなぼかし円と白い巨大欧文を淡く重ねる
• compare-strip は文字 #FDF202 × 背景 #8A8A8A のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6B6B6B、4.54:1）を使う。

Typography

• 和文はすべて太めのゴシック。明朝は体験記事の導線カードだけに使う
• 欧文は縦長のコンデンス書体で、背景に画面からはみ出すほど大きく敷く
• 見出しは左揃え。FVコピーだけ字間を広く取って堂々と見せる
• 比較値の数字はコンデンス太字で大きく、自社の数字だけ黄色
• 本文は行間1.8で読みやすく取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビとリンクのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右余白16pxで、写真やカードは本文幅いっぱいに置く
• ポイントごとに巨大番号→黒帯見出し→説明文→写真カード複数の順で並べる
• 性能比較は横長の写真帯を縦に積み、右端にグレーの数値ボックスを置く
• 口コミは横スクロールのカルーセルで見せる
• セクション上下に64〜80pxの余白

Elevation & Depth

• 白カードには薄い影（0 2px 6px rgba(0,0,0,.12)）
• FAQとアコーディオンは白地に薄影で、グレー地から浮かせる
• ボタンにもごく弱い影を付ける
• 写真には影を付けず、フラットに置く

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸のない横長の矩形。写真の下部を暗くするグラデーションを敷き、キャプションを重ねる
• セクション境界: 直線で切り替える。グレー地には大きなぼかし円を半分見せる
• 主ボタンは角丸2〜4pxの矩形
• 番号付き性能バッジだけピル型の黒地
• マーク紹介カードは角丸10px程度
• アイコンは円形の淡グレー地に収める

Components

• 黒帯見出し（band-heading）: 墨黒の矩形帯に白い太字のゴシック。巨大欧文番号の下に少し重ねて配置する
• 巨大欧文ポイント番号（giant-number）: 白の半透明で描く、画面幅いっぱいのコンデンス欧文と番号
• 写真キャプションカード（photo-caption-card）: 横長の写真の左下に白太字のキャプションを置き、その下に黄色の下線を引く
• 主CTAボタン（button-primary）: 全幅の墨黒の矩形に白太字。上に斜線で挟んだ小さな前置き文を添える
• 外部リンクボタン（button-outline）: 白地に黒の1px枠、中央に太字、右端に別窓アイコン
• 性能番号バッジ（spec-pill）: 黒のピル型に白文字とコンデンス数字
• 比較写真帯（compare-strip）: 横長の写真の左上に製品名ラベル（自社は黄、他は黒）、右側にグレーの指数ボックスを置く
• 口コミカード（review-card）: 白カードに黄マーカー付きの属性ラベル、引用符で始まる本文、続きを開く矢印。横スクロールで見せる
• FAQアコーディオン（faq-accordion）: 白カードに太字の質問、右端にシェブロン。薄い影を付ける
• 目次ナビ（anchor-nav）: 2列のテキストリンク。右に黒丸の下矢印、下にグレー線

Do's and Don'ts

Do - 黄色は自社品の強調だけに絞る - グレー地には巨大な欧文とぼかし円を淡く重ねて空気感を出す - 写真はさまざまな天候や季節の運転シーンにし、人物の笑顔を入れる - 性能はチャートや数値の写真帯で可視化する - 見出しは黒帯ラベルで統一する

Don't - 大きな角丸やパステル色を使わない - 黄色を背景の広い面に使わない - 装飾的な手書き書体を混ぜない - 写真にドロップシャドウや枠飾りを付けない - 暗いセクションを多用しない

Page Structure

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

1. ファーストビュー（多様な人の新しい日常を印象付ける）: 上下に運転シーンのコラージュ写真、中央の白地に大きな和文コピーとロゴ
2. 目次ナビ（主要セクションへ誘導）: 2×2のテキストリンクに黒丸矢印と下線
3. 製品コンセプト（製品カテゴリと価値の宣言）: 霜色の地に巨大欧文を流し、黒帯ラベルを2段重ね、下に一文、続いて全幅のキービジュアル
4. 特長ポイント（利点を番号付きで説明）: 巨大番号、黒帯見出し、説明文、写真キャプションカード2枚を繰り返す
5. お客様の声（実利用者の評価で信頼を得る）: 白地に口コミカードのカルーセル、テキストリンク、体験記事への導線カード
6. CTA（サイズ・価格の確認へ誘導）: 淡グレーの帯に前置き文と全幅の黒ボタン
7. 性能（データで優位性を証明）: 番号バッジと見出し、白地のレーダーチャート、比較写真帯、試験条件のアコーディオン
8. 規格マーク（認証による安心感）: 写真の下の暗地に、円アイコン付きの白カードを2枚
9. 技術詳細CTA（技術ページへ誘導）: 白地に小見出しと黒ボタン
10. よくある質問（購入前の疑問を解消）: グレー地に白カードのアコーディオンを縦に並べる
11. 動画ギャラリー（CMで世界観を補強）: 暗地に黄枠のサムネイルと黄色の再生ボタン、カルーセル
12. フッターリンク（関連情報への導線）: 巨大な黒の欧文ロゴの帯、枠線ボタン3つ、メーカーロゴ、著作権表示

Imagery

• 車内から撮った自然光の運転シーン。笑顔の多様な人物
• 雪道・雨の高速道路・ガレージなど天候と季節の対比を見せる
• 全体に彩度を少し落とし、青みのある寒色系に調整
• 写真下部に黒のグラデーションを敷き、文字を読みやすくする
• テスト走行は横長のパノラマで撮り、赤い矢印で距離を示す
• アイコンは線画のモノクロピクトを円形の地に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは中央の白い枠を写真コラージュが囲む構成
• PCのナビは4列横並び、上部にグローバルナビを固定
• 写真カード・口コミ・動画はPCで2列グリッド
• PCは本文幅約78%で中央寄せ。CTAボタンは幅を狭めて中央に置く
• レーダーチャートと凡例はPCで横並び
• フッターリンクのボタンはPCで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 行書くと起動時に読み込まれる。