出典：theperformancelab.ca ↗ 確認日 2026.10.26
Editor's note
編集部の視点
「相談 → 測定 → 個別のプログラム → 経過の記録」の4段階を見せ、ヘッダーの「相談を予約」をオンライン予約につなぐトロントのスポーツ科学センター。
トロントのブリッジランド・アベニューにあるスポーツ科学センター The Performance Lab のサイト。ファーストビューは走る人の脚を流し撮りした写真に、画面の左下いっぱいの「UNLOCK NEXT LEVEL PERFORMANCE」と、プロ選手にもこれから始める人にも向けた一文、オレンジの「UNLOCK YOUR POTENTIAL」ボタン。ヘッダー右には白い「BOOK A CONSULTATION（相談を予約）」が常に表示され、オンライン予約（Jane）のページにつながる。サービスは測定・トレーニング・治療・長寿の4つ。チームの経歴、プロ競技での年数やかかわったリーグ・五輪チームの数、「相談 → 測定 → 個別のプログラム → 経過の記録」の4段階、オリンピック選手の声、メール登録と続き、フッターに住所・電話・メールがある。
- 01 ヘッダーの「相談を予約」を常に表示し、オンライン予約のページへそのままつなぐ
- 02 最初の相談から経過の記録までを番号つきの4段階で見せ、「最初は話を聞くだけ」と書いて来店のハードルを下げる
- 03 プロ競技での年数、かかわったリーグと五輪チームの名前を数字と一緒に並べ、実績を具体的に伝える
Conversion
集客の工夫
- 予約の導線 （あり） ヘッダーに「BOOK A CONSULTATION」を常に表示
- オンライン予約 （あり） 予約ボタンから予約システム（Jane）へ
- サービスの整理 （あり） 測定・トレーニング・治療・長寿の4つ
- 進め方の説明 （あり） 相談・測定・プログラム・経過の記録の4段階
- 実績の見せ方 （あり） プロ競技22年・10のリーグ・8つの五輪チーム
- 利用者の声 （あり） オリンピック選手のコメント
- 連絡先と所在地 （あり） フッターに住所・電話・メール
- 料金の掲載 （なし） トップにはなし
予約ボタンを、いつも同じ場所に
ヘッダーの右端には白い 「BOOK A CONSULTATION（相談を予約）」が常に表示され、押すとそのままオンライン予約のページに移ります。進め方の見出しの横やフッターにも同じボタンがあり、どこまで読んでも予約の入口から離れません。
「行ったら何をするのか」を4段階で見せる
中ほどの「OUR PROCESS」では、相談 → 測定 → 個別のプログラム → 経過の記録の4段階を番号つきで説明しています。最初の相談には「約束も押し売りもない、正直な話し合い」と書かれ、初めての人が予約をためらう理由を先に消しています。
実績を、数字と名前で裏づける
「ABOUT US IN NUMBERS」には、プロ競技での22年、かかわった10のリーグ（NHL・MLB・NBA など）、8つの五輪チームの名前が並びます。さらにオリンピック選手のコメントを肩書きつきで載せています。「すごい」と言う代わりに、数字と相手の名前で実績を見せる作りです。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #171717 背景（暗い面）・本文
- #F2F2F2 明るい面・予約ボタン
- #FF350D 強調のボタン
- #FFFFFF 背景（明るい面）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文 | KH Teka | Inter |
| ナビ・ボタン・ラベル | Aeonik Mono | Space Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | — | — | 52px / 500 |
| h2 | 60px / 500 | 1.00 | 36px / 500 |
| 本文（p） | 24px / 500 | 1.00 | 12px / 400 |
| ボタン | 11px / 400 | 1.26 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、中央にホーム・チーム紹介・ブログ・連絡先・サービス、右に白い塗りの「BOOK A CONSULTATION」。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 走る脚の流し撮りに、左下いっぱいの大きな見出し。右下に説明の一文とオレンジのボタン。 ファーストビュー／全面写真＋コピー型
- 03 紹介 プロを目指す人、体力をつけたい人、けがから戻る人に向けて、測定結果を分かる言葉にして伝えるという紹介。 コンセプト／写真＋メッセージ型
- 04 4つのサービス 測定・トレーニング・治療・長寿を番号つきで、それぞれ一文と詳細へのリンク。 一覧／カード並び型
- 05 チーム 五輪チーム・テニスの四大大会・NHL・MLB で働いてきた経歴と「チームを見る」。 コンセプト／写真＋メッセージ型
- 06 数字で見る実績 プロ競技での年数、かかわったリーグ、五輪チーム、大学1部への進学者の数を、リーグ名やチーム名と一緒に。 会社情報／スペック表型
- 07 進め方 相談・測定・個別のプログラム・経過の記録の4段階。見出しの横に「BOOK A CONSULTATION」。 進め方／番号つきステップ型
- 08 お知らせ マラソンやテニスのイベントの記事。 お知らせ／ニュース一覧型
- 09 利用者の声 オリンピック選手のコメントと肩書き。 推薦／利用者の声型
- 10 メール登録 トレーニングの知見や施設の更新を受け取る登録欄とオレンジの「SIGN UP」。 行動喚起／メール登録型
- 11 フッター サービス・会社のリンク、メール・電話、SNS、住所、「BOOK A CONSULTATION」。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 予約ボタンはヘッダーに常に置き、予約システムのページへ直接つなぐ
- 02 初回から継続までの流れを番号つきで書き、「最初は相談だけ」と明記する
- 03 実績は「何年」「何団体」と数字にし、相手の名前を添えて裏づける
- 04 サービスが複数あるときは4つ程度にまとめ、それぞれ一文で違いを書く
FAQ
よくある質問
The Performance Lab のサイトで使われているフォントは？
見出しと本文は KH Teka、ナビやボタンなどの小さな文字は等幅の Aeonik Mono です。どちらも有料書体なので、無料で近づけるなら Inter と Space Mono の組み合わせが候補です。
ジムやスタジオのサイトに「進め方」を載せる意味は？
初めての人は「行ったら何をされるのか」が分からず、予約をためらいがちです。The Performance Lab は相談・測定・プログラム・経過の記録の4段階を見せ、最初の相談は「約束も押し売りもない」と書いています。流れが見えると、予約の一歩が軽くなります。
どんな業種の参考になりますか？
パーソナルジム・整体・リハビリの施設・スポーツクラブなど、初回の相談や体験から始まるサービスに向きます。実績を数字と相手の名前で見せる方法は、専門サービス全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はThe Performance Labおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
