DESIGN.md — ピンク×パステル章立ての婚活サービス LP（Pastel Chapter-Coded Matchmaking LP）

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

Overview

• 業種: ウェディング・冠婚葬祭 ／ 雰囲気: ポップ・元気、やさしい・柔らかい、情報量多め・訴求型、かわいい
• キーワード: パステル色分け・章立て・タレント訴求・白カード・赤い強調文字・ピル型CTA
• 地の質感: フラットな単色面と白カード。点線の区切りや小さなキラキラ装飾、手描き風の二重線の吹き出しを添える
• 形: 角丸カード、ピル型ボタン、もくもく形の吹き出し、手描き風の二重線フキダシ
• 温度感: 暖色寄り。ピンクと赤が主役で、水色・緑・ベージュの章色で軽さを出す

Colors

• 章ごとに地の色をピンク→水色→ミント→ベージュの順で変え、カード内のボタンや見出し帯も同じ章色の淡い色にする
• 数字やキーワードは赤(primary)の太字にし、それ以外はグレー黒で書く
• 主CTAは白地に紺の線と紺の文字。上に赤いピル型バッジを重ねる
• 章の地はカードより一段濃いパステルにして、白カードを浮かせる
• 転換セクションだけ濃い赤の写真帯を使い、ページの流れに抑揚をつける
• badge-time は文字 #FFEFEC × 背景 #CE354D のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC324A、4.56:1）を使う。

Typography

• 全体は太めのゴシックで統一する
• 強調語だけ 1.3〜1.5 倍の大きさにして赤くする
• 章ラベルは小さな欧文の「Chapter + 数字」に下線を引く
• 写真帯だけ白い明朝体を縦書きで大きく置く
• 注釈は薄いグレーの極小文字にして右寄せする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積み、PC では 3 カラムにする
• 本文ブロックの幅: 画面幅の約 68%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 章カード・説明カードは左右に約16%の余白をとって中央に置く
• 章見出しは全幅の上下点線で挟む
• 章セクションの終わりごとに主CTAを白地で挟む
• 動画は全幅近くまで広げて置く
• 人物写真を見出しの上に小さく重ねる

Elevation & Depth

• 影はほぼ使わず、色面とのコントラストで階層を作る
• 白カードは影なしで、パステル地の上に置く
• 関連サービスのロゴボタンは白地に細いグレーの枠線

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きにして枠からはみ出させる。イラストは角丸カード内に長方形で置く
• セクション境界: 直線で地色を切り替え、見出しの上下に点線を引く
• 主CTAは横長のピル型で紺の線囲み
• 吹き出しは手描き風の赤と青の二重線にする
• 悩みの吹き出しはもくもく形の白い雲にする
• 章カードは色付きの太い枠の中に白い面を入れた二重構造

Components

• 主CTAボタン（button-primary）: 白地のピル型に紺の線と紺の太字。右端に丸い矢印アイコン、上には赤いバッジを重ねる
• 所要時間バッジ（badge-time）: CTA上辺に重ねる赤いピル型のラベル。下向きの小さな三角が付く
• 章カード（chapter-card）: 章色の太枠の中に白い面を入れる。人物写真、Chapter番号、点線で挟んだ訴求文、ボタン2つを並べる
• サブボタン（button-sub）: 章色の淡い塗りのピル型。黒丸の中に白矢印を入れる
• 説明カード（feature-card）: 白い角丸カード。小見出し、イラスト、本文、右下の注釈の順に並べる
• 章見出し（chapter-heading）: 人物が章番号の札を持つ画像の下に、点線で挟んだ2行見出しを置く。キーワードは赤
• 二重線吹き出し（speech-bubble）: 赤と青の手描き線で囲む吹き出し。中央揃えの太字で語りかける
• 動画ラベル（video-label）: 動画の上に置く淡い色のタブ。紺の小さな太字を入れる

Do's and Don'ts

Do - 章ごとに決めたパステル色を、地・ボタン・見出し帯で一貫して使う - 数字とキーワードは赤の太字で大きくする - 各章の終わりに同じ主CTAをくり返し置く - 人物の切り抜き写真をカードや見出しに重ね、親しみを出す - 注釈は小さな文字で必ず添える

Don't - 濃い色を広い面に使いすぎない（濃い赤の帯は転換部だけにする） - 主CTAを塗りつぶしの派手なボタンにしない - カードに強い影や立体効果を付けない - 章色を混ぜたり、順番を入れ替えたりしない - 本文を純黒にしない

Page Structure

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

1. ファーストビュー（タレントと実績で一瞬で惹きつける）: ピンクのグラデーション地に人物写真を置き、白の極太コピーを左上に。月桂樹の実績バッジとロゴを添える
2. 動画紹介（CMで認知と好感を高める）: 斜めストライプのピンク地の中央に縦長動画を置き、上に白い角丸ラベルを重ねる
3. 悩みの提起（読み手の悩みに共感する）: 二重線の吹き出しと人物から入り、グレー地に雲形の吹き出しと小さな人物イラストを散らす。背景には悩みの文言を白く薄く敷く
4. 転換（解決策へ気持ちを向ける）: 下向きの二重矢印と引用符付きの大きな言葉のあと、濃い赤の写真帯に縦書きの明朝コピーを重ねる
5. サービス概要・目次（4つの強みを一覧で見せる）: マゼンタの帯見出しのあと、章色の枠のカード4枚を縦に並べ、最後に主CTAを置く
6. 第1章 会員数（規模で安心させる）: ピンク地に白い説明カードを3枚並べ、終わりに主CTA
7. 第2章 実績（成果を示す）: 水色地に説明カードとCM動画を置き、終わりに主CTA
8. 第3章 スピード（短期間で成果が出ることを示す）: ミント地に説明カード3枚と動画を置き、終わりに主CTA
9. 第4章 サポート（専門家の支援で不安を消す）: ベージュ地に説明カード3枚と動画を置き、終わりに主CTA
10. クロージング（後押しして無料相談へ導く）: 人物写真と黒・マゼンタの大コピーのあと、グレー地に全国地図のイラストと二重線の吹き出し、主CTAを置く
11. 関連サービス（ほかの選択肢へ送客する）: 淡い青の角丸枠の中に、白いロゴボタンを縦に並べる
12. フッター（ブランドで締める）: 白地の中央にロゴを置くだけ

Imagery

• 赤い服の女性タレントを白背景で撮り、切り抜いて使う。ポーズは指差しや両手を添えるなど明るい表情
• 説明カードにはフラットな人物イラストと淡い青背景の図解を使う
• 悩みのシーンは開いた本の上に小さな人物を立たせる立体風イラスト
• 全国地図はグレーの太線でブロック状に描き、ピンクのハートとカップルのアイコンを点線でつなぐ
• 見出しの周りに小さなキラキラ（四芒星）を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは説明カードを 3 カラムの横並びにする
• PCの章カードは 2 列の互い違い（メイソンリー風）に並べる
• PCのファーストビューは横長写真で、コピーとロゴを左に横並びにする
• PCの動画紹介はラベルを左、動画を右の 2 カラムにする
• PCのCTAは幅を約 40% に抑えて中央に置く
• 関連サービスのロゴボタンは PC で 2×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 行書くと起動時に読み込まれる。