WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 病院・クリニック
  4. 大塚眼科

webcan analyze otsuka-eyeclinic.jp

CLINIC · 大分県 · PICKED 2026.11.01

大塚眼科病院・クリニックのホームページデザイン参考 — ホワイト・ブルー・縦書きナビ

大塚眼科のトップページ（PC）
PC（1440px）
大塚眼科のトップページ（スマホ）
スマホ（375px）
出典：otsuka-eyeclinic.jp ↗確認日 2026.11.01
大塚眼科病院・クリニック · 大分県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

手術の件数と受診の4ステップで、「どんな医院か」「どう受診するか」を数字と順番で見せる。

大分市の眼科のサイト。ファーストビューは目元の写真に「専門医療を担う総合眼科として」のコピー。PCではナビを縦書きで並べ、右端に文字サイズ（中・大）の切り替えを置いている。お知らせ・受診案内のあとに手術実績を件数の表で示し、8つの案内ページへの入口、受診の4ステップ、診療予定表と続く。

  1. 01PCのナビを縦書きで並べ、ヘッダーに「ご予約はこちらから」と電話番号を置いている
  2. 02画面右端に文字サイズの「中・大」の切り替えを置いている
  3. 03手術実績を、2023年の手術の種類ごとの件数の表で見せている

3 VIEWPOINTS3つの視点で見る

デザインの視点

白地に青（#297BAD）を少しだけ使い、目元の写真1枚でファーストビューの印象を決めている。PCの縦書きのナビと、画面右端の文字サイズ「中・大」の切り替えが特徴。

集客の視点

ヘッダーに「ご予約はこちらから」と電話番号を置き、ページ下部では電話予約から診察までを4ステップで見せている。手術実績を種類ごとの年間件数で出し、診療予定表で担当医も示している。

Webディレクターの視点

お知らせは3件と一覧へのリンク、その後に手術実績の数字、7つの案内ページへの入口、受診の4ステップ、診療予定表と続く。動画以外は静的な部品なので、予算を抑えて真似できる。

CONVERSION集客の工夫

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

実績を種類ごとの件数で出す

白内障・緑内障・網膜硝子体など手術の種類ごとに、2023年の件数を表にしている。「手術に強い」と書く代わりに数字で示すので、医院を比べている人が判断しやすい。

受診の流れを4ステップで見せる

「電話予約→予約日時に到着→問診・検査→診察」を番号つきで並べ、「診察は予約制です」と電話番号を添えている。初めての人が当日の流れを事前に知ることができる。

文字を大きくして読める

画面右端に文字サイズの切り替えを常に置いている。小さな文字が読みにくい人も、自分で読みやすい大きさに変えられる。

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

COLOR配色

#FFFFFF背景
#F9FAFAセクション背景
#297BADボタン・予約の帯 · ブルー
#333333本文テキスト
#B3B3B3英字の補足 · グレー

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

TYPOGRAPHYフォント

用途
和文見出し・ナビ
使用フォント
太ゴB101（Adobe Fonts）
無料で近いもの
Noto Sans JP
用途
和文本文
使用フォント
源ノ角ゴシック（Adobe Fonts）
無料で近いもの
Noto Sans JP
用途
英字（The highest level of eye medical. など）
使用フォント
Abel
無料で近いもの
Abel
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h116px / 7002.0016px / 700
h228px / 5001.6021px / 500
h320px / 5002.0018px / 500
本文（p）16px / 4002.0016px / 400
ボタン16px / 5002.0016px / 500

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

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

  1. 01

    ヘッダー

    左に縦書きのロゴ、縦書きのナビ8項目、右上に電話番号、右端に文字サイズの切り替え。

    ヘッダー／左固定サイドナビ型
  2. 02

    ファーストビュー

    目元の写真に「専門医療を担う総合眼科として」。

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

    受診案内

    受付から診察までの流れの説明と動画。

    コンセプト／写真＋メッセージ型
  5. 05

    手術実績

    開院以来の白内障手術数と、2023年の手術の種類ごとの件数。

    強み・選ばれる理由／番号つき3〜4項目型
  6. 06

    案内ページへの入口

    当院について・医師紹介・診療案内・手術実績・部署紹介・検査・手術機器・交通アクセス。

    メニュー・サービス／アイコン／写真グリッド型
  7. 07
  8. 08

    受診する方へ

    電話予約・到着・問診と検査・診察。

    流れ／ステップ型
  9. 09

    診療予定表

    曜日・時間帯ごとの担当医と手術の日。

    料金／表組み型
大塚眼科の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
大塚眼科のファーストビュー（PC）PC
大塚眼科のファーストビュー（スマホ）SP
05手術実績強み・選ばれる理由／番号つき3〜4項目型
大塚眼科の手術実績（PC）PC
大塚眼科の手術実績（スマホ）SP
06案内ページへの入口メニュー・サービス／アイコン／写真グリッド型
大塚眼科の案内ページへの入口（PC）PC
大塚眼科の案内ページへの入口（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01実績を「多い」と書かず、種類ごとの件数の表で出す
  2. 02予約から診察までの流れを番号つきのステップで見せる
  3. 03文字サイズの切り替えなど、読む人の見えにくさに配慮した仕組みを入れる
  4. 04色は白と青1色にしぼり、写真1枚でファーストビューの印象を決める

FAQよくある質問

大塚眼科のサイトで使われているフォントは？

見出しとナビは太ゴB101、本文は源ノ角ゴシック（どちらも Adobe Fonts）、英字は Abel です。Google Fonts で近づけるなら、和文は Noto Sans JP が使えます。

手術件数のような実績は、どう載せるとよいですか？

このサイトは、2023年の手術の件数を種類ごとに表にしています。何年の数字かを明記して、詳しい実績のページへのボタンを添えています。

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

眼科のほか、整形外科・耳鼻科などの専門クリニックや、施工件数を示したい工務店・リフォーム会社など、実績の数字が選ばれる理由になる業種に応用できます。

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

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

病院・クリニックのすべてを見る8件
webcan design --sitemap otsuka-eyeclinic.jp

大塚眼科のサイトマップ

  • 97ページ
  • トップページ/
  • 当院について/about/
  • 医師紹介/staff/
  • 診療案内/information/
  • 手術実績/surgery/
    • 個別ページ/surgery/<各ページ>/13件
  • 部署紹介/facilitie/
  • 検査・手術機器/machine/
    • 個別ページ/machine/<各ページ>/25件
  • 交通アクセス/access/
  • 採用情報/recruit/
  • 疾患について/treatment/
    • 緑内障について/treatment/ryokunaisyou/
  • 広報誌/magazinelist/
  • 9月1日時点/meyasu/9月1日時点/
  • お知らせ/newslist/
  • 2024年4月/medical/2024年4月/
  • 記事ページ/<各ページ>/14件
  • 個別ページ/magazine/<各ページ>/27件
  • 個別ページ/stafflist/<各ページ>/3件

2026.11.01 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

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

「大塚眼科のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら