--- version: alpha name: Forest Picture-Book Family Dental Clinic LP description: 若草色・生成り・ミントの紙っぽい地に、果物シルエットと小動物イラストを散らした絵本調の歯科サイト。ティールを主役にオレンジのピル型ボタンで予約へ誘導し、診療メニューは色分けした果物型アイコンと方眼紙調のひし形カードで並べる。子ども連れの家族が親しみを感じやすい作り。 colors: primary: '#02ADA1' cta: '#EC924A' on-cta: '#FFFFFF' secondary: '#EB5B4B' background: '#B1D463' background-alt: '#EAE4CE' tint-1: '#CBECE5' surface: '#FEFEFE' tint-2: '#F9F9F9' text: '#7E6351' text-body: '#333333' accent-1: '#EC914A' accent-2: '#BE8C6F' line: '#E2767A' dark-section: '#02ADA2' cta-accessible: '#BA5D14' secondary-accessible: '#E22D19' primary-accessible: '#018077' accent-1-accessible: '#BA5C14' typography: display: fontFamily: Klee One fontSize: 20px fontWeight: 600 lineHeight: 1.7 letterSpacing: 0.15em headline-lg: fontFamily: Klee One fontSize: 24px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.2em accent: fontFamily: Caveat Brush fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Yusei Magic fontSize: 18px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em label-button: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px 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: 48px header-action-buttons: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px hours-table: backgroundColor: '{colors.primary}' typography: '{typography.note}' height: 96px phone-block: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 96px fruit-menu-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 330px guide-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 340px notice-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 580px numbered-list-panel: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 400px feature-photo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.display}' height: 260px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px --- # DESIGN.md — 森と果物モチーフの絵本風歯科クリニック LP（Forest Picture-Book Family Dental Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: かわいい、親しみ・手作り感、ナチュラル、やさしい・柔らかい - **キーワード**: 絵本調・森と小動物・果物シルエット・方眼紙テクスチャ・多色パステル・家族向け - **地の質感**: 和紙・クラフト紙風のざらついた地に、方眼紙やドット、斜線ストライプを重ねる - **形**: 果物型・ひし形・草むらの波線で囲む。角丸は控えめで、ボタンだけピル型 - **温度感**: 暖かい（若草とオレンジが軸、ミントで清潔感を添える） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#02ADA1` | ブランドのティール（表ヘッダー・フッター・見出し文字） | 4% | 画素の実測 | | `cta` | `#EC924A` | 予約ボタンのオレンジ | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#EB5B4B` | 電話ボタン・注意喚起の赤 | 2% | 画素の実測 | | `background` | `#B1D463` | ファーストビュー下〜お知らせの若草色の地 | 12% | 画素の実測 | | `background-alt` | `#EAE4CE` | 案内ブロックの生成りクラフト地 | 14% | 画素の実測 | | `tint-1` | `#CBECE5` | 特長セクションのミント地 | 10% | 画素の実測 | | `surface` | `#FEFEFE` | お知らせ枠・注意枠の白面 | 12% | 画素の実測 | | `tint-2` | `#F9F9F9` | 診療案内の淡いグレー紙地 | 10% | 画素の実測 | | `text` | `#7E6351` | 見出し・本文の焦げ茶 | 1% | 画素の実測 | | `text-body` | `#333333` | お知らせ本文の濃いグレー | 1% | 推定 | | `accent-1` | `#EC914A` | 健診リストのオレンジ面 | 2% | 画素の実測 | | `accent-2` | `#BE8C6F` | リス・切り株のブラウン | 2% | 画素の主要色に補正 | | `line` | `#E2767A` | 注意枠の赤い枠線 | 0% | 推定 | | `dark-section` | `#02ADA2` | フッターのティール帯 | 1% | 画素の実測 | | `cta-accessible` | `#BA5D14` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#E22D19` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#018077` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BA5C14` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地の色を若草→生成り→淡グレー→ミント→白斜線と切り替え、境界は草むらの波線でつなぐ - ティールは表のヘッダー・電話番号・フッター・ロゴ周りに限る - 主な予約導線はオレンジのピル型ボタンにまとめる - 赤は電話ボタン・初診案内・重要な注意文だけに使う - 診療メニューは1項目1色（ティール、オレンジ、青、ピンク、茶、緑、黄、紫）で塗り分ける - 文字は焦げ茶が基本。真っ黒は使わない - `button-primary` は文字 `#FFFFFF` × 背景 `#EC924A` のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BA5D14`、4.5:1）を使う。 - `header-action-buttons` は文字 `#FFFFFF` × 背景 `#EB5B4B` のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E22D19`、4.54:1）を使う。 - `phone-block` は文字 `#02ADA1` × 背景 `#F9F9F9` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018077`、4.58:1）を使う。 - `numbered-list-panel` は文字 `#FFFFFF` × 背景 `#EC914A` のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BA5C14`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ | 明朝 | Klee One | 600 | 20px | 1.7 | 0.15em | | `headline-lg` | セクション見出し（和文） | 手書き・筆 | Klee One | 600 | 24px | 1.4 | 0.2em | | `accent` | 見出し下の欧文ラベル・Point番号 | 欧文スクリプト | Caveat Brush | 400 | 14px | 1.2 | 0.08em | | `headline-md` | 果物アイコン内の診療名・カード見出し | 手書き・筆 | Yusei Magic | 400 | 18px | 1.3 | 0.1em | | `headline-sm` | ひし形カードの悩み文 | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.5 | 0.12em | | `body-md` | お知らせ・案内本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.08em | | `label-button` | ボタンの文言 | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 1.4 | 0.12em | | `note` | 受付時間の注記・表 | ゴシック | Noto Sans JP | 700 | 12px | 1.6 | 0.05em | - 見出しは手書き風書体を使い、字間を広くとる - 見出しの1文字だけを差し色に変えて遊びを出す - 和文見出しの下に小さく欧文スクリプトを添える - 特長の見出しは白い短冊に縦書きで載せる - 電話番号は細めの欧文サンセリフでティールを使い大きく見せる - 本文は行間を1.8以上とる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は1カラム。診療メニューは2列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - お知らせや注意文は白い枠に収め、左右に約6%の余白をとる - 診療メニューは果物アイコンとひし形カードを縦に組み、2列で並べる - 特長は傾けた写真と縦書き短冊を左右交互に置く - 診療時間表・電話・予約ボタンの3点セットを上部と下部の2か所に置く - セクション見出しは中央揃えにし、左右に小さな装飾を添える ## Elevation & Depth - 影はほぼ使わず、紙を重ねたような平面で見せる - 写真は白フチ付きで少し傾け、薄い影でポラロイド風にする - カードは方眼テクスチャと細い枠線で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 白フチを付けて2〜5度傾けた長方形。FVは草むらの形で下端を切り抜く - **セクション境界**: 草むらや地面の不規則な波線。イラストのリスやキノコを境界に乗せる - 主ボタンはピル型 - 診療メニューは果物シルエットの面と45度回転の正方形を組み合わせる - 番号リストは小さな果物型のアイコンに数字を入れる - 枠は直角に近い角か、ぼかした手描き風の縁にする ## Components - **予約ピルボタン**（`button-primary`）: オレンジの横長ピル型ボタン。白い太字を中央に置く - **ヘッダー電話・予約ボタン**（`header-action-buttons`）: 赤とオレンジの角丸ボタンを横に並べ、アイコンを添える。右端にティールのMENUボタンを置く - **診療時間表**（`hours-table`）: ティールのヘッダー行の下に曜日ごとの●△／を並べ、注記を添える - **電話番号ブロック**（`phone-block`）: 淡い紙地の箱に住所、受話器アイコン付きの大きな番号、予約制の注記を入れる - **果物アイコン＋ひし形カード**（`fruit-menu-card`）: 色分けした果物シルエットに診療名と欧文、リスのイラストを載せる。下に方眼のひし形を置き、悩み文とMore矢印を入れる - **対象者別案内カード**（`guide-banner`）: 方眼紙の四角に大きな果物シルエットで見出しを入れ、短い案内文と枠線だけのTapボタンを添える - **注意のお知らせ枠**（`notice-box`）: 白地を赤い枠線で囲み、重要な部分は赤い下線付きの文字にする - **番号付き対応リスト**（`numbered-list-panel`）: オレンジの面に果物型の番号と項目名を5つ並べる。下に白いTapボタンを置き、上端は方眼の見出し帯にする - **特長の写真＋縦書き短冊**（`feature-photo-card`）: 傾けた写真に白い縦書き短冊を重ね、手書きのPoint番号を添える - **セクション見出し**（`section-heading`）: 中央に和文見出しを置き、下に欧文スクリプトを添える。左右にクローバーやきらめき、ガーランドを飾る ## Do's and Don'ts **Do** - 果物・リス・クローバー・風船などのイラストを各セクションの端に小さく散らす - 地は紙の質感か方眼テクスチャにして、無地の白一色を避ける - 診療メニューは1項目1色で塗り分ける - 予約導線はオレンジのピル型ボタンで統一する - セクション境界は草むらや地面の波線でつなぐ **Don't** - 黒地や鋭いグラデーションなど、冷たく無機質な表現を使わない - 強い影や立体的なボタンは使わない - 直線だけで区切った硬いレイアウトにしない - 赤を装飾に多用しない（注意喚起専用） - 写真を全面で裁ち落とさない（白フチと傾きを付ける） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（電話と予約への即時導線）: ロゴを中央に置き、その下に赤の電話ボタンとオレンジの予約ボタン、右にティールのMENUボタンを並べる 2. **ファーストビュー**（院内の雰囲気と理念を伝える）: 院内写真の左右を木のイラストで囲み、縦書きの短いコピーを載せる。下端は草むらと小動物で切り抜く 3. **お知らせ導線と診療時間**（基本情報と予約手段をすぐ示す）: 若草地にお知らせへのバナー、診療時間表、電話ブロック、予約ピルボタンを縦に積む 4. **お知らせ**（最新の告知）: ぼかした草の縁の枠に日付とタイトル、本文をスクロールで見せる 5. **重要なお願い**（予約制限などの注意）: 生成り地に白い箱を置き、赤い枠線で囲む。重要な部分は赤い下線にする 6. **対象者別案内**（初診や子連れなど対象別の誘導）: 方眼カードに大きな果物シルエットの見出しとTapボタンを入れたものを2枚並べる 7. **健診対応リスト**（対応できる健診を示す）: オレンジのパネルに果物型の番号付きリストを並べ、予約ボタンを添える 8. **診療案内**（治療メニューを悩みから選ばせる）: 淡いグレー紙地に、色分けした果物アイコンとひし形カードを2列×4段で並べる 9. **特長**（強みを3つ伝える）: ミント地に傾けた写真と縦書き短冊を交互に置き、Point番号を添える 10. **診療カレンダー**（休診日を示す）: 方眼背景に埋め込みカレンダーを置き、下に注記を添える 11. **医院情報・アクセス**（所在地・アクセス・時間・地図）: 白い斜線ストライプ地に、ロゴ・見出し付きの情報を中央揃えで並べる。続けて時間表、電話、予約ボタン、地図を置く 12. **フッター**（コピーライトとトップへ戻る）: ティールの帯に白い手書き風の欧文を入れ、果物とリス型のTopボタンを置く ## Imagery - 写真は院内や機器を明るく白っぽく撮ったもの。白フチを付けて傾けて置く - イラストは水彩や色鉛筆風の木、葉、キノコ、草むら - リスはシルエットか手描き風で、果物を持たせたり歩かせたりする - 果物シルエットは単色ベタに軽いかすれ質感を付ける - 装飾には風船・クローバー・きらめき・ガーランド・ドット円を少量使う - 背景はクラフト紙・方眼紙・斜線ストライプのテクスチャ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは上部にグローバルナビをアイコン付きで横に並べ、電話番号を右上に置く - PCのFVはワイドにし、診療時間表と予約ボタンを写真の上に重ねる - PCでは対象者別カードを横長のバナー型にし、健診リストは横並びにする - PCでは診療メニューを4列×2段にする - PCでは特長3点を横に並べる - PCでは医院情報と地図を左右2カラムにする ## 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-1824eab5`（元 LP の URL から採番） - **元 LP**: https://shika-miyoshi.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。