---
version: alpha
name: Warm Beige Orange Friendly Dental Clinic LP
description: 生成りベージュの地に、オレンジと黄色を差し色にした親しみやすい地域歯科の LP。角丸の大きいカード、丸いアイコン、和の小さなイラスト（塔・山・鳥居）で、地域に根ざした温かさを出している。
colors:
  primary: '#FE9242'
  background: '#F6EDDC'
  background-alt: '#F9F8F4'
  surface: '#FFFFFE'
  cta: '#F37B23'
  on-cta: '#FEFEFE'
  secondary: '#FFD14A'
  tint-1: '#FDAB6C'
  dark-section: '#847766'
  on-dark: '#FEFEFE'
  text: '#494641'
  text-body: '#5A5048'
  line: '#CECECA'
  accent-1: '#DEF1FE'
  cta-accessible: '#BF570A'
  tint-1-accessible: '#FDB57E'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.12em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
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
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 56px
  feature-card-color:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 160px
  menu-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 150px
  review-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 150px
  blog-panel:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    rounded: '{rounded.lg}'
    height: 260px
  contact-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.sm}'
    height: 180px
  floating-nav:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 40px
---

# DESIGN.md — 生成り×オレンジのやさしい歯科医院 LP（Warm Beige Orange Friendly Dental Clinic LP）

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

## Overview

- **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、ナチュラル
- **キーワード**: 生成りベージュ・オレンジ差し色・大きな角丸・地域密着・スタッフの笑顔・和の小イラスト
- **地の質感**: フラットな単色面。影はごく薄く、紙のような柔らかい地。
- **形**: 角丸 12〜20px のカードと写真、ピル型ボタン、ゆるい波形のセクション境界。
- **温度感**: 暖色寄り。ベージュとオレンジで温かく、白カードで清潔感を足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FE9242` | ブランドのオレンジ（ボタン・帯・強調） | 9% | 画素の実測 |
| `background` | `#F6EDDC` | メインの生成りベージュ地 | 25% | 画素の実測 |
| `background-alt` | `#F9F8F4` | オフホワイトの切替地 | 15% | 画素の実測 |
| `surface` | `#FFFFFE` | 白いカード面 | 10% | 画素の実測 |
| `cta` | `#F37B23` | 主ボタンの濃いオレンジ | 2% | 画素の実測 |
| `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary` | `#FFD14A` | 明るい黄色（矯正カード・問合せ帯） | 4% | 画素の実測 |
| `tint-1` | `#FDAB6C` | 淡いオレンジの帯（ブログ枠） | 8% | 画素の実測 |
| `dark-section` | `#847766` | フッターのグレーブラウン | 9% | 画素の実測 |
| `on-dark` | `#FEFEFE` | フッター上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#494641` | 見出しの濃いブラウン | 1% | 画素の実測 |
| `text-body` | `#5A5048` | 本文のこげ茶グレー | 1% | 推定 |
| `line` | `#CECECA` | 区切りの淡いグレー線 | 1% | 画素の主要色に補正 |
| `accent-1` | `#DEF1FE` | 地図・空の淡い水色地 | 4% | 画素の実測 |
| `cta-accessible` | `#BF570A` | AA を満たす補正値（計算） |  | 計算 |
| `tint-1-accessible` | `#FDB57E` | AA を満たす補正値（計算） |  | 計算 |

