DESIGN.md — ピンク×水色の鍵穴ポップな10代向け婦人科LP（Pastel Pink Sky Pop Teen Health LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: パステルピンク・水色アクセント・鍵穴モチーフ・十字キラキラ・ティーン向け・縦長1カラム
• 地の質感: グラデーションや影のないフラットな塗り。白フチ付きの太い文字ロゴでシール風に見せる
• 形: ピル型ボタン、角丸カード、鍵穴形の写真の切り抜き、十字形のキラキラ
• 温度感: 明るく甘い暖色寄り。水色で爽やかさを足す

Colors

• 地は淡いピンク1色で通し、セクションで色を変えない
• 強調はピンクと水色の2色を交互に使う(鍵穴アイコン、十字のキラキラ)
• ボタンはピンクの塗り＋水色のフチ＋白文字
• 情報のまとまりは白カードに乗せて読みやすくする
• 本文は黒ではなくこげ茶にして柔らかく見せる
• 画面の両端に濃いピンクの細い縦枠を通す
• button-primary は文字 #FFF3F8 × 背景 #FA7D95 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00932、4.57:1）を使う。
• qa-card は文字 #FA7D96 × 背景 #FEFEFE のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E90936、4.57:1）を使う。
• banner-cta は文字 #FFF3F8 × 背景 #FA7D95 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E00932、4.57:1）を使う。
• sns-icons は文字 #FFF3F8 × 背景 #FA7D95 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E00932、4.57:1）を使う。

Typography

• 見出しは左右に十字マークを置いて中央揃え
• ロゴ風の大きな文字はピンクと水色を交互に塗り、白フチを付ける
• 本文は小さめ・左揃えで、短い段落ごとに1行空ける
• 質問や手順タイトルはピンク文字で、本文と色を分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの間には鍵穴アイコンを横一列に並べた区切りを入れる
• ボタンは横幅いっぱいで縦に並べ、間は8px
• 写真はほぼ全幅で大きく見せる
• Q&Aカードの角に人物アイコンを左右交互に置く

Elevation & Depth

• 影はほぼ使わず、フラットに作る
• 立体感は水色のフチ線と白フチ文字で出す
• ページトップへ戻るボタンだけ白丸にピンク線

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 鍵穴形のフレームの中に人物を切り抜き、頭がフレームからはみ出す
• セクション境界: 直線の境界は使わず、ピンクと水色の鍵穴アイコンを交互に並べて区切る
• ボタンはピル型で右端に「>」を付ける
• カードは角丸10px前後で水色の細い枠線
• 十字のキラキラはピンクと水色で大きさを変えて散らす

Components

• ピル型CTAボタン（button-primary）: ピンクの塗りに水色2pxのフチ、白文字を中央に置き右に矢印
• 十字付き見出し（heading-cross）: 中央の見出しの左右に水色の十字マーク
• 鍵穴の区切り（divider-keyhole）: ピンクと水色の小さな鍵穴アイコンを横一列に交互に並べる
• Q&Aアコーディオン（qa-card）: 白カードの上辺にピンクのタブとQ番号、質問はピンク文字、右に＋の丸ボタン、角に人物の丸アイコン
• お知らせ一覧（news-list）: ピンクの日付と本文を水色の線で区切って並べる
• 手順カード（step-card）: 白カードの中に番号付きピンクの小見出しと本文、間に水色の下矢印
• 2段のバナーCTA（banner-cta）: 上はピンクの面に白い大きめの文字、下は水色の帯に「詳しく」と矢印
• SNS丸アイコン（sns-icons）: ピンクの丸に白いSNSマークを3つ横に並べる

Do's and Don'ts

Do - ピンクと水色の2色だけで装飾し、交互に使う - 人物写真は鍵穴フレームに入れ、頭をはみ出させる - セクションごとに鍵穴の区切りを入れる - 情報量が多い部分は白カードにまとめる - 文の言葉づかいはタメ口寄りで親しみやすくする

Don't - 黒や原色の赤など強い色をボタンに使わない - 角ばったボタンや鋭い直線の区切りを使わない - 明朝体や細くて硬い書体を使わない - 影やグラデーションで重く見せない - 医療らしい冷たい白×青の配色にしない

Page Structure

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

1. ファーストビュー（企画の世界観とキャラクターを一目で伝える）: ハッシュタグ風の大きなロゴ文字、驚き顔の人物の切り抜き、シール風ロゴ、鍵穴フレームの人物2人、十字のキラキラ
2. ナビボタン（主な導線へ案内する）: ピル型ピンクボタンを5つ縦に並べる
3. お知らせ（最新情報を知らせる）: 英字見出しの下に日付と本文を水色の線で区切って並べる
4. 取り組みの紹介（コンセプトを説明する）: ロゴ＋「とは」の見出し、短い段落の本文、鍵穴背景の集合写真
5. 協賛企業（信頼性を示す）: 白い横長カードにロゴを並べる
6. よくある質問（受診への不安をなくす）: タブ付きの白カードを4つ、角に人物アイコンを左右交互に置く
7. 配布物の案内（配布物と使い方を伝える）: 斜線付きの小見出し、カード画像、本文、番号付き手順カードとCTAボタン
8. 大使の紹介（親しみと共感を作る）: 大きな鍵穴フレームに3人を縦に重ね、名前、紹介文、SNSアイコン
9. 支援のCTA（支援・参加を促す）: ピンクと水色の2段バナー
10. フッター（サイト内リンクを置く）: ロゴ、中央揃えのテキストリンク、コピーライト、ページトップへ戻る丸ボタン

Imagery

• 10代女性の制服姿を明るくフラットな光で撮り、背景を切り抜く
• 驚き顔や頬に手を当てるなど、表情とポーズは大げさに
• 鍵穴形のフレームはピンクの太枠に水色の中身
• 十字のキラキラをピンクと水色で大小に散らす
• ロゴ文字は太い丸文字に白フチとドット模様
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はスマホ幅のカラムを中央に固定し、両側にピンクの縦枠を付ける
• PC の左側にはロゴ・人物3人・CTAボタンを固定して置く
• 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 行書くと起動時に読み込まれる。