DESIGN.md — 水色×オレンジのポップなオンライン診療 LP（Pop Pastel Blue and Orange Femtech Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: ポップ・元気、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: パステル水色・ビビッドオレンジ・黄色マーカー・幾何学欧文見出し・ゆったり字間・イラストとファッション写真
• 地の質感: フラットな単色面。影は使わず、写真とイラストに質感を任せる
• 形: 角丸カード（12〜16px）、ピル型ボタン、細い区切り線
• 温度感: 暖色と寒色を半々に使った明るく元気な温度感

Colors

• セクションの背景は水色・生成り・白・オレンジを交互に変え、色面の切り替えでリズムをつける
• 見出しは英語を黒、その下の和文サブ見出しはオレンジで、両端にダッシュを付ける
• 本文の強調はオレンジ文字か黄色マーカーの下線で行う
• 主CTAはコーラル赤のピル型だけにし、ほかの要素に赤を使わない
• 水色・オレンジの面の上は白文字にし、サブ見出しは黄色にする
• 価格表は濃いグレーのヘッダーとグレー罫線で落ち着かせ、最安価格はオレンジにする
• button-primary は文字 #FEF2ED × 背景 #FE5C53 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E00D01、4.53:1）を使う。
• button-secondary は文字 #EFFCFE × 背景 #FF7C38 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CC4600、4.51:1）を使う。
• badge-pill は文字 #EFFCFE × 背景 #90BDFF のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0168FF、4.53:1）を使う。
• plan-tabs は文字 #EFFCFE × 背景 #FF7C38 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CC4600、4.51:1）を使う。
• step-item は文字 #FF7C38 × 背景 #FEEB2A のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CC4600、4.6:1）を使う。

Typography

• 本文も太字にして、字間を0.1em以上あけて読みやすくする
• 英語見出しは幾何学的な太いサンセリフの大文字で、字間を広くとる
• 和文サブ見出しは「−〇〇−」の形で英語見出しの下に置く
• 本文は短く改行し、1行15字前後で左揃えにする
• 価格の数字は大きく太くし、円や税込表記は小さくする
• 強調語には黄色マーカーの下半分塗りを使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードや画像は左右に約 28px の余白をとって配置する
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下に80〜120pxの余白をとる
• 見出しブロック（英語＋和文）は中央揃え、本文は左揃え
• ステップは左に正方形イラスト、右に見出しと本文を並べ、間を点線の矢印でつなぐ
• Q&Aや声のカードは横スライダーにし、次のカードを右端に少し見せる
• FV写真は角丸カードにして、背景の色面に浮かせる

Elevation & Depth

• 基本はフラットで、影は使わない
• CTAボタンだけ、下にわずかな濃い色の影を付けて押せる感じを出す
• カードは影ではなく、色面とのコントラストで浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸12〜16pxの長方形。正方形イラストも角丸にする
• セクション境界: 直線で背景色を切り替える。境界に装飾は付けない
• CTA・小ボタン・ラベルはすべてピル型にする
• カード・表・画像は角丸12〜16pxで統一する
• 番号は画像の左下に重ねて大きく置く
• 鋭角の装飾や斜めの区切りは使わない

Components

• LINE予約CTA（button-primary）: コーラル赤のピル型。左端に緑の丸アイコン、白の太字ラベル。上に小さな補足文を置くことがある
• サブボタン（button-secondary）: オレンジのピル型の『もっと見る』。白い面の上では白ピルに＋アイコンを付ける
• 英和二段見出し（section-heading）: 黒の太い英大文字の下に、ダッシュで挟んだオレンジの和文サブ見出しを置く
• 番号付き理由カード（reason-card）: 水色地に白い角丸カードを縦に4枚並べる。左に水色の大きな番号、中央に黄色マーカー付きの見出し、右に線画アイコン
• 水色ラベル（badge-pill）: 水色のピルに白文字。番号の丸付きで小見出しや訴求ラベルに使う
• 価格表（price-table）: 濃いグレーのヘッダー、グレーの罫線、角丸の外枠。最安の列はオレンジ数字にする
• プラン切替タブ（plan-tabs）: 選択中のタブはオレンジ地に白文字、その他は淡いグレー。上に水色の割引ラベルを付ける
• ステップ（step-item）: 黄色地の正方形イラストの右に、オレンジの見出しと黒い本文。間を水色の点線矢印でつなぐ
• 医師回答カード（qa-slider-card）: 白い角丸カード。グレーの大きな引用符で囲み、質問は水色、回答見出しはオレンジ。医師の顔写真を添え、下にドットのページネーション
• FAQアコーディオン（faq-item）: 生成り地に白い帯を並べる。『Q.』と太字の質問、右端に＋アイコン

