DESIGN.md — 臙脂×深緑×紺の中華風アニメコラボ懸賞 LP（Oriental Palace Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: 中華風宮廷・臙脂と深緑・菱形モチーフ・明朝見出し・白カード積層・応募手順の明快さ
• 地の質感: 濃色の面に細かい幾何学地紋（紗綾形風）を薄く重ねる。生成りの面はフラットにする。
• 形: 角丸 8px 前後の白カード、菱形バッジ、立体感のあるピル型ボタン、四隅の雷文飾り
• 温度感: 暖色の臙脂と寒色の深緑・紺を交互に使う。全体は落ち着いた中間の温度。

Colors

• 臙脂・深緑・紺の濃色セクションと生成りセクションを交互に並べる。
• 濃色セクションの中身は必ず白カードに入れて読みやすくする。
• 本文中の重要語は臙脂か深緑の帯（マーカー塗り）に白文字で載せる。
• CTA は赤＝新規、緑＝既存ユーザーのように 2 色で役割を分ける。
• 注意文・当選数の数字は赤文字にする。
• 菱形アイコンは緑・紫・紺など複数色を組み合わせる。
• button-secondary は文字 #FEF6F6 × 背景 #2E8B3A のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2B8136、4.59:1）を使う。

Typography

• 世界観を出す見出しと本文は明朝、手順・注意・ボタンはゴシックにする。
• セクション見出しの下に [ 英字 ] を必ず入れ、字間を広く取る。
• 本文は中央揃えを基本にする。長い物語文だけ左揃えにする。
• 当選数などの数字は太字の赤にする。
• 見出しは字間 0.05〜0.1em で余裕を持たせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧と NG 例は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 濃色セクションでは左右 4% の余白を残して白カードを置き、地紋を見せる。
• セクション頭は 菱形アイコン→見出し→英字サブ見出しの順で中央に積む。
• カード同士の間は 16〜24px あける。
• 景品は 菱形バッジ→名前→当選数→仕様ボックスの順で縦に並べる。
• 手順は Step 番号ごとにカードを分ける。

Elevation & Depth

• 白カードには影を付けない。濃色の地との明暗差だけで浮かせる。
• CTA ボタンは下に濃い色の厚み（4〜6px）を付けて立体的に見せる。
• 商品画像には軽いドロップシャドウを付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いて斜めに配置する。景品も切り抜きで見せる。手順は丸いグレーの円の上に線画イラストを置く。
• セクション境界: 直線で色を切り替える。境界に商品の切り抜きと擬音の手書き文字を重ねてまたがせる。
• バッジ・アイコンは菱形（45°回転の正方形）にする。
• 見出し帯は両端を中華風の菱形飾りで閉じる。
• FAQ の項目は紺のピル型にして右端に＋を付ける。
• 紹介ボックスの四隅に雷文の線飾りを入れる。

Components

• 新規登録 CTA（button-primary）: 赤のピル型で下に濃い赤の厚みを付ける。上段に小さな補足、下段に大きな文言。右端に丸囲みの矢印。
• ログイン CTA（button-secondary）: 主 CTA と同じ形を緑にしたもの。主 CTA の直下に並べる。
• 菱形付きセクション見出し（section-heading）: 4 つの小菱形を組んだアイコン、明朝の見出し、[ 英字 ] サブ見出しを中央に縦積みする。
• コース菱形バッジ（badge-diamond）: 赤・紫・橙の菱形の中に、明朝で数字と単位を白抜きにする。
• Step 番号ラベル（step-label）: 臙脂の細線のピルに Step の欧文、右に臙脂の菱形と白い数字を重ねる。
• 帯マーカー強調（marker-highlight）: 本文中の重要語を深緑・臙脂の矩形帯で塗り、白文字にする。
• 注釈ボックス（note-box）: 灰緑の角丸ボックスに、小さなゴシックで箇条書きの注意事項を入れる。
• FAQ アコーディオン（faq-item）: 紺のピル型の帯に、白の太字で Q. から始まる質問文と右端の＋を置く。
• OK/NG 比較カード（ok-ng-card）: 淡い緑と淡い桃色のボックス。上に OK/NG のピル型ラベルを置き、中に ○ と × のリストを並べる。

