ワイヤーDLつるま歯科医院
院長とスタッフの写真を前面に出し、予約の方法を4つに分けて画面の端に固定する。
webcan analyze yaizu-ortho.com
DENTAL CLINIC · 静岡県 · PICKED 2026.11.01
やいづ原崎矯正歯科歯科医院のホームページデザイン参考 — ブルー・生成り・波のライン
出典：yaizu-ortho.com ↗確認日 2026.11.01
EDITOR'S NOTE編集部の視点
「ちょっと気になる」から始めていい、と最初の一言で相談のハードルを下げる。
静岡県焼津市の矯正歯科専門のサイト。生成りの背景に青い波形のヘッダーを重ね、ファーストビューは「矯正のこと、「ちょっと気になる」から、はじめよう。」の見出しと施術中の写真、縦書きの紹介文。お知らせ・院長からのメッセージ・当院について（3項目）・診療案内・院長紹介・院内紹介・相談の窓口と続く。
- 01ヘッダーに電話番号と白い「24時間Web予約」ボタンを置き、青い波形の帯でロゴ側と分けている
- 02ファーストビューは、相談のハードルを下げる見出しと、施術中の写真に縦書きの紹介文を重ねた構成
- 03「当院について」は、写真と番号（01〜03）つきの短い文を青い帯の上に互い違いに並べている
3 VIEWPOINTS3つの視点で見る
デザインの視点
生成り（#F4F4F0）の背景に青（#3C699C）の波形の区切りを重ね、ヘッダーの白い「24時間Web予約」ボタンを目立たせている。「当院について」は写真と番号（01〜03）つきの短い文を青い帯の上に並べる型で、真似しやすい。
集客の視点
ヘッダーに電話番号と24時間Web予約を常に出し、ページ下部では電話・Web予約・LINE相談の3つを並べている。院長の経歴と日本矯正歯科学会の認定医であること、駐車場2台、診療カレンダーまで載せ、来院前に確かめたいことに答えている。
Webディレクターの視点
お知らせ→メッセージ→当院について→診療案内→院長紹介→院内紹介→相談の窓口の順。お知らせは月ごとの診療日の案内が中心で、更新の手間が小さい作り。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線24時間Web予約 / line相談
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
最初の一言で「相談だけ」を許す
見出しの「「ちょっと気になる」から、はじめよう。」と、紹介文の「まずは相談だけでもお気軽にどうぞ。」で、治療を決める前の人にも来てよいと伝えている。ページ下部の窓口も「まずは、相談だけでも大丈夫です。」で始まる。
予約の窓口を3つ用意する
ページ下部で、電話・24時間Web予約・LINE相談の3つを並べている。電話がつながらない時間でも、Web予約やLINEで連絡できる。
通いやすさを具体的に書く
「毎月すべての曜日に診療日を設けている」こと、駐車場2台、最寄り駅からの所要時間、診療カレンダーを載せている。通院が長く続く矯正で、続けられるかを判断できる材料になる。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F4F4F0背景 · 生成り
#3C699Cヘッダーの波・帯・ボタン · ブルー
#FFFFFF予約ボタン・カード
#E5E5D9区切り · ベージュグレー
#000000本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Zen Kaku Gothic New
- 無料で近いもの
- Zen Kaku Gothic New
- 用途
- 英字見出し（News・About us など）
- 使用フォント
- Outfit
- 無料で近いもの
- Outfit
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 500 | 1.90 | 14px / 500 |
| h2 | 18px / 500 | 1.50 | 15px / 500 |
| h3 | 29px / 500 | 1.50 | 20px / 500 |
| 本文（p） | 16px / 400 | 1.90 | 14px / 400 |
| ボタン | 16px / 400 | 1.90 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
Message（まずはお話から）
人・代表／代表・院長あいさつ型 - 05
- 06
- 07
- 08
Equipment（院内紹介）
事例・実績／写真グリッド型 - 09
- 10
- 11
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.01 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01見出しで「相談だけでもいい」と伝え、来院の心理的なハードルを下げる
- 02電話・Web予約・LINEの3つの窓口を並べる
- 03診療日の考え方・駐車場・カレンダーなど、通い続けられるかの判断材料を載せる
- 04背景の生成りとブランドの青の2色に、波形の線を差して印象をそろえる
FAQよくある質問
やいづ原崎矯正歯科のサイトで使われているフォントは？
和文は Zen Kaku Gothic New、英字の見出しは Outfit です。どちらも Google Fonts で無料で使えます。
矯正歯科のサイトで、最初に何を伝えるとよいですか？
このサイトは、治療方法より先に「「ちょっと気になる」から、はじめよう。」と、相談だけで来てよいことを伝えています。矯正は決断までに時間がかかるため、最初の相談に来てもらう言葉を前に出しています。
どんな業種の参考になりますか？
矯正歯科・小児歯科のほか、美容医療・リフォーム・注文住宅など、相談から契約まで時間がかかり、最初の一歩をためらわれやすい業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はやいづ原崎矯正歯科および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの歯科医院の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の歯科医院サイトを。
「やいづ原崎矯正歯科のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。