DESIGN.md — 森と果物モチーフの絵本風歯科クリニック LP（Forest Picture-Book Family Dental Clinic LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: かわいい、親しみ・手作り感、ナチュラル、やさしい・柔らかい
• キーワード: 絵本調・森と小動物・果物シルエット・方眼紙テクスチャ・多色パステル・家族向け
• 地の質感: 和紙・クラフト紙風のざらついた地に、方眼紙やドット、斜線ストライプを重ねる
• 形: 果物型・ひし形・草むらの波線で囲む。角丸は控えめで、ボタンだけピル型
• 温度感: 暖かい（若草とオレンジが軸、ミントで清潔感を添える）

Colors

• セクションごとに地の色を若草→生成り→淡グレー→ミント→白斜線と切り替え、境界は草むらの波線でつなぐ
• ティールは表のヘッダー・電話番号・フッター・ロゴ周りに限る
• 主な予約導線はオレンジのピル型ボタンにまとめる
• 赤は電話ボタン・初診案内・重要な注意文だけに使う
• 診療メニューは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

• 見出しは手書き風書体を使い、字間を広くとる
• 見出しの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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。