DESIGN.md — 朱赤×クリームの80年代レトロコラボLP（Retro 80s Burger Collaboration LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 80年代・ハンバーガーショップ・朱赤・クリーム・クラフト紙・ギンガムチェック
• 地の質感: しわのある紙袋風クラフト柄、ロゴを散らした包み紙のパターン、ややざらついた紙の質感
• 形: 角丸の小さいクリーム色カード、ピル型の朱赤ボタン、線で囲んだオプション枠
• 温度感: 暖色だけでまとめた、温かく賑やかな雰囲気

Colors

• 地はページ全体を朱赤で塗り、中央カラムにクリームとクラフトを交互に置く
• クリーム地では見出し・本文・線をすべて赤系で揃え、黒文字は使わない
• メニューの切り替えは黄色地・濃い赤地のフルブリード面で区切る
• 朱赤地の文字は白かクリームにする
• ボタンは朱赤のピル型と白文字に統一する
• page は文字 #DA563C × 背景 #F9F4D2 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#C74026、4.51:1）を使う。
• button-pill は文字 #FFFFFF × 背景 #E55037 のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC381D、4.54:1）を使う。
• photo-grid は文字 #FFF6EC × 背景 #AE8A6F のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#8E6A50、4.54:1）を使う。
• info-card は文字 #DA563C × 背景 #FEFDFC のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#C74026、4.58:1）を使う。
• menu-row は文字 #DA563C × 背景 #F9F4D2 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#C74026、4.51:1）を使う。
• option-box は文字 #DA563C × 背景 #F9F4D2 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#C74026、4.51:1）を使う。
• campaign-card は文字 #DA563C × 背景 #F9F4D2 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#C74026、4.51:1）を使う。
• shop-list は文字 #FFF6EC × 背景 #E6563C のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D4371B、4.5:1）を使う。

Typography

• 見出しは欧文のスラブセリフかコンデンスの太字にし、その下に日本語の小さな訳語を添える
• 番号付き見出し（01. 02.）でセクションを区切る
• 本文はほぼ中央揃えで、短く改行する
• 価格は欧文の太字で大きく、税込は小さく添える
• 日本語の大きな見出しは白抜きアウトラインやレトロな丸ゴシックにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央の縦長カラムに内容を集め、両脇は朱赤の地にする
• 商品写真は 2 列で大小を混ぜたグリッドに並べる
• メニュー選択肢は左に写真、右に名前と説明を置く行を縦に並べる
• ソースやフレーバーは線で囲んだ小枠を 3 列に並べる
• キャンペーンや店舗情報は角丸のクリーム色カードを縦に積む

Elevation & Depth

• 影はほぼ使わず、平面的な色面で構成する
• 写真には薄い白フチをつけて、ポラロイド風に貼ったように見せる
• クラフト紙のしわ模様で奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 四角い写真を角丸なしで切り抜き、ハンバーガーは背景を抜いて置く
• セクション境界: 直線で色面を切り替える。紙柄の面と単色面を交互に置く
• ボタンは横長のピル型にする
• 情報カードは角を少しだけ丸くする
• 店舗リストは二重線の四角い枠で囲む
• 選択肢枠は細い赤線と小さな角丸で作る

Components

• 一覧へのピル型ボタン（button-pill）: 朱赤の地に白文字の小さめな横長ピルボタン。各セクションの最後に置く
• 番号付きセクション見出し（section-label）: 欧文の番号見出しの下に、濃い赤の帯ラベルで日本語の副題を入れる
• 商品写真グリッド（photo-grid）: クラフト紙の地の上に、白フチの写真を 2 列で並べる。写真の隅に小さな Check ラベルを置く
• 白い説明カード（info-card）: 左にロゴか写真、右に赤い小見出しと本文を置く白いカード
• メニュー選択行（menu-row）: 背景を抜いたハンバーガー写真と、欧文の名前・日本語名・具材説明を横に並べる。追加料金は赤い丸バッジで示す
• オプション枠（option-box）: 細い赤線で囲んだ小さな枠に選択肢名を 2 行で入れ、3 列に並べる
• 左右に線を引いた見出し（heading-rule）: 小さな筆記体のラベルと大きな欧文見出しを中央に置き、左右に赤い水平線を引く
• キャンペーンカード（campaign-card）: クリーム色の角丸カードに見出し、期間、賞品写真を縦に並べる
• 店舗リスト枠（shop-list）: 朱赤の地に二重の白線枠を引き、白い小ラベルで分類して店名を中央揃えで並べる

Do's and Don'ts

Do - 赤・クリーム・黄・クラフト色の暖色だけで組む - 赤白ギンガムのテーブルクロスやバーガーの包み紙をモチーフにする - 欧文見出しと日本語の訳語をセットで置く - セクションごとに地の質感（紙柄・単色・写真）を変える - 写真は少しフィルムっぽい暖色トーンで揃える

Don't - 寒色やグレーの面を使わない - 細く洗練されたモダンなサンセリフだけで組まない - 大きな影やグラデーションのボタンにしない - 本文を黒文字にしない（赤系か白にする） - 余白を空けすぎてミニマルにしない

Page Structure

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

1. ファーストビュー（コラボのテーマと年代感を一目で伝える）: 朱赤の地に白抜きの欧文ロゴと縦書きの日本語を置き、店舗や商品の写真をコラージュする
2. 商品一覧（第1弾）（コラボのアパレル・雑貨を見せる）: クラフト紙柄の地に番号見出しと帯ラベルを置き、着用写真を 2 列グリッドで並べる
3. ブランド紹介カード（コラボ相手の背景を短く伝える）: 白いカードにロゴと赤い本文、下にピル型ボタンを置く
4. 商品一覧（第2弾）（別ラインの雑貨を見せる）: 同じ紙柄グリッドを繰り返し、注目商品のカードで締める
5. フード紹介（限定メニューを訴求する）: 黄色地・濃い赤地のフルブリード面に大きな欧文の料理名と料理写真、価格を置く
6. カスタムオーダー説明（選べるメニューの組み合わせを示す）: クリーム地に左右線つき見出し、バーガーの行リスト、ソース・フレーバーの枠を並べる
7. プレゼントキャンペーン（SNS参加を促す）: 角丸のクリーム色カードに期間を大きく書き、賞品写真を置く
8. SNS投稿紹介（スタッフの着こなしで親しみを出す）: カード内に正方形写真を 3 列グリッドで並べ、もっと見るボタンを置く
9. 店舗限定企画（店舗イベントを告知する）: カード内に小ラベルと赤文字の中央揃えテキストを積む
10. 店舗リスト・フッター（取扱店とクレジットを示す）: 朱赤の地に二重線の枠で店名リスト、白いピルボタン、SNSの丸アイコンを置く

Imagery

• 暖色寄りのフィルム風写真で、少し褪せた80年代の色味にする
• 赤白ギンガムのテーブルクロス、紙の包み、ドリンクを小物に使う
• モデルは自然体のスナップで、店内やダイナーで撮る
• 料理は真上か斜めからの寄りで、ビビッドな単色背景に置く
• 包み紙のようにロゴを散らした柄やクラフト紙のしわを背景テクスチャにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に SP 幅のカラムを固定し、両脇は朱赤の地にする
• PC の左側の余白にロゴと短い導入文を固定表示する
• PC の右側に目次ナビ（番号つき項目と店舗・通販リンク）を枠つきで固定する
• SP ではカラムを画面幅いっぱいにし、目次はハンバーガーメニューなどに格納する

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