DESIGN.md — 新緑グリーンと生成りの前撮りキャンペーンLP（Fresh Green Wedding Photo Campaign LP）

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

Overview

• 業種: ウェディング・冠婚葬祭 ／ 雰囲気: 清潔・爽やか、ポップ・元気、ナチュラル、情報量多め・訴求型
• キーワード: 新緑・旅・割引訴求・季節ロケ・手描き線画・写真主体
• 地の質感: フラットな生成り地。ストライプや波線のライン装飾と手描き風イラストで軽い手作り感を加える
• 形: 角丸カード、波線の区切り、吹き出し型バッジ、斜めに傾けた縦長ラベル
• 温度感: 明るく爽やかで少し温かい。春〜初夏の屋外の空気感

Colors

• 地は生成り白で統一し、グリーンは見出し・金額・装飾線に集中させる
• 割引金額はすべてグリーンの太字で統一する
• イエローは「人気」「お得」バッジやFVの数字など小面積の強調だけに使う
• 相談会CTAは暖色グラデーションで緑の地から浮かせる
• ギャラリーの季節ラベルは、写っている花の色に合わせた単色の帯にする
• 店舗一覧などの情報ブロックは黒文字・黒線だけにして色を抑える
• campaign-logo は文字 #61BA6F × 背景 #FCFCFA のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#398345、4.54:1）を使う。
• discount-row は文字 #3AA94A × 背景 #FCFCFA のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2E853A、4.51:1）を使う。
• badge-bubble は文字 #FCFCFB × 背景 #DBAE0C のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E7108、4.53:1）を使う。
• price-card は文字 #61BA6F × 背景 #F0F8ED のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#398345、4.58:1）を使う。
• button-primary は文字 #FCFCFB × 背景 #F45A4A のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E4220E、4.51:1）を使う。
• button-secondary は文字 #FCFCFB × 背景 #4FA6D8 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#267AAB、4.59:1）を使う。

Typography

• 金額は「¥」＋太い数字＋「OFF!」の形にし、数字を一番大きくする
• リード文は小さめにして中央揃え、行間を広く取る
• キーワードはグリーンの太字で本文中に差し込む
• 欧文のセクション名はセリフ体にして上品さを残す
• FVの縦書きラベルは太字の明るいグリーンで、白地に置いて斜めに傾ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。店舗一覧のみ2カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 区切りに全幅写真をはさみ、テキストのブロックとリズムを作る
• 割引一覧は点線で区切った縦並びで、各行を中央揃えにする
• ギャラリー写真は左右に少し余白を残した角丸カードで縦に並べる
• 料金例は淡緑の角丸カードに右揃えの金額を並べる
• 店舗一覧は店名・住所・矢印アイコン・下線で1セルを作る

Elevation & Depth

• 影はほぼ使わず、フラットな面と線で構成する
• バナーとギャラリーのカードは影なしの角丸だけで浮かせる
• FVのキャンペーンロゴにだけ濃緑の厚みのある縁取りを付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形と、角丸10px前後の横長カード
• セクション境界: 直線で区切る。見出しの上下にグリーンの波線と二重線を置く
• 割引一覧の上下を、端に小さな星を付けた二重線で囲む
• バッジは吹き出し型や楕円で、少し傾けてもよい
• 季節ラベルは写真の右下に置く角なしの帯にする
• 円形の矢印アイコンで外部リンクを示す

Components

• キャンペーンロゴ見出し（campaign-logo）: 太いディスプレイ書体に星マークを添えたロゴ風タイトル。FVではスーツケース型の枠に入れる
• 割引額の行（discount-row）: プラン名と大きなグリーンの割引額を2段で中央揃えにし、行の間を点線で区切る
• 吹き出しバッジ（badge-bubble）: 「人気」「お得」などを入れるイエローの小さな楕円吹き出し
• 波線見出し（wave-heading）: 上下をグリーンの波線ではさんだ丸ゴシックの見出し
• 料金シミュレーションカード（price-card）: 淡緑の角丸カード。内訳と合計の下に矢印を置き、割引後の金額を大きく見せる。左には濃緑の吹き出しを添える
• 相談会CTAバナー（button-primary）: 写真バナーの下に付く、オレンジ〜赤グラデーションの横長ボタン。外部リンクのアイコン付き
• オンライン相談バナー（button-secondary）: 青地の角丸バナー。下端に水色の予約ボタン帯が付く
• 季節ロケ写真カード（gallery-card）: 横長の角丸写真。右下に季節と見頃を書いた色帯ラベルを置く
• 店舗セル（shop-cell）: 店名・住所・注釈・黒丸の矢印アイコン・黒の下線で構成し、2カラムで並べる

Do's and Don'ts

Do - 割引額は太い数字で大きく見せ、グリーンで統一する - 手描き線画の旅アイテム（雲・太陽・カップ・鞄・地図）を余白に小さく散らす - 全幅の屋外ロケ写真をセクションの区切りに使う - 季節ラベルの色は花や景色の色に合わせる - リード文は中央揃えの短い行で積み上げる

Don't - 地を濃色にしたり、暗いトーンの写真を使ったりしない - グリーン以外の色を金額に使わない - イエローを広い面に塗らない - 店舗一覧に色付きの装飾を加えない - 影の強いカードや立体的なボタンにしない

Page Structure

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

1. ヘッダー（ブランドを示す）: 白地の中央にセリフ体のロゴだけを置く
2. ファーストビュー（期間・最大割引額・目玉価格を伝える）: グリーン地に新緑のカップル写真を重ね、上部に期間、左右に縦書きの斜めラベル、中央にロゴ、下部に取消線付きの価格と割引後の価格を置く
3. 割引一覧（プラン別の割引額を比べやすく見せる）: 二重線で囲み、プラン名と大きな割引額を点線区切りで縦に並べる。余白に線画を散らす
4. キャンペーン期間の注記（対象期間と除外条件を示す）: 小さなグレー文字を中央揃えで置く
5. イメージ写真とリード（旅と前撮りを組み合わせる楽しさを伝える）: 全幅写真の下に、グリーンの見出しと中央揃えの短文を置く
6. 適用例（実際にいくらお得になるかを具体的に示す）: 波線見出し、丸写真付きのプラン名、淡緑の料金カードの順に並べる
7. 相談会CTA（見学・相談会の予約に誘導する）: 写真バナーに円形のお得バッジを重ね、下に暖色グラデーションのボタンを付ける
8. オンライン相談CTA（来店しなくても相談できる窓口を案内する）: 青い角丸バナーと予約ボタン帯、その下に短い補足文
9. ギャラリー（季節ごとのロケ地の魅力を見せる）: 欧文見出しの下に角丸の写真カードを縦に並べ、季節ラベルを付ける。最後をフェードさせて「もっと見る」につなぐ
10. 店舗一覧（最寄りの店舗を探してもらう）: 欧文見出しと短い説明の下に、下線付きのセルを2カラムで並べる
11. フッター（締めのイメージとクレジット）: 全幅写真の下に、ロゴとコピーライトを中央に置く

Imagery

• 新緑・花畑・庭園など、明るい屋外ロケで撮ったカップル写真を使う
• やや露出を上げた、透明感のある自然光の色調にする
• 和装と洋装を交互に見せる
• 藤・ネモフィラ・ポピー・あじさいなど、季節の花で埋め尽くす構図にする
• 黒の細い手描き線画で旅行アイテムを描き、余白に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、本文を中央の幅480〜720pxに収めることを推奨
• 割引一覧と料金カードはPCでも1カラムを保つ
• ギャラリーはPCで2〜3カラムのグリッドにする
• 店舗一覧はPCで3〜4カラムに広げる
• 全幅写真は高さに上限を設けてトリミングする

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