ホーム
〇〇駅前の美容室。カット・カラー・パーマ・ヘッドスパ。
<< デモ一覧に戻る
美容室のデモ
- このページでは、Frames CMS の製品版で実際に作った美容室のサイトをご紹介します。カット・カラー・パーマとヘッドスパのある、駅前の小さな美容室を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、黒と紫のフレームを、本文の箱をオフホワイトに、メインカラーをテラコッタに変えた「こんな使い方もできる」の見本です。
まずは全体像から
このデモの構成
5つのページで構成しています。「メニュー」と「スタイリスト」の2つを、それぞれ1ページにしています。
01
02
メニュー
メニューと料金。
03
スタイリスト
スタイリストのご紹介。
04
お知らせ
hair salon SAMPLE からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「tabmenu1（タブメニュー・本文の箱）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メニューはタブの形で、表示中のタブが下の本文の箱とつながるフレームです。メイン画像は本文の箱の中に入り、ヘッダーに電話番号と受付時間が出ます。
フレームの見本から変えたところ
「デザイン → テーマカラー」で、背景色（本文の箱）を黒からオフホワイトに、文字色を濃い茶色に、メインカラーを紫からテラコッタにしています。このフレームは、ページの外側の背景色がメインカラーから自動で作られるので、外側は濃い茶色になります。背景の上部の飾り画像は、「デザイン → このフレーム専用の素材」で、お店の写真を暗くして右側からふんわり出るように加工した画像に差し替えています。ヘッダーの右側の空いたところに、お店の雰囲気が入ります。
人気のメニューは「カタログ」、ご相談は「見出しが追いかけてくるブロック」
トップの人気のメニューは、写真の右上に価格のラベルが付くカタログのパーツで、「列の並べ方」を「3列」にしました。写真は3枚とも同じ横長の比率にそろえると、カードの高さがきれいにそろいます。「朝のブローに時間がかかる」のようなご相談は、見出しが追いかけてくるブロックで、お悩みとその答えを並べています。
写真の大きいブロックで、お店と人を見せる
お店の雰囲気は角丸と丸の写真2枚を重ねるレイアウト、スタイリストとメンズカットへの入口は、写真に文字を重ねたオーバーレイを2つ並べています。最後に、背景写真のご予約への誘導を置きました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴはページの外側の濃い茶色の背景に出るので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「tabmenu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
音楽スタジオ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 家に帰ってからも、きれいなままの髪に。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 3つのこだわり | 特徴・サービス（アイコン3列） | |
| お店のこと | テキスト＋写真2枚（角丸と丸） | |
| 人気のメニュー | カタログ（写真＋価格ラベル） | |
| こんなご相談、多いです | 見出しが追いかけてくるブロック | |
| スタイリスト・メンズカットへの入口 | オーバーレイ（画像リンク・横並び） | |
| お客さまの声 | お客様の声（星評価） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
メニュー／スタイリスト
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| メニュー | メニュー名と価格（2列） | |
| ヘッドスパ | 横並び（写真＋文章） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| スタイリスト | スタッフ紹介 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 出勤日 | 営業時間・曜日表 |
全17種類のパーツのうち、15種類は製品版でのみ使えるものです。カタログ（写真＋価格ラベル）や見出しが追いかけてくるブロック、オーバーレイ（画像リンク・横並び）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
美容室のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 髪の長さで料金が変わるときは、どう書けばいいですか
- 「〇〇円〜」と最低の料金を書くのがおすすめです。このデモでも、カラーとパーマは「〜」付きにしました。
- スタイリストの紹介は、何を書けばいいですか
- 得意なスタイルを一言と、出勤日があれば十分です。このデモでは、スタッフ紹介の下に、営業時間・曜日表で出勤日を載せました。
- お客さまの声は、どう集めればいいですか
- 施術のあとに、一言もらって許可を取るのがいちばんです。このデモでは、名前の代わりに「〇〇市 30代」と、受けたメニューを添えました。
この構成で作れるサイト
美容室以外にも
このデモは美容室を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
理容室／ネイルサロン／まつげサロン／エステサロン／整体院／カフェ など、「電話で予約を受ける、落ち着いた雰囲気のお店」であれば、そのまま当てはまります。
ヘッダーの受付時間は、「サイト基本設定」の「受付時間（任意・ヘッダーに表示）」に入れたときだけ表示されます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る