DESIGN.md — 水色×黄色マーカーの疾患啓発ヘルスケアLP（Bright Aqua Illustrated Health Awareness LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、ポップ・元気
• キーワード: 水色・黄色マーカー・線画イラスト・白カード・ドット装飾・啓発
• 地の質感: フラットな薄グレー地に白カードと水色グラデーション帯。ドット・円・斜線の装飾を散らす
• 形: 大きめ角丸カード、ピル型ボタン、カード背面の傾いた水色板、上辺が弧を描く帯
• 温度感: 爽やかでやや涼しいが、イラストと黄色で温かみを足す

Colors

• 地は薄グレー、内容は白カードに載せる
• 見出しと強調語は水色文字で統一
• 本文中の重要語は太字＋黄色の下半分マーカー
• 誘導・アプリ紹介は水色グラデ帯で区切り、上に白文字
• 黄色はQアイコン・マーカー・装飾点に限定し面では使わない
• セクション見出しの引用符“”は黄色で添える
• button-primary は文字 #EBFEFF × 背景 #2BB3DB のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A7D9A、4.53:1）を使う。
• button-outline は文字 #15ACCC × 背景 #FEFEFE のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#108199、4.5:1）を使う。
• ribbon-heading は文字 #15ACCC × 背景 #FEFEFE のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#108199、4.5:1）を使う。

Typography

• 本文は中央揃えで行間を広く取る
• 見出しは2行に分け、キーワードを“”で囲み黄色で強調
• 背景に巨大な英字を白で薄く敷き、画面外へはみ出させる
• 数値は大きく太く、単位は小さく
• 注釈は※付きで小さく左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みカードも縦積み
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約6%の余白
• セクション頭は透かし英字→リボン見出し→大見出し→リード文の順
• カードの下端中央に丸い矢印ボタンを半分はみ出させる
• CTAはカード外に中央配置で幅85%

Elevation & Depth

• カードは影ではなく背面に傾いた水色板やグレー板をずらして重ねる
• イラスト枠は右下に水色のオフセット影
• 黄色ラベル箱は黒枠＋右下グレーオフセット影
• ぼかし影は使わない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: イラストは角丸矩形に淡い水色地で収める。写真は角丸なし白枠付き
• セクション境界: 水色帯の上辺を大きな弧で盛り上げ、マスコットを頂点に乗せる。他は直線切替
• カード背面板は-3度ほど傾ける
• カード上部にクリップのイラストを留める
• リボン見出しは左に巻き端、右に切り込みの線画

Components

• 主CTAボタン（button-primary）: 水色グラデのピル型、白太字と右端に＞
• アウトラインボタン（button-outline）: 白地に水色グラデ太枠のピル型、水色文字と＞
• リボン型サブ見出し（ribbon-heading）: 水色線のリボン枠に人物やマスコットを左に重ねる
• 悩みカード（worry-card）: 上にイラスト枠、水色見出し、チェックアイコン付き箇条書き、下に丸矢印
• 傾き板付き情報カード（tilted-card）: 背面に傾いた水色板、上にクリップ、Method番号を細線で挟む
• 黄色マーカー強調（marker-text）: 太字の下半分に黄色の帯
• Q&A行（faq-item）: 黄色吹き出しQアイコン、質問文、右に水色＋。上下に細線
• 薬剤ラベル箱（label-box）: 黒枠白箱、左端に黄色の帯、右下オフセット影
• 目次リンク（anchor-nav）: 水色丸の下矢印アイコンと太字、点線区切り

Do's and Don'ts

Do - 強調は水色文字か黄色マーカーの2種に絞る - イラストは黒の太い線画に淡い彩色で統一 - 白カードを薄グレー地に浮かべて区切る - マスコットを各セクションの端に覗かせる - ドット円・リング・斜線の水色黄色装飾をセクション境目に置く

Don't - 濃い影やグラデの多用で重く見せない - 赤や警告色で不安を煽らない - 本文を左揃えの長文にしない - 写真を多用しイラストの世界観を崩さない - 黄色を大きな面で使わない

Page Structure

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

1. ファーストビュー（人物がボードを掲げキャッチと名称を提示）: 明るい室内写真全面、ボード上に水色見出しと立体ロゴ
2. 導入リードと目次（問題提起と読み進め方を示す）: 背面水色板付き白カード、中央揃え本文、マーカー強調、目次リンク3つ
3. 悩みの提起（当事者の悩みを3場面で共感）: 透かし英字、リボン見出し、イラスト付き悩みカードを3枚縦積み
4. 疾患の解説と統計（患者数と再発頻度で深刻さを示す）: クリップ付き傾きカードに大きな数字と水色系円グラフ、調査注釈
5. セルフチェック誘導（自己診断ページへ送る）: 上辺が弧の水色グラデ帯、頂点にマスコット、白ピルボタン
6. 治療法の紹介（治療の選択肢を段階別に説明）: Method番号付き傾きカード2枚、黄色帯ラベル箱、主CTA、注釈
7. よくある質問（受診の疑問を解消）: 白地、医師イラスト付きリボン見出し、Qアイコンのアコーディオン
8. アプリ・特集動画（関連コンテンツへ回遊）: 水色グラデ地、バナー、吹き出し枠見出し、白枠サムネのカルーセルと左右丸矢印

Imagery

• 黒い太めの線画に淡い水色・ピンク・黄の塗りの人物イラスト
• 白いふわふわの犬マスコットを各所に配置
• クリップや紙の質感を線画で添える
• ドット塊・リング・点線円・斜めのストライプを水色と黄色で散らす
• FV写真は白く明るい室内で人物が正面を向く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを角丸の写真パネルにし右にコピーとボタンを置く2カラム
• PCの悩みカードはイラストと本文を左右交互の横並びに
• PCの目次リンクは3列横並び
• PCのコンテンツ幅は約75%に絞り中央寄せ
• 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 行書くと起動時に読み込まれる。