DESIGN.md — くすみティール×ピンクの結婚式場相談 LP（Soft Teal & Pink Wedding Concierge LP）

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

Overview

• 業種: ウェディング・冠婚葬祭 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、情報量多め・訴求型
• キーワード: くすみティール・ピンクCTA・手書き文字・吹き出し・丸い写真・比較表
• 地の質感: フラットな単色面を地にし、白カードに薄い影をつける。写真は明るく、ふんわりしたボケ感がある
• 形: 角丸カード、角丸の大きいCTA、円形の写真、セクション下端のV字の切り欠き
• 温度感: やや暖かい中間色。ティールの清潔感とピンク・ベージュの温かみを両方持たせる

Colors

• セクションごとに白→ベージュ→ティール→ミント→生成りの順で地色を切り替え、区切りをはっきりさせる
• ティールの地の上には白カードや白い吹き出しを置き、文字は濃いグレーにする
• CTAはどこでもピンクのグラデーションボタンに統一し、ほかの要素にはこの濃いピンクを使わない
• 強調したい語は濃いティールの文字か、ミント色のマーカーで目立たせる
• No.1や実績の訴求はゴールドの月桂樹と帯でまとめる
• 比較表では自社列をティール系、他社列をラベンダー系にして色で分ける
• button-primary は文字 #FFFFFF × 背景 #EB6395 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E21F67、4.54:1）を使う。

Typography

• 感情に訴える見出しは手書き風の書体で大きくし、カギ括弧で囲む
• 情報を伝える見出しはゴシックの太字にして、手書き風と使い分ける
• 数字（割引額・順位）はひときわ大きくし、単位は小さくする
• 小さな前置きは「\〜/」の形で見出しの上に添える
• 本文は13px前後で中央揃えか左揃えにし、行間は広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表のみ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約12pxの余白をとり、ほぼ画面幅いっぱいに置く
• お客様の声は左に写真、右に吹き出しを重ねて縦に4件並べる
• 特長は丸い写真を左右交互に配置し、文章と少し重ねる
• CTAは主要セクションのあとに毎回置き、上に小さなピルラベルを乗せる
• 式場紹介は横スクロールのカルーセルにし、下にドットのインジケーターをつける

Elevation & Depth

• 白カードには薄くぼかした影（0 2px 8px rgba(0,0,0,.12)）をつける
• CTAボタンはやや濃い影で浮かせる
• 吹き出しやメディアロゴの枠は影なしでフラットにする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 円形の切り抜き、角丸を大きくとった四角、アーチ型（上が半円）の3種類
• セクション境界: 下端の中央をV字に切り欠いた境界と、まっすぐな境界を併用する
• CTAは角丸約10pxの横長ボタン。上に小さなピルラベル、右端に「>」をつける
• 吹き出しは角丸を大きくとり、写真の側に小さな三角の尾をつける
• プランナーの写真は細いゴールドの縁取りをした円形にする
• ラベル類はピル型か、両端を矢羽根形にした帯にする

Components

• LINE相談CTA（button-primary）: ピンクのグラデーションボタン。左に丸い小バッジ、右に矢印。上に対応時間を書いたピルラベルを乗せる
• 声の吹き出し（speech-bubble）: 白の角丸吹き出し。キーワードを濃いティールの太字にする。写真の右に重ねて置く
• 黒帯の小見出し（label-black）: 特長カードの中に置く黒い帯。白文字で特長を短く書く
• 比較表（comparison-table）: 2列のカード。自社列はティールの枠、他社列はラベンダーの枠にする。各行の中央に矢羽根形のティールの帯を通す
• No.1 実績バッジ（badge-no1）: ゴールドの月桂樹と大きな「No.1」を組み合わせ、下にリボン帯を添える
• 口コミカード（review-card）: 白の角丸カード。左上に円形アバター、右に黄色の星5つ、続けて太字のタイトルと本文
• Q&A（faq-item）: ティールの「Q.」とピンクの「A.」を頭につける。項目の間は細い罫線で区切り、すべて白カード1枚に収める
• 特長の番号（point-number）: 淡い色の大きな「01」と筆記体の「point」を、見出しの左に重ねる

