ホーム
〇〇駅前の24時間ジム。月額7,700円、パーソナルトレーニングも。
<< デモ一覧に戻る
フィットネスジムのデモ
- このページでは、Frames CMS の製品版で実際に作ったフィットネスジムのサイトをご紹介します。駅前の24時間営業のジムで、パーソナルトレーニングもしているお店を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、黄色い背景のポップなフレームを、白い背景・黒のメインカラー・ネオンの黄緑の飾りに変えた「こんな使い方もできる」の見本です。形はそのままで、すっきりかっこいい印象になります。
まずは全体像から
このデモの構成
5つのページで構成しています。「料金」と「施設」の2つを、それぞれ1ページにしています。
01
02
料金
月会費と、パーソナルトレーニング。
03
施設
マシン・フリーウェイト・スタジオ。
04
お知らせ
SAMPLE FIT 24 からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「popcircle1（ぷにっと丸い写真・波のブロック）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
トップは左にロゴ、右に形のゆっくり変わる丸い写真（後ろに星柄と水玉の飾り）が並ぶフレームです。背景色のあるブロックは上下が波の形になり、メニューは左上のぷにっとした形のボタンで開きます。
フレームの見本から変えたところ
「デザイン → テーマカラー」で、背景色を黄色から白に、メインカラーを赤から黒に、アクセントカラーをオレンジからネオンの黄緑にしています。見出し・ボタン・メニューのボタン・フッターが黒になり、写真の後ろの星柄だけが黄緑で光ります。かわいいフレームでも、色を変えるだけでスポーツらしい印象になります。メイン画像には文字を入れず、ボタンだけにしました。
エリア紹介は「写真が止まるブロック」
マシン・有酸素・ストレッチの3つのエリアを、スクロールすると左の写真が止まり、次の写真が上に重なっていくパーツで見せています。ひとつずつに、短い説明と2行の箇条書きを添えました。
料金・会員の声・入会の流れまで、トップで完結
料金はプラン比較表で「フルタイム」に「おすすめ」の印を付け、24時間営業のことは横幅いっぱいの写真に文字を重ねるオーバーレイで。会員の声、横4列のアイコンのステップの入会の流れ、背景写真の見学への誘導までを並べ、トップだけで入会を決められる流れにしています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーとトップは白い背景なので黒いロゴを使い、フッターだけは黒い背景になるので、「フッター用ロゴ（任意）」に白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「popcircle1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
こども写真館
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 続けられる場所が、いちばんのジム。 | 基本セット（見出し＋本文＋画像） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 3つの特長 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| エリア紹介 | 写真が止まるブロック（順に重なる） | |
| 料金 | 料金表（プラン比較） | |
| 24時間営業のご案内 | オーバーレイ（写真＋テキスト＋ボタン） | |
| 会員の声 | お客様の声（星評価） | |
| 画像（1枚） | 画像（1枚） | |
| 入会の流れ | ステップ案内（横4列・アイコン） | |
| 見学・体験への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
料金／施設
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 料金 | 料金表（プラン比較） | |
| トレーナー | スタッフ紹介 | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| 施設 | ギャラリー（複数画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 設備 | 表（項目と内容） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。写真が止まるブロックやプラン比較表、オーバーレイ（写真＋テキスト＋ボタン）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
ジムのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 料金プランが多いときは、どう見せればいいですか
- 3つに絞ってプラン比較表にするのがおすすめです。このデモでは、いちばん選ばれる「フルタイム」に「おすすめ」の印を付け、入会金が0円なこともリード文に書きました。
- トレーナーの紹介は、必要ですか
- パーソナルトレーニングがあるなら、あったほうが申し込みにつながります。このデモでは、料金のページに、得意なことと担当を一言ずつ添えて載せました。
- スタッフがいない時間の安全は、書いたほうがいいですか
- 書いたほうが安心してもらえます。このデモでは、会員カードで開く入口・防犯カメラ・非常ボタンのことを、トップの大きな写真のブロックに書きました。
この構成で作れるサイト
ジム以外にも
このデモはフィットネスジムを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
パーソナルジム／ボクシングジム／ダンススクール／スポーツクラブ／ボルダリングジム／eスポーツの施設 など、「元気でかっこいい雰囲気にしたい」ところであれば、そのまま当てはまります。
背景色・メインカラー・アクセントカラーを変えるだけで、同じフレームでも、ポップにもクールにもなります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る