DESIGN.md — ロイヤルブルー×金の結婚式場キャンペーン LP（Royal Blue and Gold Bridal Campaign LP）

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

Overview

• 業種: ウェディング・冠婚葬祭 ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: ロイヤルブルー・金の CTA・明朝の価格訴求・白い聖堂写真・帯見出し・CTA の繰り返し
• 地の質感: フラットな単色面に、写真を全面で敷く構成。見出し帯だけ青から薄紫へ流れる淡いグラデーションを使う
• 形: 角丸のない四角い帯とブロックが基本。お客様の声カードと入力欄だけ小さな角丸
• 温度感: 青を主にしたやや涼しく清潔な印象。金とくすみピンクで華やかさを足す

Colors

• 地は白で統一する。ブロックの色はブルー・水色・くすみピンク・濃紺の単色面で切り替える
• セクション見出しの帯はロイヤルブルーで塗るか、青から薄紫へのグラデーションにする
• 主 CTA は金色の塗りに白文字。サブ CTA は白地に青い枠と青い文字にする
• 価格の比較は、通常価格を黒、キャンペーン価格を赤にし、黄色のマーカー線を引く
• 濃い色の面に乗せる文字は白か淡い黄色。強調する数字は淡い黄色
• フッターはブランドのブルーで全面を塗り、文字は白にする
• button-primary は文字 #FEFCEA × 背景 #C3B14E のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#82742C、4.53:1）を使う。
• badge-medal は文字 #FEFCEA × 背景 #C3B14E のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#82742C、4.53:1）を使う。

Typography

• 訴求する見出しと価格は明朝の太字で、字間を広めにとる
• 説明文はゴシックの小さめの字で中央揃えにし、短い行で改行する
• 数字は単位の 2〜3 倍の大きさにする
• 英字のおしゃれな見出しは、細いセリフ体の大文字と小さな和文を組み合わせる
• 写真の上に重ねる手書き英字は、白で斜めに置く
• ボタンの文字は太いゴシックにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真のグリッドは 2〜3 列
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 56px、基本単位 8px、カード内 14px（375px 幅換算）
• 訴求ブロックは左右に約 24px の余白をとった幅で、帯見出し・写真・リストを縦に密着させる
• ブロックとブロックの間には、中央揃えの短い説明文と 2 段 CTA を挟む
• 特長は番号付きの『おすすめ』帯見出し → 大きな写真 → 2 行のリード → 写真グリッド → 青いラベル帯 3 本 → お客様の声カードの順に並べる
• チェックリストの下に下向きの三角を置き、次の訴求へつなげる
• 会場一覧は大きな写真 1 枚と小さな写真 2 枚の組み合わせに、名前・説明・詳細リンクを添える

Elevation & Depth

• 影はほとんど使わず、平面的に構成する
• お客様の声カードは薄いグレーの枠線と、ごく弱い影
• フォームの入力欄は淡い水色の塗りと細い枠線
• 画面に固定する予約ボタンは金色の円形で、少し影をつける

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま角丸なしで切り、コラージュは細い白線で区切る
• セクション境界: 直線で切り替える。ブロック内の流れは下向きの三角で示す
• 帯・ボタン・ブロックは角丸なしの四角にする
• ラベル帯は右寄せで、左端だけ角を落とす
• バッジは金色の円形メダル
• ボタンの右端に白い円か三角の矢印アイコンを付ける

Components

• 金色の主 CTA（button-primary）: 四角い金色の塗りに白文字を置き、右端に円形の再生アイコンを付ける。上には斜線で挟んだ一言のコピーを添える
• 青枠のサブ CTA（button-secondary）: 白地に青い 2px の枠と青い文字を置き、右端に青い三角を付ける。主 CTA の真下に置く
• おすすめの帯見出し（band-heading）: 青い帯に小さな英字・番号・サブコピーを入れ、下の段に白い明朝の大見出しを置く
• チェックリストのブロック（check-list-block）: 水色かピンクの面に、チェックボックスのアイコンと明朝の項目を 4 行並べる。キーワードには黄色のマーカーを引く
• 価格の比較表（price-compare）: 通常価格 → キャンペーン価格を横に並べ、明朝の大きな数字で見せる。お得な側は赤字にして黄色の下線を引く
• 青いラベル帯（label-strip）: 写真の右下に重ねる、紺色の細い帯。体験の要点を白い太字で 3 本積む
• お客様の声カード（voice-card）: 白いカードを枠線で囲み、左に青い見出しと本文、右に写真を置く
• 金メダルのバッジ（badge-medal）: 金色の円の中に、特典や保証の短い言葉を入れる
• FAQ のアコーディオン（faq-item）: 生成り色の地に、青い『Q.』と質問文、右端に丸いプラスアイコンを並べる。行の間は細い線で区切る
• フォームの送信ボタン（form-submit）: 紺色の塗りに白い太字で、横幅いっぱいに置く

