--- version: alpha name: Forest Calm Mincho Dental Clinic LP description: 暗めの写真の上に白い明朝体を重ね、青磁グリーンの大きな漢字一文字を差し色に使う歯科医院 LP。ブラウンのナビと、薄いグレーの地に並べたカードで落ち着いた高級感と信頼感を出している。 colors: primary: '#6D9A8D' background: '#FFFFFF' background-alt: '#FFFFFF' secondary: '#4D4A49' text: '#604D40' text-body: '#2E2E31' dark-section: '#8D8D8F' on-dark: '#F2F1EB' cta: '#76B8A4' on-cta: '#FFFFFF' accent-1: '#6B4E3A' tint-1: '#FDE1E0' line: '#CED1D2' surface: '#4F605A' dark-section-accessible: '#6D6D6F' cta-accessible: '#43826F' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Cinzel fontSize: 32px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 60px fontWeight: 400 lineHeight: 1.1 headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Cormorant Garamond fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-tile-grid: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 35px concept-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 360px service-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 290px device-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 400px link-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 42px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 64px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 120px schedule-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 110px --- # DESIGN.md — 森の静けさと青磁色の明朝体で組む歯科医院 LP（Forest Calm Mincho Dental Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 上品・高級、ナチュラル、信頼・誠実、やさしい・柔らかい - **キーワード**: 森・明朝体・青磁グリーン・暗いトーンの写真・大きな漢字一文字・余白 - **地の質感**: 写真に半透明の暗いオーバーレイを重ねたしっとりした質感。地はフラットなグレーと白。 - **形**: 角丸はほぼ使わず四角が基本。細い縦線・横線と、丸いアイコンボタンを添える。 - **温度感**: やや寒色寄りのニュートラル。ブラウンで温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6D9A8D` | 大きな漢字・欧文見出しに使う青磁グリーン | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地 | 30% | 画素の実測 | | `background-alt` | `#FFFFFF` | 機器紹介など薄いグレーの地 | 13% | 画素の実測 | | `secondary` | `#4D4A49` | ナビのタイル・小見出しのブラウン | 4% | 画素の実測 | | `text` | `#604D40` | 見出し文字のこげ茶 | 3% | 画素の実測 | | `text-body` | `#2E2E31` | 本文のダークグレー | 3% | 画素の主要色に補正 | | `dark-section` | `#8D8D8F` | フッターの情報エリアのグレー | 13% | 画素の実測 | | `on-dark` | `#F2F1EB` | 暗い写真・グレーの上に置く白い文字 | 3% | 画素の実測 | | `cta` | `#76B8A4` | 電話予約ボタンのグリーン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#6B4E3A` | 矢印の丸アイコンのブラウン | 0% | 画素の実測 | | `tint-1` | `#FDE1E0` | カレンダーの休診日を示すピンク | 0% | 画素の実測 | | `line` | `#CED1D2` | 細い区切り線 | 0% | 画素の主要色に補正 | | `surface` | `#4F605A` | フッター下部の固定電話バーの深緑 | 1% | 画素の実測 | | `dark-section-accessible` | `#6D6D6F` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#43826F` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレー #E0E0E5 を交互に使い、写真のセクションは暗いオーバーレイで落とす。 - 差し色は青磁グリーンだけにして、大きな漢字・欧文見出し・CTA に使う。 - 見出しの文字とナビはこげ茶系で、温かみと落ち着きを出す。 - フッターはミディアムグレーの地に白文字で、情報をまとめる。 - ビビッドな色は使わない。ピンクはカレンダーの休診日だけに使う。 - `concept-panel` は文字 `#F2F1EB` × 背景 `#8D8D8F` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#6D6D6F`、4.56:1）を使う。 - `service-card` は文字 `#F2F1EB` × 背景 `#8D8D8F` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#6D6D6F`、4.56:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#76B8A4` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#43826F`、4.51:1）を使う。 - `schedule-table` は文字 `#F2F1EB` × 背景 `#8D8D8F` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#6D6D6F`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | 明朝 | Shippori Mincho | 500 | 36px | 1.4 | 0.08em | | `accent` | セクション名の欧文見出し | 欧文セリフ | Cinzel | 400 | 32px | 1.1 | 0.08em | | `headline-lg` | コンセプトの大きな漢字一文字 | 明朝 | Shippori Mincho | 400 | 60px | 1.1 | 0.0em | | `headline-md` | セクション・カードの見出し | 明朝 | Noto Serif JP | 500 | 24px | 1.5 | 0.06em | | `headline-sm` | ナビのタイル・小見出し | 明朝 | Noto Serif JP | 500 | 16px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.04em | | `note` | 日付・注釈 | 欧文セリフ | Cormorant Garamond | 400 | 13px | 1.4 | 0.05em | | `label-button` | 電話番号・ボタン | 欧文セリフ | Cormorant Garamond | 400 | 24px | 1.2 | 0.06em | - 見出しはすべて明朝体で組み、字間を広めに取る。 - 欧文見出しはローマン体の大文字で、頭文字を大きくする。 - 本文は小さめのゴシック体で、行間を 1.9 前後に広く取る。 - コンセプトでは漢字一文字を青磁グリーンで特大にし、上に細い番号を添える。 - 写真の上の文字は白にして、太字は使わない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビだけ 2 列のタイル、カレンダーは 7 列。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真のセクションは画面幅いっぱいに敷き、文字は中央に揃える。 - 診療科目のカードは左右に 12px ほどの余白を取り、縦に積む。 - 機器紹介は写真、見出し、本文と小さなサムネ、右寄せのリンクの順に並べる。 - お知らせは左に見出し、縦線、右に日付とタイトルの 2 カラムにする。 ## Elevation & Depth - 影はほとんど使わない。 - カードの立体感は写真の上の暗いオーバーレイで出す。 - 画像の重なり（淡い色ブロックを写真にずらして重ねる）で奥行きを作る。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角いままの全幅写真とカード。淡い色の矩形を写真に部分的に重ねる。 - **セクション境界**: 直線で切り替える。斜めや波は使わない。 - 矢印は細線の丸アイコンにする。 - CTA は角丸 4px 程度の横長の箱にし、左に白い丸の電話アイコンを置く。 - 斜線のストライプを装飾の地紋に使う。 ## Components - **ナビのタイル**（`nav-tile-grid`）: ブラウンの 2 列×3 段のタイル。白い明朝体で、境界は細い線。 - **コンセプトのパネル**（`concept-panel`）: 全幅の暗い写真に、細い番号、青磁色の漢字一文字、白い見出し、本文、丸い矢印を中央に縦に並べる。 - **診療科目のカード**（`service-card`）: グレーで落とした写真のカード。左上に小見出しと淡い色の大きな漢字の動詞、中央下に白い明朝の科目名と丸い矢印を置く。 - **機器紹介のカード**（`device-card`）: 薄グレーの地に機器の写真、こげ茶の明朝見出し、本文と右のサムネ、右寄せのリンクとブラウンの丸い矢印を並べる。 - **上下に線を引いたリンク**（`link-outline`）: 上下に細い線を引いた横長のリンク。アイコンと明朝の文字を中央に置く。 - **電話予約の CTA**（`button-primary`）: グリーンの面の左に白い丸の電話アイコン、右に小さなラベルと大きなセリフ体の番号を置く。 - **お知らせのリスト**（`news-list`）: 左に欧文と和文の見出し、縦線、右に日付とタイトルを並べ、タイトルにはグリーンの下線を引く。 - **診療時間の表**（`schedule-table`）: グレーの地に曜日を並べ、診療日はグリーンの丸、休診日は斜線、矯正日は三角の記号で示す。 ## Do's and Don'ts **Do** - 見出しは明朝体で組み、字間を広く取る。 - 暗いトーンの写真の上に白文字を置き、静かな印象にする。 - 差し色は青磁グリーンだけに絞る。 - 欧文の大見出しと和文の小見出しをセットにする。 - 余白を広く取り、情報を詰め込まない。 **Don't** - ビビッドな赤や黄色のボタンを使わない。 - 太いゴシック体で訴求コピーを組まない。 - ピル型のボタンやポップなバッジを使わない。 - 強いドロップシャドウを使わない。 - 写真を明るすぎるまま使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **フロア案内**（施設の構成を示す）: 夜景の建物写真に、細線で描いた大きな数字と、施設名を白い明朝体で重ねる。 2. **ファーストビュー**（理念とスタッフの印象を伝える）: スタッフの集合写真に、白い明朝の特大キャッチを左上に置く。 3. **ナビのタイル**（主要なページへ誘導する）: ブラウンの 2 列のタイル。 4. **お知らせ**（最新情報を出す）: 白地に見出し、線、日付とタイトルを並べる。 5. **理念**（キーワードで理念を伝える）: 大きな欧文見出しと、淡い色の円の図、写真の重なりで構成する。 6. **コンセプト**（3 つの価値を示す）: 全幅の暗い写真パネルを 3 枚並べ、それぞれに漢字一文字を置く。 7. **チーム**（連携体制を伝える）: 青磁色の特大欧文、短い文、写真 3 枚を横に並べる。 8. **診療科目**（柱となる診療を紹介する）: リード文のあとに写真カードを 3 枚縦に積み、最後に料金表のリンクを置く。 9. **設備紹介**（先進の機器で安心を伝える）: 薄グレーの地に機器のカードを 3 つ並べる。 10. **お知らせ・カレンダー**（休診日と更新情報を伝える）: ニュースのリスト、月間カレンダー、ブログのリストを並べる。 11. **セミナー・採用・関連施設**（関連する導線を置く）: 写真のバナー、斜線の地紋に縦書きのコピーを添えた採用ブロック、木目と写真の 2 分割バナーを置く。 12. **医院情報・CTA**（予約とアクセスにつなげる）: グレーの地に診療時間の表、電話の CTA、地図、交通アイコンを並べ、下に固定の電話バーを置く。 ## Imagery - 写真は自然光で撮り、彩度を抑えて暗めの露出に落とす。 - 森・木立・和食など自然を感じさせるイメージを、コンセプトの背景に使う。 - スタッフはユニフォーム姿の自然な笑顔で撮る。 - 機器は白い背景の物撮りにする。 - 装飾には細い線画の建物、淡い色の円、斜線のストライプを使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではコンセプトのパネル 3 枚と診療科目のカード 3 枚を横 3 列に並べる。 - PC では機器紹介を横 3 列にし、写真を帯状につなげる。 - PC のお知らせは左にリスト、右にカレンダーの 2 カラムにする。 - PC のフッターは左に診療情報、右に地図の 2 カラムにする。 - PC のファーストビューは右側に半透明グリーンの情報ボックスを重ねる。 ## 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-4c799148`（元 LP の URL から採番） - **元 LP**: https://www.morinohibiki-dental.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。