--- version: alpha name: Retro Pop Signboard Public Campaign LP description: 朱色のオレンジと黄色を主役に、太い黒フチと段ずれの影で看板・標識・ブラウン管テレビ風の部品を組み立てた、昭和レトロでポップな公共啓発キャンペーン LP。紙のような質感の背景に、太いポップ書体の見出しとタイヤを顔にしたキャラクターを配置し、勢いよく情報を伝える。 colors: primary: '#F66229' background: '#FCF4B3' surface: '#FFFEF1' background-alt: '#E59364' secondary: '#F5D501' cta: '#F56029' on-cta: '#FFF4E9' text: '#000000' line: '#1E1E1E' accent-1: '#1060B0' accent-2: '#6A2BAA' accent-3: '#E7559A' tint-1: '#0E944D' dark-section: '#20282B' on-dark: '#FFFFFD' marker: '#F05D26' cta-accessible: '#CD3E0A' primary-accessible: '#D44109' accent-1-accessible: '#105DAB' typography: display: fontFamily: Noto Sans JP fontSize: 52px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Lilita One fontSize: 36px fontWeight: 400 lineHeight: 1.1 headline-md: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Mochiy Pop One fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Lilita One fontSize: 24px fontWeight: 400 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em label-button: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em rounded: sm: 8px md: 20px lg: 32px full: 999px spacing: unit: 8px card: 28px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px button-toggle: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px signboard-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 90px tv-frame: backgroundColor: '{colors.accent-2}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 360px character-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 300px point-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px speech-balloon: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 140px road-sign-nav: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 180px ticker-band: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 36px alert-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 44px --- # DESIGN.md — オレンジ×黄の看板風ポップ啓発キャンペーン LP（Retro Pop Signboard Public Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: ポップ・元気、レトロ、力強い・インパクト、親しみ・手作り感 - **キーワード**: 看板・標識モチーフ・太い黒フチ・段ずれの影・昭和レトロポップ・キャラクター主導・紙の質感 - **地の質感**: 背景に段ボールや紙のような細かいノイズと、方眼の格子模様。面はベタ塗りで、グラデーションは控えめ。 - **形**: 角丸の看板パネル、ブラウン管テレビ枠、八角形・円形の道路標識、ピル型ボタン。どれも2〜3pxの黒線と右下への黒い影付き。 - **温度感**: 暖色寄りでとても高い熱量（オレンジ・黄が中心）。差し色に青・紫・緑・ピンクを使う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F66229` | ブランドを代表するオレンジ（セクション地・ボタン） | 24% | 画素の主要色に補正 | | `background` | `#FCF4B3` | 解説セクションのクリーム地 | 12% | 画素の実測 | | `surface` | `#FFFEF1` | カード・パネル内の生成り白 | 14% | 画素の実測 | | `background-alt` | `#E59364` | ギャラリー・標識エリアの紙風テラコッタ地 | 12% | 画素の実測 | | `secondary` | `#F5D501` | 見出し看板・帯の黄色 | 6% | 画素の実測 | | `cta` | `#F56029` | 主ボタンの塗り | 3% | 画素の実測 | | `on-cta` | `#FFF4E9` | ボタン上の白文字 | 1% | 画素の実測 | | `text` | `#000000` | 見出し・本文・フチ線の黒 | 5% | 画素の実測 | | `line` | `#1E1E1E` | 全部品を縁取る黒線 | 2% | 推定 | | `accent-1` | `#1060B0` | 差し色の青（帯文字・バッジ・枠） | 3% | 推定 | | `accent-2` | `#6A2BAA` | 差し色の紫（キャラ背景・標識） | 2% | 推定 | | `accent-3` | `#E7559A` | 差し色のピンク（記事パネル） | 3% | 推定 | | `tint-1` | `#0E944D` | 差し色の緑（キャラ背景・標識） | 2% | 画素の実測 | | `dark-section` | `#20282B` | フッターの濃紺グレー | 3% | 画素の実測 | | `on-dark` | `#FFFFFD` | フッターの白文字 | 0% | 画素の主要色に補正 | | `marker` | `#F05D26` | 見出し中の強調語に使う赤オレンジ文字 | 0% | 画素の実測 | | `cta-accessible` | `#CD3E0A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D44109` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#105DAB` | AA を満たす補正値（計算） | | 計算 | - 地はオレンジ・テラコッタ紙・クリームの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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインタイトル | ゴシック | Noto Sans JP | 900 | 52px | 1.2 | 0.02em | | `headline-lg` | 英字のセクション看板見出し（黒フチ付き白文字） | 欧文サンセリフ | Lilita One | 400 | 36px | 1.1 | 0.0em | | `headline-md` | 和文の看板見出し・キャラ名 | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.3 | 0.02em | | `headline-sm` | カード内の小見出し・吹き出し文 | 丸ゴシック | Mochiy Pop One | 400 | 20px | 1.5 | 0.03em | | `accent` | POINT 番号などの英数ラベル | 欧文サンセリフ | Lilita One | 400 | 24px | 1.1 | 0.0em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.03em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.4 | 0.05em | | `note` | 注釈・フッター | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em | - 見出しは極太のポップ書体で、白文字なら黒フチを付ける。 - 英字見出しは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 ```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-b2ebd212`（元 LP の URL から採番） - **元 LP**: https://www.jibaisekihoken-koho.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。