Do's and Don'ts

Do - 濃色セクションと生成りセクションを交互に並べ、リズムを作る。 - セクション見出しは必ず 菱形アイコン＋明朝＋[英字] の 3 点セットにする。 - セクション境界に商品の切り抜きと擬音文字を置き、遊びを足す。 - 手順・注意事項はイラストと番号付きリストで具体的に見せる。 - 注釈は灰緑のボックスにまとめ、本文と分ける。

Don't - 蛍光色やビビッドなグラデーションを使わない。 - 濃色面に直接長文を載せない。必ず白カードに入れる。 - 見出しを丸ゴシックにしない。宮廷風の格が崩れる。 - 角丸を大きくしすぎない（カードは 8px 程度まで）。 - CTA の色を 3 色以上に増やさない。

Page Structure

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

1. ファーストビュー（コラボの世界観と期間を伝える）: 中華風の室内背景に、キャラと商品を合成したビジュアルを置く。下端の臙脂帯に期間を 2 列で並べる。
2. ページ内ナビ（各セクションへ飛ばす）: 生成りの地に 2 列のテキストリンクを並べ、縦線で区切る。各リンクに緑の▼を付ける。
3. 物語イントロ（キャンペーンの物語設定を語る）: 二重線で挟んだロゴ風タイトル、緑の明朝リード、行間の広い物語本文の順に置く。
4. キャンペーン概要（参加条件と賞品の要約）: 臙脂の地紋面に白カードを置く。重要語は帯マーカーで強調する。対象商品と賞品の 3 コースも続ける。
5. 参加 CTA（登録とログインへ誘導する）: 薄グレーの帯に、赤と緑の立体ピル型ボタンを縦に並べる。
6. 景品詳細（各コースの賞品を見せる）: 深緑の面に大きな白カードを置く。菱形バッジ、切り抜き画像、仕様の注釈ボックスを順に並べる。
7. 対象商品（対象となる商品を一覧で見せる）: 生成りの地に商品の切り抜きと商品名を 2 列グリッドで並べる。
8. 応募方法（4 ステップで手順を説明する）: 臙脂面に Step ラベル付きの白カードを 4 枚置く。円背景の線画イラストと CTA を添える。
9. 撮影時の注意（無効応募を減らす）: 紺の見出し帯付きカードに、番号付きのレシート図、吹き出し、NG 例グリッド、OK/NG 比較カードを入れる。
10. 応募規約（規約を開閉式で示す）: 生成りの地に、紺の角丸ボタンで展開するアコーディオンを置く。
11. よくある質問（疑問を解消する）: 紺の面に白カードを置き、その中に紺のピル型の質問帯を縦に並べる。
12. 作品紹介（コラボ作品の魅力を伝える）: 深緑のボックスの四隅に雷文飾りを入れる。欧文見出し、白の明朝本文、キービジュアルを順に置く。
13. お問い合わせ（事務局の連絡先を示す）: 紺の見出し帯と紺の枠線のカードに、電話・メール・受付時間を中央揃えで書く。

Imagery

• メインビジュアルは、中華宮廷風の朱塗りの柱・格子窓を背景にしたアニメ調キャラクターの合成にする。
• 商品は背景を抜き、少し傾けてセクション境界にまたがせる。
• 商品の近くに、食感を表す擬音を灰色の筆文字で添える。
• 手順の説明は、グレーの円の上に白黒の線画（スマホを持つ手など）を置く。
• 濃色面には紗綾形・菱繋ぎ風の幾何学地紋を同系色で薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に絞り、中央に置く。左右に濃色の地紋面を見せる。
• PC ではナビを 1 行の横並びにする。
• PC の景品は、左に画像、右に情報の 2 カラムにする。賞品コース一覧は 3 列にする。
• PC の対象商品は 4 列、NG 例は 6 列に広げる。
• PC では CTA 2 つを横並びにする。応募手順の Step2・3 は 2 列にする。
• 作品紹介は PC で、左に本文、右に画像の 2 カラムにする。

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