DESIGN.md — クリーム×深緑の親しみ系歯科クリニック LP（Cream and Forest Green Friendly Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、信頼・誠実
• キーワード: クリーム地・森の深緑・木のキャラクター・縦書きメッセージ・余白多め・子ども向けの安心感
• 地の質感: フラットな無地。影は使わず、色面と細い罫線だけで構成する
• 形: ピル型ボタン、角丸の写真、大きく角丸にした深緑パネル
• 温度感: 温かく穏やか。黄みのクリームが柔らかさを、深緑が誠実さを担う

Colors

• 地色はほぼ全面クリーム（#FFFBD8）で統一し、純白の背景は使わない
• 文字・ロゴ・ボタンなど要素はすべて深緑の一色でまとめる
• 深緑の面は院長紹介など特に大事なブロック 1 か所だけに使う
• 黄色は予約ボタンなど最重要の CTA と小さなバッジだけに絞る
• 白は補足カードやラベルの面として、クリーム地の上でうっすら浮かせる

Typography

• 文字は全体に字間を広め（0.06〜0.12em）にとって、ゆったり見せる
• ブランドの想いを伝える長文は縦書き・右からの段組みで組む
• 本文の行間は 2.0 前後にとり、ゆとりを持たせる
• 英字のキーワードは引用符で囲み、深緑のベタ面に白抜きでラベルにする
• 見出しは中央揃え、本文はブロック内で左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは PC だと 2 カラム、SP だと縦積み
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間は区切り線を使わず、大きめの余白で分ける
• 写真とテキストを左右交互にずらして、リズムを出す
• お知らせ・診療時間は細い横罫線だけの表で見せる
• キャラクターのイラストを写真の角やパネルの外に小さく添える

Elevation & Depth

• 影は使わずフラットに保つ
• 白いカードはクリーム地との明度差だけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 4〜10px の長方形。人物写真は白枠の角丸カードに収める
• セクション境界: 直線や波形は使わず、余白で区切る。深緑パネルは大きな角丸のブロックにする
• ボタンはすべてピル型
• 院長紹介パネルは 32px 前後の大きな角丸
• ラベルは角丸なしのベタ面か細い枠線で作る

Components

• 深緑ピルボタン（button-primary）: 詳細ページへ誘導するボタン。幅いっぱいのピル型で文字は中央揃え
• 黄色の予約ボタン（button-reserve）: ネット予約へ誘導する最重要のボタン。白文字
• 枠線ボタン（button-outline）: 深緑パネルの上に置く、白い細枠のピル型ボタン
• 院長紹介パネル（profile-panel）: 大きな角丸の深緑ブロック。白枠の写真、縦書きの役職バッジ、趣味のリスト、挨拶文を収める
• お知らせリスト（news-list）: 日付とタイトルを横罫線で区切って並べる一覧
• 英字のステップラベル（step-label）: 引用符で囲んだ英単語を、深緑のベタ面に白抜きで入れたラベル
• 補足カード（info-card）: 写真とテキストを横に並べた白いカード。黄色の「例」バッジを添える
• 診療時間表（hours-table）: 曜日の列に〇・△・×の記号を並べ、罫線だけで組む表

Do's and Don'ts

Do - 背景はクリーム一色を守り、深緑と組み合わせる - 木や森をモチーフにした素朴なキャラクターを随所に小さく添える - 子どもの笑顔など、明るく自然光の写真を使う - 文字は字間と行間を広めにとり、ゆったり組む - CTA はピル型で統一する

Don't - 赤や青など、刺激の強い色を足さない - 影・グラデーション・光沢を使わない - 治療器具のアップなど、怖さを感じさせる写真を大きく扱わない - 黄色を多用しない - 文字を詰めた情報過多なレイアウトにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ナビゲーションとロゴの提示）: 左上に院名と短いコピー、右側に横並びのテキストメニュー
2. ファーストビュー（親しみと安心感を伝える）: 子どもの笑顔の大きな写真と、院内の写真を左右にずらして配置。ロゴのバッジとアクセス情報を添え、下に 2 行のメッセージを置く
3. 想いのメッセージ（医院の姿勢を語る）: 縦書きの長文を右から段組みにし、最後に署名を入れる
4. お知らせ（最新情報の提示）: 中央見出しの下に罫線区切りのリストを置き、一覧へのピル型ボタンを続ける
5. 院長紹介（人柄を伝えて信頼につなげる）: 深緑の角丸パネルに写真・趣味・挨拶文を収め、下に枠線ボタンを置く
6. 特長（診療の強みを示す）: 中央見出しと白いラベル、リード文の下に、写真＋見出し＋説明＋ボタンのカードを 2 カラムで並べる
7. 治療説明の手法紹介（子ども向けのやさしい説明方法を示す）: ステップを英字ラベル付きで紹介し、写真と文章を左右交互に配置。最後に白い補足カードを置く
8. アクセス（場所の案内）: グレーの地図の上に入口写真のカードを重ね、住所テキストを添える
9. 診療時間（受診できる時間帯を示す）: 罫線の表に記号を並べ、下に注釈を入れる
10. フッター CTA（予約へ誘導する）: 締めのコピーとロゴ、下線付きの電話番号、黄色の予約ボタン、テキストメニューを並べる

Imagery

• 自然光で撮った、明るく清潔な院内写真
• 子どもとスタッフが笑顔で話す、距離の近い写真
• 木を三つ並べたような、素朴な一色のキャラクターイラスト
• 人物写真は白背景の角丸フレームに入れる
• 地図はグレースケールにして、色は差し色のピンだけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では特長カードを 1 カラムで縦に並べる
• 縦書きのメッセージは SP でも縦書きのまま、段数を減らすか横書きに切り替える
• ステップの左右交互配置は、SP では写真を上・文章を下に積む
• ヘッダーのメニューは SP ではハンバーガーメニューにする
• 院長紹介パネルは SP で左右の余白 16px の全幅にする

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 行書くと起動時に読み込まれる。