DESIGN.md — 紺×砂金のアニメコラボ飲食キャンペーンLP（Navy and Gold Anime Collaboration Point Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、レトロ
• キーワード: 紺の地・砂金色の見出し・飾り枠カード・ポイント帯・アニメ描き下ろし・特典一覧
• 地の質感: フラットな紺地。カードの角に細い金とグレーの飾り枠を入れ、少しファンタジー調にする
• 形: 四角いカードの角に飾り枠。中の白パネルは角丸。ボタンとFAQはピル型
• 温度感: 落ち着いた寒色の地に、暖色の金・黄・クリームを効かせた中間の温度

Colors

• ページの地は全面を紺で通し、セクションは淡色カードで区切る
• 見出しの砂金色は紺地の上だけで使う
• 特典カードは水色、プレゼント系のカードはクリーム色にして内容の種類で分ける
• ポイント数やお得さの数字は黄色の太字で一点だけ強調する
• 警告文だけ赤を使い、ほかには使わない
• ボタンは青のグラデーションに白文字で揃える
• app-banner は文字 #DA2118 × 背景 #F7F3C4 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D52017、4.59:1）を使う。
• date-ribbon は文字 #E0B487 × 背景 #FEFEFE のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A4682A、4.53:1）を使う。

Typography

• セクション見出しは太い手書き風のディスプレイ書体で 2 行までに収め、中央に置く
• 見出しの左右に細い剣のような飾り線を必ず添える
• ポイント数は欧文セリフの大きな数字に、小さな「ポイント」の文字を続ける
• 本文は Noto Sans JP の 14px 前後を基本にする
• 注意事項は■や※を行頭に付けて箇条書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内のグッズ画像は 2〜4 個を横に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 28px（375px 幅換算）
• カードは画面幅の約 90% で中央に置き、間を 50〜70px 空ける
• カードの中は帯→特典名→白パネル→仕様テキストの順に積む
• 白パネルはカード内側に約 30px のマージンを取る
• 参加方法は細い白枠の中に番号ボックスと説明を左右に並べる
• FAQ は白いピル型の行を 12px 間隔で縦に積む

Elevation & Depth

• カードと白パネルは影なしのフラットにする
• 主ボタンだけ外側に淡い光彩を付けて浮かせる
• グッズ画像には薄いドロップシャドウを付けてもよい

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: グッズは切り抜きで並べる。イラストは長方形に収め、FV は角を斜めに落とした八角形の枠に入れる
• セクション境界: 境界の装飾は入れず、紺地の余白とカードの縁だけで区切る
• カードは角丸なしにし、四隅に金とグレーの L 字の飾り枠を置く
• ポイント帯は左上に小さな色付き三角を付けた長方形にする
• 吹き出し型の「その1」ラベルは紺の楕円にしっぽを付ける
• FAQ の行は完全なピル型にし、右端に太い＋を置く

Components

• 飾り線付きセクション見出し（section-title）: 砂金色のディスプレイ書体を中央に置き、左右に剣形の飾り線を添える
• 飾り枠の特典カード（reward-card）: 水色の地の四隅に飾り枠を付けたカード。中にポイント帯と白パネルを入れる
• ポイント帯（point-band）: スレートグレーの帯に、セリフ体の大きな数字と小さな「ポイント」を白で載せる
• 青グラデのピル型ボタン（button-primary）: 白い太字のラベルで、左右に金の小さな飾りを付ける。外側に淡い光彩を付ける
• アプリ参加バナー（app-banner）: 薄い黄色のピル型に、左にアプリアイコン、右に赤い小さなダウンロード帯を置く
• 期間リボン（date-ribbon）: 白い帯の両端を砂金色の矢羽形にし、日付を砂金色で載せる
• 番号付き手順（step-item）: グレーの正方形にセリフ体の数字を入れ、右に白い大きな説明文を置く
• 数量限定バッジ（badge-limited）: 紺の円の縁に白線を入れ、白文字で限定を示す
• FAQ アコーディオン（faq-row）: 白いピル型の行。紺の太字ラベルを置き、右に＋アイコンを付ける
• 注意事項ボックス（notice-box）: 淡いグレーの四角いボックスに、■で始まる箇条書きを詰めて入れる

Do's and Don'ts

Do - 紺の地を全編で通し、明るい要素はカードの中にまとめる - 特典はポイントの少ない順に同じ型のカードで並べる - 各画像の下に、画像はイメージである旨の小さな注記を右寄せで置く - セクション見出しには必ず左右の飾り線を付ける - お得さを伝える一文だけを黄色の特大文字にする

Don't - 地色を白にしない - 見出しを細い標準ゴシックにしない - カードを大きな角丸にしない（角丸は中の白パネルだけ） - 黄色や赤を本文に多用しない - カードに強いドロップシャドウを付けない

Page Structure

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

1. ファーストビュー（コラボであることとキャンペーン名を示す）: 上部に白い帯のロゴ枠、手書き風の白い大見出し、八角形枠のキャライラストを置く
2. 特典一覧ビジュアル（もらえるグッズを一目で見せる）: 飾り枠の水色カードにグッズの切り抜きを集合で配置し、下に白い大きなコピーを 3 行入れる
3. キャンペーン期間（期間と交換期限を伝える）: 砂金色の見出し、矢羽形の日付リボン、注記の順に置き、下向きの三角を 3 つ重ねて次へ誘導する
4. 参加CTAとポイント条件（アプリへ誘導し、ポイントの貯め方を示す）: 黄色いピル型のアプリバナー、提携ポイントのアイコンと説明、黄色の特大コピーの順に置く
5. ポイント別特典（特典ごとの必要ポイントと仕様を示す）: ポイント帯付きの水色カードを縦に繰り返し、白パネルにグッズ画像、下に寸法を書く
6. 参加方法（手順を 3 ステップで説明する）: 細い白枠の中に番号ボックスと大きな白文字の説明を並べ、リンクは黄色の下線にする
7. 注意事項と店舗CTA（細則を伝え、実施店舗の確認へ誘導する）: 淡いグレーのボックスに箇条書きを入れ、青いピル型ボタンを置く
8. プレゼントキャンペーン（追加特典と壁紙の配布を告知する）: クリーム色のカードに吹き出し型の番号ラベルを付け、白パネルにカードや壁紙の画像とダウンロードボタンを置く
9. おすすめの食べ方（メニューを提案し、来店を促す）: 水色カードの白パネルに料理の切り抜き写真と番号付きの説明を入れ、その他メニューへのボタンを置く
10. よくある質問（疑問を解消する）: 砂金色の見出しの下に、白いピル型のアコーディオンを 7 行並べる

Imagery

• キャラクターは厚塗りのアニメ調の描き下ろしで、店舗の制服や食事シーンを描く
• グッズは白背景の切り抜きにし、少し斜めの集合カットで並べる
• SD キャラはデフォルメした頭身の低い絵柄で、かわいさを足す
• 料理写真は真上や斜め上から撮った白抜きの商品カットにする
• 装飾は剣形の飾り線と、カード四隅の L 字の飾り枠に限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は紺地の中央に 375〜480px 幅の SP レイアウトをそのまま置く構成を推奨する
• PC で広げる場合も、カードは最大 640px 程度に抑える
• PC でもグッズ画像は横並びの数だけ増やし、カードの構造は変えない
• FAQ と注意事項は PC でも 1 カラムを保つ

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