DESIGN.md — 赤×黒の雑誌コラージュ風 若者向け自動車 LP（Bold Red Zine Youth Car Guide LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、レトロ
• キーワード: 赤ベタ地・切り抜き文字帯・フィルム枠写真・方眼ノート・斜めカットボタン・雑誌コラージュ
• 地の質感: うっすら紙のノイズが乗ったマットな質感。写真は粒子感のあるフィルム調。
• 形: 角丸なしの矩形が基本。ボタンや見出し帯は右端を斜めに落とした平行四辺形にする。
• 温度感: 高温。赤と黒の強いコントラストで熱量を出す。

Colors

• ページ中盤の主役は赤ベタ地。導入は黒地、後半は紙色の地に切り替えて章を分ける。
• 見出しは白帯に赤文字、または黒帯に白文字の切り抜きテープ風にする。
• 赤地の中で一番目立たせたい誘導ボタンだけをシアン塗りにし、補色で浮かせる。
• 黄色は講座タイトル帯や再生・矢印アイコンに少量だけ使う。
• グラフは赤からサーモンピンクまでの同系色の濃淡で塗り分ける。
• 講座見出しの下線には水色・紫・黄緑など章ごとに違う色をアクセントで入れる。

Typography

• 英字の見出しは極太イタリックで大きく組み、上に日本語リード、下に小さな日本語サブを添える。
• 日本語見出しは一行ずつ背景帯に乗せ、行ごとに長さが違う切り抜き文字にする。
• 強調したい語だけを文字サイズ 1.3〜2 倍にして、ほかの助詞は小さくする。
• 講座カードの解説は縦書きにし、強調語をかぎ括弧で囲む。
• 数値は太いサンセリフで大きく、単位は小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。講座カードは動画 6：縦書き解説 4 の横並び
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 8% の余白で中央に置き、赤地の上に浮かせる。
• 見出し帯は左端に寄せるか、画面端から飛び出させて置く。
• 写真はわずかに傾けて重ね、コラージュに見せる。
• Q カードは見出し部・回答部・アコーディオン行の 3 段に分ける。
• Q カードの直後にシアンの誘導ボタンを 1 つ置く。

Elevation & Depth

• 影はほぼ使わず、黒い太枠や下にずらした黒帯で立体感を出す。
• 講座見出しは帯の下に色付きのラインをずらして重ねる。
• フィルム枠の写真は黒フチで重ねて奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 黒フチのフィルム枠つき矩形にして少し傾ける。アバターは正円、グラフ中央はドーナツの穴に写真を入れる。
• セクション境界: 直線で色を切り替える。帯で区切る場合もある。
• ボタンは右端を斜めにカットした平行四辺形にする。
• 角丸は使わない。丸はアバターと再生ボタンだけ。
• 方眼ノート柄の面を解説やまとめの背景に使う。
• Q カードの右上に大きな薄い Q の文字を透かしで置く。

Components

• 切り抜き帯見出し（cutout-headline）: 白帯に赤文字、または黒帯に白文字で一行ずつ組む雑誌風の見出し。
• シアン斜めボタン（button-cta-slant）: 黒の 2px 枠と右端の斜めカットがあるシアンのボタン。右に黄色の三角矢印を置く。
• 黒の斜めリンクボタン（button-dark-slant）: 後半で使う黒いリンクボタン。右端を斜めにカットし、白い三角アイコンを付ける。
• 講座動画カード（lesson-card）: 時限ラベル（白小帯）＋黒帯のタイトル＋色ライン。下に動画サムネと縦書き解説の方眼パネルを並べる。
• 先輩の声Qカード（voice-qa-card）: 白い見出し部に質問と透かしの Q を置く。赤い回答部には円形アバターと白文字の声を並べ、最後に＋のアコーディオンを付ける。
• ドーナツグラフ（data-graph）: 赤とサーモンの濃淡で塗ったドーナツグラフ。中央に写真を入れ、数値は白いラベル帯に載せる。
• 赤ラベル見出しタブ（red-label-tab）: 白い枠付きボックスの上辺にまたがって置く、赤地に白文字の質問タブ。
• 王冠ランキング（ranking-crown）: 黄色い王冠に番号を入れ、項目名と％を点線リーダーでつなぐ。
• フィルム枠写真（film-photo）: 黒い太フチとコマ番号のある写真。少し傾けて重ねる。

