DESIGN.md — 山吹色×生成りの地域密着クリニック LP（Warm Yellow Community Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、信頼・誠実、ナチュラル、情報量多め・訴求型
• キーワード: 山吹色・生成り・地域密着・温かい・情報整理・角丸カード
• 地の質感: フラットな単色面。淡いクリーム地と、木やなだらかな丘を描いた秋色イラストの帯を添える
• 形: 角丸 8〜16px のカードとピル型ボタン。写真も角丸で切り抜く
• 温度感: 暖色寄り。黄色・ベージュ・茶で温かく、白で清潔感を出す

Colors

• 地は白を基本に、生成りと淡黄色で区切る
• 行動を促すボタンはすべて山吹色の地に白文字
• 番号・小見出し英字・強調語は山吹色か金茶
• ネット予約など別の導線だけ青を使う
• フッターは山吹色の全面ベタ塗り
• button-primary は文字 #FFFFFF × 背景 #F4B40B のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#977007、4.53:1）を使う。

Typography

• 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

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

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