PC
SP
PC
SP
PC
SP
ワイヤーDLやいづ原崎矯正歯科
「ちょっと気になる」から始めていい、と最初の一言で相談のハードルを下げる。
webcan analyze www.trmdc.com
DENTAL CLINIC · 神奈川県 · PICKED 2026.10.24
つるま歯科医院歯科医院のホームページデザイン参考 — ターコイズ・ゴシック体・スタッフ写真
出典：www.trmdc.com ↗確認日 2026.10.23
EDITOR'S NOTE編集部の視点
院長とスタッフの写真を前面に出し、予約の方法を4つに分けて画面の端に固定する。
神奈川県大和市・鶴間駅西口の歯科医院のサイト。ファーストビューは院長の写真に斜めのストライプを重ね、白い帯に「いつでも患者さんのお口の健康を第一に」のコピーを置いている。ターコイズ（#4BBEBD）を基調に、ONE TEAM（スタッフ紹介）、5つのCONCEPT、TREATMENT MENU、HEART、2つのSPECIALITY（歯周病・インプラント）、ブログ・症例紹介と続く。
- 01ファーストビューとONE TEAMで、院長やスタッフが診療している写真を大きく使っている
- 02ターコイズ（#4BBEBD）と深い緑（#166663）を基調に、斜めに切った色面を背景のあちこちに入れている
- 03英字の見出し（ONE TEAM・CONCEPT など）は Oswald で、頭文字だけ濃い緑にしている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ネット予約 / お問い合わせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
予約の方法を4つ用意して固定する
PCでは画面右端に「ネット予約」「お問い合わせ」「LINEでの予約」「無料駐車場完備」の縦長のボタンを固定している。スマホでは画面下に「TEL」「ネット予約」「お問い合わせ」「LINEでの予約」の4つを固定し、患者が使いやすい方法を選べる。
電話番号と診療時間をヘッダーに出す
PCのヘッダー右上に、大きな電話番号と「診療時間：10:00~13:00/14:30~20:00」を並べている。夜20時までの診療を、ページを開いた時点で伝えている。
考え方を番号つきの5項目で示す
CONCEPT で「患者さんのことを第一に考えた治療」「十分な説明と納得の上で治療開始」「明確な治療費」など5つの方針を、番号と写真つきで並べている。初めての人が、医院の方針を比べて選ぶ材料になる。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#4BBEBDブランドカラー・色面 · ターコイズ
#166663ネット予約ボタン・見出しの頭文字 · ディープグリーン
#B29727お問い合わせボタン · ゴールド
#00B54ALINEでの予約ボタン · グリーン
#F7F7F7セクション背景
#333333本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- 游ゴシック体 / Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字見出し・電話番号
- 使用フォント
- Oswald
- 無料で近いもの
- Oswald
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 16px / 400 | 1.00 | 14px / 400 |
| h3 | 30px / 700 | 1.50 | 18px / 700 |
| 本文（p） | 16px / 400 | 2.00 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
PARTSパーツ別に見る
番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.23 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01院長とスタッフの写真をファーストビューと冒頭に使い、誰が診るのかを先に見せる
- 02電話・ネット予約・問い合わせ・LINEなど、予約の方法を複数用意して固定する
- 03医院の方針は番号つきの項目にして、写真と交互に並べる
- 04ブランドカラー1色と深い色1色で、色面とボタンの色をそろえる
FAQよくある質問
つるま歯科医院のサイトで使われているフォントは？
和文は游ゴシック体と Noto Sans JP、英字の見出しと電話番号は Oswald です。Noto Sans JP と Oswald は Google Fonts で無料で使えます。
予約ボタンを4つも並べると、迷わせてしまいませんか？
このサイトでは、ボタンごとに色とアイコンを変えて区別しています。電話・ネット予約・LINEのどれを使うかは患者によって違うので、色で見分けられれば、選択肢が多いことが予約のしやすさにつながります。
どんな業種の参考になりますか？
歯科医院のほか、整骨院・皮膚科・眼科など、スタッフの人柄と予約のしやすさを伝えたい地域の医療機関に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はつるま歯科医院および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの歯科医院の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の歯科医院サイトを。
「つるま歯科医院のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。