--- version: alpha name: Pop Red Sakura Campaign LP description: 生成りの地に鮮やかな赤の丸ゴシック文字と水色の立体ロゴを組み合わせた、菓子ブランドの写真体験キャンペーン LP。桜の花びら、傾けた白い紙片、ポラロイド風写真、破線枠で学生らしいポップさと手作り感を出している。 colors: primary: '#E70012' background: '#F7F0E8' surface: '#FFFFFF' cta: '#E40113' on-cta: '#FFFFFF' text: '#C22431' secondary: '#5FB3C1' accent-1: '#FFD5D6' accent-2: '#94D8EC' line: '#E70012' dark-section: '#E70012' on-dark: '#FFF4F4' text-muted: '#C8C2BE' secondary-accessible: '#367F8C' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.1em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.12em note: fontFamily: Zen Maru Gothic fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-nav: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 80px button-tel: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px button-outline: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px heading-dashed: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px card-step: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 330px photo-polaroid: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 260px box-dashed: textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 180px accordion-faq: textColor: '{colors.primary}' typography: '{typography.body-md}' height: 64px --- # DESIGN.md — 赤×生成りと桜の青春キャンペーン LP（Pop Red Sakura Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 青春・桜の花びら・ポラロイド・傾いた紙片・赤文字・立体ロゴ - **地の質感**: フラットな生成りの地に、白い紙を少し傾けて重ね、薄い影をつけたコラージュ風の質感 - **形**: 角丸カード、わずかに回転した白い紙面、赤い破線枠、ピンクの花びら形 - **温度感**: 暖かく明るい。赤とピンクが主役で、水色がさわやかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E70012` | ブランド赤（見出し・本文・ボタン） | 9% | 画素の実測 | | `background` | `#F7F0E8` | 生成りのページ地 | 45% | 画素の実測 | | `surface` | `#FFFFFF` | 傾けた紙片・STEP カードの白 | 20% | 画素の実測 | | `cta` | `#E40113` | ナビボタン・電話ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#C22431` | 見出し・本文の赤文字 | 2% | 画素の実測 | | `secondary` | `#5FB3C1` | ロゴ・サブ見出しの水色 | 2% | 画素の実測 | | `accent-1` | `#FFD5D6` | 桜の花びら装飾ピンク | 3% | 画素の実測 | | `accent-2` | `#94D8EC` | イラスト背景の空色 | 2% | 画素の実測 | | `line` | `#E70012` | FAQ 区切り線・破線枠 | 0% | 画素の主要色に補正 | | `dark-section` | `#E70012` | 対象商品の赤い帯セクション | 8% | 画素の実測 | | `on-dark` | `#FFF4F4` | 赤帯上の白文字 | 0% | 画素の実測 | | `text-muted` | `#C8C2BE` | STEP 文字の灰色影 | 0% | 推定 | | `secondary-accessible` | `#367F8C` | AA を満たす補正値（計算） | | 計算 | - 地は生成り、要所を白い紙片で切り替える - 文字は本文から見出しまでほぼ全て赤で統一する - 水色はロゴとあそび方見出しなど限られた所だけに使う - 対象商品だけは全面赤帯にして白文字で反転させる - ピンクの花びらを各セクションの境界に散らす - 黒やグレーの本文は使わない - `photo-polaroid` は文字 `#5FB3C1` × 背景 `#FFFFFF` のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#367F8C`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の手書き風キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | 破線で挟んだセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 26px | 1.4 | 0.05em | | `headline-md` | STEP 番号の太い欧文 | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.0 | -0.02em | | `headline-sm` | サブ見出し・アーティスト名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 22px | 1.5 | 0.05em | | `body-lg` | 中央揃えの詩的なリード文 | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 2.1 | 0.1em | | `body-md` | STEP 説明・FAQ 質問 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.9 | 0.12em | | `note` | 注釈・推奨環境 | 丸ゴシック | Zen Maru Gothic | 500 | 11px | 1.7 | 0.05em | | `label-button` | ナビボタン・電話ボタン | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.3 | 0.05em | - 全体を太めの丸ゴシックで統一する - 本文も太字で、字間を広め（0.1em 前後）にとる - リード文は短い行で改行し中央揃えにする - セクション見出しは左右を「---」で挟む - STEP 数字は少し傾け、下に灰色の影文字を重ねる - ロゴ見出しは水色の白縁取りと立体影で表現する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビボタンは 3＋2 のグリッド - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 本文は中央揃え中心、STEP カードの中は左にテキスト・右に図 - STEP カードは縦に積み、間に 40px 前後を空ける - FAQ は細い赤線で区切ったアコーディオンを全幅で並べる - 期間とお問い合わせは画面幅をはみ出す傾いた白紙に載せる - 写真は 2 枚をずらして重ね、矢印でつなぐ ## Elevation & Depth - 傾けた白紙とポラロイドに柔らかい薄い影をつける - STEP カードはほぼ影なしのフラット - ボタンは影なしのベタ塗り - PC の固定サイドボタンにだけ下影をつける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 白枠ポラロイド風で少し回転、または角丸長方形 - **セクション境界**: 白紙を斜めに傾けて重ねる境界と、赤帯の直線切り替え - カードは角丸 20px 前後で、わずかに回転させる - ボタンは角丸 8〜10px の長方形 - 囲み注記は赤い破線の角丸枠にする - 花びらは境界をまたぐ位置に置く ## Components - **ページ内ナビボタン**（`button-nav`）: 赤い角丸ボタン。上にラベル、下に丸囲みの下矢印 - **電話 CTA**（`button-tel`）: 赤い横長の角丸ボタンに白文字 - **外部リンクボタン**（`button-outline`）: 白抜きに赤い細枠と別窓アイコンをつける - **破線挟み見出し**（`heading-dashed`）: 見出しの左右を赤の「---」で挟み、下に短い説明を添える - **STEP カード**（`card-step`）: 少し傾けた白い角丸カード。上に影つき STEP 数字、左に説明、右にイラストか写真 - **ポラロイド写真**（`photo-polaroid`）: 白枠の下に水色の小さなキャプションを入れ、回転させて 2 枚重ねる - **破線注記ボックス**（`box-dashed`）: 赤い破線の角丸枠に、説明や推奨環境を入れる - **Q&A アコーディオン**（`accordion-faq`）: Q の頭文字と赤文字の質問、右端に下向き山形。上下を赤い細線で区切る ## Do's and Don'ts **Do** - 文字色は赤 1 色に絞る - 白紙やカードは 2〜5 度傾けて手作り感を出す - 桜の花びらをセクションの境目に散らす - リード文は短く改行し、中央に積む - 体験の手順は大きな STEP 数字＋イラストで見せる **Don't** - 黒やグレーの本文を使わない - 角ばった明朝や細いゴシックを使わない - ボタンにグラデーションや強い影をつけない - 水色を本文や広い面に使わない - 全要素を水平にそろえて硬い印象にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とキャンペーン名を伝える）: 赤い手書き風キャッチ、斜めに切ったアニメ調イラスト、水色の立体ロゴ 2. **コンセプト文**（体験の情緒的な価値を語る）: 生成り地に赤い太丸ゴシックを中央揃えで詩のように並べる 3. **ビフォーアフター写真**（体験結果をイメージさせる）: ポラロイド 2 枚をずらして重ね、手書き風の矢印と吹き出し文字を添える 4. **キャンペーン期間とナビ**（期間を示し各セクションへ誘導する）: 傾いた白紙の上に期間、赤ボタン 5 つ、破線枠の説明 5. **あそび方**（手順を 4 ステップで説明する）: 水色ロゴ見出しの下に STEP カードを縦に並べる 6. **体験の広がり訴求**（繰り返し遊ぶよう促す）: 赤い見出しと集中線、フラットなカメラのイラスト 7. **タイアップ紹介**（楽曲やアーティストを紹介する）: 角丸写真、名前と枠線ボタン、赤い本文 8. **対象商品**（対象パッケージを明示する）: 全面赤帯に白見出し、商品画像を 3 列グリッドで並べる 9. **注意事項**（規約へ誘導する）: 破線見出しと 1 行のアコーディオン 10. **よくある質問**（疑問を解消する）: 赤線区切りの Q&A アコーディオンと推奨環境の破線ボックス 11. **お問い合わせ**（窓口を示す）: 傾いた白紙に事務局名、赤い電話ボタン、受付時間 ## Imagery - 学生の青春を描くアニメ調イラスト。空と桜を背景に見上げる構図 - 自撮り風の明るい人物写真をポラロイド枠に入れる - 手やスマホ、カメラは太い黒線のフラットイラスト - ピンクの桜花びらを大小に散らす装飾 - 商品パッケージは切り抜きで正面からグリッドに並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP 幅のカラムを左寄せで配置し、左右を赤い破線で囲む - 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-24fe98e7`（元 LP の URL から採番） - **元 LP**: https://cp.pocky.jp/2026spr/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。