DESIGN.md — オレンジ×黄の看板風ポップ啓発キャンペーン LP（Retro Pop Signboard Public Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、レトロ、力強い・インパクト、親しみ・手作り感
• キーワード: 看板・標識モチーフ・太い黒フチ・段ずれの影・昭和レトロポップ・キャラクター主導・紙の質感
• 地の質感: 背景に段ボールや紙のような細かいノイズと、方眼の格子模様。面はベタ塗りで、グラデーションは控えめ。
• 形: 角丸の看板パネル、ブラウン管テレビ枠、八角形・円形の道路標識、ピル型ボタン。どれも2〜3pxの黒線と右下への黒い影付き。
• 温度感: 暖色寄りでとても高い熱量（オレンジ・黄が中心）。差し色に青・紫・緑・ピンクを使う。

Colors

• 地はオレンジ・テラコッタ紙・クリームの3種をセクションごとに切り替える。
• カードやパネルは生成り白の面に黒フチを付けて地から浮かせる。
• 見出し看板は黄かオレンジ、強調語だけ赤オレンジ文字にする。
• 青・紫・緑・ピンクはキャラや標識の色分けにだけ使う。
• ボタンはオレンジ塗り＋白文字、選択外は白塗り＋オレンジ文字。
• 黒は文字・フチ・影に統一し、グレーの影は使わない。
• button-primary は文字 #FFF4E9 × 背景 #F56029 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD3E0A、4.52:1）を使う。
• button-toggle は文字 #F66229 × 背景 #FFFEF1 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44109、4.54:1）を使う。
• speech-balloon は文字 #FFF4E9 × 背景 #F66229 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44109、4.52:1）を使う。
• ticker-band は文字 #1060B0 × 背景 #F5D501 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#105DAB、4.53:1）を使う。

Typography

• 見出しは極太のポップ書体で、白文字なら黒フチを付ける。
• 英字見出しは1文字目〜単語単位で黄色と白を切り替えてもよい。
• 強調語だけを一回り大きくし、色を変える。
• 本文はゴシックの中太で、行間は広めにする。
• FV のサブコピーは斜体風の手書きで、下線を付けて勢いを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画バリエーションボタンは 3 列。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• パネルは画面端から約8%内側に置き、少し傾けたり重ねたりする。
• キャラカードは左右に互い違いにずらし、丸い顔写真バッジをはみ出させる。
• セクション境界に英字の横流れ帯（黄地に青文字）を入れる。
• 看板見出しの上に吊り下げ金具、下に支柱を描く。
• 標識ナビは2列で上下にずらし、支柱でつなぐ。

Elevation & Depth

• 影はぼかさない黒のベタ影で、右下に4〜6pxずらす。
• パネルは黒フチ2〜3pxで面を区切る。
• 重なったパネルは手前ほど影を濃く見せる。
• ボタンにも同じ段ずれ影を付ける。

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は楕円・円・角丸のテレビ枠で切り抜く。人物写真は円形バッジにする。
• セクション境界: 直線の黒ラインか英字の横流れ帯で区切る。FV 下部はタイヤ型の半円を出す。
• すべての部品に黒フチを付ける。
• 看板の四隅は角丸、吊り金具の穴を描く。
• ナビは円・八角形・角丸四角の道路標識にする。
• 吹き出しは角丸の太いオレンジ楕円にする。

Components

