ホーム
〇〇市の女性専用エステサロン。フェイシャル・ボディ・ヘッドスパ。完全予約制。
<< デモ一覧に戻る
エステサロンのデモ
- このページでは、Frames CMS の製品版で実際に作ったエステサロンのサイトをご紹介します。フェイシャル・ボディ・ヘッドスパのメニューがある、完全予約制のプライベートサロンを想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ19種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メイン画像を曲線の形に切り抜き、横にキャッチを並べるフレームを使っています。背景には、フレーム標準の薄いラインの飾りが入っています。
まずは全体像から
このデモの構成
6つのページで構成しています。「メニュー」と「初めての方へ」を分けると、料金を見たい人にも、来店の流れを知りたい人にも届きます。
01
02
メニュー
フェイシャル・ボディ・ヘッドスパのメニューと料金。
03
初めての方へ
ご来店から、お帰りまでの流れ。
04
サロン
サロンの様子と、営業時間・アクセス。
05
お知らせ
esthetic salon SAMPLE からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「portfolio2（曲線シェイプ切り抜き・1枚ビジュアル）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像を曲線の有機的な形に切り抜き、左にキャッチとボタンを並べるフレームです。ページの背景には、薄いラインの飾り画像が入ります。スマホでは、キャッチが写真の上に並びます。
メニューは「かわいい形のカラム」
フェイシャル・ボディ・ヘッドスパの写真を、やわらかい形に切り抜いて並べています。このデモでは、3つとも同じ形を選んでそろえ、「列の並べ方」を「3列」にしました。フレームの曲線の写真と、雰囲気がよく合います。
サロンの空気を、写真で伝える
こだわりは角丸と丸の写真2枚を重ねるレイアウトで化粧品を、サロンのことは写真に文字を重ねたリンクで個室とフロアを見せています。マウスを乗せると幕が下がり、写真がはっきり見えます。
お客さまの声と、はじめての方への案内
「お客様の声（星評価）」で「勧誘がない」「個室で安心」といった声を並べ、すぐ下にアイコン＋番号の枠つきのステップで来店の流れを置きました。個人のサロンでは、初めての方の不安を先に解いておくのが、予約のいちばんの後押しになります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が明るいので、色つきのロゴを使っています。ロゴが小さく見えたので、「ロゴの大きさ」を「大きめ（120%）」にしています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「portfolio2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
ポートフォリオ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 1日4名さまだけの、静かなサロン | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| メニュー | かわいい形のカラム（自動幅・マスク選択） | |
| こだわり | テキスト＋写真2枚（角丸と丸） | |
| サロンのこと | オーバーレイ（画像リンク・横並び） | |
| お客さまの声 | お客様の声（星評価） | |
| はじめての方へ | 特徴・ステップ（アイコン＋番号・枠つき） | |
| 画像（1枚） | 画像（1枚） | |
| ご予約への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
メニュー／初めての方へ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| メニュー | コース・メニュー一覧 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 料金表 | メニュー名と価格（2列） | |
| 使っている化粧品 | コラージュ（写真2枚＋テキスト） | |
| 初めての方へ | ステップ案内（縦・番号＋画像） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
サロン／お知らせ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| サロン | ギャラリー（複数画像） | |
| 営業時間 | 営業時間・曜日表 | |
| アクセス | 店舗情報（写真＋情報＋地図） | |
| お知らせ | お知らせ一覧（自動） |
全19種類のパーツのうち、16種類は製品版でのみ使えるものです。かわいい形のカラムやオーバーレイ（画像リンク・横並び）、テキスト＋写真2枚（角丸と丸）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
エステサロンのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- メニューが多いときは、どう見せればいいですか
- トップでは大きく3つの種類だけを写真で見せ、メニューのページでは写真つきのコース一覧のあとに、時間ごとの料金を「メニュー名と価格」の2列で並べると、すっきりします。
- 「勧誘はありません」と書いたほうがいいですか
- 書いておくと安心してもらえます。初めての方がいちばん気にすることなので、このデモでは、トップの「ようこそ」、お客さまの声、よくある質問の3か所に入れました。
- 効果をどこまで書いていいですか
- 「必ずやせる」「シミが消える」のような効果を言い切る表現は避けます。このデモでも「毛穴・くすみ・乾燥のケア」のように、何をするかを書く形にしています。
この構成で作れるサイト
エステサロン以外にも
このデモはエステサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
ネイルサロン／まつげサロン／アロマサロン／ヘッドスパ専門店／美容室／ヨガ教室 など、「やさしい雰囲気の、予約制のサロン」であれば、そのまま当てはまります。
背景の飾り画像は、「デザイン → このフレーム専用の素材」で、差し替えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る