--- version: alpha name: Idol Oshikatsu Snack Campaign LP description: 菓子を擬人化したアイドルキャラで推し活の世界観を作るプレゼントキャンペーンLP。こげ茶の期間帯、白地のメンバー紹介、星空ブルーの賞品パート、生成りクリームの応募方法パートでセクションごとに地の色を切り替える。虹色グラデや紙吹雪、ネオンの光で華やかにしつつ、本文は太いゴシックで読みやすくしている。 colors: primary: '#3E1C1A' background: '#FEFEFE' background-alt: '#FFF0C5' dark-section: '#2440AD' secondary: '#2A41B1' on-dark: '#FFFFFF' cta: '#E8204E' on-cta: '#FFFFFF' surface: '#FFF2C9' text: '#0B0B0B' accent-1: '#C0304A' accent-2: '#F4D402' accent-3: '#1555A3' line: '#4A2A20' cta-accessible: '#E71948' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Rampart One fontSize: 30px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' period-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 48px member-color-tag: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 36px color-ribbon-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 40px pill-section-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 500px cookie-badge: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 70px button-detail: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 280px ng-example: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 300px --- # DESIGN.md — こげ茶×星空ブルーのアイドル風菓子キャンペーンLP（Idol Oshikatsu Snack Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 推し活・アイドルステージ・メンバーカラー・星空ネオン・紙吹雪・クッキー質感 - **地の質感**: ベタ塗りの面に、虹色グラデ帯・紙吹雪・星のきらめき・ネオンの外光を重ねる。応募方法パートだけは手描き線のアイコンで素朴にまとめる - **形**: 角丸の白カード、ピル型の見出しラベル、斜めに傾いた帯見出し、波形のセクション境界 - **温度感**: 暖色のこげ茶・クリームと寒色の濃紺ブルーを交互に置く。全体としてはにぎやかで温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3E1C1A` | ブランドのこげ茶（期間帯・詳細ボタン） | 6% | 推定 | | `background` | `#FEFEFE` | 基本の白地 | 40% | 画素の実測 | | `background-alt` | `#FFF0C5` | 応募方法・ゲームパートの生成りクリーム地 | 10% | 画素の主要色に補正 | | `dark-section` | `#2440AD` | 賞品パートの星空ブルー地 | 10% | 画素の主要色に補正 | | `secondary` | `#2A41B1` | 問い合わせパートの青紫地 | 5% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃色地に置く白文字 | 1% | 画素の主要色に補正 | | `cta` | `#E8204E` | ゲーム開始ボタンのマゼンタ赤 | 0% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `surface` | `#FFF2C9` | 手順カードの濃いクリーム面 | 3% | 画素の実測 | | `text` | `#0B0B0B` | 本文の黒 | 2% | 画素の実測 | | `accent-1` | `#C0304A` | メンバーカラーの赤 | 2% | 推定 | | `accent-2` | `#F4D402` | メンバーカラーの黄 | 3% | 画素の実測 | | `accent-3` | `#1555A3` | メンバーカラーの青 | 3% | 画素の主要色に補正 | | `line` | `#4A2A20` | 応募方法の枠線・手描きアイコン線 | 0% | 推定 | | `cta-accessible` | `#E71948` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地の色を切り替える。順番はこげ茶→白→星空ブルー→白→クリーム→ブルー - メンバーごとに赤・茶・黄・青の固有色を1色決め、その色だけで帯見出し・背景パネル・透かし文字を塗る - ゲーム開始など行動を促すボタンだけにマゼンタ赤を使う。ほかの詳細ボタンはこげ茶のピル型にする - 星空ブルーの地では白カードに虹色ネオンの外光を付けて浮かせる - 大見出しのラベルには虹色グラデの縁取りを付けて、祝祭感を統一する - 注意書きは黒の小さい文字にし、色は増やさない - `button-primary` は文字 `#FFFFFF` × 背景 `#E8204E` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E71948`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン名・賞品訴求の極太ロゴ見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.0em | | `headline-lg` | 期間の日付など大きな数字 | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.02em | | `headline-md` | メンバーカラーの帯に白抜きで載せるキャッチ | ゴシック | Noto Sans JP | 700 | 21px | 1.6 | 0.06em | | `headline-sm` | 手順の説明や賞品名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.5 | 0.04em | | `body-lg` | キャラクター紹介の本文 | ゴシック | Noto Sans JP | 700 | 16px | 1.8 | 0.04em | | `note` | 賞品仕様・注意事項・規約 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `accent` | STEP番号などのレトロな飾り文字 | 装飾・ディスプレイ | Rampart One | 400 | 30px | 1.1 | 0.0em | | `label-button` | ボタンの文字・ピル型ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.08em | - 本文も太字（700）で組み、ポップなイラストに負けないようにする - キャラ紹介の本文は1行15〜18字で改行し、左揃えにする - 帯見出しは1行ごとに色帯で区切り、2段で積む - 大見出しのロゴ文字には白フチやドロップシャドウを付けて立体感を出す - キャラ名の大きな透かし文字を、本文の背後に薄い色で敷く - 日付は数字を大きくし、曜日は丸囲みにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。賞品カードや商品一覧も縦に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - メンバー紹介は1人ずつ、ロゴ→商品パッケージ→カラー表記→帯見出し→本文→全身イラストの順に縦に並べる - 全身イラストは固有色の角丸パネルからはみ出させて配置する - 賞品は1点につき白カード1枚にまとめ、カード同士は約32px空ける - 応募手順は太い枠の大きなボックスに入れ、各ステップのカードの間に下向きの山形矢印を置く - 注意事項は小さい文字でブロックにまとめ、該当セクションの最後に置く ## Elevation & Depth - 影はほぼ使わない。平面で構成する - 星空パートの白カードには虹色ネオンの外光（glow）を付ける - 見出しのロゴ文字には色付きのドロップシャドウを付ける - 商品パッケージ画像には自然な落ち影を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは切り抜き。角丸の色パネルの上にはみ出させて重ねる - **セクション境界**: 基本は直線で切り替える。クリーム地と青地の境目だけ波形（スカラップ）にする - 見出しラベルはピル型にし、黒の縁取りと虹色の影を付ける - 期間ラベルは濃色地の上に白線のピル枠で置く - メンバーの帯見出しは角丸なしの長方形にする - 応募方法の外枠は角丸12px・太さ2pxの濃茶線にする ## Components - **期間表示帯**（`period-band`）: こげ茶地に白線のピル型ラベルを置き、その下に白の大きな日付を並べる - **メンバーカラー表記**（`member-color-tag`）: 上下を細い罫線で挟み、正方形の色見本と色名を横に並べる - **固有色の帯見出し**（`color-ribbon-heading`）: メンバー固有色のベタ帯に白文字。2段に積む - **ピル型セクション見出し**（`pill-section-label`）: 白地に黒の縁取り、虹色グラデの影をずらして付けたピル型ラベル - **賞品カード**（`prize-card`）: 星空ブルー地の上に置く白い角丸カード。周囲にネオンの光、賞品名はグラデ文字、当選数はクッキー型のバッジで示す - **クッキー型当選数バッジ**（`cookie-badge`）: サブレ型の画像の上に、こげ茶の太字で当選人数を載せる - **詳細ボタン**（`button-detail`）: こげ茶のピル型ボタン。白文字に、白丸の矢印アイコンを添える - **ゲーム開始CTA**（`button-primary`）: マゼンタ赤のピル型ボタン。左端の白丸にSTARTの文字を入れる - **応募ステップカード**（`step-card`）: 濃いクリームの角丸カード。左にレトロ書体のSTEP番号、右に説明文と線画アイコンを置く - **NG例グリッド**（`ng-example`）: 太い黒の×印と、グレーの線画レシートを2列で並べる ## Do's and Don'ts **Do** - 地の色はセクション単位で大胆に切り替え、パートの区切りを明確にする - キャラクターごとに固有色を決め、帯・パネル・透かし文字で一貫して使う - 紙吹雪・星のきらめき・虹色グラデを要所に散らし、ライブ会場らしい華やかさを出す - 応募方法はクリーム地と線画アイコンで落ち着かせ、読みやすくする - 注意書きや規約はスクロールできる枠に収める **Don't** - 本文を細いウェイトや明朝体で組まない - メンバー固有色を別のメンバーの要素に流用しない - 星空パートのカードを透過させて文字を読みにくくしない - CTAのマゼンタ赤を装飾に多用しない - 応募手順に派手なグラデを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンの世界観と2つの参加方法を伝える）: ステージ上に4体のキャラを並べた横長のキービジュアル。キャンペーン名はグラデのロゴ、下に賞品とゲームを紹介する2枚のカードを置く 2. **期間表示**（レシートの有効期間と応募期間を示す）: こげ茶の帯。ピル型ラベルの下に大きな白の日付を置く 3. **新メンバー告知**（新しい味の追加をニュースとして伝える）: 斜めの虹色グラデ帯、NEWSラベル、手書き風の大見出し、紙吹雪で構成する 4. **新メンバー紹介**（新しい味のキャラと商品を紹介する）: ロゴ、パッケージ、カラー表記、帯見出し、本文、全身イラストの順に並べ、イラストにはセリフ帯を重ねる 5. **メンバー紹介**（既存の3つの味をキャラとして紹介する）: 同じ型を繰り返し、各メンバーの固有色パネルに全身イラストを載せる 6. **賞品紹介**（当選数と推し活グッズを訴求する）: 星空ブルー地にネオンのロゴ見出しを置き、白いネオンカードを3枚縦に並べる 7. **対象商品**（応募条件と対象商品を示す）: 白地に商品画像、商品名、こげ茶の詳細ボタンを並べ、最後に注意書きを置く 8. **応募方法**（3ステップで応募の流れを説明する）: 波形の境界から始まるクリーム地。太枠のボックスの中にステップカードと山形矢印を並べる 9. **NGレシート例**（無効になる応募を防ぐ）: 破線で区切り、×印付きのレシート線画を2列のグリッドで並べる 10. **応募規約**（規約全文を掲載する）: 角丸の枠の中で規約をスクロール表示する 11. **ゲーム紹介**（特設ゲームへ誘導する）: クリーム地にクッキーを散らす。ハート型のロゴ、吹き出し、スマホ画面のモック、カード扇形の画像、マゼンタのCTAを置く 12. **お問い合わせ**（事務局の連絡先を示す）: 波形の境界から青紫地に切り替え、白の大きな電話番号と小さな注意書きを置く 13. **フッター**（関連コンテンツへの誘導とコピーライト）: 白地にバナーを置き、ページトップへ戻るボタンはクッキー型にする ## Imagery - 商品を擬人化したキャラは、アニメ調の全身イラストでスーツ・帽子・マイクを持たせる - 背景はライブステージ、スポットライト、星空、きらめきの粒で作る - 紙吹雪は虹色の短冊を斜めに散らす - 応募手順のアイコンは濃茶1色、太さ一定の線画にする - 商品パッケージは正面の切り抜き画像を使う - クッキーの実写切り抜きを、背景の装飾やボタンに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せで、コンテンツ幅は約960px - メンバー紹介はイラストとテキストを左右2カラムにし、メンバーごとに左右を入れ替える - 期間表示はラベルと日付を1行に横並びにする - 対象商品は2列のグリッドにする - 応募ステップは3枚を横に並べ、横向きの矢印でつなぐ - NGレシート例は4列にする ## 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-d037f054`（元 LP の URL から採番） - **元 LP**: https://www.coconut-sable.jp/oshi60/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。