DESIGN.md — 原色ブロブ×白カードのポップな歯科医院 LP（Playful Colorful Blob Dental Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: ポップ・元気、かわいい、清潔・爽やか、やさしい・柔らかい
• キーワード: 不定形ブロブ・原色パレット・筆記体英字見出し・白い角丸カード・歯科器具イラスト・余白多め
• 地の質感: フラットな塗りに、ドット・ストライプ・山形・波線のパターンを重ねる。影はごく淡い。
• 形: 有機的なブロブ形、大きな角丸カード、線のピル型ボタン、緩い曲線のセクション境界
• 温度感: 明るく暖かいが、地は白とグレーで清潔感を保つ

Colors

• 地は白とライトグレー #F5F5F5 を交互に使い、曲線で切り替える
• 原色ブロブは画面の端にはみ出させ、本文の背面にだけ置く
• 本文とボタンは黒の単色で統一し、色付きボタンは使わない
• 強調はマゼンタの文字か下線に限る
• 見出しの背後に淡い黄色の三角グラデを敷き、スポットライト風にする
• 初診案内などの重要なお知らせは、淡ピンク地に赤い破線の枠で囲む

Typography

• 各セクションの見出しは、英字筆記体＋その下に小さな和文ラベルの 2 段で組む
• 和文は字間を広め（0.08〜0.15em）にとる
• 本文の行間は 2 前後と広くする
• 説明文は中央揃えで短く改行して積む
• 筆記体は見出しと番号だけに使い、本文には使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード一覧は 2 カラムで、奇数個の最後は中央に置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約 20px の余白をとって並べる
• 各セクションは英字見出し、説明文、カード、『詳しく見る』ボタンの順に並べる
• ボタンは幅 75% 程度で中央に置く
• 装飾ブロブはコンテンツの外側にはみ出させる
• セクション間は 80〜100px と広くとる

Elevation & Depth

• カードには極めて淡い広がり影（0 0 20px rgba(0,0,0,0.05)）を付ける
• ボタンは影なしで、1.5px の黒い線だけ
• ブロブは影なしのフラットな塗り

Shapes

• 角丸: 小 8px ／ 中 24px ／ 大 36px。ボタンはピル型。
• 写真の切り抜き: 写真は大きな角丸（約 30px）の矩形で切り抜き、2〜3 枚を横に並べる
• セクション境界: グレーと白の境界を、緩やかな斜めの曲線にする
• カードの角は 24〜36px と大きく丸める
• 装飾は不定形のブロブ形を基本にする
• ボタンは完全なピル型にする
• 直線的な鋭い区切りは使わない

Components

• 詳しく見るボタン（button-outline-pill）: 白地に黒線のピル型ボタン。中央に文字、右端に矢印を置く
• 予約ボタン 2 段（button-reserve）: 上に小さな補足文、下に太字の大きな文字を置くピル型ボタン。2 つを縦に並べる
• 英字＋和文の見出し（heading-script）: 筆記体の英字見出しの下に小さな和文ラベルを中央揃えで置く。背後に淡い黄色の三角を敷く場合もある
• 番号付きアイコンカード（card-feature）: 白の角丸カード。上から番号、フラットイラスト、2 行のタイトルを中央揃えで並べる
• お知らせカード（news-card）: 半透明の白い角丸カード。下線付きタイトルと日付の行が並び、各行の右に > を付ける
• 初診案内ボックス（notice-dashed）: 淡ピンク地を赤い太破線で囲み、角を丸めた案内枠。重要語はマゼンタで示す
• 診療時間表（hours-table）: 白の角丸カードに入れた曜日×時間帯の表。○と－で表し、細い罫線で区切る
• フッターナビ（footer-nav）: 太字の項目に、右端の > か v を付けて縦に並べるリスト

Do's and Don'ts

Do - 原色ブロブを画面の四隅や左右端に、半分はみ出させて配置する - ブロブにはドット・斜線・山形などのパターンを重ねる - 見出しは英字筆記体と和文ラベルのセットで統一する - コンテンツは白い大きな角丸カードに収める - ボタンは黒線のピル型に統一する - 歯ブラシ・フロス・ミラーなどの器具イラストを装飾に使う

Don't - ボタンを原色で塗りつぶさない - ブロブを本文の上に重ねて可読性を落とさない - 角の鋭い矩形カードを使わない - 濃い背景色のセクションを作らない - 強い影や立体表現を使わない

Page Structure

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

1. ファーストビュー（明るい印象とコンセプトを伝える）: 白地に原色ブロブと器具イラストを散らし、英字筆記体のキャッチ、和文キャッチ、短い説明を左揃えで置く
2. お知らせ（最新情報を示す）: 半透明の白い角丸カードに 3 件を並べ、右に矢印を付ける
3. 初診案内（予約前の注意を伝える）: 淡ピンク地に赤い破線の枠。キーワードをマゼンタで強調する
4. 医院について（名前の由来と想いを伝える）: 角丸写真を横に並べ、黄色の三角グラデの上に見出し。本文の後に詳しく見るボタン
5. 診療方針（4 つのこだわりを示す）: グレー地に中央揃えの説明文。番号付きアイコンカードを 2×2 で並べる
6. 診療メニュー（治療の種類を一覧で示す）: 白地にイラスト付きの角丸カードを 2 カラムで並べ、最後の 1 枚は中央に置く
7. アクセス・診療時間（来院情報と予約導線）: グレー地に地図、住所、時間表カード、予約ボタン 2 つを置く
8. Q&Aコラム（悩み解決コンテンツへ誘導する）: 白の大カードの上部に黄色の三角グラデ。見出し、説明、小さなピル型ボタンの順に置く
9. フッター（サイト内導線と再度の予約）: ロゴ、ナビリスト、ブログバナー、住所、時間表、予約ボタン、筆記体のコピーライトの順に置く

Imagery

• マゼンタ・黄・ターコイズ・黄緑・紫・サーモンの不定形ブロブ
• ブロブ上にはドット、斜線、山形、波線のパターン
• 歯科器具（ミラー、歯ブラシ、フロス、ライト）は線とベタ塗りのフラットイラスト
• 歯や子どもの顔などのアイコンは、柔らかい配色のフラットイラスト
• 写真は明るい院内や施術風景を、大きな角丸で切り抜く
• 白い歯のシルエットを淡く透かして背景に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに横並びのナビと予約ボタンを置く
• PC のメインビジュアルは左にテキスト、右に歯とライトのイラスト
• PC ではお知らせと初診案内を中央寄せの横長カードにする
• PC のカード一覧は 4〜5 列の横 1 列に並べる
• PC のフッターは 3 カラム（ロゴとナビ／ナビ／住所と時間表）
• PC ではブロブを左右端にさらに大きく配置する

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