DESIGN.md — 標識色の斜め帯が映える交通安全キャンペーン LP（Traffic Sign Pop Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、信頼・誠実、情報量多め・訴求型
• キーワード: 交通標識・斜め帯・原色・黒枠カード・円形ロゴタイプ・セクション番号
• 地の質感: 白地にフラットな原色を使う。立体感のある標識イラストと、黒いずらし影で軽い立体感を出す。
• 形: 斜めに傾けた帯、上だけ角丸のカード、丸い標識、太い黒枠。
• 温度感: 明るく活発。公共らしい誠実さも保つ。

Colors

• 地は白にする。左端は水色、右端は黄色の細い縦帯で常に縁取る
• セクションの区切りは章ごとに青・赤・黄・青と色を変えた斜め帯にする
• カード見出しの帯色は、その章のテーマ色（黄・赤・青緑）に合わせる
• 強調したい数字は赤の大きな文字にする
• 主ボタンは青紫と黒の2種類にし、白文字で載せる
• フッター周辺だけは生成り地と深緑にする

Typography

• 見出しもリード文も太字のゴシックで統一する
• リード文は中央揃えにし、行間を広め（2.0前後）にとる
• 章番号は細い斜体の欧文で大きく置き、白抜きか線だけの数字にする
• 英語の小見出しを円形に沿わせて回し、装飾として添える
• 注釈は※付きの小さい灰色の文字で書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。応募者の声や作品紹介だけ、画像と文章を左右に並べる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の端に幅8px前後の色付き縦帯を固定する
• 章の始まりには、画面幅いっぱいの斜め帯を置く
• 動画サムネイルは左右交互にずらし、縁を画面端まで寄せる
• カードは右と下に黒いずらし影を付け、浮いているように見せる
• 余白には標識イラストを散らして配置する

Elevation & Depth

• カードは黒の太枠に、右下へ6px前後ずらしたベタの黒影を付ける
• ポスターや商品写真にも黒のずらし影を付ける
• ぼかした影は使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 動画やポスターは角丸が小さい長方形で切る。人物は、赤い太輪の丸い枠（標識風）に入れる
• セクション境界: 約8度傾けた原色の斜め帯
• カードは上の角だけ大きく丸める
• 主ボタンは角丸が小さい四角形にし、外側に二重の枠を付ける
• サブリンクは細い枠の小さな四角ボタンにし、丸い下向き矢印を付ける
• 黄色い円のバッジで賞品名を示す

Components

• 斜めの章帯（section-band）: 傾けた原色の帯に、白文字の章タイトルと大きな線の数字を重ねる
• 人物入りの主ボタン（button-primary）: 青紫の面に二重の枠を付け、右側には人物写真がはみ出す
• 黒の外部リンクボタン（button-dark）: 黒の面に白文字を載せ、白と黒の二重の枠で囲む
• 黒枠の情報カード（framed-card）: 上の角が丸い色帯の見出しを付け、黒の太枠とずらし影で囲む
• 詳細リンクの小ボタン（link-chip）: 白地に細い黒枠を付け、灰色の丸い矢印アイコンを添える
• 応募要項のスクロール枠（terms-box）: 灰色の面に灰色のスクロールバーが付いた枠
• 賞品の円形バッジ（prize-badge）: 黄色の円に、賞品名と個数を黒文字で書く
• 標識風の丸い人物枠（sign-avatar）: 赤い太輪の中に人物写真を入れ、コメントを横に添える
• 円形の英字ロゴタイプ（rotating-text）: 英字のキャンペーン名を円に沿わせて回す。色は章のテーマ色に合わせる

Do's and Don'ts

Do - 章ごとに原色の斜め帯と大きな番号を使って区切る - 余白に標識イラストを散らし、楽しさを出す - カードには黒枠とずらし影を必ず付ける - 数字の訴求は赤い大きな数字で目立たせる - リード文は中央揃えの太字で、行間を広くとる

Don't - 淡いパステルや、グラデーションの地は使わない - ぼかした柔らかい影を使わない - 帯を水平にしない（必ず傾ける） - ピル型のボタンにしない - 標識イラストを本文の上に重ねない

Page Structure

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

1. ファーストビュー（キャンペーンの主旨とメインキャストを伝える）: 明るい灰色の背景に人物の大きな写真を置き、上に太字コピーと縦組みの短い添え文を載せる
2. 導入リード（キャンペーンの目的を説明する）: 中央揃えの太字の文章。周囲に標識イラストを散らす
3. CM動画紹介（動画の視聴を促す）: 青の斜め帯で始める。動画サムネイルを左右交互に置き、番号・タイトル・歌詞を並べる
4. データ解説（数字で注意を促す）: 黄色の見出し帯を付けた黒枠カードに、赤の大きな数字と小さなリンクボタンを入れる
5. サイネージ広告（屋外広告を告知する）: ポスター2枚を並べ、掲出期間を中央揃えで書く
6. ルールテスト（クイズへの参加を促す）: 赤の斜め帯で始め、丸い人物枠と主ボタン、応募要項、賞品バッジを置く
7. ルール一覧（注意すべき項目を列挙する）: 赤の見出し帯を付けたカードに、番号付きのリストを入れる
8. SNSキャンペーン（投稿への参加を促す）: 黄色の斜め帯で始め、黄色いマーカーでハッシュタグを強調し、黒ボタンと賞品写真を置く
9. メイキング・インタビュー（関連する動画で興味を深める）: 青の斜め帯で始め、動画と説明文を交互に並べる
10. 作品紹介（社会貢献の実績を示す）: 青緑の見出し帯を付けたカードに、作品画像と人物コメントを入れる
11. 活動紹介（関連する取り組みを紹介する）: 枠線付きの見出しと、ドットの付いたカルーセル
12. フッター（関連リンクと団体のバナーを載せる）: 生成り地に写真の帯、その下にバナーを2列で並べ、最後に深緑のフッターを置く

Imagery

• 交通標識を、厚みと影のある立体アイコンにして小さく散らす
• 人物は明るい灰色の背景で、正面から撮った清潔な写真にする
• 動画サムネイルには半透明の白い再生ボタンを重ねる
• 賞品は白背景の切り抜き写真に、黒のずらし影を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも左右の縦帯と斜めの章帯を保つ
• PC では動画と文章を2カラムで左右交互に並べる
• PC では FV のコピーを写真の左右に分けて置く
• PC ではデータカードの中にグラフを横並びにする
• PC ではバナーを5列にする

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