DESIGN.md — 黄×赤ポップな線画イラストの飲食キャンペーンLP（Bold Yellow Red Pop Restaurant Campaign LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: ビビッドイエロー・赤の極太欧文・斜め赤帯・線画人物イラスト・ドット網点・コミック吹き出し
• 地の質感: ベタ塗りのフラットな黄色地。見出し文字に赤ドット網点の影、イラストは黒線＋フラット彩色。
• 形: 斜めに走る赤帯でセクションを区切り、白カードは黒細枠の角丸。ラベルとボタンはピル型。
• 温度感: 暖色一色で明るく賑やか。

Colors

• 地はほぼ全面を黄色一色で通し、セクションは色ではなく斜め赤帯で区切る。
• 赤は欧文見出し・期間ラベル・強調文字・帯に集中させる。
• 白はカードとCTAボタンにのみ使い、黄色地から浮かせる。
• 本文は黒ではなく茶系グレーで黄色地に馴染ませる。
• 強調したい条件文は赤文字に切り替える。
• フッターのみ濃グレー地で締める。

Typography

• 欧文見出しは極太大文字で赤、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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。