--- version: alpha name: Natural Olive Green and Cafe Brown Dental Clinic LP description: 生成り色の地に若草色と木目調ブラウンを合わせた、家族向け歯科クリニックのサイト。白いカードと丸みのある写真の切り抜きでやさしさを出し、大きな薄色の英字透かしと細いゴシック体で今っぽく見せている。 colors: primary: '#8EA15C' accent-1: '#6E9A1E' cta: '#7CAB01' on-cta: '#FFFFFF' background: '#F6F3EA' surface: '#FEFEFC' secondary: '#AE8760' background-alt: '#DCD1BD' tint-1: '#C8CEA5' tint-2: '#F6F3EA' dark-section: '#39485F' on-dark: '#FFFFFF' text: '#3A3A3A' line: '#EBE9E0' cta-accessible: '#5D8001' secondary-accessible: '#936F4B' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-lg: fontFamily: Montserrat fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 64px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 72px 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: 44px button-outline: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 32px number-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px menu-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px feature-blob: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 180px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px stat-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 96px name-plate: backgroundColor: '{colors.primary}' typography: '{typography.note}' height: 28px --- # DESIGN.md — 若草色×カフェブラウンの歯科医院 LP（Natural Olive Green and Cafe Brown Dental Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: ナチュラル、やさしい・柔らかい、清潔・爽やか、信頼・誠実 - **キーワード**: 生成り地・若草グリーン・カフェブラウン・英字透かし・白カード・有機的な写真切り抜き - **地の質感**: フラットな単色面。グラデーションと影はほぼ使わず、薄い英字の透かしで奥行きを出す - **形**: 角を大きく丸めた白カード、不定形のブロブで切り抜いた写真、ピル型の線ボタン - **温度感**: 暖かい中間色に爽やかなグリーンを差した、温かく清潔な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8EA15C` | ブランドの若草グリーン（強調文字・アイコン・ボタン） | 6% | 画素の主要色に補正 | | `accent-1` | `#6E9A1E` | 濃いめの緑（見出しの強調語・Web予約ボタン） | 2% | 推定 | | `cta` | `#7CAB01` | 予約ボタンの面 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#F6F3EA` | 生成り色のページ地 | 22% | 画素の実測 | | `surface` | `#FEFEFC` | 白いカード・コンテンツの面 | 25% | 画素の実測 | | `secondary` | `#AE8760` | カフェブラウン（MENU帯・施設案内の面） | 9% | 画素の実測 | | `background-alt` | `#DCD1BD` | ベージュ（特長セクションの地） | 13% | 画素の実測 | | `tint-1` | `#C8CEA5` | 淡いオリーブ（英字透かし・丸い数値バッジ） | 5% | 画素の主要色に補正 | | `tint-2` | `#F6F3EA` | 経歴ボックスの淡い生成り面 | 6% | 画素の実測 | | `dark-section` | `#39485F` | フッターのスレートネイビー | 7% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃い面の上の文字 | 0% | 画素の主要色に補正 | | `text` | `#3A3A3A` | 見出し・本文の文字 | 3% | 推定 | | `line` | `#EBE9E0` | 区切り線・FAQ罫 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#5D8001` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#936F4B` | AA を満たす補正値（計算） | | 計算 | - 地は生成り→白→ブラウン→ベージュ→グリーン→白→ネイビーの順にセクションごとに切り替える - 強調語や番号、アイコンは若草グリーンでそろえる - ブラウンは帯状の面と施設案内の箱だけに使い、文字には使わない - 英字の透かしは地より少し濃い同系色で、大きく薄く敷く - フッターだけスレートネイビーにしてページを締める - 見出しの一部の語だけグリーンのマーカー面に白抜き文字を載せる - `button-primary` は文字 `#FFFFFF` × 背景 `#7CAB01` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#5D8001`、4.61:1）を使う。 - `number-badge` は文字 `#FFFFFF` × 背景 `#AE8760` のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#936F4B`、4.55:1）を使う。 - `stat-circle` は文字 `#6E9A1E` × 背景 `#C8CEA5` のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.5 | 0.12em | | `headline-lg` | セクションの英字見出し（MENU・ABOUT・FAQなど） | 欧文サンセリフ | Montserrat | 500 | 24px | 1.2 | 0.15em | | `headline-md` | 特長・診療の見出し（一部の語をグリーンで大きく） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `headline-sm` | カード見出し・FAQの質問 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.06em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.06em | | `note` | 経歴・注釈・日本語の小見出し | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.04em | | `accent` | 背景の英字透かし | 欧文サンセリフ | Montserrat | 300 | 64px | 1.0 | 0.05em | | `label-button` | ボタン・ナビゲーション | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.4 | 0.08em | - 英字見出しの右に縦線を挟んで、日本語の小見出しを小さく添える - 見出しの強調語だけグリーンにし、ひと回り大きくする - 本文は行間を広め（2.0）に取り、字間も少し空ける - 英字の透かしは細いウェイトで画面幅いっぱいに置く - 太字はあまり使わず、500〜700までにとどめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はテキストと写真の 2 カラム、メニューは 5 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 写真とテキストは左右を交互に入れ替えて並べる - 特長は 2 列×3 段。SP では 1 列にする - 白いカードは画面端から少しはみ出すように大きく置く - 経歴は淡い面の箱に、箇条書きを 2〜3 列で入れる - 初診の流れはアコーディオン型の番号付きリストにする ## Elevation & Depth - 影はほぼ使わず、面の色の差で階層を分ける - 写真を重ねて少しずらし、奥行きを出す - カードは白い面だけで、枠線は付けない ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 基本は角丸の長方形。特長だけ不定形のブロブ型で切り抜く - **セクション境界**: 直線で色を切り替える。白カードの上側だけ大きく角を丸める - ボタンは細いグリーンの枠線のピル型で、右端に矢印を付ける - 数値バッジは淡いオリーブの正円にする - メニューカードは白い正方形に近い形で、右下に小さな矢印を付ける ## Components - **予約ボタン**（`button-primary`）: グリーンの面に白文字を載せた角丸ボタン。アイコンを添える - **線ボタン**（`button-outline`）: 細いグリーンの枠線のピル型ボタン。右に矢印を置く - **英字＋和文の見出し**（`section-heading`）: 大きめの英字・縦線・小さな和文を横に並べる - **番号丸**（`number-badge`）: 茶色の小さな円に01・02などの番号を入れ、見出しの頭に置く - **診療メニューカード**（`menu-card`）: 線画アイコンと名前を載せた白カード。縦書きの英字を添える - **特長ブロック**（`feature-blob`）: ブロブ型に切り抜いた写真と、グリーンの下線付き見出しを組み合わせる - **アコーディオン**（`accordion`）: 白い角丸の帯に番号と＋/−を付ける。開いた中身はグリーンの面に入れる - **FAQ行**（`faq-item`）: グリーンのQの後に質問文を置き、右端に＋を付ける。行の間は罫線で区切る - **数値の丸バッジ**（`stat-circle`）: 淡いオリーブの円に、ラベルとグリーンの大きな数字を入れる - **名前プレート**（`name-plate`）: 人物写真の下端に重ねるグリーンの帯。肩書きと氏名を入れる ## Do's and Don'ts **Do** - 生成り・白・ブラウン・グリーンの 4 色を軸に、セクションごとに地の色を切り替える - 人物写真は明るく自然光で、笑顔のスタッフを中心に撮る - 見出しは英字と和文の 2 段構成で統一する - 余白は広めに取り、本文は行間 2.0 にする - ボタンはピル型と矢印で統一する **Don't** - 原色の赤や青、ビビッドな色は使わない - 濃いドロップシャドウやグラデーションのボタンは使わない - 太いゴシックで本文を詰めて組まない - 写真を暗く、冷たいトーンに加工しない - フッター以外に濃い色の大きな面を作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（医院の雰囲気と理念を伝える）: 診療風景とスタッフの集合写真を横に並べ、左上に短い 2 行のキャッチを置く。右下にお知らせ帯を重ねる 2. **理念の紹介**（方針と立地などの基本情報を伝える）: 生成り地に短い文章を置き、INFO 欄にグリーンの箇条書きを並べる。写真は重ねて配置する 3. **ピックアップ診療**（主力の診療 2 つを訴求する）: 英字透かしの上に白い大きなカードを置き、番号付きの見出し・写真・バナーを載せる 4. **診療メニュー**（診療科目の一覧への導線）: ブラウンの帯に白いアイコンカードを 5 列で並べ、その下にグリーンのバナーを置く 5. **院長・理事長の紹介**（医師の信頼性を示す）: 人物写真に名前プレートを重ね、経歴は淡い面の箱に年表形式で入れる 6. **特長**（6 つの強みを伝える）: ベージュの地に英字透かしを敷き、ブロブ型の写真と見出しを 2 列×3 段で並べる 7. **施設案内**（院内の設備を見せる）: 写真のコラージュにブラウンの箱を重ね、POINT 番号付きの写真カードを 2 枚並べる 8. **初診の流れ**（受診までの不安をなくす）: グリーンの地で、左に説明と写真、右に番号付きのアコーディオンを置く 9. **よくある質問**（疑問を解消する）: 白い地に Q 付きの行を罫線で区切って並べ、右上に一覧ボタンを置く 10. **採用**（求人への導線）: 大きな英字の見出しとスタッフ写真を 2 カラムで組み、旗の飾りを添える 11. **診療時間・予約**（予約と来院を促す）: 電話ボタンと Web 予約ボタンを並べ、診療時間表はグリーンの丸で示す。下に数値の丸バッジを並べる 12. **フッター**（サイト内の回遊を助ける）: ネイビーの地に白文字のリンク列とグリーンの予約ボタンを置く ## Imagery - 自然光で明るく撮った院内とスタッフの写真。ベージュの制服や木目の家具など暖色系でそろえる - 患者と医師が向き合う、笑顔の診療シーン - 特長の写真は有機的なブロブ形に切り抜く - アイコンはグリーンの細い線画で、歯や器具を簡略化して描く - 背景には大きな英字のアウトライン風の透かしを入れる - 旗のガーランドなど、小さな手描き風の飾りを少しだけ添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像から推定した値。SP は 1 カラムにして、写真を上・テキストを下に置く - メニューカードは SP で 2〜3 列のグリッドにする - 特長の 2 列は SP で 1 列にし、ブロブ写真は右寄せで小さめにする - 英字の透かしは SP で 40px 程度に縮める - 予約ボタンは SP で画面下部に固定する - 経歴の多列リストは SP で 1 列にまとめる ## 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-70911641`（元 LP の URL から採番） - **元 LP**: https://mamedodental.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。