ワイヤーDL大塚眼科
手術の件数と受診の4ステップで、「どんな医院か」「どう受診するか」を数字と順番で見せる。
webcan analyze suzuki-ladies-clinic.jp
CLINIC · 福島県 · PICKED 2026.11.09
すずきレディースクリニック病院・クリニックのホームページデザイン参考 — 産婦人科・明朝体・グレージュ
出典：suzuki-ladies-clinic.jp ↗確認日 2026.11.09
EDITOR'S NOTE編集部の視点
診察室の写真と明朝体のコピーに、ネット予約・分娩予約・診療時間の3つのボタンを重ねる。
福島県郡山市八山田の産婦人科クリニックのサイト。ファーストビューは診察室で医師とスタッフが患者に向き合う写真に、明朝体の「すべての女性と、こどもたちの未来のために。」を重ね、下中央にネット予約・分娩予約・診療時間のボタンを並べている。グレージュの背景に英字の大きな見出しを使い、当院の診療方針、産科・婦人科・各種検査の3つの診療案内、施設・サービス、初診の方へとよくあるご質問、お知らせ、Instagram、月ごとの分娩予約状況、予約・ご相談と続く。
- 01ファーストビューの下中央に、ネット予約・分娩予約・診療時間の3つのボタンをまとめたバーを置いている
- 02月ごとの上旬・中旬・下旬で分娩予約の空き状況を「○・△・×」の表で見せている
- 03グレージュの背景に、英字の大きな見出し（About Clinic・Our Service など）と明朝体のコピーを組み合わせている
3 VIEWPOINTS3つの視点で見る
デザインの視点
グレージュ1色の背景に、英字の大きな見出しと細い明朝体のコピーを合わせ、差し色はオレンジの小さな点とアイコンだけにしている。ファーストビュー下中央のバーに3つのボタンを重ねる構成は、写真を隠さず入口を見せる配置として真似しやすい。
集客の視点
ネット予約・分娩予約・診療時間の3つのボタンをPCは最初の画面の下中央、スマホは画面下に固定し、ヘッダーにも電話番号を出している。月ごとの分娩予約の空き状況を表で公開する点は、予約前の確認の手間を減らす工夫として真似しやすい。
Webディレクターの視点
診療方針→産科・婦人科・各種検査の3つの診療案内→施設・サービス→初診の方へ・よくあるご質問→お知らせ→分娩予約状況→予約と電話の順。予約状況の表とお知らせを独立した欄にしており、日々の更新を院内で回しやすい。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 4か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / ネット予約
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
予約の入口をファーストビューから外さない
PCではファーストビュー下中央に「ネット予約・分娩予約・診療時間」のバーを固定し、スマホでは画面下に「ネット予約・お電話・分娩予約・診療時間」とメニューのボタンを固定している。ヘッダー右上にも電話番号を出している。
分娩予約の空き状況を表で公開する
分娩予約状況の欄で、月ごとに上旬・中旬・下旬の予約の受付状況を記号で示している。出産する病院を探している人が、問い合わせる前に予約できるかどうかを確かめられる。
予約と電話を最後に2つ並べる
ページの終わりの「Reserve & Contact」で、24時間受け付けのネット予約と、受付時間つきの電話番号を左右に並べている。どちらで連絡すればよいかを最後にもう一度示している。
チェック項目は 2026.11.09 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F7F5F5背景 · グレージュ
#FFFFFFカード背景
#524B44本文テキスト・見出し · ブラウングレー
#9E9993補助テキスト · グレー
#F29600差し色（見出しの点・アイコン） · オレンジ
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し（About Clinic など）
- 使用フォント
- Onest
- 無料で近いもの
- Onest
- 用途
- 和文（本文・ナビ）
- 使用フォント
- LINE Seed JP
- 無料で近いもの
- LINE Seed JP
- 用途
- 和文のコピー
- 使用フォント
- Noto Serif JP Light
- 無料で近いもの
- Noto Serif JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 15px / 400 | 1.50 | 13.7px / 400 |
| h2 | 20px / 400 | 1.50 | 15.6px / 400 |
| h3 | 24px / 400 | 1.50 | 17.6px / 400 |
| 本文（p） | 15px / 400 | 1.80 | 11.7px / 400 |
| ボタン | 15px / 400 | 1.40 | 13.7px / 400 |
実測値（PC 1440px・SP 375px、2026.11.09 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
初診の方へ・よくあるご質問
イベント・キャンペーン／特集バナー並び型 - 07
News（お知らせ）
お知らせ／お知らせ一覧型 - 08
Instagram
記事・メディア／記事カードグリッド型 - 09
- 10
- 11
- 12
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.09 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01予約・電話・診療時間など、来院の前に必要な入口を1本のバーにまとめて画面に固定する
- 02予約の空き状況など、問い合わせの前に知りたい情報を表にして公開する
- 03背景を1色のグレージュにそろえ、差し色はオレンジの小さな点とアイコンだけにする
- 04ページの最後で、ネット予約と電話の2つの連絡手段を並べて示す
FAQよくある質問
すずきレディースクリニックのサイトで使われているフォントは？
英字の見出しは Onest、和文の本文やナビは LINE Seed JP、ファーストビューなどのコピーは Noto Serif JP です。いずれも無料で使えるフォントです。
分娩予約の空き状況をサイトに出すと、どんな点がよいですか？
出産する施設を探している人は、まず予約できるかどうかを知りたいものです。月ごとの受付状況を表で出しておくと、問い合わせる前に判断でき、電話での確認の手間も減らせます。
どんな業種の参考になりますか？
産婦人科のほか、予約制のクリニック・歯科医院・整体院など、予約の方法が複数あり、空き状況を伝えたい業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はすずきレディースクリニックおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの病院・クリニックの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のクリニックサイトを。
「すずきレディースクリニックのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。