--- version: alpha name: Idol Stage Collab Campaign LP description: 黒地に星柄を敷いたステージ風の背景に、白いカードと赤帯の見出しを重ねた、アニメコラボのプレゼントキャンペーン LP。中央に約 200px 幅の縦長の列を置き、赤・ピンク・黄の強い色と、キャラクターのチビイラストで盛り上げる。 colors: background: '#0C0C0C' dark-section: '#1A191A' surface: '#FEFEFD' primary: '#E40313' accent-1: '#E3027C' accent-2: '#FFEE01' cta: '#03C454' on-cta: '#FFFFFF' background-alt: '#FFFDEA' secondary: '#2E1A1D' text: '#120D0C' tint-1: '#FEDCDC' line: '#E8504A' cta-accessible: '#02883A' accent-1-accessible: '#CC0270' typography: display: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 12px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-sub: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px prize-heading: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 52px course-badge: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-md}' height: 56px number-star: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 48px campaign-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.md}' height: 64px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 240px faq-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px menu-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px --- # DESIGN.md — 黒×赤×ピンクのアイドル舞台風キャンペーンLP（Idol Stage Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい - **キーワード**: ライブステージ・推し活・黒地に星柄・赤帯見出し・番号付き企画・ネオンライト - **地の質感**: 黒地に薄い星柄と斜めの欧文ロゴを透かして敷き、ステージのトラスや照明の丸い光で舞台らしさを出す - **形**: 角丸の白カード、太い赤帯の見出し、星形の番号バッジ、ピル型のボタン - **温度感**: 暗い地に原色の暖色が映える、熱量の高い配色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#0C0C0C` | ページ全体の黒地 | 45% | 画素の実測 | | `dark-section` | `#1A191A` | 中央列のこげ茶黒の地 | 12% | 画素の主要色に補正 | | `surface` | `#FEFEFD` | 賞品カードや FAQ の白い面 | 11% | 画素の実測 | | `primary` | `#E40313` | 賞名の帯とコースのラベルの赤 | 4% | 画素の実測 | | `accent-1` | `#E3027C` | 企画バナーやリンクボタンのマゼンタ | 2% | 画素の実測 | | `accent-2` | `#FFEE01` | 「応募方法」の見出し帯とバナーの黄色 | 2% | 画素の実測 | | `cta` | `#03C454` | LINE で応募するボタンの緑 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白い文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#FFFDEA` | 応募手順のステップカードの淡いクリーム | 5% | 画素の実測 | | `secondary` | `#2E1A1D` | サブボタンの黒茶 | 1% | 画素の主要色に補正 | | `text` | `#120D0C` | 本文と見出しの黒文字 | 2% | 画素の実測 | | `tint-1` | `#FEDCDC` | 注意事項の見出しの淡いピンク | 0% | 画素の実測 | | `line` | `#E8504A` | 有効レシート例を囲む赤い枠線 | 0% | 推定 | | `cta-accessible` | `#02883A` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CC0270` | AA を満たす補正値（計算） | | 計算 | - 地は黒に統一する。中央の列だけこげ茶黒または明るいグレーにして、外側から区切る。 - 情報は白やクリームのカードに載せ、黒地の上に浮かせる。 - 賞名の見出しは赤い帯に白文字で統一する。 - 手順の見出しは黄色の帯に赤文字で、賞名の見出しと区別する。 - 企画を告知するバナーはマゼンタとピンクのグラデーションに、黄色か白の文字で目立たせる。 - 応募 CTA の色は応募先サービスの色（緑など）にし、サブボタンは黒茶にする。 - `button-cta` は文字 `#FFFFFF` × 背景 `#03C454` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#02883A`、4.58:1）を使う。 - `campaign-banner` は文字 `#FFEE01` × 背景 `#E3027C` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CC0270`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 企画バナーと賞名の大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 28px | 1.2 | 0.02em | | `headline-lg` | 賞の帯見出し（白抜き） | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.05em | | `headline-md` | セクション見出しとFAQ のタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em | | `headline-sm` | 賞品名と FAQ の質問 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 手順の説明と回答文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | 賞品のサイズや素材、注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | Step 番号や Share などの欧文ラベル | 欧文サンセリフ | Montserrat | 800 | 12px | 1.2 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.03em | - 見出しは極太のゴシックにし、白いフチや影をつけて立体的に見せる。 - 強調したい語は赤字にするか、サイズを大きくする。 - 本本数や金額などの数字は特に大きくし、単位は小さく添える。 - 注釈は「※」で始め、小さい灰色の文字で左揃えにする。 - 本文は中央揃えを基本とし、回答文や注釈は左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。賞品カードの中は左に文字、右に写真の 2 分割 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツは中央の縦長の列にまとめ、外側の背景には装飾だけを置く。 - 企画は 01〜04 の番号で章立てし、冒頭に 2×2 の目次カードを置く。 - 賞品は「本数コース・当選人数・賞品名・仕様」の順に縦に並べる。 - 応募手順は Step カードを縦に並べ、カード同士の間に Step ラベルを挟む。 - FAQ は灰色のアコーディオンを 8px 間隔で縦に並べる。 ## Elevation & Depth - 白カードは影なしで角を丸め、黒地との明暗差で浮かせる。 - ボタンは下側に濃い色のベタ影をつけて押せる感じを出す。 - 見出しの文字は白フチとドロップシャドウで立体的にする。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 賞品は白地の切り抜き写真。キャラクターは輪郭で切り抜いた全身またはチビ絵 - **セクション境界**: 直線で切り替え、上下にステージのトラスや照明列を飾る - 目次カードは上辺に色帯を置き、下にシェブロンの丸ボタンをつける。 - 番号バッジは星形にする。 - 見出し帯は角丸を小さめにし、太いフチ線で囲む。 ## Components - **応募ボタン**（`button-cta`）: 応募先サービスのアイコンをつけたピル型のボタン。下に濃い影をつける - **サブボタン**（`button-sub`）: 右端に矢印の丸をつけた黒茶のピル型ボタン - **賞名の帯見出し**（`prize-heading`）: 白いカードの上部に置く赤帯。極太の白抜き文字を載せる - **本数コースのラベル**（`course-badge`）: 赤い四角に本数を大きく、その下に当選人数の帯を置く - **星形の企画番号**（`number-star`）: 黒い星に赤とピンクの数字を載せ、各章の冒頭に置く - **企画告知バナー**（`campaign-banner`）: ピンクのグラデーションの横長バナーに、チビキャラと黄色の太字を重ねる - **手順カード**（`step-card`）: クリーム色のカードにイラストと説明を載せ、上に黒地の Step ラベルを置く - **FAQ アコーディオン**（`faq-item`）: 灰色の地に黄色の Q アイコンと開閉の三角を置く。開くとクリーム色で A を表示する - **企画の目次カード**（`menu-card`）: 2×2 に並べる白カード。番号、キャラの絵、赤字の要点、下向きのシェブロンを載せる ## Do's and Don'ts **Do** - 黒地の背景には星柄とキャラクターを左右対称に繰り返し並べる。 - 企画ごとに番号バッジ、告知バナー、詳細の順で構成する。 - 数字と賞品名は赤い太字で目立たせる。 - 応募の条件や注意点は図で示し、その後に注釈を添える。 - 要所にチビキャラを置き、吹き出しで語りかける。 **Don't** - 淡い地や上品なトーンにしない。 - 細い明朝体を見出しに使わない。 - コンテンツの列を画面いっぱいに広げない。 - 賞名の帯の色をセクションごとに変えない。 - 注釈を本文と同じ大きさにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボであることと開催期間を伝える）: キャラクターの集合イラストにロゴを重ね、下に期間の帯と小さな権利表記を置く 2. **お知らせ**（運営からの告知を伝える）: 黒地を細い白線の枠で囲み、白い小さな文字を中央に揃える 3. **企画の目次**（4 つの企画を一覧で見せる）: ステージ風の看板に導入文を載せ、下に 2×2 の番号カードと照明の丸を並べる 4. **企画 01：レシート応募の賞品**（賞品をコースごとに見せる）: 賞ごとに赤帯見出しの白カードを作り、コースのラベル、賞品写真、対象商品の帯を並べる 5. **Wチャンス**（応募者全員への特典を見せる）: 黄色の見出しと赤地の告知に続けて、スマホ枠の壁紙を 2×2 で並べ、配布期間を添える 6. **応募方法**（応募の手順を説明する）: 黄色の帯見出しの下に Step カードを縦に並べ、最後に応募の CTA を置く 7. **レシートの注意事項**（無効な応募を防ぐ）: レシートの図に番号で注釈を入れ、有効例と無効例を ○× の図で並べる 8. **規約・サブ導線**（郵送での応募と規約を案内する）: 灰色の地に黒茶のピル型ボタンを置き、規約はスクロールする枠に収める 9. **企画 02・03**（数量限定グッズと店内放送を紹介する）: ピンクのバナーに続けて、スライダーのカードやステージ上のキャラのイラストを置く 10. **企画 04：SNS キャンペーン**（フォローとリポストによる応募を促す）: 黒いネオン調の告知画像を置き、星柄のクリーム地に賞品と Step カード、SNS ボタンを並べる 11. **よくある質問**（疑問を解消する）: 白地に Q アイコンつきの灰色アコーディオンを縦に並べる 12. **フッター**（共有、関連サイト、問い合わせ先を案内する）: 星柄の灰色地に SNS アイコン、ピンクと赤のリンクボタン、問い合わせ先、お礼を言うキャラを置く ## Imagery - キャラクターはアニメ調の全身絵と 2 頭身のチビ絵の両方を用意する。 - 背景には斜めの筆記体ロゴと星のアウトラインを薄く敷き詰める。 - ステージのトラス、スポットライト、色つきの丸い照明で舞台を描く。 - 賞品は白地の切り抜き写真にし、BIG などの丸いバッジを添える。 - 手順の説明はグレーと水色のシンプルなイラストで描く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でもコンテンツは中央の約 420px の列に固定し、SP の見た目をそのまま保つ。 - PC の左右の余白には、キャラクターの全身絵と星柄の背景を縦に繰り返す。 - SP では背景の装飾をなくし、列を画面幅の約 92% に広げる。 - 目次カードは SP でも 2 列のままにする。 ## 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-d4b308bc`（元 LP の URL から採番） - **元 LP**: https://alinamin-oshinoko2024.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。