--- version: alpha name: Bold Yellow Red Pop Restaurant Campaign LP description: 一面のビビッドな黄色地に赤の極太欧文見出しと斜めの赤帯を重ねた、元気でポップなファミレス向けキャンペーンLP。人物の線画イラストを並べ、白カードと赤ラベルで期間・条件・景品を整理する。 colors: background: '#FEEB02' primary: '#E70012' surface: '#FFFFFF' text: '#34322E' text-body: '#6B5A3A' cta: '#FFFFFF' on-cta: '#C31D00' secondary: '#FED302' accent-1: '#F9D821' accent-2: '#F79806' dark-section: '#4D4D4D' on-dark: '#FCFBFE' background-alt: '#FFFFFF' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 38px fontWeight: 900 lineHeight: 1.15 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Montserrat fontSize: 28px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 40px button-sub: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px label-pill: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px diagonal-band: backgroundColor: '{colors.primary}' height: 24px file-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 50px prize-row: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 130px coming-soon-panel: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' height: 420px --- # DESIGN.md — 黄×赤ポップな線画イラストの飲食キャンペーンLP（Bold Yellow Red Pop Restaurant Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: ビビッドイエロー・赤の極太欧文・斜め赤帯・線画人物イラスト・ドット網点・コミック吹き出し - **地の質感**: ベタ塗りのフラットな黄色地。見出し文字に赤ドット網点の影、イラストは黒線＋フラット彩色。 - **形**: 斜めに走る赤帯でセクションを区切り、白カードは黒細枠の角丸。ラベルとボタンはピル型。 - **温度感**: 暖色一色で明るく賑やか。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEEB02` | ページ全体の黄色地 | 47% | 画素の実測 | | `primary` | `#E70012` | 見出し・斜め帯・ラベルの赤 | 5% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード・投稿枠 | 14% | 画素の実測 | | `text` | `#34322E` | 見出し和文・カード枠線の濃色 | 2% | 画素の主要色に補正 | | `text-body` | `#6B5A3A` | 黄色地の本文（茶系グレー） | 2% | 推定 | | `cta` | `#FFFFFF` | 主CTAボタン地（白＋赤枠） | 0% | 画素の主要色に補正 | | `on-cta` | `#C31D00` | 主CTAボタン文字 | 0% | 画素の実測 | | `secondary` | `#FED302` | サブナビボタンの濃黄 | 0% | 画素の実測 | | `accent-1` | `#F9D821` | 吹き出し円の山吹色 | 1% | 画素の主要色に補正 | | `accent-2` | `#F79806` | PC背景装飾のオレンジ帯 | 2% | 画素の実測 | | `dark-section` | `#4D4D4D` | フッター濃グレー | 9% | 画素の実測 | | `on-dark` | `#FCFBFE` | フッター文字 | 1% | 画素の主要色に補正 | | `background-alt` | `#FFFFFF` | フッター前のライトグレー帯 | 3% | 画素の実測 | - 地はほぼ全面を黄色一色で通し、セクションは色ではなく斜め赤帯で区切る。 - 赤は欧文見出し・期間ラベル・強調文字・帯に集中させる。 - 白はカードとCTAボタンにのみ使い、黄色地から浮かせる。 - 本文は黒ではなく茶系グレーで黄色地に馴染ませる。 - 強調したい条件文は赤文字に切り替える。 - フッターのみ濃グレー地で締める。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.0 | 0.02em | | `headline-lg` | FVの和文タイトル（網点影付き） | 装飾・ディスプレイ | Dela Gothic One | 900 | 38px | 1.15 | 0.0em | | `headline-md` | 中見出し（赤和文） | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.4 | 0.03em | | `headline-sm` | カード内の小見出し・期間 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.0em | | `accent` | 日付の太い斜体数字 | 欧文サンセリフ | Montserrat | 900 | 28px | 1.0 | -0.02em | | `label-button` | ボタン・ラベル文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.04em | - 欧文見出しは極太大文字で赤、2行に折って中央または左揃え。 - 和文タイトルは黒文字に赤ドット網点の影を落とす。 - 日付は太い斜体数字と小さな曜日欧文を組み合わせる。 - 手書き風の筆文字は景品訴求の吹き出し内だけに限定。 - 本文は小さめで行間広く、強調は赤文字。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は本文と補足を 2 カラムに分割。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - セクション間に斜めの赤帯を挟む。 - 情報ブロックは赤ピルラベル→見出し→本文→注釈の順。 - 景品リストは赤い点線で区切り、右に商品写真を置く。 - イラストの人物は横一列に並べて見せる。 - CTAはほぼ全幅のピル型を中央配置。 ## Elevation & Depth - 影はほぼ使わずフラット。 - 白カードは濃色細線の枠で立たせる。 - 文字の立体感は網点のオフセット影で表現。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 料理は円形切り抜き、イラストは背景透過、街の絵は大きな円形マスク。 - **セクション境界**: 左上がり／右下がりの斜め赤帯 - カードは角丸12〜16pxで黒または赤の2px枠。 - ラベル・ボタンはすべてピル型。 - 吹き出しは角丸四角＋しっぽ、または円形。 - アイコン人物は円形フレームに赤枠。 ## Components - **主CTAボタン**（`button-primary`）: 白地に赤2px枠と赤文字のピル型、全幅に近い。 - **サブナビボタン**（`button-sub`）: 濃黄ベタのピル、黒文字で横並び2つ。 - **項目ラベル**（`label-pill`）: 赤ベタ白文字の小ピルで期間・条件・景品を見出し化。 - **斜め赤帯**（`diagonal-band`）: 約5度傾けた太い赤帯でセクションを区切る。 - **タイプ紹介カード**（`file-card`）: 白地黒枠の角丸カード。上に円形人物アイコンのタブ列、赤欧文小見出しと説明。 - **吹き出し**（`speech-bubble`）: 白地黒枠の角丸吹き出し、または黄円に太線の景品訴求。 - **景品リスト行**（`prize-row`）: 赤のLV表記＋番号付き景品名と当選数、右に商品写真、赤点線区切り。 - **準備中パネル**（`coming-soon-panel`）: 白い縦長パネルに斜めの赤極太欧文。 ## Do's and Don'ts **Do** - 黄色地を全面に敷き、赤と黒線画だけで構成する。 - 見出しは極太欧文の赤で大きく見せる。 - セクション境界は斜めの赤帯で動きを出す。 - 期間や条件は赤ピルラベルで整理する。 - 人物イラストを多数並べて親しみを出す。 **Don't** - グラデーションや写真背景を本文エリアに使わない。 - 青や緑など寒色を差し色にしない。 - 細い明朝体や上品な書体を使わない。 - ドロップシャドウを多用しない。 - 黄色地の上に黄色ボタンを無枠で置かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と期間を示す）: 網点影の和文タイトル、吹き出し、人物イラスト、斜体の日付、下に赤帯。 2. **投稿ピックアップ**（話題の投稿を見せる）: 赤欧文見出しと白い縦長パネル。 3. **概要**（企画の趣旨を説明）: 赤欧文見出し、本文、赤点の箇条書きでシーンを6つ。 4. **定義説明**（対象となる人を説明）: ロゴ風タイトル、赤和文見出し、赤帯の上に人物を並べる。 5. **タイプ紹介**（タイプ別に提案）: 円形アイコンのタブ付き白カード、おすすめ料理を円形写真で。 6. **プレゼント企画**（特典と条件を伝える）: 欧文大見出し、黄円の吹き出し、ラベル付きの期間・条件、白CTA。 7. **スタンプ企画**（抽選企画への参加を促す）: 地図イラストにピン、説明文、CTA、2列の期間表、LV別景品リスト。 8. **SNS企画**（フォローと投稿を促す）: 赤枠の白カードに欧文見出し、人物列、開始日。 9. **回遊導線**（関連ページへ誘導）: 白地に濃黄ピルボタン2つ。 10. **アプリ訴求・フッター**（アプリと企業情報）: ぼかし写真帯にスマホとストアバッジ、濃グレーのリンク一覧。 ## Imagery - 黒の均一な線とフラット彩色で描いた全身人物イラスト。 - 服装は黄・赤・ピンク・グレーで地色と調和させる。 - 料理は真上から撮った写真を白皿ごと円形・透過で配置。 - 街の群衆を細密に描いた白黒〜黄のイラストを円形マスクで。 - 地図は黄色地に白い道路線、赤いピンを立てる。 - 景品は背景透過の物撮り写真を少し傾けて置く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央寄せの約1000px幅にして、FVはイラストを左右に分けて置く。 - PCでは概要と定義説明、期間と景品を2カラムにする。 - PCでは白パネルの背後にオレンジの帯を重ねて装飾する。 - 斜め赤帯はPCでも全幅で残す。 - SPは全ブロックを縦積みにし、カードの左右余白は約6%。 ## 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-afe7b606`（元 LP の URL から採番） - **元 LP**: https://www.dennys.jp/campaign/solodeni/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。