DESIGN.md — 臙脂×生成りダマスク柄のアニメコラボ企画 LP（Retro Cafe Damask Collaboration Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: レトロ、上品・高級、情報量多め・訴求型
• キーワード: ダマスク柄・臙脂・生成り・装飾フレーム・メダリオン・レトロ喫茶
• 地の質感: 壁紙のような細かいダマスク柄。ベタ塗りは避け、柄の上に生成りのパネルを載せる。
• 形: 曲線の装飾枠付き見出し、円形メダリオン、角丸の小パネル、ピル型ボタン。
• 温度感: 暖色寄り。赤茶と焦げ茶で落ち着いた温かみ。

Colors

• 地は臙脂ダマスク柄を基本にし、序盤のブロックだけ焦げ茶柄に切り替える。
• ナビ部分は生成りの柄地にして、上部ヘッダーと区別する。
• 見出し枠・情報パネル・メダリオンは生成りやクリームで作り、柄地から浮かせる。
• 柄地の上の本文は白の太字にする。
• ボタンはくすみローズか深い赤茶のピル型にする。鮮やかな原色は使わない。
• 注意書きだけ赤字にし、生成りの箱に入れる。
• button-primary は文字 #FDF7EA × 背景 #BA6C6B のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B05756、4.53:1）を使う。
• emphasis-box は文字 #FDF7EA × 背景 #B96A69 のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#B05756、4.53:1）を使う。

Typography

• 大見出しは明朝体にし、一部の語だけ大きくして緩急をつける。
• 本文と注釈はゴシック体で中央揃えにする。
• 期間表示は見出しのすぐ下に置き、金茶の罫線で挟む。
• 強調したい一文はローズ色の箱に白抜きで入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューだけ 2 列ボタン
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 全要素を中央揃えにする。
• 各セクションは「装飾枠見出し→期間→説明→メダリオン→QR パネル→注意事項ボタン」の順で組む。
• QR パネルは横長のカードにし、左にボタンと文、右に QR を置く。
• 景品リストは生成りの額縁パネルの中に、罫線で区切って並べる。

Elevation & Depth

• 影はほぼ使わず、柄地と生成り面の明るさの差で立体感を出す。
• メダリオンは二重の円枠で縁取る。
• QR パネルにはごく薄い影を付けてもよい。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 特典写真は円形のメダリオンに入れ、複数の缶バッジを三角形に並べる。
• セクション境界: ヘッダー下は生成りのスカラップ（レース）縁。ほかは柄地の色を直線で切り替える。
• 見出しはアンティーク調の曲線フレームの中に入れる。
• メニューボタンは角丸の小さい赤茶ボタンで、細い内枠を付ける。
• 番号は斜体のくすみローズ円にする。

Components

• 装飾枠見出し（ornate-heading）: 生成りの曲線フレームに、明朝の大見出しと小さなリードを入れる。
• 期間表示（period-bar）: 見出しの下に置く。白文字の日付を金茶の上下罫線で挟む。
• メニューボタン（menu-button）: 生成り地に置く赤茶の角丸ボタン。白明朝文字と細い内枠を付ける。
• 特典メダリオン（medallion）: クリームの二重円枠に特典画像を入れる。上辺にリボン型ラベルを載せる。
• QR 参加パネル（qr-panel）: 生成りの角丸カード。左にローズのピル見出しと説明、右に QR を置く。
• リンクボタン（button-primary）: ローズまたは深い赤茶のピル型。右端に＋アイコンを付ける。
• 注意事項ボタン（note-chip）: 白の小さなピル型に黒い＋丸アイコンを付ける。
• 強調ボックス（emphasis-box）: ローズ色の箱に、白抜きで 2 行の強調文を入れる。
• 番号付きスポット一覧（spot-list）: 地図の横に置く。生成りの帯に番号円と名称、右端に＋を付ける。

Do's and Don'ts

Do - 地には必ず細かいダマスク柄を敷く。 - 見出しは毎回同じ装飾フレームで統一する。 - 特典は円形メダリオンに入れ、※注釈を下に添える。 - 色は臙脂・焦げ茶・生成り・くすみローズの範囲に収める。 - 参加導線は QR パネルとピル型ボタンで繰り返し置く。

Don't - 柄のない単色ベタの地にしない。 - ゴシック体の太い見出しやポップな原色を使わない。 - 角張った四角いボタンを使わない。 - 強い影やグラデーションボタンを使わない。 - 写真を四角いまま大きく貼らない（最後の施設写真スライダーを除く）。

Page Structure

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

1. ファーストビュー（企画名と期間を伝える）: 左は臙脂柄地に生成りの額縁ロゴパネルと期間、右はキャラクターのキービジュアル。下端をレース縁で終える。
2. メニュー（コンテンツ一覧へ誘導する）: 生成り柄地にロゴと筆記体の見出しを置き、カテゴリ名の下に赤茶の角丸ボタンを 2 列で並べる。
3. 限定コンテンツ導入（エリア区分を示す）: 焦げ茶柄地に、制服姿のキャラクターとリボン型の大見出しを置く。
4. クイズ企画（参加方法を伝える）: 装飾枠見出し、期間、白文字の説明、強調ボックス、QR パネル、注意事項ボタンの順に並べる。
5. 乗車特典（もらえる特典を見せる）: 条件と特典を吹き出し風に示し、メダリオン 2 つを横に並べて、下に赤茶のボタンを置く。
6. スタンプラリー（周遊を促す）: 缶バッジのメダリオン、地図と番号付きスポット一覧、QR パネルを置き、最後に景品リストの額縁パネルを入れる。
7. AR フォトフレーム（撮影体験を案内する）: スマホのモックをメダリオンに入れ、下に QR パネルを置く。
8. スイーツめぐり（店舗との連携特典を伝える）: コースターのメダリオンを 2 つ縦に並べ、店舗一覧のボタンと赤字の注意事項ボックスを置く。
9. モデル地マップ配布（配布物と配布場所を伝える）: 冊子をメダリオンで見せ、下に配布場所を箇条書きで並べる。
10. 市内装飾（現地の装飾を見せる）: 角丸の写真カードを横スライダーで並べ、白いキャプション帯と丸い矢印ボタンを付ける。

Imagery

• キャラクターはアニメ絵の切り抜きで、見出しの脇に添える。
• 特典グッズは正面から撮った物撮りを、円形に切り抜く。
• 洋菓子や紅茶などのモチーフを散らし、喫茶店らしさを出す。
• 地図は平面的なイラストで、赤茶のピンと番号を付ける。
• 装飾は唐草・ダマスク・レースなど、ヴィクトリア調のモチーフを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムで、FV はビジュアルを上、ロゴパネルを下に縦積みする。
• メニューボタンは SP でも 2 列を保ち、幅は 48% ずつにする。
• 乗車特典のメダリオン 2 つは、SP では縦に並べる。
• 地図とスポット一覧は SP では縦積みにする。
• QR パネルは SP では QR を縮小するか、タップできるボタンに置き換える。
• PC は中央 680px 程度の幅に収め、左右も柄地で埋める。

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