ワイヤーDLグリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科
スタッフの集合写真と4つの数字で、「大きくて安心な医院」を一目で伝える。
DENTAL CLINIC · 愛知県 · PICKED 2026.10.15
ふふ歯科歯科医院のホームページデザイン参考 — くすみカラー・明朝体・子育て世代
出典：www.fufu-shika.com ↗確認日 2026.10.15
EDITOR'S NOTE編集部の視点
医師と子どもの写真1枚で、「子どもを連れて行ける歯医者」を伝える。
一宮市の歯科医院のサイト。ファーストビューは子どもを診る医師の写真に、明朝体の短いコピーを添えただけの静かな構成。ベージュとくすんだピンクの配色で、キッズルームや個室、診療時間の長さなど、子育て世代が気にする条件を写真とアイコンで順に見せている。
- 01ファーストビューは、子どもを診る医師の写真と明朝体の短いコピーだけで構成している
- 02ベージュ・くすみピンク・オリーブの配色に、水彩のにじみのような飾りを重ねてやわらかさを出している
- 03診療時間・個室・バリアフリー・駐車場など、通いやすさの条件をアイコンで並べている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 3か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
子育て世代の「通えるか」に答える
朝と夜の診療時間、キッズルーム、ファミリー診療室など、子ども連れで通えるかどうかの判断材料を写真つきでまとめている。条件で医院を選ぶ人に、比べるための情報を渡している。
診療時間とカレンダーを予約の直前に置く
ページ下部で、お知らせの横に診療カレンダーと診療時間を置き、その下に電話番号とWEB予約のボタンを並べている。空いている日を確かめてから、そのまま予約へ進める。
スマホでは番号をタップで発信
スマホ表示では電話番号がタップで発信できるリンクになっている。PCでは番号を見せるだけにして、WEB予約のボタンを目立たせている。
チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F5F0E6背景 · ウォームベージュ
#FFFFFFカード背景
#665151本文テキスト・見出し · モーブブラウン
#FAE8EAセクション背景 · ペールピンク
#B5B03E差し色 · オリーブ
#38C0C2WEB予約ボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・ナビ
- 使用フォント
- 秀英明朝（Adobe Fonts）
- 無料で近いもの
- Shippori Mincho
- 用途
- 和文本文
- 使用フォント
- ヒラギノ角ゴ
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字
- 使用フォント
- Baskerville（Adobe Fonts）
- 無料で近いもの
- Libre Baskerville
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 62.1px / 400 | 1.60 | 27.7px / 400 |
| h3 | 18.7px / 400 | 1.40 | 16.9px / 400 |
| 本文（p） | 13.6px / 400 | 1.40 | 13.8px / 400 |
実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
開院のお知らせ
イベント・キャンペーン／見学会・イベント告知型 - 04
- 05
- 06
- 07
- 08
- 09
お知らせ・診療カレンダー
アクセス／地図＋時間表型 - 10
電話・WEB予約
行動喚起／電話＋Web予約の2ボタン帯型 - 11
ブログ・Instagram
お知らせ／お知らせ一覧型 - 12
フッター
フッター／店舗情報＋ナビ型
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューは、来てほしい患者さんの姿が想像できる写真1枚に絞る
- 02子育て世代向けなら、キッズルームや診療時間など「通える条件」を写真とアイコンで並べる
- 03診療メニューは3つ程度の大きな分類にまとめる
- 04診療カレンダーと予約ボタンを隣り合わせに置く
FAQよくある質問
ふふ歯科のサイトで使われているフォントは？
見出しは Adobe Fonts の秀英明朝、本文はヒラギノ角ゴ、英字は Baskerville です。無料で近づけるなら、見出しに Shippori Mincho、本文に Noto Sans JP、英字に Libre Baskerville を使います。
くすみカラーで医療系の清潔感は出せますか？
このサイトは背景を明るいベージュにし、写真の白い診療室を大きく見せることで清潔感を保っています。くすみカラーは背景や飾りに使い、写真の白さを邪魔しないのがポイントです。
どんな業種の参考になりますか？
小児歯科・小児科・産婦人科のほか、子ども連れの来店が多い美容室・写真館・習い事教室などにも応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はふふ歯科および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの歯科医院の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の歯科医院サイトを。
「ふふ歯科のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料診断に申し込む