--- version: alpha name: Serene Blue Mincho Clinic LP description: くすんだ青紫のグラデーション面と明朝体の見出しで、医療の信頼感と上品さを表したクリニック向けLP。生成りと薄灰の地色を交互に敷き、ティール色のピル型CTAと金色の実績メダルをアクセントにしている。 colors: primary: '#7B84AB' secondary: '#375C82' cta: '#4AB2C2' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F7F4ED' surface: '#F6F6F6' dark-section: '#6A92C1' text: '#2A2E36' text-muted: '#8A8C95' accent-1: '#B89668' marker: '#F3EE8A' tint-1: '#C2E0F8' line: '#C8CACE' cta-accessible: '#30818D' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em accent: fontFamily: Cormorant Garamond fontSize: 17px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 2px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 58px cta-band: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 260px point-card: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 560px section-title: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px accordion-dark: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' height: 58px faq-item: textColor: '{colors.secondary}' rounded: '{rounded.sm}' height: 72px outline-toggle: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' height: 56px badge-medal: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 140px contact-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 200px --- # DESIGN.md — 青グラデと明朝で魅せる眼科クリニックLP（Serene Blue Mincho Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 信頼・誠実、上品・高級、清潔・爽やか、情報量多め・訴求型 - **キーワード**: くすみブルー・明朝見出し・英字サブタイトル・金の月桂冠メダル・ティールCTA・ドットの光粒子 - **地の質感**: 青のグラデーションに点描の光粒子を重ね、写真には青みの寒色補正をかける。面はマットで影はごく薄い。 - **形**: 角丸の少ない直線的なカードとアコーディオン。CTAだけ完全なピル型にする。楕円の弧でセクションを区切り、正円の特長バッジを並べる。 - **温度感**: 寒色が中心で静か。生成りと金色で冷たくなりすぎないようにする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7B84AB` | ポイントカード・アコーディオンの青紫面 | 9% | 画素の実測 | | `secondary` | `#375C82` | 見出し強調・FAQ質問文の青 | 3% | 画素の実測 | | `cta` | `#4AB2C2` | 予約ボタンのティール | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 25% | 画素の実測 | | `background-alt` | `#F7F4ED` | 生成りの地色（実績・医師・費用比較） | 8% | 画素の主要色に補正 | | `surface` | `#F6F6F6` | 薄灰のセクション地 | 9% | 画素の実測 | | `dark-section` | `#6A92C1` | CTA帯の青グラデ地 | 8% | 画素の主要色に補正 | | `text` | `#2A2E36` | 見出しの濃墨色 | 2% | 推定 | | `text-muted` | `#8A8C95` | 英字サブタイトル・注釈 | 0% | 画素の実測 | | `accent-1` | `#B89668` | 金色の強調文字とメダル枠 | 1% | 推定 | | `marker` | `#F3EE8A` | 青面上の黄色の強調文字 | 0% | 推定 | | `tint-1` | `#C2E0F8` | 淡い水色の帯 | 4% | 画素の実測 | | `line` | `#C8CACE` | 見出し脇の細い罫線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#30818D` | AA を満たす補正値（計算） | | 計算 | - 地色は白・生成り・薄灰をセクションごとに交互に切り替える - ポイントカードと一覧アコーディオンは青紫の単色かグラデーションで塗る - CTA帯は青のグラデーションに点描の光粒子を重ねる - ティールは主CTAにだけ使う - 金色は医院名の強調、実績メダル、保証・問い合わせ枠に限って使う - 青い面に乗る本文の強調は黄色の文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#4AB2C2` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#30818D`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVとクロージングの縦書き大コピー | 明朝 | Shippori Mincho | 500 | 44px | 1.2 | 0.1em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 28px | 1.4 | 0.08em | | `headline-md` | ポイントカードの見出し・小見出し | 明朝 | Noto Serif JP | 500 | 18px | 1.5 | 0.06em | | `accent` | 英字サブタイトル・POINT番号 | 欧文セリフ | Cormorant Garamond | 400 | 17px | 1.3 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.04em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `label-button` | CTAとアコーディオンのラベル | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.06em | - 見出しは明朝、本文はゴシックで分ける - セクション見出しは、小さな前置きの行と大きな本題の行を2段で組む - 見出しの下に英字セリフのサブタイトルと細い罫線を添える - POINTの番号は大きな欧文セリフ数字で示す - 字間はやや広めの0.04〜0.1emにする - FVのコピーは縦書きの明朝で組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長バッジだけ 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約15pxで、カードは画面幅いっぱいに近く置く - ポイントは写真の下に青い面の説明ブロックを接続した縦カードにする - CTA帯はページ上部・中盤・末尾の3か所に入れる - アコーディオンは高さ約45pxで10px間隔に積む - 医師紹介と流れはカルーセルにし、左右に円形の矢印を置く ## Elevation & Depth - FAQカードには薄く広い影を付ける（0 2px 8px rgba(0,0,0,.08)） - 医師カードと流れのカードは白面に薄い影を付ける - 円形バッジは白から淡青へのグラデーションと微かな影で立体感を出す - CTAボタンは影なしで平面にする ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角で角丸なし、横長に切り抜く。人物の一部だけ円形に切り抜く - **セクション境界**: 楕円の大きな弧と、下向きの浅いV字で区切る - CTAはピル型で、左端に白い正円の「無料」バッジを置く - 特長は正円バッジを3つ並べる - 実績は金枠に月桂冠と星を付けた円形メダルで見せる - サブ見出し帯は左右の端を斜めにカットした平行四辺形にする ## Components - **予約CTA**（`button-primary`）: ティールのピル型ボタン。左に白丸の「無料」、右端に「>」を置く - **CTA帯**（`cta-band`）: 青グラデの面に平行四辺形のラベル、明朝の一行コピー、ボタン、営業時間の注記を縦に並べる - **ポイントカード**（`point-card`）: 写真の下に青紫の面を付け、POINT番号・見出し・罫線・黄色強調入りの本文を載せる - **2段見出し**（`section-title`）: 小さな前置き、大きな明朝の見出し、英字サブタイトルと右へ伸びる細線の順に組む - **青紫アコーディオン**（`accordion-dark`）: 中央揃えの白文字に、下向きの矢印か＋を付ける - **FAQカード**（`faq-item`）: 白いカードに薄い影を付け、青い明朝の質問文と右端の矢印を置く - **枠線トグル**（`outline-toggle`）: 淡い青の地に青い細枠を付け、青の明朝ラベルと矢印を置く - **実績メダル**（`badge-medal`）: 白い円に金の細枠、星、月桂冠を付け、中に青い明朝の数字を入れる - **電話窓口枠**（`contact-box`）: 生成りの面を金の細枠で囲み、青い大きな電話番号を入れる ## Do's and Don'ts **Do** - 見出しは明朝体にし、英字サブタイトルと罫線をセットで付ける - 数字の実績には※を付け、近くに小さな注釈を置く - 青い面の上の強調は黄色の文字で示す - セクションごとに地色を白・生成り・薄灰で切り替える - CTA帯は一定の間隔で繰り返す **Don't** - 赤や原色の派手な強調色は使わない - ティールをCTA以外に広く使わない - ポップ体や丸ゴシックで見出しを作らない - 大きな角丸のカードを多用しない - 暖色に寄った写真補正にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績と安全性を一目で伝える）: 青く補正した執刀写真に縦書き明朝の大コピーを重ね、下に円形メダルを3つとロゴ、注釈を置く 2. **CTA**（無料相談へ誘導する）: 青グラデの帯に平行四辺形ラベル、ピル型ボタン、営業時間の注記を入れる 3. **悩みの提起**（迷いに共感する）: 人物写真の横に、悩みを書いた青紫の円を2つ並べる 4. **信頼性の訴求**（クリニック選びの基準を示す）: 淡い目元の写真の上に、細枠と明朝のコピーを重ねる 5. **特長**（実績と安全の根拠を4つ示す）: 生成りの地に、写真と青紫の説明面を組んだポイントカードを縦に積む 6. **配慮・サポート**（不安を和らげる）: 楕円の白い面の中に、集合写真と3つの円形アイコンバッジを置く 7. **約束**（丁寧な説明の姿勢を示す）: 番号ごとに短い説明文と枠線トグルを置く 8. **料金**（価格と付帯サービスを示す）: 青帯の見出し、大きな青い価格、生成りの小さなボックス3つ、分割払いの案内を並べる 9. **保証**（術後の安心を示す）: 写真の下に保証内容を書いた白い枠を置き、V字の区切りの後に延長の案内を続ける 10. **費用比較**（長期的な割安さを示す）: 青紫の棒グラフに金色の基準線と円を重ねる 11. **よくある質問**（疑問を解消する）: 青紫のアコーディオンと白いFAQカードを並べる 12. **医師紹介・手術の流れ**（人と手順で安心させる）: 白いカードをカルーセルにし、左右に円形の矢印を置く 13. **院の案内**（所在地を示す）: 院ごとに＋付きの青紫アコーディオンを並べる 14. **クロージング**（最後に予約を促す）: 医師の写真と縦書きコピー、メダル、CTA帯、電話窓口の枠、フッターの順に置く ## Imagery - 手術室や診察室の写真は、青みに寄せた寒色で補正する - 医師は白衣か術衣で、落ち着いた表情か穏やかな笑顔の写真にする - 女性モデルは自然光で白基調、柔らかいトーンで撮る - 製品は水しぶきと水色の背景で透明感を出す - 装飾には点描の光粒子の波と、金の月桂冠を使う - アイコンは青の細い線画で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではコンテンツを中央の約60%幅に収め、周囲に地色を広げる - ポイントカードは写真とテキスト面を左右に並べ、行ごとに左右を入れ替える - 料金・保証・費用比較は 2 カラムにする - FV は楕円の弧で切り抜き、横長の写真にする - カルーセルは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-6854fae7`（元 LP の URL から採番） - **元 LP**: https://senshinkai-clinic.jp/icl_lp_d/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。