ホーム
ごあいさつ・教室のこと・教室の様子・レッスン・当日の流れ・生徒さんのパンと声。
<< デモ一覧に戻る
パン教室のデモ
- このページでは、Frames CMS の製品版で実際に作ったパン教室のサイトをご紹介します。自宅のキッチンで開いている、1回4名までのパン教室を想定した、4ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本のメインカラーを焦げ茶に、アクセントを小麦色に変えています。写真の上の縦書きの一文はパン教室の言葉にし、キャッチの下のイラストは「使わない」にしました。
まずは全体像から
このデモの構成
4つのページで構成しています。ページは「レッスン」の1つだけにして、教室の様子・レッスンの流れ・生徒さんのパン・声は、トップページで順に見せています。
01
02
レッスン
3つのレッスンの内容と料金、曜日ごとの日程、よくあるご質問。
03
お知らせ
パン教室 さんぷるからのお知らせ一覧です。
04
お問い合わせ
メニューでは「お申し込み」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「collage1（写真2枚のコラージュ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
左にキャッチ、右に大小2枚の写真を重ねたフレームです。大きな写真の右上に縦書きの短い一文が帯で入ります。メイン画像は静止画2枚です。
焦げ茶と小麦色に、縦書きの一文を書き換え、イラストは使わない
「デザイン → テーマカラー」で、背景色をごく淡い生成り、文字色をこげ茶がかった黒、メインカラーを焦げ茶、アクセントカラーを小麦色、薄い色（差し色）を淡いベージュにしています。さらに「デザイン → このフレーム専用の素材」で、縦書きの一文を「焼きあがる香りまで、おうちで。」に書き換え、キャッチの下のイラストは「この素材を使わない」にしました。
教室の様子は「コラージュ」、生徒さんのパンは「ピックアップギャラリー」
窓辺の作業台は、大小2枚の写真と文章を重ねるコラージュで、小さな写真を大きな写真に重ねる置き方にしています。生徒さんが焼いたパンは、大きな写真1枚と小さな写真2枚のギャラリーです。
レッスンは「色の帯つきのカード」、当日の流れは「スケジュール」
3つのレッスンは、上に色の帯が付くカードを「列の並べ方」で「3列」に。帯の色は、焦げ茶・小麦色・淡いベージュと、1枚ずつ変えています。当日の流れは、時刻とアイコンを縦に並べるスケジュールで、こねてから試食までを見せました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは焦げ茶の背景なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「collage1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
花屋
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 粉と水から、ゆっくりと。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 教室のこと | 特徴・サービス（アイコン3列） | |
| 教室の様子 | コラージュ（写真2枚＋テキスト） | |
| レッスン | コース・クラス紹介（色の帯つきカード） | |
| レッスンの流れ | スケジュール・1日の流れ | |
| 生徒さんが焼いたパン | ピックアップギャラリー（大1枚＋小2枚） | |
| 生徒さんの声 | お客様の声（星評価） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お申し込みへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
レッスン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| レッスン | コース・クラス紹介（色の帯つきカード） | |
| 画像（1枚） | 画像（1枚） | |
| 日程 | 営業時間・曜日表 | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
全14種類のパーツのうち、11種類は製品版でのみ使えるものです。コラージュ（写真2枚＋テキスト）やピックアップギャラリー、スケジュールは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
自宅の教室のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 自宅の住所は、載せたほうがいいですか
- 町名までにして、くわしい場所は予約のときにお伝えする方法があります。このデモでは、フッターに「詳しい場所はご予約のときに」と書いています。
- はじめての人に、どう安心してもらえばいいですか
- 当日の流れと持ち物を書いておくのがいちばんです。このデモでは、トップにスケジュール、レッスンのページの質問に持ち物を入れました。
- 日程が毎月変わるときは、どう載せればいいですか
- 曜日ごとの基本の日程を表で載せて、月ごとの空きや特別なレッスンはお知らせで出すと、更新が楽です。
この構成で作れるサイト
パン教室以外にも
このデモはパン教室を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
料理教室／お菓子教室／フラワーアレンジメント教室／手芸教室／書道教室／自宅サロン など、「少人数で、自宅や小さな部屋で開く教室」であれば、そのまま当てはまります。
縦書きの一文を消したいときは、空欄ではなく「この素材を使わない」にします。空欄で保存すると、フレームの初期の文に戻ります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る