ワイヤーDLふふ歯科
医師と子どもの写真1枚で、「子どもを連れて行ける歯医者」を伝える。
DENTAL CLINIC · 岡山県 · PICKED 2026.10.15
グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科歯科医院のホームページデザイン参考 — グリーン・やわらか・数字訴求
出典：www.green-dc.com ↗確認日 2026.10.15
EDITOR'S NOTE編集部の視点
スタッフの集合写真と4つの数字で、「大きくて安心な医院」を一目で伝える。
倉敷市のショッピングモール内にある歯科医院のサイト。ファーストビューにスタッフの集合写真を使い、年間来院者数・診療台の数・専門医・スタッフ数を数字のバッジで並べている。ファーストビューの直後にモール内の地図を置くなど、来院する人の動きに合わせた順番で情報を並べている。
- 01ファーストビューにスタッフ全員の写真と、規模を表す4つの数字を並べている
- 02モール内での場所が分かる地図を、トップの序盤に置いている
- 03淡い黄色・水色の背景と丸みのあるゴシック体で、子ども連れにもやさしい印象にしている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 3か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線初診WEB予約
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
ショッピングモール内の場所を先に案内
モールの中にある医院は、建物に着いてから迷いやすい。トップの序盤にモール内の地図と行き方を載せ、来院のハードルを下げている。
初診の流れを4ステップで見せる
受付から問診・検査・応急処置までの初診の流れを、番号つきの4ステップで説明している。初めての歯医者で何をされるのかが分かり、予約前の不安を減らせる。
電話とWEB予約を並べて最後に置く
ページの終わりに、電話番号と「初診WEB予約」を左右に並べ、その下に診療時間の表を置いている。読み終えたところで、自分に合う方法を選んで予約できる。
チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#FDFFE9セクション背景 · ペールイエロー
#DFEDEFセクション背景 · ペールブルー
#005841ボタン・見出し · ディープグリーン
#89BB4A差し色 · リーフグリーン
#555555本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 和文見出し
- 使用フォント
- Zen Maru Gothic
- 無料で近いもの
- Zen Maru Gothic
- 用途
- 英字見出し（ACCESS MAP など）
- 使用フォント
- Jost
- 無料で近いもの
- Jost
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 400 | 1.70 | 16px / 400 |
| h2 | 56px / 400 | 1.16 | 40px / 400 |
| h3 | 25.1px / 700 | 1.20 | 23.1px / 700 |
| 本文（p） | 16px / 400 | 1.50 | 16px / 400 |
| ボタン | 20px / 700 | 1.70 | 18px / 700 |
実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
選ばれ続ける理由
強み・選ばれる理由／番号つき3〜4項目型 - 07
院長メッセージ
人・代表／代表・院長あいさつ型 - 08
診療のご案内
メニュー・サービス／アイコン／写真グリッド型 - 09
初診の方へ
流れ／ステップ型 - 10
このようなお悩みありませんか
メニュー・サービス／アイコン／写真グリッド型 - 11
- 12
Instagram・特集ページ
イベント・キャンペーン／特集バナー並び型 - 13
お知らせ
お知らせ／お知らせ一覧型 - 14
- 15
診療時間・所在地
アクセス／地図＋時間表型 - 16
フッター
フッター／店舗情報＋ナビ型
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01規模や実績を示す数字を、ファーストビューのバッジにして4つまで並べる
- 02建物の中で迷いやすい立地なら、地図と行き方をトップの序盤に置く
- 03初診の流れは番号つきの短いステップにする
- 04子ども連れの来院が多いなら、淡い背景色と丸みのある書体でやわらかさを出す
FAQよくある質問
グリーン歯科クリニック倉敷のサイトで使われているフォントは？
本文は Noto Sans JP、見出しは丸みのある Zen Maru Gothic、英字見出しは Jost です。すべて Google Fonts で無料で使えます。
数字のバッジに載せる内容は、どう選べばいいですか？
来院者数・設備の数・資格者の数など、事実として説明できる数字を選びます。比較して優れていると断定する表現や、根拠を示せない数字は使わないようにします。
どんな業種の参考になりますか？
歯科医院のほか、商業施設やビルの中にある医院・店舗・教室など、「場所が分かりにくい」業種のサイトに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はグリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの歯科医院の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の歯科医院サイトを。
「グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料診断に申し込む