DESIGN.md — 鮮やか青×ボディ色地のクルマ×ファッションコラボLP（Blue Collab Fashion x Car Styling LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: ポップ・元気、クール・先進的、親しみ・手作り感
• キーワード: コラボ企画・切り抜きコラージュ・手描き線画・雑誌風・車体色リンク
• 地の質感: フラットな単色面に、切り抜き写真と白い手描き線画を重ねる。カードはリングノート風で、紙の質感を出す。
• 形: 角丸は控えめ。黒の長方形ラベル、白抜きの見出しボックス、黒のピル型ボタン、ギザギザの丸いバッジを使う。
• 温度感: 青を主にしたやや涼しい印象。コーデ帯のくすみ色（紺・茶・オリーブ・ローズブラウン）で温かみを足す。

Colors

• 地色は青と白のセクションを交互に置き、コーデ紹介だけ車体色に合わせたくすみ色の帯にする。
• 白い地の上の大見出しはブランドの青文字にする。
• カテゴリラベルと主ボタンは黒地に白文字で統一する。
• 吹き出しの枠線と文字は青で揃える。
• PC で左右に出る余白は薄いグレー一色にする。
• フッターは黒にする。
• speech-bubble は文字 #0182CC × 背景 #FDFDFD のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017ABF、4.55:1）を使う。

Typography

• 本文は中央揃えで、1 行を短めにして改行する。
• 見出しは太いゴシックにし、字間をやや広げる。
• 英字のラベルは小さな黒い四角に入れ、左寄せにする。
• 手書きの英字は写真まわりの添え書きとして少しだけ使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 375px 幅のカラムを置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの左上に小さな英字の黒ラベルを置く。
• 見出しは白い横長ボックスを 2 段にずらして重ねる。
• コーデは「番号見出し→色帯の上の車と人物のコラージュ→ノートカード→黒ボタン」の順に並べる。
• ページ内リンクは 4 分割の白いボックスにまとめる。
• 写真カルーセルの下に矢印ボタンとドットを置く。

Elevation & Depth

• 影はほぼ使わず、フラットに保つ。
• ノートカードにだけごく薄い影を付けて、紙が浮いているように見せる。
• 切り抜き写真は重ねて置き、奥行きを出す。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 人物や車、服は背景を切り抜いて配置する。イベント写真は角丸なしの長方形にする。
• セクション境界: 色の帯を直線で切り替える
• カードの上辺にリングノートの綴じ穴を並べる。
• CHECK バッジは黒のギザギザ円にする。
• 吹き出しは青い細線で囲んだ角丸の四角にする。
• 白いピル型ボタンには青い細線の枠を付ける。

Components

• 英字セクションラベル（label-section）: 黒い小さな四角に白い英字を入れ、左に寄せる。
• ずらし重ね見出し（heading-box-stack）: 白または黒の長方形を 2 段にずらして重ね、見出しを入れる。
• 黒ピルボタン（button-primary）: 黒のピル型で、中央に文字、右端に白丸の矢印を置く。
• リングノートカード（card-notebook）: 上辺に綴じ穴が並ぶ白いカード。中にスタッフのアイコン、吹き出し、コーデのコラージュを入れる。
• 青線の吹き出し（speech-bubble）: 青い細線の枠に、青文字でスタッフのコメントを入れる。
• ギザギザ CHECK バッジ（badge-check）: 黒い星形の円に白い英字を入れ、リンクのそばに置く。
• 4 分割ページ内リンク（anchor-nav）: 白いボックスを 4 つに区切り、英字・和文・下向き矢印を縦に並べる。
• 番号付き見出し枠（number-title）: 丸い番号の下にタイトルを入れ、細線の枠で囲む。

Do's and Don'ts

Do - コーデや商品ごとに、テーマに合うくすみ色の帯で区切る。 - 切り抜き写真に白い手描きの線画（標識・木・荷物など）を添える。 - セクションの頭には必ず黒い英字ラベルを置く。 - 本文は中央揃えにし、行間を広く取る。 - PC でもスマホ幅の中央カラムで見せる。

Don't - グラデーションや強い影を使わない。 - 原色の赤や黄色を地の色にしない。 - 角の丸い大きなカードを多用しない。 - 本文を長い 1 行にしない。 - 明朝体を混ぜない。

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 青地に車と人物の切り抜き、街やキャンプの風景をコラージュし、中央にロゴを置く。
2. コラボロゴと導入文（企画の概要を説明する）: 白い帯に 2 社のロゴを並べ、黒ボックスの見出しと白文字の中央揃えの本文を続ける。
3. ページ内ナビ（各セクションへ誘導する）: 4 分割の白いボックスに矢印を付ける。
4. イベントレポート（開催の様子を見せる）: 写真カルーセル、矢印ボタン、ドット、開催期間の説明を並べる。
5. マガジン告知（読み物コンテンツを予告する）: 白いボックスに手書きの英字ロゴと短い紹介文を入れる。
6. キャンペーン（成約特典を告知する）: 青い吹き出し、特典の切り抜き写真、CHECK バッジ、外部リンクのピル型ボタンを配置する。
7. スタイリング紹介（車体色に合わせたコーデを提案する）: 番号見出し、色帯の上のコラージュ、ノートカード、黒ボタンの組み合わせを 4 回くり返す。
8. 車の紹介（商品の魅力を伝える）: 大きな青い英字見出し、縦書きのコピー、写真、短い説明文、バナーを並べる。
9. 締めのコピーとフッター（余韻を残してページを閉じる）: カッコで囲んだ英字のコピーを置き、ページトップへ戻るボタンと黒いフッターを続ける。

Imagery

• 人物は全身を撮り、背景を切り抜いて車の横に立たせる。
• 服や小物は平置きで撮って切り抜き、人物のまわりに散らす。
• 白い線の手描きイラスト（木・標識・飛行機・スーツケース）を添える。
• 風景写真は道や木などの一部だけ切り抜き、ジオラマのように組む。
• 写真は自然光の明るいトーンで撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも約 375px 幅の中央カラムを保ち、左右はグレーの余白にする。
• PC の左側の余白にはロゴと斜めの装飾線を固定で置く。
• 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 行書くと起動時に読み込まれる。