ホーム
〇〇市の子ども向け習い事教室。英語・体操・アートの3クラス。
<< デモ一覧に戻る
子どもの習い事教室のデモ
- このページでは、Frames CMS の製品版で実際に作った子どもの習い事教室のサイトをご紹介します。英語・体操・アートの3つのクラスがある、子ども向けの習い事教室を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ13種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像の右下で回る円形の英文（フレーム専用の「文字の素材」）を、教室の言葉に差し替えています。
まずは全体像から
このデモの構成
6つのページで構成しています。「クラス」「料金」「体験レッスン」の3つがあれば、申し込みまでの流れが作れます。
01
02
クラス紹介
英語・体操・アートの3つのクラスと、時間割。
03
料金
月謝と入会金。きょうだい割引。
04
体験レッスン
体験レッスンの流れと、お申し込み。
05
お知らせ
さんぷるキッズスクールからのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「blobslide1（ふんわり形のメイン画像・回る文字）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像がふんわりした形に切り抜かれ、右下で円形の英文がゆっくり回るフレームです。メニューで「ボタン」にした項目は、右端の縦書きのボタンになります。
回る円形の英文を差し替える
「デザイン → このフレーム専用の素材」で、回る文字を書き換えられます。このデモでは「LEARN, MOVE AND CREATE WITH FRIENDS.」にしました。1行の短い英文が、円に沿ってきれいに並びます。
クラスは「コース・クラス紹介」、時間割は曜日表
3つのクラスを色の帯つきのカードで並べ、時間割は営業時間・曜日表のパーツで作っています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーとフッターは背景が濃い青なので、白いロゴを使っています。トップページだけは、メイン画像の左上に少し重なるように、カラフルなロゴ（「メイン画像の上に重ねるロゴ」）を大きく出しています。ここは正方形に近いロゴ画像がおすすめです。横長のロゴだと、写真を大きく隠してしまいます。文字のロゴのときは、背景色の箱に入れて表示されます。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「blobslide1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
プログラミングスクール
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| さんぷるキッズスクールの特長 | 特徴・サービス（アイコン3列） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 3つのクラス | 枠がゆらゆら動く写真のカード | |
| 体験への誘導 | 横長ビジュアル（写真＋テキスト誘導） | |
| お知らせ | お知らせ一覧（自動） |
クラス紹介
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| クラス紹介 | コース・クラス紹介（色の帯つきカード） | |
| 画像（1枚） | 画像（1枚） | |
| 時間割 | 営業時間・曜日表 | |
| 季節のイベント | 丸画像リスト（スタッフ・講師） |
料金／体験レッスン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 料金 | 料金表（プラン比較） | |
| そのほかの費用 | 表（項目と内容） | |
| 体験レッスン | ステップ案内（縦・番号＋画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） |
全13種類のパーツのうち、11種類は製品版でのみ使えるものです。コース・クラス紹介や曜日表、プラン比較表は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
習い事教室のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 月謝は載せたほうがいいですか
- 載せたほうが、体験の申し込みにつながります。このデモでは、プラン比較表で「2クラスで1割引」も見せています。
- 先生の写真がないときは、どうすればいいですか
- このデモのように、教室の様子や季節のイベントの写真でも、雰囲気は十分に伝わります。
- 体験レッスンの流れは、必要ですか
- あると安心してもらえます。申し込み→当日→相談の3つの手順を、写真つきで見せました。
この構成で作れるサイト
習い事教室以外にも
このデモは子どもの習い事教室を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
英会話教室／学習塾／スイミングスクール／ダンス教室／プログラミング教室／音楽教室 など、「クラスと時間割と体験レッスンがある」教室であれば、そのまま当てはまります。
回る円形の文字は、「デザイン → このフレーム専用の素材」で、文の書き換えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る