Do's and Don'ts

Do - 水色とオレンジの大きな色面を交互に使い、ページ全体を明るく保つ - 強調は黄色マーカーとオレンジ文字に限る - 医療の情報は表・注釈・医師の写真で信頼感を出す - 本文は字間を広めにとり、太字で短く改行する - CTAはピル型のコーラル赤で統一し、要所と最後に繰り返す

Don't - 暗い背景や重い影を使わない - 明朝体や細いゴシックで本文を組まない - CTAに赤以外の色を混ぜて主従をあいまいにしない - 原色を同じ画面に何色も並べてごちゃつかせない - 角張ったボタンや鋭角の装飾を使わない

Page Structure

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

1. ファーストビュー（ブランドの世界観を伝え、すぐ予約できるようにする）: 水色地に角丸のオレンジ写真カード。黄色のロゴ風タイトル、下にCTAとCMバッジを置く
2. 共感メッセージ（身体の悩みへの共感とブランドの思い）: 水色地に白い太字の詩のような短文を、大きく行間をあけて並べる
3. 動画・キャンペーン（CM動画とLINE特典で興味を引く）: 生成り地に英和見出し、動画の埋め込み、マーカー付きの特典文とCTA
4. サービス紹介（提供するサービスを示す）: 角丸写真の下にオレンジ帯のアコーディオン。続けて全幅のオレンジ人物写真にコピーを重ねる
5. 選ばれる理由（満足度と4つの利点を示す）: 水色地に月桂樹付きの大きな%表示と、番号付きの白カード4枚
6. 商品・料金（種類・効果・定期価格を示す）: タブ切替、効果と副作用のアイコン、種類の一覧、プランのタブと大きな価格
7. 価格表（条件ごとの価格を比べられるようにする）: 水色の番号ラベルで二つに分け、濃いグレーのヘッダーの表と注釈を置く
8. 利用の流れ（手順の不安をなくす）: 黄色地のイラスト4ステップを点線矢印でつなぐ
9. 特長（安心できる3つの理由）: 角丸写真に大きな番号を重ね、マーカー付き見出しと本文を続ける
10. 中間CTA（相談を促す）: パッケージを敷き詰めた水色の写真の上に、白ロゴとコーラルCTA
11. 基礎知識（教育的な情報で信頼を得る）: オレンジ地に白カードのスライダー。手描き風の図解を入れる
12. 医師Q&A（専門家の回答で不安を解消する）: 水色地に引用符付きの白カードのスライダー
13. お客様の声（利用者の共感を広げる）: 写真と色付き面を組み合わせた横長カードのスライダー
14. よくある質問・最終CTA（疑問を解消して申込みにつなげる）: 生成り地のアコーディオンとオレンジの『もっと見る』。最後に中間CTAと同じ構成を繰り返す

Imagery

• 単色の背景で撮ったファッション誌風の人物写真（オレンジ背景など）
• ガッシュ風の手描きイラストで、身体や下着をポップに描く
• パッケージや小物を色面に並べて真上から撮る物撮り
• 温かい自然光で撮った医師・生活シーンの写真
• 線画アイコン（黒またはブランド色）と、手描き風の図解
• 円形のロゴ文字スタンプや、笑顔のモチーフを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは最大幅を約900pxにして中央に寄せ、色面の背景は全幅に広げる
• メッセージはPCで左にイラスト、右にテキストの2カラムにする
• ステップと特長はPCで横並び（4列・3列）にする
• 商品紹介はPCで左に画像、右に情報の2カラムを大きな白カードにまとめる
• FAQは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 行書くと起動時に読み込まれる。