ホーム
完全個室のパーソナルジム。食事のアドバイスつき。
<< デモ一覧に戻る
パーソナルジムのデモ
- このページでは、Frames CMS の製品版で実際に作ったパーソナルジムのサイトをご紹介します。完全個室で、食事のアドバイスもするパーソナルジムを想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本の青のメインカラーを墨色に、アクセントカラーを赤に変え、メイン画像をスライドショーから静止画1枚にしています。写真の右上の縦書きの2行は、ジムの言葉に差し替えました。
まずは全体像から
このデモの構成
5つのページで構成しています。トップで約束・1回の流れ・変化の例・コース・トレーナーまでを順に見せ、体験の申し込みにつなげる構成です。
01
02
コース
コースと料金。
03
トレーナー
トレーナー紹介。
04
お知らせ
SAMPLE PERSONAL GYM からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「lp4（ズームスライド＋曲線シェイプ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
写真の上に曲線の白いシェイプが重なり、写真の右上に縦書きの短い文章（2行）が白い帯で入るフレームです。キャッチの中には、地図などの小さな画像の枠が1つあります。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、メインカラーを青から墨色に、アクセントカラーを赤に、薄い色（差し色）をごく淡いグレーにしています。赤はボタンや「おすすめ」の印など小さな面だけに出るので、強い色でもうるさくなりません。「トップの大きな画像 → メイン画像のタイプ」は「静止画」にして、トレーナーの写真1枚にしました。「デザイン → このフレーム専用の素材」では、縦書きの2行を「2か月で、／体はかわる。」に書き換え、キャッチの中の地図の画像は「この素材を使わない」にしています。
1回の流れは「写真が止まるブロック」
スクロールすると左の写真が画面に止まり、次の写真が上に重なっていくパーツです。「体調を聞く」「50分のトレーニング」「ストレッチと宿題」の3つを順に見せて、通ったときの自分を想像してもらえるようにしました。
変化の例は「吹き出しのビフォーアフター」
入会前の悩みと、2か月後の変化を、吹き出しで会話のように並べています。1つの吹き出しに2〜3文は書くと、左右の吹き出しがぽつんと離れず、読みごたえが出ます。写真を使わないので、お客さまの顔を出さずに変化を伝えられます。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは墨色の背景なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「lp4」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
クリニック
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 「続けられた」を、いちばんの結果に。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 3つの約束 | 写真＋アイコンのカード | |
| 1回のトレーニング | 写真が止まるブロック（順に重なる） | |
| 2か月の変化 | ビフォーアフター（吹き出し） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| コース | 料金表（プラン比較） | |
| トレーナー | スタッフ紹介 | |
| 体験トレーニングへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
コース
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| コース | 料金表（プラン比較） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 体験の流れ | ステップ案内（横4列・アイコン） | |
| よくあるご質問 | FAQ（クリックで開閉） |
トレーナー
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| トレーナー | スタッフ紹介 | |
| ジムのこと | コラージュ（写真2枚＋テキスト） |
全14種類のパーツのうち、11種類は製品版でのみ使えるものです。写真が止まるブロックや吹き出しのビフォーアフター、コースのプラン比較表は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
パーソナルジムのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 料金は、全部載せたほうがいいですか
- 載せたほうが、体験の申し込みにつながります。このデモでは3つのコースをプラン比較表にし、いちばん選ばれる「2か月集中」におすすめの印を付けました。入会金も、表の上に書いています。
- ビフォーアフターの写真は載せたほうがいいですか
- 写真は伝わりやすい反面、本人の許可と、誇張しない書き方が欠かせません。このデモのように、文章だけの吹き出しで「何が変わったか」を伝える方法もあります。
- 体験の申し込みは、どこに置けばいいですか
- メニューのボタンと、トップの最後の両方に置いています。このデモでは、背景写真のCTAで「体験トレーニング 0円」と大きく見せ、コースのページには体験の流れも載せました。
この構成で作れるサイト
パーソナルジム以外にも
このデモはパーソナルジムを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
ピラティススタジオ／整体院／ヨガ教室／食事指導・ダイエット教室／ゴルフレッスン／オンライン講座 など、「マンツーマンで、結果を出すサービス」であれば、そのまま当てはまります。
写真が止まるブロックは、画面幅600px以上で動きます。スマホでは写真を出さず、文章だけが縦に並びます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る