Do's and Don'ts

Do - 見出しと価格は明朝で組み、上品な印象を保つ - 訴求ブロックが終わるたびに、金ボタンと青枠ボタンの 2 段 CTA を入れる - 写真は白い聖堂と青いバージンロードのように、明るく青が映えるものを選ぶ - 数字は大きく、単位は小さく組んでメリハリをつける - ブロックは単色の面で塗り分け、流れを三角でつなぐ

Don't - CTA をピル型や丸いボタンにしない（固定の予約ボタンだけは円形にする） - 原色の派手な赤や緑を、面の色として使わない - 濃い影や立体的な装飾を付けない - 見出しをポップな丸ゴシックにしない - 暗くて低い彩度の写真を主役にしない

Page Structure

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

1. ファーストビュー（期間限定の割引を一目で伝える）: 聖堂前の祝福写真を全面に敷き、左上に青い半透明の帯で明朝の割引額を入れる。左に金メダルのバッジを置く
2. 導入文と CTA（キャンペーンの概要を伝え、最初の行動を促す）: 中央揃えの短い説明文 → 写真 → 2 段 CTA
3. 限定プランの対象者（プランに当てはまる人を示す）: 青い帯見出し → カップル写真に手書き英字を重ねる → 水色のチェックリスト → 三角 → 割引額の写真ブロック
4. 価格のシミュレーション（お得さを数字で納得させる）: 水色の帯見出しの下に、明朝の大きな数字で通常価格とキャンペーン価格を比べる 2 段の表を置く
5. 最安値の保証（公式サイトで予約する理由を示す）: 濃紺の帯に金メダルと白い明朝を置き、その後に CTA
6. ドレス特典（ドレスを重視する層に訴求する）: くすみピンクのブロックにチェックリストとドレス写真のグリッドを並べ、淡い黄色の大見出しを置く。下に縦長の動画
7. フェアの体験内容（フェアに参加するメリットを伝える）: 水色のチェックリスト → 実績の一文 → 青グラデーションの帯 → 番号付きの 2×2 写真グリッド
8. 特長のおすすめ 1〜4（聖堂・ドレス・会場・料理の強みを示す）: 番号付きの帯見出し → 大きな写真 → リード → グラデーション帯 → 写真とラベル帯 → お客様の声 → CTA を繰り返す
9. パーティーレポート（実際の雰囲気を見せる）: 英字見出しを線で挟み、大小の写真を組んだコラージュを置く
10. よくある質問（不安を解消する）: 生成り色の地に、金色の明朝見出しと Q. のアコーディオンを並べる
11. 予約フォーム（フェアの予約を受け付ける）: ファーストビューのバナーを再掲し、金色の明朝見出しを置く。入力欄は淡い水色、必須ラベルは赤、送信ボタンは紺
12. 会場の一覧（全国の会場へ誘導する）: 大きな写真 1 枚と小さな写真 2 枚の組み合わせに、太字の会場名・2 行の説明・金色の詳細リンクを添える
13. フッター（サイト内を案内する）: 青い全面に、英字の大見出しで分けたリンク一覧を置く。右下に金色の円形の予約ボタンを固定する

Imagery

• 白く高い天井の聖堂に青いバージンロード、白い花の装花。明るく、ハイキーで撮る
• 青空の下でフラワーシャワーを浴びる新郎新婦と参列者を、少し下からのアングルで
• ピンクの花に囲まれて微笑む花嫁と、色とりどりのカラードレスを着たポートレート
• 白い皿に彩りよく盛ったフレンチを、真上から斜めの角度で
• 写真の上に白い手書き英字を斜めに重ね、装飾にする
• 金のメダルや細い金の線など、さりげない金の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも SP と同じ縦長のコンテンツを、中央に幅 450px 程度の 1 カラムで置く
• PC のファーストビューは画面いっぱいの写真にし、上部にグローバルナビを並べる
• PC の写真グリッドは、コンテンツ幅より少し広く横に並べる
• 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 行書くと起動時に読み込まれる。