DESIGN.md — 赤×緑×白のミニチュアドラマ企業CM LP（Miniature Figure Drama Campaign LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、力強い・インパクト、信頼・誠実
• キーワード: ミニチュア人形・赤と緑の二色・コンデンス欧文見出し・ドラマ特設サイト・セクション色替え
• 地の質感: 白背景で撮った物撮り写真と、平らなベタ面の組み合わせ。一部の背景写真に細かいドットの網目を重ねる
• 形: 角丸なしの四角いカードとボタン。丸を使うのはページ送りの数字バッジとドットだけ
• 温度感: 温かめ。赤と緑がはっきりして明るく、親しみやすい

Colors

• 背景はセクションごとに切り替える。薄グレー→赤→写真→緑→薄グレーの順で、赤と緑を交互に入れる
• 見出しの欧文は、薄い地では赤、赤や緑の地では白にする
• 和文のサブ見出しは、薄い地では緑、色の付いた地では白にする
• 見出しの下に置く短い線は、薄い地ではオレンジ、色の付いた地では白にする
• 人物カードの名前帯は赤の面に白文字で作る
• ボタンは黒地に白文字にして、赤い地の上でも目立たせる
• credit-list は文字 #FFFFFF × 背景 #009943 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#00873B、4.64:1）を使う。
• banner-link は文字 #FFFFFF × 背景 #1BB9E1 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#13819D、4.51:1）を使う。

Typography

• 見出しは、太いコンデンス欧文・小さな和文・短い線の三段で中央に揃える
• あらすじは中央揃えにして、1 行ずつ短く改行する
• エピソード本文とコメントは左揃えにし、行間を広く取る
• クレジットは役名を右揃え、人名を左揃えにして、間にコロンを挟む
• 欧文見出しは字間を詰めず、大きさで強弱をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物カードとナビは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは上下に 60〜80px の余白を取る
• ナビは 3 列×2 段にして、区切りに細い縦線を引く
• 人物カードは 2 列で、隙間は 10px
• クレジットの見出しの横に、右へ伸びる細線を引く
• 動画は 16:9 にし、赤い細枠で囲む

Elevation & Depth

• 人物カードにだけ薄い影を付ける
• それ以外は平面で、影を付けない
• ページトップボタンは半透明のグレーの四角

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切り抜く。人物は白背景の全身写真、セクションの区切りには横長の帯状写真を使う
• セクション境界: 直線で背景色を切り替える。間に横長のミニチュア写真を挟んでつなぐ
• ボタンとカードは角丸なしの四角にする
• 丸を使うのはスライダーのドットと番号バッジだけ
• 写真は細い枠線で囲む額装風にしてよい

Components

• 三段見出し（section-heading）: 大きなコンデンス欧文、小さな和文サブ見出し、幅36pxの短い線を縦に重ねて中央に置く
• 目次ナビ（nav-grid）: 白地に3列×2段。上段に赤い欧文、下段に緑の和文を置き、縦線で区切る
• シェアボタン（button-primary）: 黒い四角に白い太字。幅は約8割
• 下線テキストリンク（link-underline）: 2行のテキストに下線を引き、右に矢印を付ける
• 人物カード（character-card）: 白い面に全身の人形写真。下に赤い帯を敷き、名前と声優名を白文字で入れる
• 話数ページャー（episode-pager）: Prev / Next を縦線で区切る。下に並ぶドットの最後を、白枠の丸に#番号を入れたバッジにする
• クレジット一覧（credit-list）: 緑地に白文字。役名の右揃えと人名の左揃えをコロンで中央に揃える
• コメント枠（comment-box）: 白い枠の左上に、縦書きのラベルを入れた赤いタブを重ねる
• リンクバナー（banner-link）: 白い細枠のバナー画像。右下に青い四角の矢印アイコンを付ける

Do's and Don'ts

Do - ミニチュア人形の写真を主役にして、赤と緑の服で色をそろえる - セクションごとに地の色をはっきり変える - どのセクションも三段見出しの型を守る - 角丸を使わない四角いデザインで統一する - あらすじは中央揃えの短い改行で、読みやすくする

Don't - 淡いパステル色やグラデーションを多用しない（例外は理念ブロックだけ） - ボタンを角丸やピル型にしない - 見出しを明朝体や細い書体にしない - 赤と緑の上に、それ以外の濃い色の文字を置かない - 影や立体的な装飾を盛り込みすぎない

Page Structure

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

1. ファーストビュー（作品の世界観を一目で伝える）: 人形の顔をアップにした写真の上に、白い大きなタイトルロゴを置く。一文字だけ赤にする
2. 目次ナビ（各セクションへ移動しやすくする）: 白地の3列×2段グリッド。赤い欧文と緑の和文を組み合わせる
3. あらすじ（物語の前提を伝える）: 薄グレー地に、中央揃えの短い改行の本文を置き、末尾に注釈を付ける
4. 区切り写真（登場人物の顔ぶれを見せる）: 紙の束の上に人形を並べた横長写真
5. エピソード動画（本編・予告を見てもらう）: 赤地に話数、動画、話のタイトル、本文、黒いシェアボタン、関連リンク、ページャーを順に並べる
6. 登場人物（キャラクターを紹介する）: ドットの網目をかけた写真背景の上に、2列の白い人物カードを並べる
7. キャスト・スタッフ（クレジットを掲載する）: 緑地に白文字で、コロンを中央に揃えた一覧を置く
8. 主題歌（楽曲とアーティストのコメントを紹介する）: 額装した正方形の写真、曲名、赤いタブ付きのコメント枠を並べる
9. 名言ダイジェスト（印象的なセリフを見せる）: 赤枠のバナーをスライダーにして、ドットとPrev/Nextを付ける。下に人形写真を置く
10. 企業理念（ブランドの姿勢を伝える）: 水色グラデーションの地に、中央揃えの白い文章とリンクバナーを置く
11. フッター（公式サイトへ誘導する）: 緑地に白いロゴと下線リンク。最下部に白帯のコピーライトを置く

Imagery

• 赤（オレンジ寄り）と緑の服を着たミニチュア人形を、白背景で物撮りする
• オフィス用品や電卓を巨大な背景に見立て、浅い被写界深度でジオラマ風に撮る
• 人物カード用には、白背景の全身写真を正面から撮る
• 背景写真には細かい白ドットの網目を重ねて、文字を読みやすくする
• 理念ブロックには、空と人物のさわやかなイラストを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも SP と同じ幅のカラムを中央に固定する
• PC の左右の余白には、ぼかした大きなミニチュア写真を背景として敷く
• PC の左上には、タイトルロゴと配信案内を固定で表示する
• 中身のレイアウトは SP のまま変えない

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