美容室のサイトデモ｜動画のファーストビュー｜使用フレーム・パーツをすべて公開

<< デモ一覧に戻る

美容室のサイトデモ

このページでは、Frames CMS の製品版で実際に作った美容室のサイトをご紹介します。スタイリスト3人の、小さなサロンを想定した6ページ構成です。
使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
8つのデモの中で、これだけがファーストビューに動画を使っています。動画を使うときに気をつけることも、あわせてまとめました。

このデモを見る（別ウィンドウ）

まずは全体像から
このデモの構成

6つのページで構成しています。美容室なら、これで足ります。

ホーム

考え方、人気メニュー3つ、営業時間の表、お客様の声、LINE予約への誘導、お知らせ、地図。

メニュー・料金

料金表と、料金についての注意書き、よくあるご質問。金額をはっきり出しているページです。

スタイリスト

3人の顔写真と、得意なこと。誰が何曜日にいるかの「出勤の目安」も表で添えました。

スタイル集

サムネイルをクリックすると大きな写真に切り替わる形と、まとめて並べるギャラリーの2種類。

お知らせ

お休みや新メニューのご案内。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。

ご予約・お問い合わせ

日付・時間帯・メニュー・ご指名まで選べる予約フォームを実際に組んでいます。触ってみてください。

デザインの土台
使っているフレーム

このデモで使っているフレームは 「frame4-movie（ファーストビュー全体が動画）」 です。
frame4-movie は、画面いっぱいに動画を流すフレームです。キャッチコピーやボタンは重ねません。動画だけを見せるという割り切った作りなので、店内の空気や手元の動きが、言葉より早く伝わります。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。

動画を使うときに、気をつけていること

動画は強い反面、失敗すると「重いだけのサイト」になります。このデモでは次のようにしました。

短く、軽く

10秒前後・数MBが目安です。長くても15秒。スマホの回線でも待たされない大きさに収めてください。

音は入れない

音のある動画は、そもそもブラウザが自動再生してくれません。音なしで成立する映像を選んでください。

つなぎ目が目立たない映像に

繰り返し再生されます。始まりと終わりが似た絵だと、何周してもきれいに見えます。

スマホ用に別の動画も指定できます

横長の動画はスマホだと左右が切れます。縦向きの動画を別に登録しておくと、スマホではそちらが流れます。

動画が用意できない場合でも、大丈夫です。管理画面でフレームを選び直すだけで、静止画のフレームに切り替えられます。中身のページやお知らせはそのまま残ります。「動画は後で撮る」という進め方でも構いません。

ロゴが、トップページとその他ページで切り替わります

あらかじめロゴを2枚登録して、置かれる場所で使い分けるというものです。

トップページ＝動画の上

ロゴが画面の中央、動画に重なって出ます。写真や動画の上なので、白いロゴが合います。

他のページ＝白いヘッダー

ふつうのヘッダーに戻ります。ここは背景が白いので、濃い色のロゴでないと消えてしまいます。

管理画面の「サイト基本設定」で、ロゴ画像と、その下の「メイン画像の上に重ねるロゴ」の2か所に登録するだけです。この入力欄は、そういう作りのフレームを選んでいるときだけ出ます。関係のないフレームでは表示されないので、迷うことはありません。

白いロゴを1枚だけ入れると、トップ以外でロゴが消えます。実際にこのデモを作るとき、最初に白いロゴだけを登録して、メニューやスタイリストのページでロゴが真っ白になりました。同じロゴの「白版」と「濃い色版」を用意しておくのが正解です。
もう1点。ロゴの形にも向き不向きがあります。正方形に近いロゴだと、ヘッダーで高さが出すぎることがあります。同じロゴでも、ヘッダー用は横に組み直したものを用意すると収まりがよくなります（このデモもそうしています）。

ロゴを登録していない場合は、サイト名がそのまま文字で表示されます。ロゴが無くてもサイトは成立しますので、あとから用意しても大丈夫です。大きさが合わないときは、管理画面の「ロゴの大きさ」で 70%〜150% に調整できます。

このデモでは、色を3つ変えています

frame4-movie の標準の配色は緑＋オレンジです。明るく元気な組み合わせで、保育園やスクールにはよく合うのですが、大人向けの美容室には少し賑やかでした。

そこで、メインカラーを黒に近いグレー、アクセントカラーを落ち着いた金茶、薄い色をベージュに変えました。同じフレームでも、ここまで印象が変わります。

薄い色（差し色）を変え忘れないでください。セクションの背景に使われている色です。メインとアクセントだけを変えると、見出しは変わったのに背景だけ元の色のままという状態になります。実は、このデモを作っているときに一度やりました。

変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。変えた色だけが保存される仕組みなので、あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。

なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。

20種類以上のフレームを見る

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
ごあいさつ・考え方	基本セット（見出し＋本文＋画像）
人気メニュー3つ	ランキング
営業時間	営業時間・曜日表
お客様の声	お客様の声（星評価）
LINE予約への誘導	LINE友だち追加ボタン（単体）
お知らせ	お知らせ一覧（自動）
地図・アクセス	埋め込み（YouTube・地図・iframe）

メニュー・料金／スタイリスト

