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
ヘッダー
電話番号と診療時間、丸いWEB予約ボタンを右上に。
ヘッダー／電話番号＋予約ボタン常設型
02
ファーストビュー
子どもを診る医師の写真に、明朝体の短いコピー。
ファーストビュー／全面写真＋コピー型
03
開院のお知らせ
イベント・キャンペーン／見学会・イベント告知型
04
コンセプト
縦書きの明朝体の見出しと写真。
コンセプト／写真＋メッセージ型
05
快適に通える医院づくり
診療時間・個室・バリアフリー・駐車場など。
強み・選ばれる理由／番号つき3〜4項目型
06
お子さま連れの通院も安心
キッズルームとファミリー診療室。
強み・選ばれる理由／写真とテキストの交互型
07
やさしく、質の高い診療
番号つきで診療の方針を5つ。
強み・選ばれる理由／写真とテキストの交互型
08
診療メニュー
「治す・守る」「美しく」「機能回復」の3分類。
メニュー・サービス／アイコン／写真グリッド型
09
お知らせ・診療カレンダー
アクセス／地図＋時間表型
10
電話・WEB予約
行動喚起／電話＋Web予約の2ボタン帯型
11
ブログ・Instagram
お知らせ／お知らせ一覧型
12
フッター
フッター／店舗情報＋ナビ型

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

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営業日以内に対応します。