DESIGN.md — 赤×山吹のレトロポスター風飲食キャンペーンLP（Retro Poster Food Chain Campaign LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 力強い・インパクト、レトロ、ポップ・元気、情報量多め・訴求型
• キーワード: レトロポスター・シズル感・極太見出し・紙の質感・山型シルエット・暖色
• 地の質感: ざらついた紙や印刷物のノイズ質感を背景全体に敷く。後半はグレーの和紙風の地に細かい斑点を散らす。
• 形: ギザギザの山型シルエットを重ね、ピル型ボタンには濃色の影をずらして付ける。手順アイコンは角丸の枠で囲む。
• 温度感: 非常に暖かい（赤・山吹・オレンジ・焦げ茶）

Colors

• 前半は紙ベージュから山吹、オレンジへ下に向けて段階的に濃くする
• 訴求・動画ボタンはピンク寄りの赤＋焦げ茶の縁と影で統一する
• 機能的なCTA（予約・検索）は純赤＋白文字で、訴求ボタンとは分ける
• 後半の案内セクションはクリーム→生成り→グレーと淡い地で区切る
• 見出しロゴは赤の塗りに焦げ茶の縁取りとずらし影を付ける

Typography

• キャッチは極太ディスプレイ書体で傾けたり揺らしたりして配置する
• 極太文字には焦げ茶の縁取りとずらし影を必ず付ける
• 本文・ボタンはゴシック太字の小さめサイズでまとめる
• セクション見出しは中央寄せで装飾は付けない
• 注釈は9px程度でまとめて小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ナビは 2×2 グリッド、手順は 3 列横並び
• 本文ブロックの幅: 画面幅の約 95%
• 余白: セクション間 48px、基本単位 8px、カード内 8px（375px 幅換算）
• 動画サムネは画面幅いっぱい近くに置き、直下にピル型の動画ボタンを付ける
• 縦動画は幅約67%で中央に置く
• 手順は3つの角丸カードを矢印でつなぐ
• CTAボタンは幅約60%で中央に置く
• 各案内セクションは見出し→図解→ボタンの順にする

Elevation & Depth

• ピル型ボタンには焦げ茶のずらし影（下に約4px）を付けて立体的に見せる
• CTA赤ボタンの下辺に濃赤の細い影を付ける
• カードや写真にはぼかし影を使わない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。人物と料理は切り抜いて背景の山型シルエットに重ねる
• セクション境界: 前半はギザギザの山型シルエットで色を切り替え、後半は直線で区切る
• 動画ボタンは完全なピル型にして右端に三角の再生アイコンを置く
• ナビボタンはピル型で焦げ茶の細い枠線を付ける
• CTAボタンは角丸4px程度の長方形にする
• 手順カードは角丸約10pxで赤枠、上部に赤いラベル帯を付ける

Components

• ページ内ナビ（nav-pill-grid）: 赤帯の上に焦げ茶枠のピル型ボタンを2×2で並べる
• 動画再生ボタン（video-pill-button）: 日付とタイトルを2行で入れ、右に三角アイコン、焦げ茶のずらし影を付ける
• 極太縁取り見出し（display-logo-text）: 赤の極太文字に焦げ茶の縁取りと影を付け、斜めに配置する
• 手順カード（step-card）: 白地に赤枠、上部の赤帯に番号と短いラベル、中に赤の線画アイコンを入れる
• 手順矢印（step-arrow）: カードの間に焦げ茶の細い矢印を置く
• 主CTA（button-primary）: 純赤の長方形に白太字。アイコン付きにもできる
• 丸バッジ（badge-circle）: 写真の隅に白線の円で品質の数字を入れる
• SNSアイコン列（sns-icons）: 円形の公式色アイコンを4つ横に並べる

Do's and Don'ts

Do - 前半は紙の質感と山型シルエットでレトロポスター感を出す - 料理写真は照りと湯気が出るシズル感の強いものにする - 訴求ボタンはピンク赤・焦げ茶縁・ずらし影で統一する - 後半の案内は淡い地とシンプルな赤アイコンで読みやすくする - 背景は下にスクロールするほど暖色が濃くなるようにする

Don't - 寒色やパステルを主役にしない - 極太見出しを縁取りなしの平板な文字にしない - ぼかし影やガラス風の効果を使わない - 訴求ボタンと機能CTAの色を混ぜない - 長い本文を入れず、短い文と図解で伝える

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（新メニューのインパクトを伝える）: 紙ベージュに山型シルエット、食べる人物と大盛り料理の切り抜き、上下に極太縁取りのキャッチと商品名
2. ページ内ナビ（主要導線への移動）: 赤帯の中にピル型ボタンを2×2で並べる
3. 注釈（イメージ・料金の注意書き）: ベージュ地に小さな文字で2行
4. CM動画一覧（動画で訴求する）: 横長・横長・縦長のサムネを並べ、それぞれにピル型の再生ボタン。背景は山吹からオレンジへ変える
5. WEB予約案内（持ち帰り予約へ誘導）: クリーム地に見出し、3手順カードと矢印、赤CTA
6. モバイルオーダー案内（アプリ注文へ誘導）: 生成り地に同じ手順カードの型と赤CTA
7. 店舗検索（来店を促す）: 紙グレー地に案内文、店舗のアイソメトリックイラスト、アイコン付き赤ボタン2つ
8. SNS（フォローを促す）: 見出しと円形アイコン4つ

Imagery

• 料理はやや上から暖色の照明で撮り、肉の照りやソースのつやを強調する
• 人物は口を大きく開けた笑顔で、料理に手を伸ばす動きのある構図にする
• 背景はざらついた紙テクスチャに、山吹とオレンジの尖った山型を重ねる
• 案内アイコンは赤一色の太い線画（スマホ・レジ・袋）にする
• 店舗はアイソメトリックの手描き風イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもFVは中央寄せのビジュアルで、ナビは1行の横並びテキストリンクにする
• PCの動画サムネは幅約63%で中央に置く
• 手順カードはPCでも3列のまま中央に小さくまとめる
• 店舗検索のボタンはPCでは2つを横並びにする
• 背景の山型シルエットはPCでは全幅に広げる

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 行書くと起動時に読み込まれる。