- 地はベージュとオフホワイトを交互に使い、セクションを分ける。
- 主ボタンと強調語は全部オレンジに揃える。
- 黄色は主力メニューのカードと問い合わせ帯だけに使う。
- 白いカードはベージュ地の上に置いて、浮いて見えるようにする。
- フッターだけグレーブラウンの濃い面にして、ページを締める。
- 文字は黒ではなくブラウン系にして、柔らかさを保つ。
- `button-primary` は文字 `#FEFEFE` × 背景 `#F37B23` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BF570A`、4.54:1）を使う。
- `blog-panel` は文字 `#5A5048` × 背景 `#FDAB6C` のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#FDB57E`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.4 | 0.05em |
| `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.08em |
| `headline-md` | カード見出し・特長タイトル | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.05em |
| `headline-sm` | 診療メニュー名・人名 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.5 | 0.03em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.05em |
| `note` | 注釈・日付・補足 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.6 | 0.03em |
| `accent` | 見出し下の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.2 | 0.12em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.2 | 0.05em |

- 見出しは和文の下に小さな英字ラベルを添える 2 段構成にする。
- キャッチの一語だけオレンジ色にして強調する。
- 本文は中央揃えで行間を広めにとる。
- 見出しは丸ゴシックの太字、本文は細めのゴシックで差をつける。
- 電話番号はアイコン付きで大きく太く出す。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。診療メニューは 2 列グリッド、口コミは横スクロールのカルーセル。
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションの間は 64〜80px 空ける。
- 見出しは左寄せで、説明文を右か下に置く。
- 主力メニュー 2 つは色付きの大きなカード、その他は白い小さなカードに分ける。
- 各セクションの最後には中央にピル型ボタンを置く。
- 店舗情報は写真・診療時間表・地図をまとめて組む。

## Elevation & Depth

- 白いカードはごく薄い影（0 2px 8px rgba(0,0,0,0.05)）だけ付ける。
- ボタンは影を付けず、色面だけで見せる。
- 院長メッセージのカードは、オレンジ面の上に白い面を重ねて奥行きを出す。

## Shapes

- **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 角丸の長方形。ギャラリーは傾けた角丸タイルを並べてコラージュにする。
- **セクション境界**: ゆるい波形の曲線、または直線で区切る。
- 写真・カード・帯はすべて角を丸くする。
- アイコンは円形の淡いベージュ地に線画で入れる。
- ボタンは完全なピル型にして、右端に矢印を付ける。

## Components

- **オレンジのピルボタン**（`button-primary`）: 各セクション末尾の中央に置く。白文字の右に矢印を付ける。
- **和英 2 段見出し**（`section-heading`）: 太い丸ゴシックの見出しの下に、小さな英字ラベルを置く。
- **主力メニューの色カード**（`feature-card-color`）: 黄またはオレンジの面に、円形アイコン・見出し・説明を入れる。
- **診療メニューの白カード**（`menu-card`）: 円形アイコン、メニュー名、2 行の悩み文を中央揃えで入れる。
- **口コミカード**（`review-card`）: 丸い似顔絵アイコン、イニシャル名、本文で作り、横スクロールで並べる。
- **ブログ一覧パネル**（`blog-panel`）: 淡いオレンジの角丸枠の中に白い面を置き、日付とタイトルを 2 列で並べる。
- **問い合わせ帯**（`contact-band`）: 黄色の面に見出し、電話番号、オレンジのボタンを入れる。
- **右端の追従丸ボタン**（`floating-nav`）: 予約・電話・診療時間の丸いアイコンを縦に並べ、右端に固定する。

## Do's and Don'ts

**Do**
- ベージュとオフホワイトを交互に使い、セクションのリズムを作る。
- スタッフの笑顔の写真を角丸で大きく見せる。
- 地域を表す小さな和風イラストを、見出しの近くに添える。
- 主ボタンはオレンジのピル型に統一する。
- アイコンは細い線画で、円形の地に入れる。

**Don't**
- 純黒の文字や、寒色の強い色を主に使わない。
- 角の鋭い四角いカードや写真を使わない。
- 濃い影やグラデーションを多用しない。
- オレンジと黄色を同じ面積で並べすぎない。
- 医療らしい冷たい青白のトーンにしない。

## Page Structure

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

1. **ファーストビュー**（温かい医院だと第一印象で伝える。）: 左に 2 行のキャッチ（一語をオレンジ）、右に受付スタッフの角丸写真。下端は波形にし、和の小イラストを添える。
2. **キャンペーンバナー**（主力の自費メニューを価格つきで訴求する。）: オレンジの見出し帯、人物写真、価格を大きく載せた横長のバナー。
3. **医院紹介**（理念と姿勢を伝える。）: 大きな角丸写真に白い見出しボックスを重ね、下に中央揃えの本文とボタン。
4. **診療案内**（対応できる診療を一覧で見せる。）: 色カード 2 枚の下に、アイコン付きの白カードをグリッドで並べる。
5. **特長**（選ばれる理由を示す。）: 写真付きの白カードを 2 枚並べ、見出しと本文を入れる。
6. **院長メッセージ**（院長の人柄で信頼を作る。）: オレンジ地に白カードを重ね、左に写真とプロフィール表、右に本文と署名。
7. **院内ギャラリー**（院内とスタッフの雰囲気を見せる。）: オレンジ地に、傾けた角丸写真をコラージュで並べる。
8. **お客様の声**（患者の安心感を伝える。）: 似顔絵アイコン付きの口コミカードを横スクロールで見せ、下にスクロールバーを付ける。
9. **ブログ**（更新している様子と親しみを伝える。）: 院長のイラストと吹き出しを添え、淡いオレンジ枠に日付つきの一覧を入れる。
10. **問い合わせ**（電話とフォームに誘導する。）: 黄色の帯に電話番号を大きく出し、オレンジのボタンを置く。下に山並みの写真。
11. **アクセス・診療時間**（来院に必要な情報を伝える。）: 外観写真、オレンジ見出しの診療時間表、地図、駐車場の図を組み合わせる。
12. **フッター**（サイト内リンクと医院情報を載せる。）: グレーブラウンの面に、ロゴとオレンジの点が付いたリンクを 2 列で並べる。

## Imagery

- スタッフは制服姿の自然な笑顔で、明るい院内で撮る。
- 写真は暖色寄りで明るく補正し、肌を柔らかく見せる。
- 地域の名所や山並みの風景写真で、地元らしさを出す。
- 塔・山・鳥居・木・鳥などの小さなフラットイラストを、ワンポイントで散らす。
- 院長は似顔絵風の手描きイラストと、吹き出しで親しみを出す。
- 口コミには丸い簡素な似顔絵アイコンを使う。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SP ではファーストビューを写真が上、キャッチが下の縦積みにする。
- 診療メニューのグリッドは PC の 3 列から SP の 2 列にする。
- 特長と院長メッセージは PC の 2 列から SP の 1 列にする。
- 口コミはどちらも横スクロールのままで、SP では 1.2 枚見える幅にする。
- 追従の丸ボタンは SP では画面下の固定バーに置き換える。

## 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-58a45709`（元 LP の URL から採番）
- **元 LP**: https://ibaraki-dc.com/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。