セクション	使ったパーツ	Free版
料金表	多列テーブル（自由な列数）
料金についての注意	箇条書き（中黒・番号）
よくあるご質問	FAQ（クリックで開閉）
スタイリスト3人	スタッフ紹介
出勤の目安	表（項目と内容）

スタイル集

セクション	使ったパーツ	Free版
ショート・ボブ	サムネイルギャラリー（クリックで大画像切替）
ミディアム・ロング	ギャラリー（複数画像）

全14種類のパーツのうち、9種類は製品版でのみ使えるものです。とくに営業時間・曜日表は、○×△と定休日を1つの表にまとめられるので、「今日はやっていますか」という電話が減ります。製品版では約50種類のパーツが使えます。

フォームは、項目を自由に組み立てられます

このデモの「ご予約・お問い合わせ」は、10項目の予約フォームです。お名前とメールだけでなく、ご希望の日（カレンダーから選択）・時間帯（ラジオ）・メニュー（複数選択）・ご指名（ドロップダウン）まで入っています。

使える項目は11種類。1行テキスト／複数行テキスト／メール／電話・郵便番号／ドロップダウン／ラジオ／複数選択／日付／数値／同意チェック／添付ファイル。これを組み合わせて、用途ごとにフォームをいくつでも作れます。

先に聞いておくと、やりとりが減ります。「ご予約希望」とだけ書かれたメールが来ると、日時・メニュー・担当を確認する往復が発生します。フォームで先に選んでもらえば、その往復がまるごと消えます。
なおFree（無料版）のフォームは、お名前・メールアドレス・お問い合わせ内容の3項目で固定です。項目を増やしたい場合は製品版が必要です。

添付ファイルつきのフォームは、工務店のデモでご覧いただけます（現況の写真や図面を送れる形）。2本あわせて、11種類すべてが実際に動いています。

パーツの小ワザ

① 写真の見せ方は、2種類を使い分けています。

スタイル集の上半分は「サムネイルギャラリー」。
小さな写真をクリックすると、上の大きな写真が入れ替わります。
じっくり見てほしい写真向きです。

下半分は「ギャラリー（複数画像）」。
まとめて並べるだけの形で、点数が多いときに向いています。
同じ「写真を並べる」でも、見る人の動き方が変わります。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
美容室のサイトで迷いやすいところ

動画は、どうやって用意すればいいですか: スマホで十分です。三脚（なければ棚の上でも構いません）にスマホを固定して、10秒ほど撮ってください。カメラを動かさず、被写体だけが動く映像がいちばんきれいに見えます。
おすすめは、シャンプー台に湯が流れるところ、ドライヤーで髪が揺れる手元、窓から光が差す店内など。顔が大きく写らないほうが、誰にでも当てはまる映像になります。
撮ったあとは、ファイルサイズを小さくしてからアップロードしてください。数十MBのままだと、スマホで見た人が離れてしまいます。
予約サイトを使っているので、自分のサイトは要らない気がします: 予約サイトは「探している人に見つけてもらう」のが得意です。いっぽう、掲載料が毎月かかり、隣にはいつも競合が並んでいます。
自分のサイトは「指名で来る人を受け止める」場所です。紹介された人、看板を見た人、SNSから来た人が、料金と考え方を確かめに来ます。予約サイトの手数料がかからないお客様を、少しずつ増やしていくための場所だとお考えください。
このデモも、予約サイトの代わりではなくLINEへの導線を用意しています。
料金を全部載せるべきでしょうか: 載せたほうがいいです。美容室で不安なのは「いくらかかるか分からない」ことです。
このデモでは、料金表のすぐ下に「髪の長さによる追加料金はいただきません」「表示は税込・シャンプーとブロー込み」と書きました。金額そのものより、「あとから増えないこと」が伝わると安心されます。
スタイル写真の掲載許可は必要ですか: 必要です。後ろ姿でも、お客様ご本人にとっては自分の写真です。撮るときに一言お願いして、断られたら載せない、それだけです。
このデモでは、スタイル集の冒頭に「掲載の許可をいただいた写真だけを載せています」と書いています。先に書いておくと、撮らせてほしいとお願いしやすくなります。
お知らせは、何を書けばいいですか: お休みの案内だけでも十分です。臨時休業、年末年始、新しいメニュー、担当者の産休。「今も動いているサイト」だと分かることのほうが、内容より大事です。
このデモのお知らせも、休業と新メニューの案内が中心です。無理に毎週書く必要はありません。
スマホでの見え方が心配: すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。3列のメニューは1列に、料金表は横スクロールに切り替わります。
動画だけは、ご自身で確認してください。横長の動画は、スマホだと左右が切れます。気になる場合は、縦向きの動画を別に登録できます。

この構成で作れるサイト
美容室以外にも

このデモはヘアサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。

ネイル・まつげサロン／エステ・脱毛／整体・鍼灸・マッサージ／リラクゼーション／バーバー／ヨガ・ピラティススタジオ／パーソナルジム／ペットサロンなど、「予約して行く」お店であれば、そのまま当てはまります。

業種によって変えたほうがよいのは、「スタイル集」の中身くらいです。写真で見せにくい業種なら、工務店のデモで使っているビフォーアフターのパーツに置き換えると分かりやすくなります。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。

無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。