ホーム
2歳から小学6年生までの子ども英会話教室。
<< デモ一覧に戻る
子ども英会話教室のデモ
- このページでは、Frames CMS の製品版で実際に作った子ども英会話教室のサイトをご紹介します。2歳から小学6年生までの、子ども英会話教室を想定した、4ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本の緑のメインカラーを紺に、アクセントカラーをオレンジに変えています。トップの背景の飾り画像は「使わない」にしました。
まずは全体像から
このデモの構成
4つのページで構成しています。教室のことはトップにまとめ、料金と時間割は「クラス」のページに分けた、小さな教室向けの構成です。
01
02
クラス
クラスと料金。
03
お知らせ
SAMPLE KIDS ENGLISH からのお知らせ一覧です。
04
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「lp2（流れる画像の帯＋大きなキャッチ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
大きなキャッチの下を、縦長の写真が横にゆっくり流れ続けるフレームです。メニューは広い画面でも開閉ボタンで開き、「ボタン風に表示」にした項目はヘッダーの右上にも出ます。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、メインカラーを緑から紺に、アクセントカラーをオレンジに、背景色をほんのり温かい白に、薄い色（差し色）を淡い黄色にしています。トップの背景の飾り画像は、「デザイン → このフレーム専用の素材」で「この素材を使わない」にしました。広い面は落ち着いた紺、ボタンだけ明るいオレンジにすると、子ども向けでも子どもっぽくなりすぎません。
写真で、教室の様子を伝える
クラスはかわいい形のカラムで写真を丸く切り抜き、先生のことはテキスト＋写真2枚（角丸と丸）、季節のイベントは自動スライドで流しています。保護者が知りたい「どんな先生が、どんなふうに教えているか」が、写真で伝わります。
1回のレッスンは「スケジュール」
時刻とアイコンと説明を、縦に並べるパーツです。「Hello!」から「Goodbye!」まで、レッスンの中で何をするかが、保護者にも具体的に伝わります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは紺の背景なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「lp2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
農家産直・定期便
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| はじめての英語を、たのしい思い出に。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 教室の特徴 | 特徴・サービス（アイコン3列） | |
| クラス | かわいい形のカラム（自動幅・マスク選択） | |
| 先生のこと | テキスト＋写真2枚（角丸と丸） | |
| 画像（1枚） | 画像（1枚） | |
| 1回のレッスン | スケジュール・1日の流れ | |
| 教室の1年 | 自動スライド（写真の横流れ） | |
| 保護者の声 | お客様の声（星評価） | |
| 体験レッスンへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
クラス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 料金 | 料金表（プラン比較） | |
| 時間割 | 営業時間・曜日表 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全15種類のパーツのうち、12種類は製品版でのみ使えるものです。かわいい形のカラムやスケジュール、自動スライド、料金のプラン比較表は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
英会話教室のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 年齢でクラスが分かれるときは、どう見せればいいですか
- トップでクラスの写真と対象年齢を、クラスのページで月謝と時間割を、と分けると分かりやすくなります。このデモでは、料金をプラン比較表に、時間割を曜日の表にしました。
- 子どもの写真は載せても大丈夫ですか
- 保護者の許可を取ったものだけにします。カードや教材の写真を混ぜると、顔の写る写真を減らせます。
- 体験レッスンは、どこから申し込んでもらえばいいですか
- このデモでは、メニューの「体験レッスン」を「ボタン風に表示」にして、ヘッダーの右上にいつも出るようにしています。トップの最後の誘導と、料金の表の「体験する」ボタンも、同じお問い合わせフォームにつないでいます。
この構成で作れるサイト
子ども英会話教室以外にも
このデモは子ども英会話教室を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
学習塾／プログラミング教室／スイミングスクール／リトミック教室／学童保育／子ども向けのイベント など、「明るい雰囲気で、子どもの写真を見せたい」ところであれば、そのまま当てはまります。
流れる写真の帯には、メイン画像に入れた写真が並びます。このデモでは5枚入れています。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る