--- version: alpha name: Warm Yellow Community Clinic LP description: 白と生成りの地に山吹色の CTA と枠を差し色にした、やさしく親しみやすい地域クリニックのサイト型 LP。明朝の見出しとゴシック本文の組み合わせで、信頼感と温かみを両立している。 colors: primary: '#F9B501' cta: '#F4B40B' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FCFAF5' tint-1: '#FDF4DA' secondary: '#EFCA9D' accent-1: '#CAAB69' text: '#42413B' text-body: '#555555' accent-2: '#1B84D4' line: '#E8E5E0' dark-section: '#7E7264' cta-accessible: '#977007' typography: display: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px feature-number: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 320px service-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 380px icon-tile: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 100px calendar-box: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 380px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 40px banner-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px --- # DESIGN.md — 山吹色×生成りの地域密着クリニック LP（Warm Yellow Community Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、ナチュラル、情報量多め・訴求型 - **キーワード**: 山吹色・生成り・地域密着・温かい・情報整理・角丸カード - **地の質感**: フラットな単色面。淡いクリーム地と、木やなだらかな丘を描いた秋色イラストの帯を添える - **形**: 角丸 8〜16px のカードとピル型ボタン。写真も角丸で切り抜く - **温度感**: 暖色寄り。黄色・ベージュ・茶で温かく、白で清潔感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F9B501` | ブランド山吹色（ボタン・枠・帯） | 7% | 画素の実測 | | `cta` | `#F4B40B` | 詳細ボタン地 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本背景 | 43% | 画素の実測 | | `background-alt` | `#FCFAF5` | 生成りのセクション地 | 6% | 画素の実測 | | `tint-1` | `#FDF4DA` | 淡黄色のカード地 | 5% | 画素の実測 | | `secondary` | `#EFCA9D` | ベージュ（丘イラスト・帯） | 8% | 画素の実測 | | `accent-1` | `#CAAB69` | 金茶（番号・アクセント） | 4% | 画素の主要色に補正 | | `text` | `#42413B` | 見出し文字 | 1% | 画素の実測 | | `text-body` | `#555555` | 本文文字 | 2% | 推定 | | `accent-2` | `#1B84D4` | サブ（ネット予約）青 | 0% | 画素の実測 | | `line` | `#E8E5E0` | 区切り線・枠 | 1% | 画素の主要色に補正 | | `dark-section` | `#7E7264` | 茶色の装飾帯 | 3% | 画素の主要色に補正 | | `cta-accessible` | `#977007` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本に、生成りと淡黄色で区切る - 行動を促すボタンはすべて山吹色の地に白文字 - 番号・小見出し英字・強調語は山吹色か金茶 - ネット予約など別の導線だけ青を使う - フッターは山吹色の全面ベタ塗り - `button-primary` は文字 `#FFFFFF` × 背景 `#F4B40B` のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#977007`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV キャッチ | 明朝 | Shippori Mincho | 600 | 24px | 1.6 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.05em | | `headline-md` | カード・特長の見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `note` | 注釈・日付 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 見出し上の英字ラベル・番号 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.12em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - FV キャッチだけ明朝体にして、キーワードを山吹色にする - 見出しの上に小さい英字ラベルを山吹色で置く - 特長の番号は大きい山吹色の数字を見出しの左に置く - 本文は行間を 1.9 前後とって読みやすくする - 本文中の強調語は山吹色の太字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長・診療科は 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真と文章は PC では左右に並べ、SP では写真を上に積む - 診療科アイコンは SP で 3 列のグリッド - セクションの見出しは中央揃えか左揃え。セクション内で揃え方を統一する - ボタンはブロックの下に中央か左揃えで 1 つ置く ## Elevation & Depth - カードは影なし、または非常に薄い影 - バナーは細い枠と角丸で区切る - 立体感は色面の差で出す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。PC では画面の端まで写真を伸ばし、片側だけを角丸にする - **セクション境界**: 基本は直線で区切る。なだらかな丘の曲線イラストで区切る箇所もある - ボタンは右端に丸い矢印アイコンが付いたピル型 - カードの上部にアイコンの丸バッジを重ねる - 診療科タイルは角丸の正方形 ## Components - **詳細ボタン**（`button-primary`）: 山吹色のピル型で、右に白丸の矢印が付く - **英字ラベル付き見出し**（`section-label`）: 小さい英字を山吹色で置き、その下に太字の見出しを置く - **番号付き特長**（`feature-number`）: 写真の下に山吹色の大きな数字と見出しを置き、続けて本文を書く - **診療案内カード**（`service-card`）: 淡黄色の地のカード。写真の下にアイコンバッジ、見出し、本文、ボタンを並べる - **診療科アイコンタイル**（`icon-tile`）: 生成り地の正方形タイルに、イラストアイコンと科目名を入れる - **担当医カレンダー**（`calendar-box`）: 山吹色の枠に白い表を入れ、担当医を色の帯で示す - **お知らせリスト**（`news-list`）: 日付、色付きのカテゴリタグ、タイトルを細い罫線で区切って並べる - **誘導バナー**（`banner-card`）: 枠付きの角丸バナー。写真と大きい見出しを組み合わせる ## Do's and Don'ts **Do** - CTA は山吹色のピル型に統一する - 余白を広くとり、白と生成りの地を交互に使う - 人物写真は明るく自然光で、笑顔のものを使う - 強調語は山吹色の太字にする **Don't** - 黒や濃い寒色の大きな面を使わない - 角張ったボタンや鋭い装飾を使わない - 原色の赤で煽るような強調をしない - 1 つのセクションに CTA を何個も並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・ナビ**（連絡先と診療科への導線）: 白地に電話番号、山吹色の予約ボタン、アイコン付きのナビを並べる 2. **ファーストビュー**（地域に根ざした信頼の訴求）: 明朝のキャッチと医師写真を置き、駐車場などの丸バッジを 3 つ並べる 3. **カレンダー・お知らせ**（診療日の確認と最新情報）: 山吹色の枠のカレンダーとお知らせリストを並べる 4. **誘導バナー**（関連サイトや採用への誘導）: 枠付きの角丸バナーを 2 列と 1 段で置く 5. **理念紹介**（姿勢を伝える）: 左に文章、右に端まで伸ばした院内写真を置く 6. **診療案内**（専門外来の紹介）: 淡黄色のカード 2 枚と、診療科アイコンのグリッドを置く 7. **6 つの特長**（選ばれる理由）: 写真を背景にした見出し帯を置き、番号付きの特長を 2 列で並べる 8. **来院案内**（予約の流れとアクセス）: 丘と木のイラストの帯の上に、白いカードを 2 枚並べる 9. **スタッフ・ブログ・SNS**（人柄と発信を伝える）: 3 列のカード、記事リスト、SNS の埋め込みを置く 10. **採用情報**（人材募集）: 文章と集合写真のコラージュを並べる 11. **フッター**（基本情報と地図）: 診療時間表と地図を置き、下に山吹色ベタ塗りのサイトマップを置く ## Imagery - 白衣の医師やスタッフが笑顔で写る、明るい自然光の写真 - 白と木目を基調にした清潔な院内写真 - 診療科は淡い色のフラットなイラストアイコンにする - 秋色の木となだらかな丘を描いた温かいイラストの帯 - 写真は角丸で切り抜き、明るめに補正する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は最大幅約 1000px で、2〜3 列のグリッドを使う - SP では写真と文章を縦に積み、写真を先に置く - 特長と誘導バナーは SP で 1 列にする - 診療科アイコンは PC で 6 列、SP で 3 列 - ナビは SP ではハンバーガーメニューにし、画面下に予約・電話ボタンを固定する ## 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-1cd5d0cd`（元 LP の URL から採番） - **元 LP**: https://satomura-medical.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。