ワイヤーDLすずきレディースクリニック
診察室の写真と明朝体のコピーに、ネット予約・分娩予約・診療時間の3つのボタンを重ねる。
webcan analyze www.funakoshi-naika.net
CLINIC · 福岡県 · PICKED 2026.10.31
ふなこし内科・循環器内科病院・クリニックのホームページデザイン参考 — オレンジ・明朝体・写真
出典：www.funakoshi-naika.net ↗確認日 2026.10.31
EDITOR'S NOTE編集部の視点
診療時間表のすぐ横に、電話・新患WEB予約・地図をひとまとめにする。
福岡市中央区笹丘の内科・循環器内科のサイト。ファーストビューは院長の診察風景と院内の写真に「循環器専門医があなたの主治医に。」のコピーを明朝体で載せ、下に「循環器 / 総合内科 専門医」「管理栄養士在籍」「駐車場7台」の3つの枠を並べている。直後に診療スケジュール表と、電話番号・新患専用WEB予約・Google経路案内を横に並べたブロックを置き、健康コラム・当院の特徴・診療案内・院長挨拶へと続く。
- 01ファーストビューのコピーの下に、専門医・管理栄養士・駐車場の3点を枠で並べている
- 02診療スケジュール表の右に、電話番号と受付時間・新患専用WEB予約・インフルエンザ予防接種のボタン・Google経路案内をまとめている
- 03当院の特徴を写真つきの6枚のカード（01〜06）で並べ、診療案内は循環器内科・一般内科・老年内科などの分類ごとに外来名を一覧にしている
3 VIEWPOINTS3つの視点で見る
デザインの視点
診療時間表のすぐ横に、電話・新患専用WEB予約・経路案内をひとまとめにして上と下の2か所に置く構成を真似るとよいです。白基調にオレンジを予約ボタンだけに使い、明朝体のコピーと診察風景の写真で見せています。
集客の視点
ヘッダーに「新患専用WEB予約」を置き、診療スケジュール表の横に電話番号・受付時間・WEB予約・経路案内を並べている。ファーストビューの下に専門医・管理栄養士・駐車場7台の3点を枠で見せており、予約の入口と通いやすさの条件を同じ場所にまとめる作りが参考になる。
Webディレクターの視点
診療時間表と電話・新患専用WEB予約・経路案内を1つのブロックにまとめ、トップの上部とアクセスの後の2か所に置いています。予約の入口を初診用と予防接種用に分けてヘッダーに出す作りも、写真と文章だけで再現できます。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 3か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / 新患専用WEB予約
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
予約の入口をヘッダーに2つ置く
PCのヘッダー右上に、オレンジの「新患専用WEB予約」と「インフルエンザ予防接種」のボタンを置いている。初めての人と、時期の用事で来た人の両方が、トップを読まずに目的の場所へ進める。
診療時間と連絡先を同じ高さで見せる
診療スケジュール表のすぐ横に電話番号・受付時間・WEB予約・経路案内を並べ、ページの下の方でも同じブロックをもう一度出している。「今日やっているか」を確かめた人が、そのまま連絡できる。
通いやすさの条件を具体的に書く
ファーストビューの枠とアクセスの欄で「駐車場7台」「近隣コインP補助あり」「笹丘1丁目バス停より約2分」と数字で示している。車やバスで通う人が多い地域のクリニックでは、来院のハードルを下げる情報になる。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#FAFAFAセクション背景
#ED6D00予約ボタン・強調の文字 · オレンジ
#90C31F差し色（コピー・ボタン） · ライムグリーン
#333333本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 見出し・ナビ・コピー
- 使用フォント
- Noto Serif JP
- 無料で近いもの
- Noto Serif JP
- 用途
- 本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字
- 使用フォント
- Plus Jakarta Sans
- 無料で近いもの
- Plus Jakarta Sans
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 34px / 400 | 1.00 | 22px / 400 |
| h3 | 20px / 400 | 1.40 | 16px / 400 |
| 本文（p） | 14px / 400 | 2.14 | 14px / 400 |
| ボタン | 14px / 400 | 1.00 | 11px / 400 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
お知らせ
お知らせ／お知らせ一覧型 - 04
- 05
健康コラム
記事・メディア／記事カードグリッド型 - 06
健康レシピのバナー
イベント・キャンペーン／特集バナー並び型 - 07
- 08
- 09
- 10
院長挨拶
人・代表／代表・院長あいさつ型 - 11
- 12
診療スケジュール（2回目）
アクセス／地図＋時間表型 - 13
- 14
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01診療時間表と電話・WEB予約・経路案内を1つのブロックにまとめ、ページの上と下の2か所に置く
- 02ファーストビューで、専門性・スタッフ・駐車場など「選ぶ理由」と「通いやすさ」を短い枠で見せる
- 03特徴は番号つきのカード、診療内容は分類ごとの一覧にして、症状から探せるようにする
- 04予約の入口は、初診用と季節の用事（予防接種など）で分けてヘッダーに置く
FAQよくある質問
ふなこし内科・循環器内科のサイトで使われているフォントは？
見出し・ナビ・コピーは Noto Serif JP、本文は Noto Sans JP、英字は Plus Jakarta Sans です。いずれも Google Fonts で無料で使えます。
診療時間のブロックを2回出すのはくどくありませんか？
このサイトはトップの上部とアクセスの後の2か所に同じブロックを置いています。上で見落とした人や、院長挨拶まで読んでから連絡しようとした人が、ページを戻らずに済みます。
どんな業種の参考になりますか？
内科などのクリニックのほか、歯科医院・整骨院・動物病院など、診療時間と予約方法が来院の決め手になる業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はふなこし内科・循環器内科および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの病院・クリニックの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のクリニックサイトを。
「ふなこし内科・循環器内科のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。