WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 病院・クリニック
  4. あまの皮ふ科

webcan analyze amano-clinic.jp

CLINIC · 熊本県 · PICKED 2026.10.17

あまの皮ふ科病院・クリニックのホームページデザイン参考 — 皮膚科・明朝体・やわらか

あまの皮ふ科のトップページ（PC）
PC（1440px）
あまの皮ふ科のトップページ（スマホ）
スマホ（375px）
出典：amano-clinic.jp ↗確認日 2026.10.17
あまの皮ふ科病院・クリニック · 熊本県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

施術中の写真と院内写真の並びで、「皮膚科と美容の両方を任せられる」ことを一目で伝える。

熊本市の皮膚科・美容皮膚科のサイト。ファーストビューは施術中のスタッフの写真に明朝体のコピーと短い説明文を重ね、右側に院内の写真を縦に並べている。新着情報、医院の考え方、診療案内（皮膚科診療・美容皮膚科）、スタッフ・院内・アクセスの紹介と続き、最後に電話とWeb予約を左右に並べた案内と、診療時間の表を置いている。

  1. 01ファーストビューは施術中の写真と、右側に縦に並べた院内の写真4枚の組み合わせ
  2. 02診療案内を「皮膚科診療」と「美容皮膚科」の2つに分け、ピンクの背景で目立たせている
  3. 03スタッフ紹介・院内/設備案内・アクセスを、写真つきのカード3つで並べている

CONVERSION集客の工夫

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

スマホでは問い合わせとWeb予約を下に固定

スマホでは画面下に「お問い合わせ」「Web予約」「MENU」のボタンを固定している。診療内容を読んでいる途中でも、すぐに予約へ進める。

保険診療と美容を入口で分ける

診療案内を「皮膚科診療」と「美容皮膚科」の2つのカードに分けている。保険診療で来る人と、美容の相談で来る人が、それぞれの入口から迷わず詳しいページへ進める。

電話とWeb予約を並べ、その下に診療時間

ページの終わりで、電話番号の「お問い合わせ」とボタンの「Web予約」を左右に並べ、フッターに曜日ごとの診療時間の表を置いている。予約の方法を選び、空いている時間を確かめるまでが一か所で済む。

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

COLOR配色

#F6F5F3背景 · ウォームグレー
#FFFAF3カード背景 · クリーム
#E73656ブランドカラー・Web予約 · ピンクレッド
#333333本文テキスト
#777777サブテキスト
#E1E1E1区切り線

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

TYPOGRAPHYフォント

用途
和文（本文・ナビ・見出し）
使用フォント
FOT-ニューセザンヌ Pro（Fontworks）
無料で近いもの
Zen Kaku Gothic New
用途
英字
使用フォント
Marcellus
無料で近いもの
Marcellus
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h216px / 6001.2012.6px / 600
h326px / 6001.2021.3px / 600
本文（p）18px / 4001.5016.4px / 400
ボタン15px / 6001.2013.4px / 600

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

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

  1. 01

    ヘッダー

    上部にナビ、右上に白い枠のロゴ。

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

    ファーストビュー

    施術中の写真に明朝体のコピーと説明文。右側に院内の写真を縦に4枚。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    新着情報

    お知らせをカードで横に並べる。

    お知らせ／お知らせ一覧型
  4. 04

    医院の考え方

    写真を散らしたパネルに、医院の考え方の一文。

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

    診療案内

    「皮膚科診療」と「美容皮膚科」の2つのカード。

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

    スタッフ・院内・アクセス

    写真つきのカードで3つ。

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

    お問い合わせ・Web予約

    電話番号と、Web予約のボタンを左右に並べる。

    行動喚起／電話＋Web予約の2ボタン帯型
  8. 08

    フッター（診療時間）

    住所・Instagram・LINEと、曜日ごとの診療時間の表。

    アクセス／地図＋時間表型
  9. 09

    スマホ追従ボタン

    お問い合わせ・Web予約・MENU。

    行動喚起／SP追従ボタンバー型
あまの皮ふ科の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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よくある質問

あまの皮ふ科のサイトで使われているフォントは？

和文は Fontworks の FOT-ニューセザンヌ Pro、英字には Marcellus を使っています。無料で近づけるなら、和文に Zen Kaku Gothic New、英字に Marcellus が使えます。

美容皮膚科を併設しているクリニックで、気をつける点は？

保険診療の患者さんと美容の相談の方では、知りたいことが違います。入口を分けて、それぞれのページで料金や流れを説明すると、どちらの人も迷いません。医療広告ガイドラインに沿って、効果を断定する表現は避けます。

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

皮膚科・眼科・歯科などのクリニックのほか、保険と自費のメニューがある整骨院やエステサロンなどに応用できます。

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら