--- version: alpha name: Pop Yellow Pink Idol Collaboration Campaign LP description: 黄色とピンクの地に、こげ茶の見出しを重ねた元気なコラボキャンペーンLP。アイドル写真の切り抜き、ドット網点、斜めストライプで賑やかさを出す。賞品カード、STEP手順、FAQアコーディオンで情報をすっきり整理している。 colors: primary: '#6B2701' background: '#FFFFFF' secondary: '#FFE054' background-alt: '#F6CCD6' tint-1: '#EEDFC8' cta: '#EC6B02' on-cta: '#FFF9E7' accent-1: '#0C97C4' accent-2: '#ED9501' accent-3: '#EB5A6E' tint-2: '#FEF4B2' text: '#323541' marker: '#D2040E' text-muted: '#909090' cta-accessible: '#B95402' accent-1-accessible: '#0A7FA5' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 32px fontWeight: 800 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em 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-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px date-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px prize-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 180px step-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 170px section-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 40px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 80px tab-switch: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px oshi-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 330px --- # DESIGN.md — 黄×ピンク×茶のポップな飲食コラボキャンペーンLP（Pop Yellow Pink Idol Collaboration Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: コラボキャンペーン・黄色×ピンク・こげ茶の太字・網点ドット・斜めストライプ・人物切り抜き - **地の質感**: フラットな面に、ハーフトーンのドットと斜めの帯を重ねる - **形**: 角丸の白カード、ピル型CTA、斜めに切ったセクション境界、右下の三角コーナー装飾 - **温度感**: 暖色寄りで明るく、にぎやか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6B2701` | 見出し・帯・日付ラベルのこげ茶 | 6% | 画素の実測 | | `background` | `#FFFFFF` | 白の地・カード面 | 30% | 画素の実測 | | `secondary` | `#FFE054` | 賞品・推し紹介セクションの黄色地 | 10% | 画素の実測 | | `background-alt` | `#F6CCD6` | キャンペーン第1弾・Xキャンペーンのピンク地 | 8% | 画素の実測 | | `tint-1` | `#EEDFC8` | FAQのベージュ地 | 11% | 画素の実測 | | `cta` | `#EC6B02` | 主CTAのオレンジ・ポイント帯 | 4% | 画素の実測 | | `on-cta` | `#FFF9E7` | CTA上の白文字 | 0% | 画素の実測 | | `accent-1` | `#0C97C4` | 賞品名・ラベルの水色 | 2% | 画素の実測 | | `accent-2` | `#ED9501` | 賞ランクバッジのオレンジ丸 | 0% | 画素の実測 | | `accent-3` | `#EB5A6E` | プレゼント2のピンク帯・サブCTA | 1% | 画素の実測 | | `tint-2` | `#FEF4B2` | STEPカードのクリーム地 | 4% | 画素の実測 | | `text` | `#323541` | 本文のほぼ黒 | 3% | 画素の主要色に補正 | | `marker` | `#D2040E` | Qマーク・注意文の赤 | 0% | 画素の実測 | | `text-muted` | `#909090` | FAQ開閉の灰色プラス | 0% | 画素の実測 | | `cta-accessible` | `#B95402` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#0A7FA5` | AA を満たす補正値（計算） | | 計算 | - 地はピンク→黄→ベージュの順でセクションごとに切り替える - 見出しの帯や日付ラベルは、こげ茶ベタに白文字にする - 主CTAはオレンジ、または濃淡ピンクのピル型にする - 賞品の名前と名称ラベルは水色、人数は茶の極太数字にする - 注意事項と当選発表は赤字で目立たせる - 白カードを色地の上に置いて読みやすくする - `button-primary` は文字 `#FFF9E7` × 背景 `#EC6B02` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B95402`、4.61:1）を使う。 - `prize-card` は文字 `#0C97C4` × 背景 `#FFFFFF` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#0A7FA5`、4.57:1）を使う。 - `tab-switch` は文字 `#FFF9E7` × 背景 `#0C97C4` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#0A7FA5`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン名ロゴ風の見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し（白フチ付きの茶文字） | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.2 | 0.0em | | `headline-md` | 賞品名・訴求の太字 | ゴシック | Noto Sans JP | 900 | 22px | 1.35 | 0.02em | | `headline-sm` | 帯見出し・FAQカテゴリ | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `body-md` | 本文・FAQの質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.03em | | `note` | 注意書き | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `accent` | 日付や当選人数の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 32px | 1.0 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em | - 本文もほぼ太字にして元気な印象を出す - 日付は数字を大きく、年と曜日を小さくし、曜日は丸囲みにする - メインの見出しには白い縁取りと影を付け、斜めに傾けてもよい - 小見出しは「＼ ／」で挟む - 英字の小見出しは極太で大きく、和文の見出しの下に添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。動画とプレゼントは 2 列、推し紹介カードは 3 列のグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 白カードは画面の両端に約16pxの余白を取って置く - カード同士の間は約16pxにする - STEPは左に番号の列、右に内容の列を並べる - FAQの項目は白い角丸の行を約20px間隔で縦に並べる - 人物写真をセクション見出しの左右に添える ## Elevation & Depth - 基本はフラットで、影は使わない - 見出し文字は白フチと薄い影で浮かせる - カードは影なしで、背景色との差で区切る ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 人物は背景を切り抜いて上半身を見せる。推し紹介カードは縦長の長方形 - **セクション境界**: 斜めのライン、またはドット網点のグラデーションで切り替える - 賞品カードの右下に、薄ピンクの三角を置いて人数を載せる - ポイント表記は水色の角丸の小さい四角に入れる - ボタンは完全なピル型で、右端に矢印を付ける ## Components - **ピル型CTA**（`button-primary`）: オレンジまたはピンクの横長ピル。中央に白文字、右に矢印 - **期間ラベル**（`date-label`）: こげ茶の角丸ラベルに白文字を入れ、その後に大きな日付を続ける - **賞品カード**（`prize-card`）: 白いカード。左上にオレンジ丸の賞ランク、右上に水色のポイントバッジ、右下にピンク三角と人数 - **STEPカード**（`step-card`）: 左にオレンジ寄りの列でSTEP番号、右はクリーム地。見出しはオレンジのラベル - **茶色の帯見出し**（`section-bar`）: こげ茶の角丸の帯に白文字。右に開閉のマイナス記号や人物写真を添える - **FAQアコーディオン**（`faq-item`）: 白の角丸の行。左に赤いQ、右に灰色の＋ - **タブ切替**（`tab-switch`）: 水色とピンクの2つのタブ。下に水色の線を引く - **人物＋メニューカード**（`oshi-card`）: 斜めストライプの背景に人物写真を載せ、下部に白い枠付きのメニュー情報を重ねる ## Do's and Don'ts **Do** - セクションごとに地色を変えて、情報のまとまりを見せる - 日付と当選人数は極太の大きな数字で見せる - 人物の切り抜き写真を見出しの横に置き、指差しのポーズで視線を誘導する - 注意書きは小さな文字で、まとめて載せる **Don't** - 暗い背景や寒色をベースにしない - 細い明朝体の見出しにしない - 影の強いカードや立体的なボタンにしない - CTAの色にこげ茶を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの告知と期間の提示）: ピンク地に斜めの黄色い帯を敷き、集合写真とロゴ風タイトルを置く。下に期間ラベル 2. **動画紹介**（CM動画への誘導）: ＼／で挟んだ小見出しの下に、サムネイルを2列で並べる 3. **その場でもらえる特典**（来店購入の動機付け）: 人物写真と傾いた見出しを置き、ピンク地に特典写真と条件、ピル型CTA 4. **応募で当たる特典**（ポイント制の抽選の説明）: 黄色地に訴求文を置き、オレンジ帯でポイント対象メニューを白カードで見せる 5. **賞品一覧**（賞品と当選人数の提示）: 黄色地に、A〜Eの賞品カードを縦に並べる 6. **応募方法**（参加の手順を説明）: 白いカードの中に期間の帯とSTEP1〜3を置き、STEP間は▼でつなぐ 7. **注意事項**（規約の明示）: 赤字で当選発表を示し、◎箇条書きの細かい文字で続ける 8. **SNSキャンペーン**（フォローとリポストの促進）: ピンク地に、水色とピンクの見出し帯が付いたプレゼントカードを2列で並べ、オレンジのCTAを置く 9. **推し紹介**（メンバーとメニューの紹介）: 黄色地にタブを置き、人物カードを3列のグリッドで並べる 10. **動画更新告知**（継続して訪問してもらう）: 紺の斜め帯と白カードで、更新予定を見せる 11. **よくある質問**（疑問の解消）: ベージュ地に、茶の帯のカテゴリとFAQアコーディオンを並べる 12. **問い合わせ・フッター**（事務局の案内）: 白いカードにメール窓口を載せる。白地のフッターにロゴ、人物写真、TOPボタン ## Imagery - 人物はユニフォーム姿の切り抜きで、明るく均一なライティングにする - 人物にはスプーンを持つ、指差すなど、親しみやすいポーズをとらせる - 背景にはハーフトーンのドットと、パステルの斜めストライプを入れる - グッズや食品は白背景で正面から撮る - スマホやレシートは水色の線画アイコンで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもSPと同じ1カラムで、幅約640pxの中央寄せにする - PCではヘッダーにナビゲーションを横並びにする - グリッドの列数はPCでもSPと同じ - 左右の余白は背景色をそのまま広げる ## 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-5c8eb37d`（元 LP の URL から採番） - **元 LP**: https://www.ichibanya.co.jp/cp/2025hinatazaka46/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。