--- version: alpha name: Pink Illustrated Ribbon Campaign LP description: 淡いピンクの地に焦げ茶の縁取り見出しと白いリボン型カードを重ねた、飲食チェーンの投稿キャンペーンLP。水彩調イラストと赤のピルボタンで、温かく親しみやすい雰囲気を出している。 colors: background: '#FFCED7' surface: '#FFFFFF' primary: '#422817' secondary: '#E25A4C' cta: '#F40101' on-cta: '#FEFAF9' accent-1: '#EB1A16' background-alt: '#FAE3DD' tint-1: '#EFC8C4' text-muted: '#5A4A40' cta-accessible: '#E70101' secondary-accessible: '#DA3423' accent-1-accessible: '#EA1814' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px status-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 84px ribbon-panel: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 560px outlined-heading: textColor: '{colors.surface}' typography: '{typography.headline-lg}' height: 50px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px line-heading: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 32px scroll-terms: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 560px --- # DESIGN.md — ピンク×焦げ茶の手描き風キャンペーンLP（Pink Illustrated Ribbon Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 淡ピンク地・焦げ茶の縁取り文字・リボン型カード・定規目盛り装飾・水彩イラスト・赤ピルボタン - **地の質感**: フラットな単色面に、焦げ茶のずらし影と手描きの目盛り線でアナログ感を足す - **形**: 角丸の白カード、下端がV字に切れ込んだ旗型パネル、ピル型ボタン - **温度感**: 暖色寄りでやさしく甘い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFCED7` | ページ全体の地色 | 40% | 画素の実測 | | `surface` | `#FFFFFF` | カード・旗型パネルの面 | 29% | 画素の実測 | | `primary` | `#422817` | 見出し縁取り・本文・影の焦げ茶 | 5% | 画素の実測 | | `secondary` | `#E25A4C` | 受付終了帯・タイトル文字の朱色 | 3% | 画素の実測 | | `cta` | `#F40101` | 主ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FEFAF9` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#EB1A16` | 本文中の強調赤文字 | 1% | 画素の主要色に補正 | | `background-alt` | `#FAE3DD` | タイトル周りの生成りピンク | 4% | 画素の実測 | | `tint-1` | `#EFC8C4` | カードの淡い影 | 2% | 画素の主要色に補正 | | `text-muted` | `#5A4A40` | 注釈・問い合わせ情報 | 1% | 推定 | | `cta-accessible` | `#E70101` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#DA3423` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#EA1814` | AA を満たす補正値（計算） | | 計算 | - 地は全面淡ピンク、情報は白カードに載せる - 文字・縁取り・影は焦げ茶で統一し黒は使わない - 強調語だけ赤文字にし、1段落で数語までに抑える - 主CTAは鮮やかな赤＋暗赤の下影 - 朱色の帯はステータス告知1か所だけに使う - `button-primary` は文字 `#FEFAF9` × 背景 `#F40101` のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E70101`、4.6:1）を使う。 - `status-band` は文字 `#FEFAF9` × 背景 `#E25A4C` のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#DA3423`、4.5:1）を使う。 - `prize-card` は文字 `#EB1A16` × 背景 `#FFFFFF` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#EA1814`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのタイトル | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | 白文字＋焦げ茶縁取りのセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 32px | 1.3 | 0.02em | | `headline-md` | 賞名ラベル・数字強調 | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.0em | | `headline-sm` | 罫線付き小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.02em | | `body-md` | 中央揃えの太字本文 | ゴシック | Noto Sans JP | 700 | 15px | 1.75 | 0.03em | | `note` | 規約・注釈 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.0 | 0.04em | - 本文は太字・中央揃え・短い改行で詩のように組む - 大見出しは白文字に焦げ茶の太い縁取りと右下ずらし影 - 数字は周囲より大きくして目立たせる - 規約の文だけ細字の左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム中央揃え - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - カード幅は画面の約85%で中央に置く - 見出し→本文→カード/ボタンの順に縦に積む - 賞ごとのカードの上辺に見出しラベルを重ねる - 長い規約は高さを固定したスクロール枠に入れる ## Elevation & Depth - ぼかしの影は使わない - カード・パネルは焦げ茶か淡ピンクの影を右下に4〜8pxずらして置く - ボタンは暗赤の下影4pxで押せそうな厚みを出す ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: イラストは角丸なしの四角か切り抜きで、カードの端からはみ出させて置く - **セクション境界**: 直線で切り替え。旗型パネルは下端がV字の切れ込み - メッセージパネルの上下の縁に定規の目盛り風の線を入れる - 賞名ラベルは角の丸い焦げ茶の枠で、カードの上に重ねる - ピルボタンは横幅いっぱいに近く取る ## Components - **赤ピルCTA**（`button-primary`）: 赤い面に白太字と右向き矢印、暗赤の下影 - **告知帯**（`status-band`）: 画面幅いっぱいの朱色帯に白文字で受付状況を示す - **旗型メッセージパネル**（`ribbon-panel`）: 白地で上下の縁に目盛り線、下端はV字、焦げ茶のずらし影 - **縁取り見出し**（`outlined-heading`）: 白文字に焦げ茶の縁取りとずらし影を付けた大見出し - **賞品カード**（`prize-card`）: 白の角丸カードに淡ピンクの影。上に焦げ茶枠の賞名ラベル、下隅に賞品画像をはみ出させる - **焦げ茶ピルラベル**（`pill-label`）: 焦げ茶塗りに白文字の小さな区分ラベル - **罫線挟み小見出し**（`line-heading`）: 左右の焦げ茶の横線で挟んだ小見出し。穂の飾りを付ける場合もある - **規約スクロール枠**（`scroll-terms`）: 白い四角の枠を高さ固定にして中で縦スクロールさせ、箇条書きを入れる ## Do's and Don'ts **Do** - 地は淡ピンク1色で通す - 見出しと影は焦げ茶で統一する - 本文は太字の中央揃えで短く改行する - 強調語だけ赤文字にする - カードには平たいずらし影を付ける **Don't** - 黒文字や寒色を使わない - ぼかしの影やグラデーションを多用しない - 角の尖った細いボタンにしない - 写真素材をそのまま使わずイラストで統一する - 赤文字を段落全体に広げない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の世界観とタイトルを伝える）: 4コマ割りの水彩イラストの下に、生成りピンクの地と朱色の太字タイトル 2. **告知帯**（受付状況を知らせる）: 画面幅いっぱいの朱色帯に白文字 3. **お礼メッセージ**（参加者への感謝を伝える）: 目盛り装飾の旗型白パネルに中央揃えの太字本文 4. **結果発表**（入選作品へ案内する）: 縁取り見出し、賞名の白カード、赤ピルボタンを2組 5. **企画趣旨**（キャンペーンの意図を説明する）: 旗型パネルにロゴ風バッジと、赤い強調語を混ぜた本文 6. **キャンペーン概要**（賞品と当選数を伝える）: 大きな縁取り数字・語を本文に混ぜる 7. **特典**（賞ごとの内容を示す）: 焦げ茶ピルラベルの下に賞品カードを3枚並べ、賞品画像をはみ出させる 8. **応募規約**（条件を明示する）: 縁取り見出しと高さ固定のスクロール枠 9. **関連サイトバナー**（特設サイトへ誘導する）: 赤枠でクリーム地の角丸バナーに、きらめき装飾を付けたポップ文字 10. **問い合わせ**（窓口を知らせる）: 縁取り見出しの下に、中央揃えの連絡先と注釈 ## Imagery - 人物が商品を囲んで笑う日常の場面を、水彩風の柔らかいイラストで描く - 線は細い茶色、色は暖色中心の淡い塗り - コマ割り構図で複数の場面を1枚にまとめる - 賞品はカードやスマホのイラストを少し傾けて置く - きらめき・星などの小さな装飾を黄色で散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはFVを横並びにし、左にイラスト、右にタイトル - PCでもコンテンツは中央の約70%幅に収める - 旗型パネルはPCで横長になり、本文の改行を減らす - 賞品カードはPCで横長にし、画像を左右の端に置く - ボタンはPCで幅約300pxに縮める ## 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-562215e1`（元 LP の URL から採番） - **元 LP**: https://www.misterdonut.jp/misdo55th/omoide_cam/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。