• 主ボタン（button-primary）: オレンジのピル型で黒フチと段ずれ影。右端に白丸の再生アイコンか外部リンクアイコン。
• バリエーション切替ボタン（button-toggle）: 3つ並べたピル。選択中はオレンジ塗り、それ以外は白塗りにオレンジ文字。
• 看板見出し（signboard-heading）: 黄かオレンジの角丸パネルに縦板の木目線。吊り金具と支柱付き。
• ブラウン管テレビ枠（tv-frame）: グレーの太枠に色付きの画面と、下部の作品名ラベル帯。動画サムネを中に入れる。
• キャラクターカード（character-card）: 生成り地を傾けたカードに色付きの楕円背景とキャラ。名前は大きく、下に黄色のプロフィール帯。
• ポイント解説カード（point-card）: 生成りの角丸カード。オレンジの英字番号、太い小見出し、区切り線の下に本文。
• 吹き出し（speech-balloon）: オレンジの楕円に白い太文字。下にキャラのイラストを添える。
• 標識ナビ（road-sign-nav）: 円・八角形の道路標識型リンク。色違いで二重フチ、中央に再生アイコン、下に支柱。
• 英字横流れ帯（ticker-band）: 黄色地に青の極太英字を繰り返す帯。上下に黒線。
• 警告ラベル（alert-label）: 白地に黒フチの横長ボックス。注意アイコンとオレンジの強調語を入れる。

Do's and Don'ts

Do - 部品はすべて黒フチと右下ベタ影でそろえる。 - 看板・標識・テレビなど身近な物を部品の形にする。 - セクションごとに地色を切り替え、紙のノイズ質感を足す。 - キャラクターを吹き出しやカードに必ず添えて親しみを出す。 - 強調語は色とサイズを変えて目立たせる。

Don't - ぼかしたドロップシャドウや細い線は使わない。 - 寒色を地の色に広く使わない。 - 細い明朝体や上品な余白重視のレイアウトにしない。 - グラデーションの多用や透明感のある表現は避ける。 - フチのないフラットなカードを置かない。

Page Structure

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

1. ヘッダーナビ（主要ページへの移動）: 白地に横スクロールのテキストリンク。現在地は青いピルにする。
2. ファーストビュー（テーマを一目で伝える）: オレンジの太枠に虹のアーチ背景と人物写真。白の極太タイトルと、下線付き手書き風サブコピー。
3. 警告・罰則の提起（放置するリスクを伝える）: 白い横長ラベルで見出しを積む。黄色の多角形吹き出し2つとキャラ写真、主ボタン。
4. 英字横流れ帯（区切りとキャンペーン感）: 黄地に青の英字を繰り返す。
5. CM ギャラリー（動画の紹介）: 吊り看板の見出しと、ブラウン管テレビ枠の動画。下に秒数の切替ピルを3つ並べる。
6. キャラクター紹介（親しみを作る）: オレンジ方眼地に、傾けたキャラカードを互い違いに配置。声優の丸写真バッジと名前札を添える。
7. インタビュー記事（関連記事への誘導）: ピンクのパネルにタブ見出し。キャラアイコン付きの横長リンクカードを並べる。
8. 制度の解説（基礎知識を伝える）: クリーム地に黄色看板の見出し。POINT 番号付きカードと吹き出しカードを交互に並べる。
9. 注釈（補足条件の明示）: クリーム地に※付きの小さい太字。
10. 標識ナビ（下層ページへの回遊）: テラコッタ紙地に色違いの道路標識を2列に配置。
11. 外部リンク CTA（関係機関への誘導）: オレンジ地に生成りカード。リード文とオレンジのピルボタン。
12. SNS シェア（拡散）: 黄色の看板パネルに英字見出しと丸い SNS アイコンを3つ。
13. フッター（運営者情報）: 濃紺グレー地に白の小さな文字を中央揃え。

Imagery

• 人物写真はビビッドな背景の前で正面から撮り、コミカルな小道具（顔をはめるタイヤ等）を使う。
• キャラは太い黒線とベタ塗りのシンプルな2Dイラスト。
• 背景に虹のアーチ、集中線、方眼などレトロな図形を使う。
• 紙や段ボールのようなざらつきを全体に薄く重ねる。
• 人物の丸写真には虫眼鏡アイコンのバッジを付ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約1000px幅で、ギャラリーのテレビ枠を2列にする。
• PC のキャラカードは3列ほどでコラージュ状に重ねる。
• PC の標識ナビは5つを横一列に並べる。
• PC の解説カードは2列で、背景に放射状の装飾を加える。
• PC の CTA カードは2列、シェアは横長の帯1本にまとめる。
• 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 行書くと起動時に読み込まれる。