出典：activitephysique.ca ↗ 確認日 2026.10.25
Editor's note
編集部の視点
「700以上のレッスン」と申し込みボタンを最初に置き、8つの種目・講師・利用者の声を順に見せるモントリオールのオンライン・フィットネス。
モントリオールの会社が運営する、ピラティス・フィットネス・ヨガなどのオンラインのレッスン配信サービスのサイト（フランス語）。ファーストビューは背中の写真に「Un espace pour se construire（自分を築くための場所）」と「体に向き合い、心を軽くする700以上のレッスン」、ボタンは「M'abonner（申し込む）」の1つだけ。続いてサービスを一文で説明する大きな文章、8つの種目、サービスの5つの特長と端末の画面、5人の講師、メール登録、6件の利用者の声が並ぶ。上部の帯では更年期に特化したプログラム「État de force」を案内し、ヘッダーにはログインと申し込み、グッズの店とカートがある。
- 01 「700以上のレッスン」という数と申し込みボタン1つだけで、ファーストビューの行き先を絞る
- 02 8つの種目を番号つきの写真で並べ、自分のやりたいものがあるかを最初に確かめさせる
- 03 講師5人の写真と名前、利用者の声6件を続けて置き、顔の見える安心感と第三者の評価を重ねる
Conversion
集客の工夫
- 申し込みボタン （あり） ファーストビューに「M'abonner」
- ログインの入口 （あり） ヘッダーに「Connexion plateforme」
- 種目の一覧 （あり） ピラティス・フィットネス・ヨガ・バーなど8種目
- 講師の紹介 （あり） 5人の写真と名前
- 利用者の声 （あり） 名前つきで6件（スライド）
- 特別なプログラム （あり） 上部の帯で更年期向けの「État de force」
- メール登録 （あり） ページの中ほどとポップアップ
- 電話番号の掲載 （なし） トップにはなし（連絡先ページに電話番号）
数字ひとつと、ボタンひとつ
ファーストビューは背中の写真に「自分を築くための場所」と 「体に向き合い、心を軽くする700以上のレッスン」 の一文、そして「M'abonner（申し込む）」のボタンだけです。レッスンの量を数字で示し、押す場所をひとつに絞っています。ログインやグッズの店は、ヘッダーの右側に分けて置かれています。
種目を写真で並べ、選ぶ前に確かめさせる
サービスの説明のすぐ下に、ピラティス・フィットネス・ヨガ・バー・瞑想・ストレッチ・呼吸法など8つの種目が番号つきの写真で並びます。自分のやりたいものがあるかどうかを、申し込む前に確かめられます。続く特長の欄では、どこでも受けられること、段階的なプログラムがあることなどを5行にまとめ、端末の画面を添えています。
講師の顔と、利用者の声を続けて置く
後半は 講師5人の写真と名前、そして 名前つきの利用者の声6件です。オンラインのレッスンは「誰に習うのか」が見えにくいため、先に講師を見せ、そのあとで続けている人の声を重ねています。上部の帯では更年期に特化したプログラム「État de force」を案内しており、悩みがはっきりした人への入口も別に用意しています。
チェック項目は 2026.10.25 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #E7E7E0 背景（生成り）・申し込みボタン
- #1E1E1E 見出し・本文・フッターの背景
- #FFFFFF ヘッダー・一部の面の背景
- #62483B ポップアップの登録ボタン（茶色）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Helvetica | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 86px / 400 | 0.97 | 34px / 400 |
| h2 | 14px / 400 | 1.30 | 15px / 400 |
| h3 | 28px / 400 | 1.07 | 17px / 400 |
| 本文（p） | 28px / 400 | 1.07 | 17px / 400 |
| ボタン | 14px / 400 | 1.30 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.25 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー グッズの店・種目・講師・更年期のプログラムと、ログイン・申し込み・カート。上部にプログラムの案内の帯。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 背中の写真に、サービスの一言と「700以上のレッスン」、申し込みボタン1つ。 ファーストビュー／全面写真＋コピー型
- 03 サービスの説明 運動と心身のためのプラットフォームであることを、大きな文章で一文に。 メッセージ／大きな一文型
- 04 8つの種目 ピラティス・フィットネス・ヨガ・バー・フリュイディテ・瞑想・ストレッチ・呼吸法を番号つきの写真で。 入口／カテゴリ別スライド型
- 05 サービスの特長 目的に合わせたレッスン、どこでも受けられる、段階的なプログラムなど5つの特長と、端末の画面。 機能・強み／左右交互型
- 06 講師 動きの専門家である講師5人の写真と名前。 一覧／カード並び型
- 07 メール登録 お知らせとオファーを先に受け取れるメール登録。 行動喚起／メール登録型
- 08 利用者の声 名前つきの6件をスライドで。 推薦／利用者の声型
- 09 フッター 会社案内・FAQ・規約・返品と配送の方針・SNS・住所とメール。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 定額制のサービスは、内容の量（レッスン数など）を数字で示し、ボタンは申し込み1つに絞る
- 02 種目やコースは写真つきで一覧にし、自分のやりたいことがあるかを先に確かめられるようにする
- 03 教える人の顔と名前を見せ、オンラインでも「誰に習うか」が分かるようにする
- 04 利用者の声は名前つきで複数並べ、続けている人がいることを伝える
FAQ
よくある質問
Activité Physique のサイトで使われているフォントは？
見出しから本文、ボタンまで Helvetica 1書体です。Mac などに入っている書体なので、Windows を含めてそろえたいなら無料の Inter が候補です。
スポーツジムやヨガ教室のサイトでも参考になりますか？
なります。Activité Physique はオンライン配信ですが、種目の一覧、講師の紹介、利用者の声という並びは、教室やジムの体験申し込みのページにもそのまま使えます。
ファーストビューのボタンは1つでよいのですか？
行き先が申し込みひとつのサービスなら、1つに絞ったほうが迷いません。Activité Physique はファーストビューのボタンを「申し込む」だけにし、ログインやショップはヘッダーに分けています。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はActivité Physiqueおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
