webcan analyze www.sugitani-seitai.com

CLINIC · 三重県 · PICKED 2026.10.28

すぎたに整体院病院・クリニックのホームページデザイン参考 — 深緑・生成り・3分割

出典：www.sugitani-seitai.com ↗確認日 2026.10.28

すぎたに整体院病院・クリニック · 三重県

サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

ファーストビューの左に住所と営業時間、下にLINEとWEB予約のボタンを置き、最初の画面で来院の情報をそろえる。

三重県菰野町の整体院のサイト。PCのファーストビューは3分割で、左にロゴと住所・営業時間・定休日、中央に靴を手に持つ写真と「「腰足専門」の整体院」のコピー、右にナビとLINE・Instagramのアイコンを置いている。画面の下にはLINEの友だち追加とWEB予約のボタンを固定している。院の外観写真つきの紹介、料金つきのメニュー、予約のボタン、営業時間の表とアクセス、フッターと続く短い構成。

01ファーストビューの左に、ロゴと住所・営業時間・定休日を日本語と英語で載せている
024つのメニューに、対象となる人の一言と所要時間・税込の料金を添えて並べている
03生成りの背景に深い緑の文字と枠線、ドット柄の帯で区切る配色にしている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー

－タップで電話できるSP・tel:リンク 0か所

✓SPの追従ボタンSP・画面下に固定

✓予約・問い合わせ導線WEB予約 / LINE予約

✓LINEで相談・予約LINE公式アカウント

✓営業・診療時間の明記トップページ内

予約の手段を2つに絞って固定する

画面下に「LINEで友だち追加」と「WEB予約」を1つのボタンにまとめて固定している。電話番号はフッターに置き、ボタンは2つに絞っているので、スマホで迷わず予約に進める。

メニューごとに料金と時間を出す

「足の専門コース」「足の専門検査」「子どもの足育相談室」「整体コース」のそれぞれに、所要時間と税込の料金を書いている。初回と2回目以降で料金が違うコースは両方を示しているので、通い始める前に費用の目安がわかる。

営業時間は曜日ごとの表で見せる

午前・午後の2つの時間帯と曜日を表にし、●と／で受付の有無を示している。住所の下には「駐車スペース5台分あり」と書き、車で来る人の確認にも答えている。

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

COLOR配色

#EFEAD6背景 · 生成り

#FBF8EBボタン・カード背景

#00341B文字・アクセス欄の背景 · ディープグリーン

#EF8271差し色（見出しラベル） · サーモン

#FFFFFF白

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

TYPOGRAPHYフォント

用途: 和文見出し・本文
使用フォント: Zen Kaku Gothic New
無料で近いもの: Zen Kaku Gothic New

用途: 和文（メニュー名）
使用フォント: Noto Sans JP
無料で近いもの: Noto Sans JP

用途: 英字（住所・Read more）
使用フォント: Source Serif 4
無料で近いもの: Source Serif 4

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h2	28px / 500	1.43	24px / 500
h3	19.9px / 700	0.00	19.9px / 700
本文（p）	12px / 500	1.67	12px / 500
ボタン	18px / 500	1.11	18px / 500

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

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

01
ファーストビュー
左にロゴと住所・営業時間・定休日（日本語と英語）、中央に靴を手に持つ写真と「身体の土台となる足を整える「腰足専門」の整体院」、右にナビとLINE・Instagramのアイコン。
ファーストビュー／左コピー・右写真の分割型
02
About us
アーチ形に切り抜いた院の外観写真と紹介文。下に「初めての方へ」の枠のボタン。
コンセプト／写真＋メッセージ型
03
Menu & Price
対象となる人の一言・メニュー名・所要時間・税込の料金を縦に並べ、右に施術の写真。下に「メニュー・料金一覧を見る」。
メニュー・サービス／アイコン／写真グリッド型
04
ご予約・お問い合わせ
「当日でもお気軽にご予約・お問い合わせください」の見出しと、LINEで予約・24時間受付のWEB予約の2つのボタン。
行動喚起／電話＋Web予約の2ボタン帯型
05
営業時間・アクセス
角丸の深緑の枠に、住所・駐車スペース・Google Mapsへのリンクと曜日ごとの営業時間の表。
アクセス／地図＋時間表型
06
フッター
ロゴ・住所・電話・営業時間、ナビ、LINE予約・WEB予約のボタン。
フッター／店舗情報＋ナビ型
07
追従ボタン
画面下に「LINEで友だち追加」と「WEB予約」を1つにまとめたボタン（PC・スマホとも）。
行動喚起／SP追従ボタンバー型

PARTSパーツ別に見る

すぎたに整体院のご予約・お問い合わせ（スマホ） — 04ご予約・お問い合わせ行動喚起／電話＋Web予約の2ボタン帯型

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

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

SVGをダウンロードする
Figmaのキャンバスにファイルをドラッグ＆ドロップする
セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

01ファーストビューに、住所・営業時間・定休日を文字で載せる
02予約の手段をLINEとWEB予約の2つに絞り、画面下に固定する
03メニューごとに対象の人・所要時間・税込の料金をそろえて書く
04営業時間は午前・午後と曜日の表にし、駐車場の台数も書く

FAQよくある質問

すぎたに整体院のサイトで使われているフォントは？

見出しと本文は Zen Kaku Gothic New、メニュー名の一部は Noto Sans JP、英字の住所や「Read more」は Source Serif 4 です。いずれも Google Fonts で無料で使えます。

ページ数が少ないトップでも十分ですか？

このサイトのトップは、紹介・メニューと料金・予約・営業時間とアクセスの4つに絞っています。来院を決めるのに必要な情報がそろっていれば、短い構成でも予約まで案内できます。詳しい説明は「初めての方へ」などの下層ページに分けています。

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

整体院・整骨院・鍼灸院のほか、LINEやWEBで予約を受ける小さな店舗（美容室・ネイルサロン・教室など）に応用できます。

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

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

ワイヤーDL

CLINIC · 富山県 · 2026.10.25

漢方内科けやき通り診療所

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

#手描きイラスト#くすみカラー#明朝体#完全予約制

病院・クリニックのすべてを見る5件

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら

すぎたに整体院病院・クリニックのホームページデザイン参考 — 深緑・生成り・3分割

EDITOR'S NOTE編集部の視点