--- version: alpha name: Traffic Sign Pop Campaign LP description: 白地をベースに、左右の端を水色と黄色の縦帯で縁取ったキャンペーン LP。セクションの区切りは青・赤・黄の斜めの帯で、そこに大きな白抜きの番号を重ねる。交通標識のイラストをページ全体に散らし、黒い太枠とずらした影を付けたカードで情報をまとめる。ポップで元気がありつつ、公共性も感じられる見た目。 colors: primary: '#0163FE' background: '#FFFFFF' accent-1: '#2AA9E1' secondary: '#FEE103' accent-2: '#E50014' cta: '#2421D2' on-cta: '#F4F8FF' text: '#1F2330' dark-section: '#010101' surface: '#EEEEEE' accent-3: '#03B5CC' background-alt: '#FFFAE7' tint-1: '#007C64' marker: '#CE0516' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 44px fontWeight: 300 lineHeight: 1.0 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 64px button-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px framed-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px link-chip: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 28px terms-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 100px prize-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 120px sign-avatar: backgroundColor: '{colors.accent-2}' rounded: '{rounded.full}' height: 80px rotating-text: textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 160px --- # DESIGN.md — 標識色の斜め帯が映える交通安全キャンペーン LP（Traffic Sign Pop Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、信頼・誠実、情報量多め・訴求型 - **キーワード**: 交通標識・斜め帯・原色・黒枠カード・円形ロゴタイプ・セクション番号 - **地の質感**: 白地にフラットな原色を使う。立体感のある標識イラストと、黒いずらし影で軽い立体感を出す。 - **形**: 斜めに傾けた帯、上だけ角丸のカード、丸い標識、太い黒枠。 - **温度感**: 明るく活発。公共らしい誠実さも保つ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0163FE` | セクション帯の青 | 4% | 画素の実測 | | `background` | `#FFFFFF` | ページ地の白 | 56% | 画素の実測 | | `accent-1` | `#2AA9E1` | 左端の縦帯の水色 | 4% | 画素の実測 | | `secondary` | `#FEE103` | 右端の縦帯と見出し帯の黄色 | 4% | 画素の実測 | | `accent-2` | `#E50014` | セクション帯とカード見出しの赤 | 3% | 画素の実測 | | `cta` | `#2421D2` | 主ボタンの青紫 | 1% | 画素の実測 | | `on-cta` | `#F4F8FF` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#1F2330` | 本文と見出しの墨色 | 4% | 画素の主要色に補正 | | `dark-section` | `#010101` | 黒ボタンとカード枠 | 1% | 画素の実測 | | `surface` | `#EEEEEE` | 応募要項ボックスの灰色 | 3% | 画素の実測 | | `accent-3` | `#03B5CC` | ポスター紹介カード見出しの青緑 | 1% | 画素の実測 | | `background-alt` | `#FFFAE7` | フッター前の生成り地 | 3% | 画素の実測 | | `tint-1` | `#007C64` | フッターと補助ボタンの深緑 | 2% | 画素の実測 | | `marker` | `#CE0516` | 数字の強調の赤 | 0% | 画素の実測 | - 地は白にする。左端は水色、右端は黄色の細い縦帯で常に縁取る - セクションの区切りは章ごとに青・赤・黄・青と色を変えた斜め帯にする - カード見出しの帯色は、その章のテーマ色（黄・赤・青緑）に合わせる - 強調したい数字は赤の大きな文字にする - 主ボタンは青紫と黒の2種類にし、白文字で載せる - フッター周辺だけは生成り地と深緑にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.3 | 0.05em | | `headline-lg` | 帯の中の章タイトル | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.08em | | `accent` | 章番号の白抜き斜体数字 | 欧文サンセリフ | Montserrat | 300 | 44px | 1.0 | 0.0em | | `headline-md` | カードの見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em | | `body-lg` | 中央揃えのリード文 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 2.1 | 0.05em | | `body-md` | カード内の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `note` | 注釈と出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.2 | 0.08em | - 見出しもリード文も太字のゴシックで統一する - リード文は中央揃えにし、行間を広め（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-74d80da6`（元 LP の URL から採番） - **元 LP**: https://www.ja-kyosai-traffic-safety2025.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。