--- version: alpha name: Navy and Gold Trust Clinic LP description: 濃紺を主色、くすんだ金をアクセント、オレンジを申込ボタンに使った男性向け専門クリニックの LP。明朝の見出しで品よく見せる。症例・比較表・料金・流れ・FAQ を細かく並べ、信頼感と情報量で申込みまで導く。 colors: primary: '#032B63' on-primary: '#FFFFFF' secondary: '#AA9B53' cta: '#F48314' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#E9F8FF' tint-1: '#F4EEDE' tint-2: '#EDEDED' text: '#123258' text-body: '#636A73' marker: '#FBEFB0' line: '#C1BFB9' cta-accessible: '#B65E08' secondary-accessible: '#81763F' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 44px campaign-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 300px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 280px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' height: 240px comparison-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 400px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 130px faq-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 36px consult-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 130px --- # DESIGN.md — 紺×金の誠実系男性クリニック LP（Navy and Gold Trust Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: 濃紺・くすみ金・明朝見出し・症例写真・比較表・白カード - **地の質感**: 濃紺の幾何学ポリゴン柄の背景と、フラットな白カードの組み合わせ - **形**: 角丸はほぼなく、細い金線の四角い枠と小さな円形の番号バッジを使う - **温度感**: やや寒色寄りで落ち着いた雰囲気。生成りの帯でぬくもりを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#032B63` | ブランドの濃紺（帯・見出しバー） | 18% | 画素の実測 | | `on-primary` | `#FFFFFF` | 濃紺の上の白文字 | 2% | 画素の主要色に補正 | | `secondary` | `#AA9B53` | くすみ金（サブボタン・番号・枠線） | 2% | 画素の実測 | | `cta` | `#F48314` | 申込ボタンのオレンジ | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタンの白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 27% | 画素の実測 | | `background-alt` | `#E9F8FF` | 薄い水色の帯（料金・流れ・FAQ） | 10% | 画素の実測 | | `tint-1` | `#F4EEDE` | 生成りの帯（特徴・院長紹介） | 9% | 画素の実測 | | `tint-2` | `#EDEDED` | 薄グレーの帯（バナー・医院紹介） | 10% | 画素の実測 | | `text` | `#123258` | 見出しの紺文字 | 1% | 画素の主要色に補正 | | `text-body` | `#636A73` | 本文のグレー文字 | 3% | 画素の主要色に補正 | | `marker` | `#FBEFB0` | 本文を強調する黄色のマーカー | 0% | 推定 | | `line` | `#C1BFB9` | 表の罫線・カード枠 | 2% | 画素の主要色に補正 | | `cta-accessible` | `#B65E08` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#81763F` | AA を満たす補正値（計算） | | 計算 | - 白・水色・生成り・グレーの帯を交互に置き、間に濃紺の帯を挟んでリズムを作る - 濃紺の帯には白カードを載せ、文字は紺またはグレーにする - オレンジは無料予約の主ボタンだけに使う - 金はサブの予約ボタン・番号バッジ・特徴カードの枠線に使う - 本文の要点は黄色のマーカーで目立たせる - 比較表の自院の列は薄いクリーム色で塗り分ける - `button-primary` は文字 `#FFFFFF` × 背景 `#F48314` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B65E08`、4.57:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#AA9B53` のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#81763F`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きなキャッチ | 明朝 | Shippori Mincho | 700 | 36px | 1.3 | 0.02em | | `headline-lg` | セクションの見出し | 明朝 | Noto Serif JP | 600 | 24px | 1.4 | 0.04em | | `headline-md` | カードの見出し・特徴のタイトル | 明朝 | Noto Serif JP | 600 | 18px | 1.4 | 0.02em | | `headline-sm` | 表の項目・質問文・帯の見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・税込表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字のラベル・ステップ番号 | 欧文セリフ | Playfair Display | 400 | 13px | 1.2 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - 見出しは明朝、本文・表・ボタンはゴシックで使い分ける - 数字の実績（％・期間）は大きなセリフ体で見せる - 見出しの一部の語は金色または大きめの文字で目立たせる - 価格は太字のゴシックで大きく、税込表記は小さく添える - 本文は行間を 1.8 前後とってゆったり読ませる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央に幅約 500px のコンテンツを置き、カードの中は写真と文を 2 列にする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 帯は画面いっぱいに広げ、中身は中央の固定幅に収める - 症例は写真ギャラリーと情報表をセットで番号順に並べる - CTA（予約ボタン＋電話）はセクション 2〜3 個ごとに繰り返す - 流れの各ステップは下向きの三角でつなぐ - FAQ は紺のバーを詰めて縦に並べたアコーディオンにする ## Elevation & Depth - 影はほとんど使わない。白カードを濃紺の地に置いてコントラストで浮かせる - バナーには弱い影をつけてもよい - 枠線は 1px の細線を基本にする ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物は白衣の医師やスタッフを切り抜くか四角でトリミングする - **セクション境界**: 直線で背景色を切り替える - ボタンは角がほぼ直角の長方形にする - 番号バッジは金か紺の正円にする - 特徴カードは金の細線で四角く囲む - 医院紹介の詳細ボタンだけは紺のピル型にする ## Components - **無料予約ボタン**（`button-primary`）: オレンジの長方形ボタン。濃紺の帯の中に置く - **金の予約ボタン**（`button-secondary`）: 金地に白文字。下に金枠の電話ボタンを添える - **モニター募集の帯**（`campaign-band`）: 濃紺の写真背景に、チェック付きの条件 3 つとオレンジのボタンを置く - **症例カード**（`case-card`）: 円形の番号と見出し、写真スライダー、罫線の情報表を組み合わせる - **特徴カード**（`feature-card`）: 金の細線で囲み、上に金の円の番号と明朝のタイトル、下に写真と文を 2 列で置く - **比較表**（`comparison-table`）: ◎○△×で他院と比べる表。自院の列はクリーム色にする - **料金カード**（`price-card`）: 紺の見出しバーに赤い斜めの「例」バッジ。白地に大きな価格を置く - **流れのステップ**（`step-card`）: 紺の細枠の中に写真と STEP 番号・本文を置き、下向きの三角でつなぐ - **FAQ アコーディオン**（`faq-bar`）: 紺のバーに白文字で「Q.」と質問を書き、右端に＋を置く - **無料相談バナー**（`consult-banner`）: 医師の写真と紺地、金のボタンと吹き出しを組み合わせ、グレーの帯の中に置く ## Do's and Don'ts **Do** - 紺・金・白を基調にして、品格と信頼感を保つ - 実績の数字や返金保証は円形のバッジで強調する - 症例・比較・料金・流れなど、根拠になる情報を具体的に見せる - CTA はオレンジの予約ボタンと電話番号をセットにして何度も置く - 背景の帯の色を交互に変え、長いページでも区切りがわかるようにする **Don't** - ピル型やパステル調のポップなボタンを多用しない - オレンジをボタン以外の装飾に使わない - 見出しを丸ゴシックにしない - 本文を大きく太くしすぎない（強調はマーカーで行う） - 濃い影やグラデーションを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象・専門性・実績を一目で伝える）: 明るいグレーの地に笑顔の医師の写真。明朝の大きなキャッチ、金の帯ラベル、実績を書いた円形バッジ、金の予約ボタンを置く 2. **キャンペーン**（期間限定のモニター募集で申込みを促す）: 濃紺の写真背景にチェックリストとオレンジのボタン 3. **治療実績**（症例の経過で効果を示す）: 濃紺の地に経過写真を矢印でつなぎ、白い表を添える。その下に番号付きの症例カードを 3 件 4. **中間 CTA バナー**（無料相談へ誘導する）: グレーの帯に医師入りのバナー 5. **早めの治療を勧める理由**（今始める必要性を伝える）: サイクル図、チェックリスト、比較図（青とオレンジ）、マーカー付きの本文、紺の見出しバー 6. **選ばれる理由**（他院との違いを示す）: 濃紺のポリゴン柄の地に REASON 番号付きの白カードを 3 枚 7. **強みと比較表**（客観的な比較で優位性を示す）: 白文字の本文とマーカー、白地の◎○△×比較表 8. **5 つの特徴**（保証や配慮など安心できる要素を並べる）: 生成りの地に金枠のカードを 5 枚。金の円の番号と明朝のタイトル 9. **料金**（費用の目安を明示する）: 水色の地に紺の箱で「無料」の項目を見せ、例示バッジ付きの価格カードを 3 枚 10. **治療の流れ**（来院から治療までを具体的に伝える）: 矢印型のステップバーと、写真付きのステップカード 5 枚 11. **よくある質問**（不安を解消する）: 紺のバーのアコーディオンを 8 本並べる 12. **返金保証**（リスクがないことを強調する）: 濃紺の帯に明朝の見出しと下線付きの強調語 13. **医院紹介・院長紹介**（所在地と人物で信頼を補強する）: グレーの地に地図と情報表、紺のピル型ボタン。生成りの帯に院長の写真と経歴 ## Imagery - 白衣の男性医師が笑顔の写真を、明るく清潔なトーンで使う - 症例は頭頂部を接写し、同じ角度で経過を並べる - 診察やカウンセリングの場面は自然光で、白と紺が基調の院内で撮る - 背景には濃紺のポリゴン柄や、ぼかした院内写真を使う - 図解は青とオレンジのフラットなアイコンで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 500px の固定幅で、SP はそれを画面幅いっぱいに広げる - カード内の写真と文の 2 列は、SP では縦積みにする - 比較表は SP でも 4 列を保ち、文字を 12px に縮める - 流れの矢印バーは SP では 2 段にするか横スクロールにする - 医院紹介は地図を上、情報表を下に積む ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-270d9fa7`（元 LP の URL から採番） - **元 LP**: https://agacare.clinic/landing/003v5_yt/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。