Do's and Don'ts

Do - 地色はセクションごとに切り替え、淡くくすんだトーンでそろえる - 見出しは手書き風とゴシックを組み合わせ、温かさと信頼感を両立させる - 人物の写真は円形か大きな角丸で切り抜き、笑顔のカットを選ぶ - CTAは同じデザインで数か所に繰り返し置く - 数字の実績はバッジや大きな数字で目に見える形にする

Don't - 彩度の高い原色や真っ黒な地のセクションを使わない - CTA以外に濃いピンクを使わない - 手書き風の書体を本文に使わない - 写真を角ばった四角のまま並べない - 影を強くして重い印象にしない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を一目で伝える）: カップルの写真を全面に敷き、細いセリフ体のロゴを大きく置く。左上にゴールドの受賞バッジ、右に手書きの吹き出し、下にCTA
2. 悩みの提起（迷っている気持ちに共感する）: 白地にティールの見出しラベルを置き、手書き風のカギ括弧コピーと円形写真を並べる。下端はV字の線で区切る
3. 特長（安心できる理由を3つ＋特典として示す）: ベージュ地に白カードを敷き、番号・黒帯ラベル・丸い写真を左右交互に配置する
4. お客様の声（短文）（満足度を感情で伝える）: ティール地にNo.1バッジと手書きの大見出しを置き、写真と吹き出しを縦に4件並べる
5. 比較（他の情報収集方法との違いを示す）: ミント地に2列の比較表を置き、手書きの付箋やイラストを添える
6. 限定特典（無料特典で後押しする）: ピンクの帯見出しの下に動画の埋め込み、利用者の声のミニカード、CTAを並べる
7. プランナー紹介（専門家がサポートすることを伝え信頼を得る）: 生成り地に二重線の枠の見出しを置き、円形の顔写真を3×2で並べてゴールドの経歴ラベルをつける。続けてNo.1の実績を示す
8. 割引訴求（金額のメリットを強く打ち出す）: ティールとピンクで左右に分けたバナーに、アーチ型の写真と大きな割引額を載せる
9. 相談会案内（オンライン相談へ誘導する）: 横長の写真の上にバッジ、下部に半透明の帯とボタンを重ねる
10. 式場紹介（掲載数と選べる式場の幅広さを見せる）: ティール地に式場カードのカルーセルを置き、その下に写真と文の2段組みを並べる
11. お客様の声（口コミ）（第三者の評価で裏づける）: ベージュ地に星評価つきの白カードを縦に並べる
12. メディア掲載（知名度を示す）: ティール地の白カードにメディアのロゴを4列で並べる
13. よくある質問（不安を解消する）: 白カード1枚にQ&Aを罫線で区切って並べる
14. クロージングCTA（迷っている人の背中を押す）: 白地にミント色のマーカーつき見出し、中央揃えの語りかける文章、CTAを置く

Imagery

• 明るい自然光の屋外やチャペルで、笑顔のカップルや花嫁を撮った写真
• 背景のボケや光の玉で、ふんわりした雰囲気を出す
• スタッフは白い背景で正面から撮った、親しみのあるバストアップ
• 線画のゆるい人物イラストや、手書きの付箋・キラキラ記号を添える
• 白い花やドレスなど、白を基調にした小物の写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央のコンテンツ幅を約800pxに絞り、地色は画面幅いっぱいに広げる
• PCでは特長を3列のカードにし、写真を円形のまま上に置く
• PCではお客様の声を2×2のグリッドで並べる
• PCでは口コミカードを2列にし、メディアロゴは1〜2行に詰める
• PCでは式場カルーセルを3枚同時に表示し、左右に矢印をつける

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