WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. 歯科医院
  4. 西宮北口ライフ歯科・矯正歯科・小児歯科

DENTAL CLINIC · 兵庫県 · PICKED 2026.10.15

西宮北口ライフ歯科・矯正歯科・小児歯科歯科医院のホームページデザイン参考 — パステル・ファミリー・手書き欧文

西宮北口ライフ歯科・矯正歯科・小児歯科のトップページ（PC）
PC（1440px）
西宮北口ライフ歯科・矯正歯科・小児歯科のトップページ（スマホ）
スマホ（375px）
出典：www.lifedc-nishinomiyakitaguchi.com ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

電話・WEB予約・LINE予約の3つを、ヘッダーで並べて選ばせる。

西宮市の歯科医院のサイト。ヘッダーに電話・WEB予約・LINE予約の3つの入口を並べ、ファーストビューは家族や子どもの写真を組み合わせたスライド。ピンク・ラベンダー・イエローのパステルに手書き風の欧文を添え、「no.1」「no.2」の大きな数字で医院の考え方を章立てして見せている。

  1. 01ヘッダー右上に、電話番号・WEB予約・LINE予約相談の3つの入口を並べている
  2. 02医院の考え方を「no.1〜no.3」の大きな数字で章立てし、長いページに区切りをつけている
  3. 03パステルの背景に手書き風の欧文を重ね、家族で通う医院らしい明るさを出している

CONVERSION集客の工夫

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

予約手段を3つ用意する

電話・WEB予約に加え、LINEでの予約相談を受け付けている。電話が苦手な人や、診療時間外に連絡したい人の取りこぼしを防げる。

初めての方とセカンドオピニオンを入口に

ファーストビューの直後に「初めての方へ」と「セカンドオピニオン」のバナーを置いている。来院の目的がはっきりしている人を、最短で該当ページへ送れる。

治療症例をトップで見せる

治療の症例を、写真と説明つきでトップページに並べている。自分に近い症例があるかを確かめられ、相談の動機につながる。

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

COLOR配色

#F9F5FA背景 · ラベンダーホワイト
#FFFFFFカード背景
#FFF3C9セクション背景 · ペールイエロー
#E290B5見出しの差し色 · ピンク
#4B99B2ボタン · ティール
#2B2A2A本文テキスト

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

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
秀英明朝（Adobe Fonts）
無料で近いもの
Shippori Mincho
用途
和文本文
使用フォント
Helvetica Neue・ヒラギノ角ゴ
無料で近いもの
Noto Sans JP
用途
手書き風の欧文（Smile・greeting など）
使用フォント
Coquette（Adobe Fonts）
無料で近いもの
Dancing Script
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h117px / 4002.4015.4px / 400
h214.5px / 4001.2013.1px / 400
h323.8px / 4001.6016.9px / 400
本文（p）13px / 4001.4013px / 400

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

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

  1. 01

    ヘッダー

    電話番号・WEB予約・LINE予約相談の3つを右上に。

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

    ファーストビュー

    家族・子ども・診療風景の写真を組み合わせたスライド。

    ファーストビュー／全面写真＋コピー型
  3. 03

    初めての方へ・セカンドオピニオン

    イベント・キャンペーン／特集バナー並び型
  4. 04

    お知らせ・ブログ

    お知らせ／お知らせ一覧型
  5. 05

    コンセプト

    円形に切り抜いた写真と、手書き風の欧文。

    コンセプト／写真＋メッセージ型
  6. 06

    当院が大切にしていること（no.1〜no.3）

    強み・選ばれる理由／写真とテキストの交互型
  7. 07
  8. 08

    小児歯科・根管治療・審美治療

    強み・選ばれる理由／写真とテキストの交互型
  9. 09
  10. 10
  11. 11

    greeting（院長あいさつ）

    人・代表／代表・院長あいさつ型
  12. 12
  13. 13

    アクセス・診療時間

    アクセス／地図＋時間表型
  14. 14
西宮北口ライフ歯科・矯正歯科・小児歯科の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01電話・WEB予約に、LINEなど3つ目の予約手段を加えてヘッダーに並べる
  2. 02長いページは「no.1」「no.2」のような大きな数字で章を区切る
  3. 03ファーストビュー直後に、目的別の入口（初めての方・セカンドオピニオンなど）を置く
  4. 04パステルを使うときは、本文の文字色を濃いグレーにして読みやすさを保つ

FAQよくある質問

西宮北口ライフ歯科のサイトで使われているフォントは？

見出しは Adobe Fonts の秀英明朝、本文は Helvetica Neue とヒラギノ角ゴ、飾りの欧文は手書き風の Coquette です。無料で近づけるなら、Shippori Mincho・Noto Sans JP・Dancing Script の組み合わせが使えます。

LINE予約を入れるときの注意点は？

LINEで受けるのは「予約の相談」にとどめ、確定は医院から返信する運用にすると、ダブルブッキングを防げます。返信できる時間帯もサイトに書いておくと安心です。

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

小児歯科・矯正歯科のほか、家族で利用するクリニック、整体、学習塾など、親子をターゲットにした業種に応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料診断に申し込む