--- version: alpha name: Navy and Crimson Medical Diet Clinic LP description: 白と淡い水色の地に、濃紺の見出しと深紅のアクセントを合わせた医療クリニック向けLP。CTAセクションは黒に近い紺で区切り、王冠付きの実績バッジと赤・青のピル型ボタンで予約へ誘導する。医師紹介、比較表、症例、料金、流れ、FAQまで情報量の多い訴求型の構成。 colors: primary: '#004666' dark-section: '#09121B' cta: '#CC0352' on-cta: '#FFFFFF' secondary: '#0286C6' background: '#FFFFFF' background-alt: '#F5F9FC' tint-1: '#D5EBFC' surface: '#F5F9FC' tint-2: '#FCEBF1' text: '#123E5C' text-body: '#505964' accent-1: '#A60B48' line: '#CADAE2' secondary-accessible: '#027DB9' typography: display: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 52px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 72px 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.full}' height: 54px button-tel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px badge-crown: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 52px heading-section: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px heading-bar: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px card-problem: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 210px comparison-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 400px card-case: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 600px card-plan: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 310px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 50px --- # DESIGN.md — 紺×深紅の信頼感ある医療痩身クリニックLP（Navy and Crimson Medical Diet Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、上品・高級 - **キーワード**: 医療の信頼感・濃紺と深紅・淡い水色の地・明朝の大見出し・王冠バッジ・症例ビフォーアフター - **地の質感**: フラットな単色面が基本。暗いCTAセクションには濃紺の暗いグラデーションを敷き、淡い背景には細い斜め線と大きな薄い欧文透かし文字を重ねる。 - **形**: 四角いカード、角丸の小さいボックス、ピル型CTA。見出しの下に短い赤線、小見出しの左に赤の縦線。 - **温度感**: 寒色寄りで落ち着いた温度感。深紅が差し色として温かみと緊張感を加える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#004666` | 見出し・帯・番号丸の濃紺 | 4% | 画素の実測 | | `dark-section` | `#09121B` | 問題提起・CTAセクションの黒紺地 | 10% | 画素の実測 | | `cta` | `#CC0352` | 主CTAボタンの深紅 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#0286C6` | 電話相談ボタンの青 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#F5F9FC` | 比較表・流れ・FAQ周辺の淡いグレー青地 | 18% | 画素の実測 | | `tint-1` | `#D5EBFC` | 解決策・症例セクションの淡い水色地 | 9% | 画素の実測 | | `surface` | `#F5F9FC` | 引用・パターン例の淡色ボックス | 4% | 画素の実測 | | `tint-2` | `#FCEBF1` | お試しプランの淡いピンク面 | 0% | 画素の実測 | | `text` | `#123E5C` | 見出しの濃紺文字 | 2% | 推定 | | `text-body` | `#505964` | 本文のダークグレー | 3% | 画素の主要色に補正 | | `accent-1` | `#A60B48` | 強調文字・価格・見出し下線の赤 | 0% | 画素の実測 | | `line` | `#CADAE2` | 区切り線・カード枠のライトグレー | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#027DB9` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレー青、淡い水色を交互に使う。そこへ黒紺のセクションを3〜4回挟んでリズムを作る。 - 深紅は主CTA、価格、強調語、見出し下の短い線、バッジ上の王冠に限る。 - 濃紺は見出しの文字、症例カードの帯、ステップ番号の丸、推奨列の見出しに使う。 - 電話CTAだけ青にして、主CTAの赤と区別する。 - 黒紺地の上の文字は白にし、強調語だけ赤かピンク寄りの赤にする。 - 比較表の自社列は淡いグレーを敷き、赤字で優位点を示す。 - `button-tel` は文字 `#FFFFFF` × 背景 `#0286C6` のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#027DB9`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインコピー・CTAセクションの大見出し | 明朝 | Noto Serif JP | 700 | 28px | 1.6 | 0.05em | | `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 500 | 20px | 1.5 | 0.04em | | `headline-md` | 理由の小見出し・医師のキャッチ・プラン名 | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.03em | | `headline-sm` | カード見出し・補足見出し | ゴシック | Noto Sans JP | 500 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.03em | | `note` | 注釈・免責 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.02em | | `accent` | 背景の大きな欧文透かし文字・大きな番号 | 欧文セリフ | Playfair Display | 700 | 52px | 1.0 | 0.02em | | `label-button` | CTAボタンの文字・バッジ文字 | 明朝 | Noto Serif JP | 700 | 19px | 1.3 | 0.04em | - FV、CTA、バッジは明朝の太字にして格調を出す。 - 本文と表はゴシックの細めの字にし、行間を広く取る。 - セクション見出しの背後に、薄い欧文セリフ体のセクション名を大きく透かして重ねる。 - 価格と数字は赤の大きな太字にし、単位は小さく添える。 - 理由の番号はイタリックの欧文で大きく薄く置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。CTA 横の実績バッジと症例比較は 2 カラム、医師の強みアイコンは 3 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約14pxとし、カードと写真は画面幅いっぱい近くまで広げる。 - セクション見出しは中央揃えにし、下に短い赤線を引く。 - 理由セクションは、番号→左赤線の見出し→小見出し→本文→写真の順で縦に積む。 - 写真の背後に、少しずらした淡いグレーの面を敷いて奥行きを出す。 - CTAブロックはバッジ4つ、赤ボタン、青ボタン、安心文言の順に並べる。 - 比較表は3列にし、自社列を強調する。 ## Elevation & Depth - 影はほぼ使わず、フラットな面と細い線で区切る。 - 医師カードと症例カードは白地に薄いグレー枠を付ける。 - 写真には少しずらした淡色の面を背後に置き、疑似的な影にする。 - 下部に固定の赤い予約ボタンを出し、わずかに影を付ける。 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。人物は白衣で上半身を切り抜くか、淡い背景で撮る。 - **セクション境界**: 水平の直線で背景色を切り替える。淡い地には細い斜め線の装飾を入れる。 - CTAボタンは完全なピル型にし、上に白いピル型ラベルを重ねる。 - バッジは白い四角に赤の上下線を引き、上に赤い王冠アイコンを置く。 - ステップ番号は濃紺または赤の正円にする。 - カードは基本的に角丸なしか2px程度にする。 ## Components - **予約CTAボタン**（`button-primary`）: 深紅のピル型ボタン。上部に白地・赤文字のピル型ラベル（所要時間など）を重ねる。 - **電話相談ボタン**（`button-tel`）: 青のピル型ボタン。電話番号を大きな明朝で入れ、上に白いラベルを付ける。 - **王冠付き実績バッジ**（`badge-crown`）: 白い四角に赤の上下線を引き、上中央に赤い王冠を置く。2行の明朝文字で、一部を赤にする。2×2で並べる。 - **透かし文字付きセクション見出し**（`heading-section`）: 中央の濃紺見出しの背後に薄い欧文セリフ体を大きく置き、下に短い赤線を引く。 - **左赤線小見出し**（`heading-bar`）: 左に赤の縦線を引いた濃紺の小見出し。上に大きな薄いイタリック番号を置く。 - **番号付き問題カード**（`card-problem`）: 黒紺地の上に置く白カード。上に写真、左上に赤の番号ラベル、下に見出しと本文。 - **比較表**（`comparison-table`）: 3列の表。自社列は濃紺の見出しに赤い推奨タグを付け、セルを淡グレーにして赤字で強調する。 - **症例カード**（`card-case`）: 濃紺帯に年代・期間のラベル。Before→After写真を左右に並べ、変化の説明ボックスと左赤線のコメントを続ける。 - **料金プランカード**（`card-plan`）: 細い枠のカード。チェックリストと赤い大きな価格を置く。推奨プランは濃紺枠、キャンペーンは赤枠と赤タグにする。 - **FAQ行**（`faq-item`）: 濃紺の丸にQ、質問文、右端に＋を置くアコーディオン。行の間を細線で区切る。 ## Do's and Don'ts **Do** - CTAブロックは、FV、中盤、症例後、ページ末で同じ構成のまま繰り返す。 - 赤は強調と行動喚起だけに使い、濃紺で落ち着きを保つ。 - 医師の顔写真と経歴を大きく見せ、信頼の根拠にする。 - 数字（価格・期間・種類数）は赤の太字で大きく見せる。 - 症例と価格表示には、個人差や費用の注釈を小さく必ず添える。 - 淡色セクションと黒紺セクションを交互に置いて読み進めやすくする。 **Don't** - 赤を広い面や本文に使わない。 - ポップな丸ゴシックや手書き書体を使わない。 - 強い影やグラデーションのボタンにしない。 - 写真に角丸やイラスト風の加工をしない。 - 見出しを左右でばらばらに揃えない（セクション見出しは中央揃え）。 - 暖色やビビッドな背景色を加えない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（強みと価格を一目で伝え、予約へ誘導する）: 淡い水色地に白衣の医師写真。2×2の王冠バッジ、明朝の大コピー、監修医の丸写真、黒紺の価格ボックス、赤と青のピル型CTAを順に置く。 2. **悩みの提起**（読者の失敗体験に共感する）: 赤いチェックボックス付きのリストを6行並べ、細線で区切る。下に体重計の写真と淡色の引用ボックスを置く。 3. **原因の提示**（痩せない理由を医学的な観点で示す）: 黒紺地に白の見出しと本文。番号付きの白い写真カードを3枚並べ、最後の一文の強調語を赤にする。 4. **解決策**（クリニックの治療方針を示す）: 淡い水色地に、左揃えの見出し、本文、診察風景の写真を置く。 5. **選ばれる理由**（4つの差別化ポイントを詳しく伝える）: 大きな薄い番号、左赤線の見出し、小見出し、本文、ずらし背景付きの写真を4回繰り返す。 6. **CTA**（無料カウンセリングへ誘導する）: 黒紺地に明朝の大見出しと中央揃えの本文。王冠バッジ4つ、赤・青のボタン、縦線区切りの安心文言を置く。 7. **比較表**（一般的なクリニックとの違いを示す）: 淡グレー地の3列表。自社列に推奨タグを付け、赤字で強調する。 8. **医師紹介**（医師の専門性で信頼を得る）: 名前を重ねた大きな人物写真、経歴リスト、左紺線のメッセージ、3つのアイコン強みボックス。 9. **実証・症例**（効果を視覚的に証明する）: 濃紺帯の見出しとBefore→After写真。淡い水色地に症例カードを縦に並べ、注釈を添える。 10. **料金プラン**（費用と保証を明示する）: 0円項目の帯とピンクのお試し枠、続いてプランカードを3つ縦に置く。追加プランと返金保証の説明文も入れる。 11. **治療の流れ**（来院から治療開始までの不安を減らす）: 縦線でつないだ番号丸のタイムライン。各ステップに無料タグを付け、最後の番号だけ赤にする。 12. **よくある質問**（残る疑問を解消する）: Q丸と＋アイコンのアコーディオンを細線区切りで並べる。 13. **クリニック情報**（所在地と予約方法を伝える）: 院名を紺の下線付き見出しにし、ラベルと値の2列表と地図埋め込みを続ける。複数院を縦に並べ、下部に固定の赤い予約ボタンを置く。 ## Imagery - 白衣の医師を淡い水色や白の背景で撮り、自然な笑顔の上半身を使う。 - 医療の現場写真（錠剤、カルテ、対面診察）は明るく清潔な白基調にする。 - 原因カードの写真は暗めで寒色寄りにし、不安感を出す。 - 症例写真は同じ角度・同じ背景で撮ったBefore/Afterを並べ、間に赤い矢印を置く。 - アイコンは濃紺の細い線画で統一する。 - 背景には細い斜め線や薄い菱形の線を控えめに装飾として入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約70%に絞り、中央に配置する。 - PCのFVは左にコピー・バッジ・CTA、右に医師写真の2カラムにする。 - 悩みリストや理由セクションは、PCでテキストと写真を左右に交互配置する。 - 原因カードはPCで2〜3列のグリッドにする。 - CTAのバッジはPCで4つを横一列に並べ、ボタン2つも横並びにする。 - 料金プランはPCで3列、医師紹介は写真を左・情報を右の横並びにする。 ## 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-3ed8a518`（元 LP の URL から採番） - **元 LP**: https://www.mbd-clinic.com/lp/medical-diet-01/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。