WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 病院・クリニック
  4. ぶよう整形外科

webcan analyze buyo.jp

CLINIC · 和歌山県 · PICKED 2026.10.18

ぶよう整形外科病院・クリニックのホームページデザイン参考 — 整形外科・オレンジ・イラスト

ぶよう整形外科のトップページ（PC）
PC（1440px）
ぶよう整形外科のトップページ（スマホ）
スマホ（375px）
出典：buyo.jp ↗確認日 2026.10.18
ぶよう整形外科病院・クリニック · 和歌山県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

ファーストビューに「今日の日付」と診療時間表を重ね、開いているかどうかを最初の画面で答える。

和歌山市の整形外科のサイト。ファーストビューは医師が患者と向き合う写真に、吹き出しの縦書きコピー「お聞かせください。痛みのこと、不安なこと。」を重ね、右下に今日の日付と午前・午後の診療時間表を置いている。オレンジの背景で診療内容をイラスト付きのカード8枚で並べ、その下に部位と症状を選んで疾患を絞り込む「気になる症状から探す」を置いている。

  1. 01ファーストビュー右下に「今日は」の日付と診療時間表を置き、「担当医師を見る」タブで切り替えられる
  2. 02診療内容を、線画のイラストとオレンジの背景のカード8枚で見せている
  3. 03部位と症状のチェックボックスを選んで、考えられる疾患を絞り込む検索を置いている

CONVERSION集客の工夫

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

今日やっているかを最初の画面で答える

ファーストビューの右下に、今日の日付と曜日・午前午後の診療時間表を重ねている。休診日も同じ枠に書いてあり、来院を考えている人がスクロールせずに確かめられる。

症状の言葉から入れる検索

「部位を選ぶ」「症状を選ぶ」のチェックボックスで、考えられる疾患を絞り込める。病名を知らない人でも、自分の痛む場所としびれ・腫れなどの症状から関係するページを探せる。

Web予約と電話をヘッダーに並べる

ヘッダーの右上に、オレンジの「Web診察予約」ボタンと電話番号を並べている。特徴の欄でも「24時間Web予約」を1つ目に挙げ、予約フォームへのリンクを添えている。

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

COLOR配色

#FFFFFF背景
#FFF3E4カード背景 · クリーム
#FF9F1Cセクション背景 · オレンジ
#EA5504Web診察予約ボタン · バーントオレンジ
#00A24Eオンライン診療のバナー · グリーン
#EFF4F7診療時間表の背景 · ペールブルーグレー
#000000本文テキスト

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

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
Zen Kaku Gothic Antique
無料で近いもの
Zen Kaku Gothic Antique
用途
和文本文・ナビ
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
欧文（読み込みを確認）
使用フォント
Inter
無料で近いもの
Inter
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h116px / 400—16px / 400
h228.6px / 7001.1022.5px / 700
h321px / 7001.0018.8px / 700
本文（p）16.2px / 4001.6014.1px / 400
ボタン16px / 400—16px / 400

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

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

  1. 01

    ヘッダー

    ナビ7項目と、右上にWeb診察予約ボタンと電話番号。

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

    ファーストビュー

    医師と患者の写真に吹き出しの縦書きコピー。右下に今日の日付と診療時間表（担当医師タブ付き）。

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

    初めての方へ・オンライン診療

    初めての方への案内と、緑の「来院不要のオンライン診療について」。

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

    診療内容

    腰痛・肩こり、関節痛、骨折・脱臼・打撲・ねんざなど。下にリハビリテーションと白玉注射の案内。

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

    気になる症状から探す

    部位と症状のチェックボックスで疾患を絞り込む。

    記事・メディア／カテゴリナビ＋検索型
  7. 07

    ぶよう整形外科の特徴

    24時間Web予約・交通事故・労災対応・理学療法士によるサポート・隣接するカフェ・待ち時間・対話。

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

    待合室の写真

    待合室の写真を横幅いっぱいに。

    コンセプト／写真＋メッセージ型
  9. 09

    ごあいさつ

    医師2人の写真とあいさつ文。

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

    医師・スタッフ紹介・院内ツアー

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

    フッター

    Web診察予約・電話番号・診療時間表・住所とサイトマップ。

    フッター／店舗情報＋ナビ型
ぶよう整形外科の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
ぶよう整形外科のファーストビュー（PC）PC
ぶよう整形外科のファーストビュー（スマホ）SP

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

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ヘッダーにWeb予約と電話番号を並べ、どのページからでも予約できるようにする

FAQよくある質問

ぶよう整形外科のサイトで使われているフォントは？

見出しは Zen Kaku Gothic Antique、本文とナビは Noto Sans JP で、欧文に Inter も読み込んでいます。どれも Google Fonts で無料で使えます。

「症状から探す」は小さなクリニックにも必要ですか？

病名を知らずに検索する人は多いので、部位や症状の言葉から関係するページへ案内できると親切です。絞り込み機能まで作らなくても、部位ごとのリンク一覧から始められます。症状の説明では、医療広告ガイドラインに沿って効果を断定する表現は避けます。

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

整形外科・内科・皮膚科などのクリニックのほか、整骨院や動物病院など、診療時間と予約方法が来院の決め手になる業種に応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら