--- version: alpha name: Salmon Pink Restaurant Campaign LP description: サーモンピンクの地に白い角丸パネルを大きく重ねた、ファミレス系のキーワード応募キャンペーン LP。上部にドラマ風の人物写真と大きな欧文ロゴ、パネル内に賞品・番号付きの応募手順・規約を縦に並べる。赤ピンクのピル見出しと太いゴシックで、親しみやすさと情報の読みやすさを両立している。 colors: primary: '#E65561' background: '#F5B2A2' surface: '#FFFFFF' text: '#080707' text-body: '#5A3A35' tint-1: '#F4B2A4' line: '#DB7E80' secondary: '#CCCCCC' cta: '#FED302' on-cta: '#333333' background-alt: '#FFFFFF' marker: '#F5B2A3' dark-section: '#844139' typography: display: fontFamily: Montserrat fontSize: 44px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Caveat fontSize: 24px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' campaign-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 2400px pill-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px label-tag: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px tint-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 44px step-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px notice-pill: backgroundColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 56px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 64px --- # DESIGN.md — サーモンピンク地の飲食キャンペーン LP（Salmon Pink Restaurant Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: サーモンピンク・白い角丸パネル・ピル見出し・番号ステップ・手書き欧文・キャンペーン規約 - **地の質感**: フラットな単色面。写真は暖色系の店内光。影はほぼない - **形**: 大きな角丸パネル、ピル型ラベル、丸数字、点線の区切り - **温度感**: 暖かい。ピンク〜赤系で甘く親しみやすい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E65561` | 見出し・ピルラベル・番号の赤ピンク | 3% | 画素の実測 | | `background` | `#F5B2A2` | ページ地のサーモンピンク | 30% | 画素の実測 | | `surface` | `#FFFFFF` | コンテンツ用の白パネル | 45% | 画素の実測 | | `text` | `#080707` | 本文・見出しの黒 | 3% | 画素の実測 | | `text-body` | `#5A3A35` | ピンク地上の本文の濃い茶 | 1% | 推定 | | `tint-1` | `#F4B2A4` | パネル内のサブ見出し帯の淡いピンク | 1% | 画素の実測 | | `line` | `#DB7E80` | パネル枠・ロゴ縁取りの赤 | 1% | 画素の実測 | | `secondary` | `#CCCCCC` | 開始日告知の灰色ピル | 2% | 画素の実測 | | `cta` | `#FED302` | トップへ戻るボタンの黄色 | 0% | 画素の実測 | | `on-cta` | `#333333` | 黄色ボタン上の文字 | 0% | 推定 | | `background-alt` | `#FFFFFF` | フッター付近の明るいグレー地 | 4% | 画素の実測 | | `marker` | `#F5B2A3` | テキスト強調の淡ピンクマーカー | 0% | 画素の主要色に補正 | | `dark-section` | `#844139` | アプリ誘導の暖色ボケ写真帯 | 3% | 画素の主要色に補正 | - ページ地はサーモンピンク一色にして、内容はすべて白パネルに載せる - 見出しラベル・番号・強調文字は赤ピンクの1色にまとめる - サブ見出しの帯は淡いピンクで塗り、文字は黒にする - まだ使えない告知は灰色ピルにして、使える CTA と区別する - 黄色はサイト共通ナビのボタンにだけ使う - 規約の小見出しは赤ピンク文字で【】で囲み、本文は黒にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン名の大きな欧文ロゴ（白抜き・赤縁） | 欧文サンセリフ | Montserrat | 800 | 44px | 1.1 | 0.0em | | `headline-lg` | 賞品訴求の赤ピンク太字コピー | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.02em | | `headline-md` | 淡ピンク帯のサブ見出し・手順の文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.02em | | `headline-sm` | ピルラベルの白文字・規約の小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em | | `body-md` | 説明文・応募条件 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `note` | 規約本文・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `accent` | ロゴに添える手書き風の英字・商品の弧状コピー | 欧文スクリプト | Caveat | 400 | 24px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 本文は中央揃え、手順と規約は左揃えにする - 日付の数字は大きくし、曜日は丸括弧で小さく添える - ロゴは白い文字に赤の縁取りとずらした影をつける - 手書き風の英字は欧文ロゴの右下に斜めに重ねる - 規約は11px程度で詰めて組み、小見出しで区切る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。手順だけ左にテキスト、右に端末画像の 2 分割 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは画面の左右に約5%の余白を残して置く - ステップは丸数字を縦の矢印線でつなぐ - ステップ同士は点線で区切る - ラベル付きの情報ブロック（期間・賞品・条件）を24px間隔で縦に並べる - SNS 誘導はパネルの最後に点線で区切って置く ## Elevation & Depth - 影はほぼ使わずフラットにする - ロゴ文字だけにずらしたベタ影をつける - フッターのカードは薄いグレーの1px枠にする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は上の角を丸めた縦長の長方形に。賞品は切り抜き。アプリ画面は端末の上部だけを見せる - **セクション境界**: 大きな角丸の白パネルとピンク地の段差、パネル内は点線 - パネルは右上の角だけを大きく丸め、赤い枠線をつける - ラベルは小さな赤ピンクのピルにする - 番号は赤ピンクの正円に白数字 - 告知帯は横幅いっぱいの太いピル ## Components - **白い角丸パネル**（`campaign-panel`）: ピンク地の上に置く大きな白パネル。赤枠付きで中身をまとめる - **赤ピンクのピル見出し**（`pill-heading`）: 横幅いっぱいのピルに白文字を載せたセクション見出し - **小ラベル**（`label-tag`）: 応募期間や賞品などの項目名をつける小さなピル - **淡ピンク帯の見出し**（`tint-band`）: 角丸なしの淡ピンク帯に黒の太字 - **番号付きの手順**（`step-item`）: 丸数字・説明・端末画面を並べ、縦の矢印でつなぐ - **開始日の告知帯**（`notice-pill`）: 灰色の太いピルに大きな白文字で日付を載せる - **黄色のピルボタン**（`button-primary`）: トップページへ戻る共通ボタン - **アイコン付きリンクカード**（`info-card`）: アレルギー・栄養などのアイコンとラベルを置いた白カード ## Do's and Don'ts **Do** - 地はサーモンピンク、内容は白パネルに分ける - 強調は赤ピンクの1色にまとめる - 手順には丸数字・矢印・端末画面を組み合わせる - 賞品は切り抜き写真にし、手書きのコピーを弧状に添える - 規約は省略せず、小見出しで区切って全文を載せる **Don't** - 寒色を強調色に使わない - パネルに強いドロップシャドウをつけない - 明朝体を使わない - ピンク地に長い規約を直接載せない - ボタン色を何色も混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ドラマ企画を印象づける）: 縦長の人物写真3枚を並べ、下に白抜き・赤縁の大ロゴを重ねる 2. **企画紹介**（企画の概要を伝える）: 白い帯の見出しと、中央揃えの説明文を2段落 3. **キャンペーンタイトル**（応募企画を示す）: 白パネル上部に大ロゴと手書きの英字、淡ピンク帯のサブ見出し 4. **賞品紹介**（賞品の魅力を伝える）: 表と裏の切り抜き写真2点、説明の引き出し線と弧状コピー 5. **応募方法**（手順を案内する）: ピル見出しの下に、丸数字4ステップと端末画面 6. **応募要項**（期間・賞品・条件・発表を示す）: 小ラベルと箇条書きのブロックを縦に並べる 7. **開始告知**（開始日を知らせる）: 灰色の太いピルに大きな日付 8. **応募規約**（法的な条件を示す）: 赤ピンクの【】小見出しと小さな本文 9. **SNS誘導**（公式アカウントへ送客する）: マーカー強調の見出しとロゴ、アカウント一覧 10. **フッター**（サイト回遊とアプリ誘導）: 黄色ボタン、3列のアイコンカード、暖色ボケ写真のアプリ帯 ## Imagery - 人物写真は明るい店内で、食事しながら笑う自然なシーン - 写真の端にはパステルカラーの細い縁を重ねる - 賞品は白背景で切り抜き、少し傾けて2点を重ねる - 手書き風の点線とテキストで引き出し線を描く - アプリ画面は赤茶の端末フレームに入れ、上部だけを見せる - フッターは店内の暖色の照明をぼかした写真 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも中央に約480〜960px幅の1カラムで組む - SP では人物写真3枚を横スクロールか縮小で並べる - 手順の端末画像は SP では幅40%程度にする - フッターのカード3列は SP では縦に積むか、小さい3列にする - 規約の文字は SP でも11px以上を保つ ## 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-164d938b`（元 LP の URL から採番） - **元 LP**: https://www.dennys.jp/campaign/dennysdays/ - **解析に使った画像**: 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/）からご連絡ください。