Do's and Don'ts

Do - 赤ベタ地を大きく使い、白と黒の帯見出しでリズムを作る。 - ボタンは斜めカットにし、右に三角矢印を付ける。 - 写真はフィルム枠で傾けて重ね、手作りのスクラップ感を出す。 - データは同系色の赤の濃淡グラフで見せ、数値を大きく置く。 - 英字の極太イタリック見出しで章の始まりを示す。

Don't - 角丸やピル型のボタンを使わない。 - 柔らかいパステル配色や影の強いカードにしない。 - 赤地の上にシアン以外の目立つボタン色を増やさない。 - 写真をきれいに整列させすぎない。 - 細い明朝体を見出しに使わない。

Page Structure

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

1. ファーストビュー（企画名と問いかけで若者を引き込む）: 車内の人物写真を全面に敷き、赤帯の企画タイトルと白帯の赤文字の問いを重ねる。
2. 導入メッセージ（古い常識を問い直し、企画の意図を伝える）: 黒地に白帯の短文を 3 ブロック置き、背景にコラージュ写真を重ねる。最後に白い大きな宣言文を置く。
3. スクープ数値（後悔した人の割合で危機感をあおる）: 赤い極太イタリックの英字と、白帯の大きな数字見出しを置く。下に線で挟んだ矢印リンクを付ける。
4. 買い方講座（キャラクター動画で選び方を章立てで教える）: 赤地に黄色帯のタイトルを置く。時限ごとに動画と縦書き方眼パネルのカードを 5 つ並べる。
5. 先輩たちの声（体験談で悩みに答える）: Q カードを 3 つ置き、各カードの後にシアンの斜めボタンを置く。一部のカードには価格推移と残価率のバーを入れる。
6. 質問募集（SNS投稿を促す）: 赤地に白帯の見出しと、下線付きのハッシュタグを置く。
7. 座談会（同世代のリアルな声を伝える）: 教室写真の地に英字の極太見出しを置く。罫線ノート風カードに円形アバターと赤文字の発言を並べ、記事を見る黒ボタンを付ける。
8. アンケート結果（データで判断材料を示す）: 英字見出しの下に黒帯の結論を置く。ドーナツグラフ、王冠ランキング、円グラフを赤タブ付きの枠に入れる。
9. 3つの心得（要点をまとめる）: 紙色地に英字の見出しを置く。方眼の面に心得の番号と赤帯の白文字を並べ、フィルム写真を重ねる。
10. 関連リンク（詳細ページへ送客する）: 黒の斜めボタンを縦に並べ、その下にバナー画像を 3 枚置く。
11. フッター（サイト共通の導線）: 淡いグレー地に開閉リスト、SNSアイコン、規約リンクを置く。

Imagery

• 制服姿の若者と車内を写した、粒子感と色あせのあるフィルム調の写真。
• 教室・黒板・廊下など学校の情景を浅い被写界深度で撮ったものを背景に使う。
• 動物マスクに派手な柄スーツを着た案内キャラが、車内で語る縦長の動画サムネ。
• 黒フチのフィルム枠、コマ番号、ギザギザ円の英字スタンプで装飾する。
• 方眼ノートや罫線ノートの紙テクスチャ。
• 夜の車内を青緑と赤の光で撮ったシネマ調のカット。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では赤地を全幅に保ち、カードは最大 960px 程度で中央に寄せる。
• 講座カードは PC で 2 列のグリッドにし、動画と解説の横並びは維持する。
• 英字の見出しは PC で 120px 前後まで拡大し、画面端に寄せる。
• アンケートのグラフは PC で 2〜3 列に並べる。
• フィルム写真のコラージュは PC で左右に広げて散らす。

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