出典：universalpractice.com.au ↗ 確認日 2026.10.25
Editor's note
編集部の視点
2院の電話番号をナビのすぐ下に並べ、「クラスの予約」と「理学療法の予約」を別のボタンに分けたメルボルンの理学療法・ピラティスのスタジオ。
2016年にメルボルンで始まった、理学療法・ピラティス・筋力トレーニング・ヨガのスタジオのサイト。すべてのクラスと施術を理学療法士が受け持つと説明している。ナビのすぐ下にフィッツロイとマルバーン・ロードの2院の電話番号。ファーストビューは「In-Studio Physiotherapy Practice（来院での理学療法）」と「Virtual Physiotherapy Practice（オンラインの理学療法）」の白と黒の四角を左右に並べただけ。その下に「Book a class（クラスを予約）」「Book a physiotherapy appointment（理学療法を予約）」の2つのボタン、スタジオの紹介、考え方、4つのサービスが続く。フッターには民間医療保険の還付（HICAPS）、キャンセル規定、FAQ。初めて開くと、無料のグループクラス1回分を受け取る登録フォームが出る。
- 01 2院それぞれの電話番号をナビのすぐ下に並べ、どちらに電話すればよいか迷わせない
- 02 「クラスの予約」と「理学療法の予約」を別のボタンにし、目的ごとに入口を分ける
- 03 保険の還付やキャンセル規定をフッターから読めるようにし、お金と予約の不安に先に答える
Conversion
集客の工夫
- 電話番号の掲載 （あり） ナビの下に2院分（tel:リンク）
- 予約の入口 （あり） 「Book a class」と「Book a physiotherapy appointment」の2つ
- 来院とオンラインの選択 （あり） ファーストビューで In-Studio / Virtual を選ぶ
- 保険の還付の案内 （あり） フッターに HICAPS / Private Health Rebate
- キャンセル規定 （あり） フッターに Cancellation Policy
- FAQ （あり） 予約の方法・けががある場合・持ち物・高齢の家族の参加など
- 初回の特典 （あり） 無料のグループクラス1回分の登録フォーム（ポップアップ）
- 住所の掲載 （なし） トップにはなし（Locations ページに2院の住所と駐車・入口の案内）
2院の電話番号を、ナビのすぐ下に
ヘッダーにはサービス名のナビと並んで、フィッツロイとマルバーン・ロードの2院の電話番号が院の名前つきで置かれています。どちらもタップすれば電話がかかります。院が複数あると「どこに電話すればいいのか」で迷いがちですが、名前と番号を並べるだけでその迷いがなくなります。
予約の入口を、目的ごとに分ける
ファーストビューは「来院での理学療法」と「オンラインの理学療法」の2つの四角だけです。その下には 「クラスを予約」と「理学療法を予約」の2つのボタンがあります。グループのクラスに出たい人と、けがを診てほしい人では行き先が違うため、最初から入口を分けています。
料金と規定の不安に、フッターで答える
フッターには 民間医療保険の還付（HICAPS）、キャンセル規定、FAQ が並びます。還付のページでは、すべての施術とサービスが還付の対象になることや、けががある人は先に30分の個別の理学療法を予約する必要があることを説明しています。FAQ では予約の方法、持ち物、高齢の家族が参加できるかにも答えており、来る前の疑問を先回りして解いています。
チェック項目は 2026.10.25 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景・来院の四角
- #000000 文字・オンラインの四角
- #DCEFF1 「Learn more」ボタン（淡い水色）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・見出し・本文・ボタン（すべて） | Moderat | DM Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 14px / 400 | 1.40 | 13px / 400 |
| h2 | 14px / 400 | 1.40 | 13px / 400 |
| 本文（p） | 18px / 400 | 1.22 | 18px / 400 |
実測値（PC 1440px・SP 375px、2026.10.25 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 理学療法・ピラティス・筋力・ヨガ・時間割・理学療法士・講座・お知らせ・連絡先と、その下に2院の電話番号。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 「来院での理学療法」と「オンラインの理学療法」の白と黒の四角を左右に。両端に縦書きのロゴ。 ファーストビュー／文字＋画像の左右分割型
- 03 予約 「メルボルンの理学療法・ピラティス・筋力・ヨガ」の見出しと、クラスと理学療法の2つの予約ボタン。 行動喚起／ボタン帯型
- 04 スタジオの紹介 2016年にメルボルンで始まったこと、クラスと施術を理学療法士が受け持つこと。 メッセージ／大きな一文型
- 05 考え方 体・心・精神のつながりを見るという考え方。 コンセプト／写真＋メッセージ型
- 06 4つのサービス 理学療法・ピラティス・筋力トレーニング・ヨガと瞑想を、説明と「Learn more」で。 機能・強み／左右交互型
- 07 フッター 保険の還付・キャンセル規定・FAQ・採用・取材の窓口・SNS・所在地。 フッター／ナビ＋会社情報型
- 08 初回のポップアップ 無料のグループクラス1回分を受け取るための登録フォーム（名・姓・メール・電話）。 行動喚起／メール登録型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 院や店舗が複数あるときは、それぞれの電話番号を名前つきでヘッダーに並べる
- 02 予約の種類が違うもの（クラスと個別の施術など）は、ボタンを分けて目的ごとに入口を作る
- 03 保険の扱い・キャンセル規定・持ち物など、来る前に聞かれることをフッターと FAQ にまとめる
- 04 初めての人には、無料の体験など一度来てもらうための入口を用意する
FAQ
よくある質問
Universal Practice のサイトで使われているフォントは？
ナビから本文、ボタンまで Moderat 1書体で組んでいます。有料書体なので、無料で近づけるなら DM Sans などの素直なゴシック体が候補です。
整骨院や整体院のサイトでも、予約ボタンを分けたほうがよいですか？
施術の予約とグループレッスンの予約のように、受け付ける窓口や所要時間が違うものはボタンを分けると迷いません。Universal Practice は「クラスを予約」と「理学療法を予約」を並べ、どちらに進めばよいかを一目で分かるようにしています。
どんな業種の参考になりますか？
整骨院・整体院・リハビリ施設・ピラティススタジオ・歯科医院など、複数の院を持つ予約制の施設に向きます。電話番号の並べ方と、保険や規定の案内の置き方はそのまま使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はUniversal Practiceおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
