ホーム
考え方、乾かし方のご案内、よくご注文いただくメニュー3つ、スタイル、営業時間の表、お客様の声、LINE予約への誘導、お知らせ、行き方の案内と地図。
<< デモ一覧に戻る
美容室のサイトデモ（ナチュラル）
- このページでは、Frames CMS の製品版で実際に作った美容室のサイトをご紹介します。スタイリスト3人の、駅近の小さなサロンを想定した6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- ロゴ画像を使っていません。サイト名の文字だけで、ロゴの代わりにしています。ロゴの上にはキャッチコピーの一行、メニューは英語の下に日本語の2段です。
実際に動くサイトです。料金表・お知らせ・予約フォームまでご覧いただけます。
まずは全体像から
このデモの構成
6つのページで構成しています。美容室なら、これで足ります。
01
02
メニュー・料金
料金表と、ご予約についての注意書き、よくあるご質問。金額と所要時間をはっきり出しているページです。
03
スタイリスト
3人の写真と、得意なこと。誰が何曜日にいるかの「出勤の目安」も表で添えました。
04
スタイル集
サムネイルをクリックすると大きな写真に切り替わる形と、まとめて並べるギャラリーの2種類。
05
お知らせ
お休みや新メニューのご案内。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。
06
ご予約
日付・時間帯・メニュー・ご指名まで選べる予約フォームを実際に組んでいます。触ってみてください。
同じ美容室でも、見せ方がまったく違うデモがもう1つあります。美容室のデモは、ファーストビューに動画を流し、ロゴ画像を2枚使い分けたものです。こちらは写真のスライドショーと文字だけのロゴで、やわらかく仕上げています。中身のページ構成はほぼ同じなので、フレームを替えるとここまで印象が変わるという見本にもなります。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「salon2（中央ロゴ・メニューに日本語表記）」 です。
salon2 は、ロゴを中央に置き、その上に一行のキャッチコピー、下に英語と日本語の2段のメニューが並ぶフレームです。メイン画像はスライドショー。文字は明朝体で、落ち着いた大人向けの雰囲気になります。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ロゴ画像がなくても、サイトは成立します
このデモは、ロゴ画像を登録していません。管理画面の「サイト基本設定」で入れたサイト名（hair salon Sample）が、そのまま文字でロゴの位置に出ています。
salon2 は、文字のロゴが映えるように作ってあるフレームです。中央に大きく、明朝体で出るので、文字だけでもお店の看板らしく見えます。大きさが合わないときは、管理画面の「ロゴの大きさ」で 70%〜150% に調整できます。
「ロゴはまだ無いけれど、サイトは先に作りたい」という方に向いています。あとからロゴ画像を登録すれば、その場で画像に切り替わります。サイト名は英語でも日本語でも構いません。
ロゴの上に、キャッチコピーの一行
ロゴの上の小さな一行「いつもの毎日に、少しのときめきを。」は、管理画面の「サイト基本設定」の「ヘッダー上の一行」に入れたものです。
この一行は、ページの一番大きな見出し（h1）として出ます。検索エンジンが「このサイトは何か」を読み取る場所なので、「〇〇駅の美容室」のように、地名や業種を入れた一行にしておくと効果的です。空のままにすると、サイト名がその役割を担います。
この欄は、ヘッダー上の一行を持つフレームを選んでいるときだけ表示されます。
メニューは、英語の下に日本語
salon2 のメニューは英語が大きく、日本語が小さく出ます。「Menu」の下に「メニュー・料金」、「Reservation」の下に「ご予約」。管理画面の「メニュー」で、項目名に英語、「サブ表記」に日本語を入れています。
英語だけだと、何のページか分かりにくいことがあります。「Stylist」「Reservation」は、すぐには読めない方もいます。日本語のサブ表記を必ず添えておくのがおすすめです。英語と日本語を逆にして、日本語を大きく出すこともできます。
色は、フレームの初期状態のままです
salon2 の標準の配色は、木の色に近い茶色のメインカラーに、くすんだ紫のアクセント。背景も真っ白ではなく、少し黄みのある生成り色です。ナチュラルな美容室にそのまま合うので、このデモでは色を1つも変えていません。
変えたい場合は、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つを管理画面から変更できます。変えた色だけが保存される仕組みなので、あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「salon2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
日本料理店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 考え方 | 基本セット（見出し＋本文＋画像） | |
| 乾かし方まで、お伝えします | テキスト＋写真2枚（角丸と丸） | |
| よくご注文いただくメニュー | ランキング | |
| スタイル | 枠がゆらゆら動く写真のカード | |
| 営業時間 | 営業時間・曜日表 | |
| お客様の声 | お客様の声（星評価） | |
| LINE予約への誘導 | LINE友だち追加ボタン（単体） | |
| お知らせ | お知らせ一覧（自動） | |
| アクセス | アクセス（案内＋地図）（デザイン：線で区切る） |
メニュー・料金／スタイリスト
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 料金表 | 多列テーブル（自由な列数） | |
| ご予約について | 箇条書き（中黒・番号） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） | |
| スタイリスト3人 | スタッフ紹介 | |
| 出勤の目安 | 表（項目と内容） |
スタイル集
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ショート・ボブ | サムネイルギャラリー（クリックで大画像切替） | |
| ミディアム・ロング | ギャラリー（複数画像） |
全16種類のパーツのうち、12種類は製品版でのみ使えるものです。とくにランキングは、「何を頼めばいいか分からない」はじめてのお客様に、迷わず選べる入り口になります。製品版では70種類以上のパーツが使えます。
フォームは、項目を自由に組み立てられます
このデモの「ご予約」は、美容室のデモと同じ10項目の予約フォームです。ご希望の日（カレンダーから選択）・時間帯（ラジオ）・メニュー（複数選択）・ご指名（ドロップダウン）まで入っています。
Free（無料版）のフォームは、お名前・メールアドレス・お問い合わせ内容の3項目で固定です。項目を増やしたい場合は製品版が必要です。
パーツの小ワザ
① 料金は、ランキングと料金表の2か所に出しています。
トップの「よくご注文いただくメニュー」には、人気の3つだけを所要時間と料金つきで。全メニューは「メニュー・料金」のページに。
全部をトップに並べると、かえって選べなくなります。まず3つ見せて、気になった人だけが料金表へ進む流れにしています。
② 営業時間の表に「最終受付」の行を足しています。
「営業時間・曜日表」は、時間帯ごとに行を増やせます。このデモでは営業時間の行の下に、最終受付の時刻を入れました。「19時まで開いているなら、18時半に行けば間に合う」という勘違いを防げます。
③ トップの「スタイル」は、写真の枠がゆっくり形を変え続けるカードです。
「枠がゆらゆら動く写真のカード」は、形の動きをカードごとに3種類、順番に使います。このデモでは3枚を並べています。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
美容室のサイトで迷いやすいところ
- ロゴがまだ無いのですが、作れますか
- 作れます。このデモのように、サイト名がそのまま文字で出ます。
サイト名は、看板やショップカードと同じ表記にしておくのがおすすめです。英語の店名なら英語のまま、ひらがなの店名ならひらがなで。お店で見た名前と、サイトの名前が一致していることが大事です。 - ヘッダー上の一行には、何を書けばいいですか
- 「どこの、何のお店か」が分かる一行がおすすめです。たとえば「〇〇駅から徒歩4分の美容室」「くせ毛と白髪のご相談が得意なサロン」など。
このデモでは雰囲気を優先してキャッチコピーにしていますが、検索から来てほしいなら、地名と業種を入れた一行のほうが効きます。 - メニューは英語と日本語、どちらを大きくすべきですか
- お客様の年代で決めてください。若い方が中心なら英語を大きく、幅広い年代なら日本語を大きくしたほうが親切です。
どちらの場合も、もう一方を小さく添えておくと、雰囲気と分かりやすさの両方が取れます。 - 料金を全部載せるべきでしょうか
- 載せたほうがいいです。このデモでは、料金表の上に「すべて税込・シャンプーとブローを含みます。髪の長さによる追加料金はいただいていません」と書きました。
金額そのものより、「あとから増えないこと」が伝わると安心されます。考え方は美容室のデモのページでも詳しくご説明しています。 - お知らせは、何を書けばいいですか
- お休みの案内だけでも十分です。このデモのお知らせも、臨時休業・新しいメニュー・LINE予約の開始・スタッフが増えた、などの7本です。
「今も動いているサイト」だと分かることのほうが、内容より大事です。無理に毎週書く必要はありません。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。料金表は横スクロールに切り替わります。
メイン画像は、スマホ用に縦長の写真を別に登録できます。横長の写真はスマホだと左右が切れるので、人物が端にいる写真は、縦長版を用意しておくと安心です。
この構成で作れるサイト
美容室以外にも
このデモはヘアサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
ネイル・まつげサロン／エステ・脱毛／ヘッドスパ／整体・鍼灸／リラクゼーション／着付け・ヘアセット／フラワー教室・料理教室／カフェ など、「人が見えて、予約して行く」お店であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「スタイル集」の中身くらいです。作品や店内の写真に入れ替えれば、そのまま使えます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る