ホーム
〇〇駅前の音楽スタジオ。バンド練習、個人練習、ギター・ドラム・ボーカル・ピアノのレッスン。
<< デモ一覧に戻る
音楽スタジオのデモ
- このページでは、Frames CMS の製品版で実際に作った音楽スタジオのサイトをご紹介します。バンド練習のできる貸しスタジオと、楽器のレッスンをしている音楽スタジオを想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ12種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、暗い配色で、メニューがタブの形になるフレームを使っています。ヘッダーには電話番号と受付時間が入ります。
まずは全体像から
このデモの構成
6つのページで構成しています。「スタジオ」「料金」「レッスン」の3つがあれば、予約までの流れが作れます。
01
02
スタジオ
3つのスタジオと、機材。
03
料金
スタジオの料金と、ご予約について。
04
レッスン
講師とコース、よくあるご質問。
05
お知らせ
STUDIO SAMPLE からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「tabmenu1（タブメニュー・本文の箱）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
暗い配色で、メニューはタブの形。表示中のタブが、下の本文の箱とつながるフレームです。ヘッダーに電話番号と受付時間が入ります。
背景の飾り画像は「使わない」に
このフレームは、背景の上部に花の飾り画像が入ります。音楽スタジオには合わないので、「デザイン → このフレーム専用の素材」で「この素材を使わない」にしました。画像を差し替えることもできます。
ヘッダーの電話番号と受付時間
「サイト基本設定」の電話番号と「受付時間（任意・ヘッダーに表示）」に入れると、ヘッダーに表示されます。電話で予約するお店に向いています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が暗いので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「tabmenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
美容室
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| スタジオ | オーバーレイ（画像リンク・横並び） | |
| 画像（1枚） | 画像（1枚） | |
| ご予約の流れ | ステップ案内（横4列・アイコン） | |
| お知らせ | お知らせ一覧（自動） |
スタジオ／料金
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| スタジオ | スポット紹介（テキスト＋段違いカード） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| レンタル機材（1回） | メニュー名と価格（2列） | |
| 料金 | 多列テーブル（自由な列数） | |
| お知らせボックス | アラート（お知らせボックス） |
レッスン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| レッスン | スタッフ紹介 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全12種類のパーツのうち、10種類は製品版でのみ使えるものです。オーバーレイや多列テーブル、スタッフ紹介は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
音楽スタジオのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 料金が時間帯で変わるときは、どう見せればいいですか
- 多列テーブルで「部屋 × 時間帯」の表にすると、ひと目で分かります。
- キャンセルの決まりは、どこに書けばいいですか
- 料金の表のすぐ下に、アラート（お知らせボックス）で置くのがおすすめです。
- 講師の写真がないときは
- このデモのように、楽器の写真を丸く切り抜いて使う方法もあります。
この構成で作れるサイト
音楽スタジオ以外にも
このデモは音楽スタジオを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
ダンススタジオ／レンタルスペース／ライブハウス／バー／カラオケ店／ゲームの教室 など、「夜の雰囲気が似合う、予約制のお店」であれば、そのまま当てはまります。
背景の飾り画像は、差し替えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る