WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. 歯科医院
  4. 小若歯科医院

DENTAL CLINIC · 岡山県 · PICKED 2026.10.15

小若歯科医院歯科医院のホームページデザイン参考 — アースカラー・明朝体・縦書き

小若歯科医院のトップページ（PC）
PC（1440px）
小若歯科医院のトップページ（スマホ）
スマホ（375px）
出典：www.kowaka-dc.jp ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

ファーストビューのすぐ下で、時間・地図・電話・WEB予約に全部答える。

岡山市南区の歯科医院のサイト。ファーストビューは診療室の写真と縦書きの明朝体のコピーで、右下に「土曜も診察」「急患対応可能」「駐車場あり」のアイコンを並べている。直後のINFORMATIONで診療時間表・地図・電話・WEB予約をまとめて見せ、来院を決めるのに必要な情報を最初の2画面に集めている。

  1. 01ファーストビューに、通いやすさを示す3つのアイコン（土曜も診察・急患対応可能・駐車場あり）を添えている
  2. 02診療時間表・地図・電話番号・WEB予約を、ファーストビュー直下の1つのブロックにまとめている
  3. 03クリーム色とオリーブ、深い緑のアースカラーで、落ち着いた町の歯医者の雰囲気を出している

CONVERSION集客の工夫

✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 4か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線24時間WEB予約
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

来院の判断材料を最初の2画面に集める

「今日やっているか」「どこにあるか」「どう予約するか」を、ファーストビュー直下のINFORMATIONで一度に答えている。検索から来た人が、スクロールせずに来院を決められる。

初診費用のめやすを載せる

初めて受診する人向けに、保険診療の初診費用のめやすを金額で示している。費用の不安は予約をためらう大きな理由なので、目安だけでも出しておく効果は大きい。

スマホでは電話とWEB予約を下に固定

スマホでは画面下に「電話予約」と「WEB予約24時間受付中」のボタンを固定している。電話がつながらない時間帯でも、WEB予約へ迷わず進める。

チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#F9F4E2セクション背景 · クリーム
#58864EWEB予約ボタン · グリーン
#B8A149差し色 · オリーブゴールド
#5B4420フッター・見出し · ブラウン
#403631本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Serif JP
無料で近いもの
Noto Serif JP
用途
和文（ナビ・ラベル）
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し（INFORMATION・FEATURES など）
使用フォント
Cinzel / Jost
無料で近いもの
Cinzel / Jost
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h112px / 4001.87—
h218px / 6001.6715px / 600
h314px / 4001.8614px / 400
本文（p）15px / 4002.1315px / 400

実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    電話番号と「24時間WEB予約」を右上に。

    ヘッダー／電話番号＋予約ボタン常設型
  2. 02

    ファーストビュー

    診療室の写真と縦書きのコピー。右下に土曜も診察・急患対応可能・駐車場ありのアイコン、左下にお知らせ。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    INFORMATION

    診療時間表・地図・電話・WEB予約をまとめる。

    アクセス／地図＋時間表型
  4. 04
  5. 05
  6. 06
  7. 07

    GREETING（院長あいさつ）

    人・代表／代表・院長あいさつ型
  8. 08
  9. 09

    FLOW（診療の流れ）

    流れ／ステップ型
  10. 10

    初診費用のめやす

    料金／表組み型
  11. 11

    CLINIC（院内設備）

    設備を写真のカルーセルで1つずつ説明。

    事例・実績／大判1件＋サムネ型
  12. 12

    アクセス・診療時間

    アクセス／地図＋時間表型
  13. 13
  14. 14

    スマホ追従ボタン

    電話予約・WEB予約24時間受付中。

    行動喚起／SP追従ボタンバー型
小若歯科医院の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01ファーストビューの直下に、診療時間・地図・電話・WEB予約をひとまとめにする
  2. 02土曜診療・急患対応・駐車場など「通いやすさ」の条件をアイコンで見せる
  3. 03初診費用のめやすを金額で出す
  4. 04アースカラーと明朝体で、地域に根ざした落ち着きを出す

FAQよくある質問

小若歯科医院のサイトで使われているフォントは？

見出しと本文は Noto Serif JP、ナビやラベルは Noto Sans JP、英字見出しは Cinzel と Jost です。すべて Google Fonts で無料で使えます。

診療時間や地図は、ページ下部に置くのが一般的では？

下部にも置いたうえで、ファーストビュー直下にも置くのがこのサイトの工夫です。地域の歯科医院を探す人は、まず「行けるかどうか」を確かめたいので、早い位置で答えるほど離脱を減らせます。

どんな業種の参考になりますか？

歯科医院のほか、整骨院・鍼灸院・動物病院・美容室など、営業時間と場所が来店の決め手になる業種に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は小若歯科医院および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの歯科医院の参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の歯科医院サイトを。

「小若歯科医院のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料診断に申し込む