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

webcan analyze www.keyaki-kampo.jp

CLINIC · 富山県 · PICKED 2026.10.25

漢方内科 けやき通り診療所病院・クリニックのホームページデザイン参考 — 手描きイラスト・くすみカラー・明朝体

漢方内科 けやき通り診療所のトップページ（PC）
PC（1440px）
漢方内科 けやき通り診療所のトップページ（スマホ）
スマホ（375px）
出典：www.keyaki-kampo.jp ↗確認日 2026.10.24
漢方内科 けやき通り診療所病院・クリニック · 富山県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

写真を使わず、手描きの絵とイラストだけで漢方の診療所の入口をつくっている。

富山市の漢方内科の診療所のサイト。ファーストビューは、器の木の実をさじですくう人物と草花を描いた、くすんだ青緑の絵を横幅いっぱいに置き、その下にロゴとナビを並べている。続く明朝体の文章で頭痛・生理のつらさ・便秘・更年期症状などの相談を呼びかけ、6つのページへの入口をイラストつきで左右交互に並べている。

  1. 01ファーストビューに写真ではなく手描きの絵を使い、ロゴもイラストの印章のような形にしている
  2. 02PCでは右端に、縦書きの「ご予約」と電話番号のタブを置いている
  3. 036つのページへの入口（当院について・漢方のある暮らし・診療について・漢方コラム・よくあるご質問・ご予約/お問い合せ）に、それぞれイラストと短い説明を添えている

CONVERSION集客の工夫

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

相談できる症状を言葉にする

最初の文章で「頭が痛い、生理がつらい、便秘がち、更年期症状に苦しんでいる…」と、相談できる不調を具体的に挙げている。自分の悩みで受診してよいのか迷っている人が、相談先として考えやすくなる。

予約の方法を先に伝える

入口の最後に「当院は完全予約制です」と書き、予約ページへ案内している。PCでは右端にご予約と電話番号のタブがあり、どこからでも予約に進める。

診療時間を表で見せる

フッターに住所・電話番号・休診日（日曜・祝日）と、曜日ごとの午前・午後の診療時間を○と×の表でまとめている。行ける日を一目で確かめられる。

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

COLOR配色

#F5F5F0背景 · オフホワイト
#FFFFFFタブ背景
#333333本文テキスト

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

TYPOGRAPHYフォント

用途
和文見出し・ナビ
使用フォント
游明朝
無料で近いもの
Shippori Mincho
用途
和文本文
使用フォント
游ゴシック Medium
無料で近いもの
Zen Kaku Gothic New
用途
英字（住所・ラベル）
使用フォント
Frank Ruhl Libre
無料で近いもの
Frank Ruhl Libre
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h216px / 6001.6318px / 600
本文（p）15px / 5001.7314px / 500

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

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

  1. 01

    ファーストビュー

    器の木の実をさじですくう人物と草花を描いた手描きの絵。PCは右端に縦書きの「ご予約」と電話番号のタブ。

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

    ヘッダー

    絵の下の左にロゴ、右にナビとInstagramのアイコン。スマホは三本線のメニュー。

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

    メッセージ

    中央ぞろえの明朝体で、相談できる不調と診療所の思いを書く。

    コンセプト／写真＋メッセージ型
  4. 04

    ページへの入口

    イラスト・ページ名・短い説明を左右交互に並べる。

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

    フッター

    ロゴ、住所・電話番号・休診日、曜日ごとの診療時間の表。

    フッター／店舗情報＋ナビ型
漢方内科 けやき通り診療所の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

01ファーストビューファーストビュー／全面写真＋コピー型
漢方内科 けやき通り診療所のファーストビュー（PC）PC
漢方内科 けやき通り診療所のファーストビュー（スマホ）SP
05フッターフッター／店舗情報＋ナビ型
漢方内科 けやき通り診療所のフッター（PC）PC
漢方内科 けやき通り診療所のフッター（スマホ）SP

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

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診療時間を曜日ごとの表で見せる

FAQよくある質問

漢方内科 けやき通り診療所のサイトで使われているフォントは？

見出しとナビは游明朝、本文は游ゴシック Medium、英字は Frank Ruhl Libre です。Google Fonts で近づけるなら、和文に Shippori Mincho と Zen Kaku Gothic New が使えます。

医療機関のサイトで写真を使わなくてもよいのですか？

このサイトは、ファーストビューもページへの入口も手描きの絵とイラストでまとめ、院内の様子やスタッフの紹介は「当院について」のページに分けています。トップでは雰囲気を伝え、詳しい情報は各ページで見せる分け方です。

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

漢方内科のほか、心療内科・婦人科・鍼灸院など、相談のしやすさが受診のきっかけになる医療機関に応用できます。

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

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

病院・クリニックのすべてを見る5件
webcan design --sitemap www.keyaki-kampo.jp

漢方内科 けやき通り診療所のサイトマップ

  • 7ページ
  • トップページ/
  • 当院について/about/
  • 漢方のある暮らし/concept/
  • 診療について/examination/
  • コラム/column/
  • よくあるご質問/qa/
  • ご予約/contact/

外部リンクInstagram

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

FROM REFERENCE TO YOUR SITE

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

「漢方内科 けやき通り診療所のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら