WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 病院・クリニック
  4. 八王子糖尿病内科クリニック

webcan analyze hachioji-dm.com

CLINIC · 東京都 · PICKED 2026.10.20

八王子糖尿病内科クリニック病院・クリニックのホームページデザイン参考 — イラスト・イエロー・電話番号の固定

八王子糖尿病内科クリニックのトップページ（PC）
PC（1440px）
八王子糖尿病内科クリニックのトップページ（スマホ）
スマホ（375px）
出典：hachioji-dm.com ↗確認日 2026.10.20
八王子糖尿病内科クリニック病院・クリニック · 東京都
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

電話番号の語呂合わせと固定バーで、診療時間・アクセス・電話にいつでも届く。

八王子市の糖尿病内科クリニックのサイト。ファーストビューは受付と待合室の写真で、下に「診療時間」「アクセス」と、「トー」「ニョー」のふりがなを添えた電話番号を丸いバーにまとめている。お知らせ・診療内容・糖尿病について・診療のながれ・診療時間と診療カレンダーと続き、診療内容と病気の説明をイラストで示している。

  1. 01電話番号「042-631-1024」の「10」「24」に「トー」「ニョー」のふりがなを添えている
  2. 02診療内容8つを、人体のイラストを中心に左右へ並べている
  3. 03診療のながれを「初診の場合」「再診の場合」のタブで切り替え、黄色のカードで手順を示している

CONVERSION集客の工夫

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

診療時間・アクセス・電話を1本のバーにまとめる

「診療時間」「アクセス」「お問い合わせ」の電話番号を丸いバーにまとめ、PC・スマホとも画面下に固定している。スマホでは横にMENUボタンを並べ、どこまで読んでも来院前に必要な情報へ戻れる。

初診と再診で流れを分けて説明する

診療のながれを初診・再診のタブで切り替え、受付（3F）・問診・診察（4F）のように階数まで書いている。初めて来院する人が当日の動きを事前に知ることができる。

担当医まで分かる診療時間表とカレンダー

曜日・時間帯ごとに担当医の名前を入れた診療時間表と、2か月分の診療カレンダーを並べている。通院を続ける病気なので、受診日の予定を立てやすい。

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

COLOR配色

#FFFFFF背景
#F2F2F2セクション背景
#FFD600差し色（診療のながれのカード） · イエロー
#659ED1ロゴの差し色 · ブルー
#E26D46お知らせの強調 · オレンジ
#595959本文テキスト・診療時間の背景

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

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
A-OTF 見出ゴMB31（Adobe Fonts）
無料で近いもの
Zen Kaku Gothic New
用途
和文本文
使用フォント
A-OTF 中ゴシックBBB（Adobe Fonts）
無料で近いもの
Noto Sans JP
用途
英字（News・Our Services など）
使用フォント
Helvetica Neue LT Pro（Adobe Fonts）
無料で近いもの
Inter
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h242px / 7001.2432px / 700
h316px / 7001.6315px / 700
本文（p）14px / 4001.7113px / 400
ボタン14px / 4001.7113px / 400

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

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

  1. 01

    ヘッダー

    ロゴ、2列のナビ、右に専門医の資格と「採用情報」「治験募集」のボタン。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    受付と待合室の写真。下に診療時間・アクセス・電話番号の丸いバー。

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

    お知らせ

    左にお知らせの一覧、右に感染症対策の案内を枠で。

    お知らせ／お知らせ一覧型
  4. 04

    診療内容

    人体のイラストを中心に、糖尿病・高血圧症・甲状腺疾患などを左右に並べる。

    メニュー・サービス／アイコン／写真グリッド型
  5. 05

    糖尿病について

    「インスリンがうまく働かなくなる」→「血糖が上昇」→「体調不良・合併症進行」を3つのイラストと矢印で示し、下に説明文。

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

    診療のながれ

    初診・再診のタブ。黄色のカードに手順と階数。

    流れ／ステップ型
  7. 07

    診療時間・診療カレンダー

    曜日と時間帯ごとの担当医の表と、2か月分のカレンダー。

    アクセス／地図＋時間表型
  8. 08

    フッター

    ロゴ、所在地、電話番号。

    フッター／店舗情報＋ナビ型
  9. 09

    固定のバー

    診療時間・アクセス・電話番号。スマホではMENUボタンも。

    行動喚起／SP追従ボタンバー型
八王子糖尿病内科クリニックの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

03お知らせお知らせ／お知らせ一覧型
八王子糖尿病内科クリニックのお知らせ（PC）PC
八王子糖尿病内科クリニックのお知らせ（スマホ）SP
04診療内容メニュー・サービス／アイコン／写真グリッド型
八王子糖尿病内科クリニックの診療内容（PC）PC
八王子糖尿病内科クリニックの診療内容（スマホ）SP
05糖尿病についてコンセプト／写真＋メッセージ型
八王子糖尿病内科クリニックの糖尿病について（PC）PC
八王子糖尿病内科クリニックの糖尿病について（スマホ）SP
06診療のながれ流れ／ステップ型
八王子糖尿病内科クリニックの診療のながれ（PC）PC
八王子糖尿病内科クリニックの診療のながれ（スマホ）SP
07診療時間・診療カレンダーアクセス／地図＋時間表型
八王子糖尿病内科クリニックの診療時間・診療カレンダー（PC）PC
八王子糖尿病内科クリニックの診療時間・診療カレンダー（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.20 以降に撮影したもので、現在の表示とは異なる場合があります。

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01診療時間・アクセス・電話番号を1本のバーにまとめ、画面の下に固定する
  2. 02電話番号に語呂合わせがあれば、ふりがなを添えて覚えやすくする
  3. 03初診と再診で受診の流れを分け、階数や持ち物まで書く
  4. 04曜日ごとの担当医とカレンダーを載せ、通院の予定を立てやすくする

FAQよくある質問

八王子糖尿病内科クリニックのサイトで使われているフォントは？

和文の見出しは A-OTF 見出ゴMB31、本文は A-OTF 中ゴシックBBB、英字は Helvetica Neue LT Pro で、いずれも Adobe Fonts です。無料で近づけるなら、見出しに Zen Kaku Gothic New、本文に Noto Sans JP、英字に Inter が使えます。

クリニックのサイトで、病気の説明はどこまで書けばよいですか？

このサイトは、仕組みを3つのイラストと短い文章で示し、詳しい説明は別ページに分けています。トップでは要点だけを図で見せ、詳しく知りたい人を下層ページへ案内する形が読みやすくなります。

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

内科・専門外来のクリニックのほか、歯科医院・調剤薬局・整骨院など、診療時間と担当者の情報が来院の決め手になる業種に応用できます。

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

MOREほかの病院・クリニックの参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のクリニックサイトを。

「八王子糖尿病内科クリニックのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら