ホーム
〇〇市のアロマトリートメントのサロン。ボディ・ヘッドスパ・フットケア。
<< デモ一覧に戻る
アロマ・リラクゼーションサロンのデモ
- このページでは、Frames CMS の製品版で実際に作ったアロマ・リラクゼーションサロンのサイトをご紹介します。アロマトリートメントとヘッドスパのコースがある、リラクゼーションサロンを想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、正方形の写真の左にキャッチを並べ、背景の左上に薄い花の飾りが入るフレームを使っています。トップページだけで、サロンの雰囲気・コース・香り・当日の流れ・お客さまの声までが伝わるようにしました。
まずは全体像から
このデモの構成
5つのページで構成しています。トップページでサロンの全体を見せ、「コースと料金」と「香りについて」の2ページで、選ぶところまでをくわしく伝えます。
01
02
コースと料金
アロマトリートメントのコースと料金。
03
香りについて
精油の選び方と、施術の流れ。
04
お知らせ
アロマサロン さんぷるからのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「frame11（正方形画像＋左テキスト）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像が角の丸い正方形の静止画で、左にキャッチとボタンが入るフレームです。トップの背景の左上に、大きな花の飾り画像がうっすら入ります。メニューは、どの画面幅でも右上のボタンで開く形です。
個室の写真は「テキスト＋写真2枚（角丸と丸）」
大きな写真に丸い写真が少し重なるパーツで、窓のある個室とキャンドルを見せています。文章だけでは伝わりにくい「空間の静けさ」が、写真2枚でひと目で伝わります。
香りは「ピックアップギャラリー」、施術の流れは横4列のステップ
香りのセクションは、大きな写真1枚と小さな写真2枚を並べるパーツで、精油やハーブの写真を見せています。施術の流れは、アイコンと番号が入った横4列のステップで、カウンセリングからハーブティーまでを並べました。
背景に色を付けているのは、「選ばれる理由」と「施術の流れ」の2つだけです。管理画面の「セクションの背景色」を「薄い色」にしています。
コースとお客さまの声は「3列」に
コースのカードとお客さまの声は、「列の並べ方」を「3列」にして、3枚がきれいに1行に並ぶようにしています。スマホでは、自動で1列になります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは濃い色なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。ロゴが小さく見えたので、「ロゴの大きさ」を「大きめ（120%）」にしています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「frame11」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
工務店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| からだの力が、ふっと抜ける時間を。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 選ばれる理由 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 個室のこと | テキスト＋写真2枚（角丸と丸） | |
| コース | コース・メニュー一覧 | |
| 香りを選ぶ | ピックアップギャラリー（大1枚＋小2枚） | |
| 施術の流れ | ステップ案内（横4列・アイコン） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お客さまの声 | お客様の声（星評価） | |
| ご予約・お申し込みへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
コースと料金／香りについて
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| コースと料金 | 料金表（プラン比較） | |
| お知らせボックス | アラート（お知らせボックス） | |
| コースの内容 | 写真に文章が回り込む横長ブロック | |
| 香りの選び方 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| サロンで使う精油 | カラムリスト（画像・見出し・本文） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：線で区切る・右に＋） |
お知らせ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| お知らせ | お知らせ一覧（自動） |
全17種類のパーツのうち、13種類は製品版でのみ使えるものです。テキスト＋写真2枚（角丸と丸）やピックアップギャラリー、お客様の声（星評価）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
リラクゼーションサロンのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- ページは少なくても大丈夫ですか
- 大丈夫です。個人のサロンなら、このデモのように「コースと料金」「香りについて」「お知らせ」「ご予約」くらいで十分に伝わります。そのぶん、トップページに写真とお客さまの声をしっかり入れておくと、初めての方も安心して予約できます。
- お部屋の写真は、どんなものを載せればいいですか
- 施術を受けるお部屋そのものの写真がいちばん安心につながります。このデモでは、明るい個室の写真と、キャンドルの写真を組み合わせて、昼と夜の雰囲気を見せました。
- 「肩こりが治る」と書いてもいいですか
- リラクゼーションのサロンでは、治療をうたう表現は避けます。「デスクワークの肩や腰のこりに」のように、どんな方に向いているかを書く形がおすすめです。
この構成で作れるサイト
アロマサロン以外にも
このデモはアロマ・リラクゼーションサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
リラクゼーションサロン／ヘッドスパ専門店／エステサロン／ハーブの専門店／ヨガ教室／自宅サロン など、「メニューが少なく、ゆったりした雰囲気で見せたい」お店であれば、そのまま当てはまります。
背景の飾り画像は、「デザイン → このフレーム専用の素材」で、差し替えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る