ホーム
ようこそ・選ばれる理由・教室・コース・数字・卒業生の声・説明会の案内。
<< デモ一覧に戻る
プログラミングスクールのデモ
- このページでは、Frames CMS の製品版で実際に作ったプログラミングスクールのサイトをご紹介します。Webデザインとプログラミングを教える、仕事帰りに通える社会人向けのスクールを想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、子どもの習い事教室のデモと同じフレームを、青い背景から白い背景に、色を紺とオレンジに変えています。トップには、ようこそ・選ばれる理由・教室・コース・数字・卒業生の声・説明会への誘導を並べました。
まずは全体像から
このデモの構成
5つのページで構成しています。トップで「どんなスクールか」が一通り伝わり、「コース」と「受講の流れ」で説明会の申し込みまでつなげる構成です。
01
02
コース
3つのコースの期間・内容・受講料と、受講料のよくある質問。
03
受講の流れ
無料説明会から受講開始までの手順と、平日の夜の授業の流れ。
04
お知らせ
SAMPLE CODE SCHOOL からのお知らせ一覧です。
05
お問い合わせ
メニューでは「無料説明会」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「blobslide1（ふんわり形のメイン画像・回る文字）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像がふんわりした形に切り抜かれ、左上にロゴが重なり、右下で円形の英文がゆっくり回るフレームです。メニューで「ボタン」にした項目は、右端の縦書きのボタンになります。
フレームの見本から変えたところ
「デザイン → テーマカラー」で、背景色を白（標準は青）、文字色を濃いグレー、メインカラーを紺、アクセントカラーをオレンジ、薄い色（差し色）をごく淡いオレンジにしています。ボタンやフッターは紺、価格やアイコンはオレンジになります。鮮やかな色は小さい面だけに使うと、元気さを残したまま落ち着いた印象になります。
トップは「ようこそ」から始めて、写真と数字で伝える
メイン画像のすぐ下に「基本セット」で、スクールの想いを短い文章で置いています。そのあとに、教室の写真2枚のコラージュ、3つのコース、実績カウンター（数字が0から数え上がります）、卒業生の声と続けて、説明会への誘導で締めています。
カードは「列の並べ方」で1行に
コース（3枚）・卒業生の声（3枚）は「列の並べ方 → 3列」、数字（4つ）は「4列」にしています。「標準」のままだと画面幅によって途中で折り返すことがあるので、1行に並べたいときは枚数に合わせて列数を選ぶのがおすすめです。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が白なので、色つきのロゴを使っています。フッターは紺なので、「フッター用ロゴ（任意）」に白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「blobslide1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
子どもの習い事教室
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 仕事帰りの2時間で、手に職を。 | 基本セット（見出し＋本文＋画像） | |
| 選ばれる理由 | 特徴・サービス（アイコン3列） | |
| お店のこと | コラージュ（写真2枚＋テキスト） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| コース | コース・メニュー一覧 | |
| 数字で見る SAMPLE CODE SCHOOL | 実績カウンター（数字） | |
| 卒業生の声 | お客様の声（星評価） | |
| 画像（1枚） | 画像（1枚） | |
| ご予約・お申し込みへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
コース／受講の流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| コース | コース・メニュー一覧 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 受講料について | FAQ（Q&Aマーク付き・カード型） | |
| 受講の流れ | 特徴・ステップ（アイコン＋番号・枠つき） | |
| 平日の夜の授業 | スケジュール・1日の流れ |
全14種類のパーツのうち、12種類は製品版でのみ使えるものです。実績カウンターやコース・メニュー一覧、お客様の声（星評価）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
スクールのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 受講料は載せたほうがいいですか
- 載せたほうが、説明会の申し込みにつながります。このデモでは、コース・メニュー一覧で「期間」「内容」「価格」を1枚のカードにまとめ、分割払いなどはコースのページのQ&Aに書きました。
- 説明会と個別相談、どちらに誘導すればいいですか
- 入口は1つに絞ると迷わせません。このデモでは「無料説明会」をメニューのボタンにし、トップの最後の誘導も説明会につなげました。個別相談は、受講の流れの2番目に置いています。
- 卒業生の実績は、どこに載せればいいですか
- トップの卒業生の声と数字で全体の実績を見せ、新しい実績はお知らせで1件ずつ出すのがおすすめです。本人の許可を取ってから載せましょう。
この構成で作れるサイト
プログラミングスクール以外にも
このデモはプログラミングスクールを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
資格の学校／英会話スクール／デザインスクール／パソコン教室／料理教室／オンライン講座 など、「コースと期間と価格があり、説明会から始まる」スクールであれば、そのまま当てはまります。
回る円形の文字は、「デザイン → このフレーム専用の素材」で、文の書き換えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る