ワイヤーDLふふ歯科
医師と子どもの写真1枚で、「子どもを連れて行ける歯医者」を伝える。
DENTAL CLINIC · 福岡県 · PICKED 2026.10.15
つきやま歯科・矯正歯科 いじり本院歯科医院のホームページデザイン参考 — ゴールド・明朝体・人物写真
出典：www.fukuoka-tdc.com ↗確認日 2026.10.15
EDITOR'S NOTE編集部の視点
ファーストビューは医師3人の写真。「誰に診てもらうか」から見せる。
福岡市の歯科医院のサイト。ファーストビューに医師の写真と開院からの年数を置き、ベージュとゴールドの配色、明朝体の見出しで落ち着いた印象にまとめている。診療案内は黒い背景にゴールドのボタンで並べ、治療方針や院長あいさつまで、信頼の材料を順に積み上げている。
- 01ファーストビューは医師の写真と、地域での年数を入れた短いコピーだけで構成している
- 02ベージュの背景に、ボタンや見出しの飾りをゴールドでそろえ、上質な印象を出している
- 03診療案内は「お口の中のお悩み」から選ぶ形にし、黒い背景で目立たせている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 3か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線24h対応WEB予約 / 体とお口の相談会のお知らせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
予約制であることを先に伝える
トップの中盤に、完全予約制であることを知らせる枠を設けている。予約の電話・WEB予約の前に来院の仕方が分かるので、当日の飛び込みによる行き違いを防げる。
悩みから診療を選ばせる
診療メニューを治療名ではなく「お口の中のお悩み」で並べている。専門用語を知らない患者さんでも、自分の症状から該当するページを選べる。
第三者の評価を載せる
患者さん向けの満足度調査を第三者機関で実施していることを、バナーで案内している。自院の説明だけでなく、外部の評価で信頼を補っている。
チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F2EDDE背景 · ベージュ
#FFFFFFカード背景
#000000濃色セクション
#B59C70ボタン・飾り · ゴールド
#8D6F46見出しの差し色
#333333本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し
- 使用フォント
- 游明朝体
- 無料で近いもの
- Shippori Mincho
- 用途
- 和文本文
- 使用フォント
- Noto Sans CJK JP（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
- 用途
- ナビゲーション
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 14px / 400 | 1.80 | 16px / 400 |
| h2 | 40px / 600 | 1.80 | 35px / 600 |
| h3 | 24px / 600 | 1.80 | 24px / 600 |
| 本文（p） | 14px / 400 | 1.80 | 16px / 400 |
| ボタン | 14px / 400 | 1.80 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
お知らせ
お知らせ／お知らせ一覧型 - 04
- 05
治療方針と患者さんへのお願い
強み・選ばれる理由／番号つき3〜4項目型 - 06
分院・予約制のお知らせ
イベント・キャンペーン／特集バナー並び型 - 07
- 08
- 09
診療理念・院長挨拶
人・代表／代表・院長あいさつ型 - 10
- 11
グループ医院のご案内
イベント・キャンペーン／特集バナー並び型 - 12
アクセス・診療時間
アクセス／地図＋時間表型 - 13
フッター
フッター／店舗情報＋ナビ型 - 14
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューに医師の写真を使い、地域での年数など事実を短いコピーにする
- 02上質な印象を出すなら、ベージュ系の背景に差し色を1色（ゴールドなど）だけ使う
- 03診療メニューは治療名ではなく、患者さんの悩みの言葉で並べる
- 04予約制などの来院ルールは、トップの目立つ位置で先に伝える
FAQよくある質問
つきやま歯科のサイトで使われているフォントは？
見出しは游明朝体、本文は Adobe Fonts の Noto Sans CJK JP、ナビゲーションは Noto Sans JP です。無料で近づけるなら、見出しに Shippori Mincho、本文に Noto Sans JP を使います。
医師の写真をファーストビューに使うときの注意点は？
表情が明るく、診療中の雰囲気が伝わる写真を選びます。また、歯科医院の広告には医療広告ガイドラインがあるため、コピーには「地域での年数」のような事実を使い、効果を断定する表現は避けます。
どんな業種の参考になりますか？
歯科医院のほか、医科クリニック・動物病院・士業事務所など、「人で選ばれる」業種のサイトに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はつきやま歯科・矯正歯科 いじり本院および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの歯科医院の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の歯科医院サイトを。
「つきやま歯科・矯正歯科 いじり本院のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料診断に申し込む