ホーム
ごあいさつ・メニュー・個室のこと・はじめての方へ・アイリスト・お客さまの声・予約の案内・お知らせ。
<< デモ一覧に戻る
まつげ・眉サロンのデモ
- このページでは、Frames CMS の製品版で実際に作ったまつげ・眉サロンのサイトをご紹介します。まつげパーマ・眉スタイリング・目もとのケアをしている、駅前の個室サロンを想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、歯科医院のデモと同じ2カラムのフレームを、紺から深いローズの配色に変えています。左の列のメニューの下には、営業時間と予約ボタンだけの「サイドバー」を置いています。
まずは全体像から
このデモの構成
5つのページで構成しています。トップでメニュー・個室・はじめての流れ・アイリスト・お客さまの声まで伝え、下のページは「メニュー」と「サロン」の2つに絞っています。
01
02
メニュー
4つのメニューの料金と所要時間、そのほかのメニュー。
03
サロン
アイリストの紹介、サロンの写真、アクセス。
04
お知らせ
eyelash salon SAMPLE からのお知らせ一覧です。
05
お問い合わせ
メニューでは「ご予約」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「sidewave1（左メニュー・写真の下に波）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
左の列にロゴの箱と縦に並ぶメニュー、右に本文が入る2カラムのフレームです。写真の下が波の形になります。「サロン」の下の子メニュー（アイリスト・店内・アクセス）は、プルダウンではなく開いた状態で縦に並びます。
紺を深いローズに、下のページの写真もサロンの写真に
「デザイン → テーマカラー」で、メインカラーを深いローズ（標準は紺）に、アクセントカラー・薄い色（差し色）・背景色も、ローズに合うやわらかい色に変えています。ロゴの箱・見出しの英字と線・メニューの表示中の印・フッターが、まとめてローズになります。
トップ以外のページの上部に出る写真は、「デザイン → このフレーム専用の素材」の「トップ以外のページの上部の写真」で、サロンの個室の写真に差し替えました。
メニューは4つを1行に
メニューの写真は4つにして、「列の並べ方 → 4列」で1行に並べています。スマホでは、自動で1列になります。
個室のことは角丸と丸の写真2枚、アイリストの紹介は写真2枚を重ねたコラージュ、予約の案内は横長の写真のパーツです。サイドバーには、営業時間の文章とボタンの2つだけを置いています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴはローズの箱の中と、ローズのフッターに出るので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「sidewave1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
歯科医院
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 目もとが整うと、メイクが少なくてすみます。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| メニュー | 枠がゆらゆら動く写真のカード | |
| スタジオのこと | テキスト＋写真2枚（角丸と丸） | |
| はじめての方へ | スケジュール・1日の流れ | |
| お店のこと | コラージュ（写真2枚＋テキスト） | |
| 画像（1枚） | 画像（1枚） | |
| お客さまの声 | お客様の声（横スクロール・文字だけ） | |
| 体験への誘導 | 横長ビジュアル（写真＋テキスト誘導） | |
| お知らせ | お知らせ一覧（自動） |
メニュー／サロン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| メニュー | 料金表（プラン比較） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| そのほかのメニュー | メニュー名と価格（2列） | |
| アイリスト | スタッフ紹介 | |
| サロンのご案内 | ギャラリー（複数画像） | |
| アクセス | 表（項目と内容） |
サイドバー（全ページ共通）
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 営業時間 | 基本セット（見出し＋本文＋画像） | |
| ボタン | ボタン（単体） |
全17種類のパーツのうち、13種類は製品版でのみ使えるものです。枠がゆらゆら動く写真のカードやテキスト＋写真2枚（角丸と丸）、料金表（プラン比較）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
まつげ・眉サロンのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- はじめての人が不安に思うことは、どう伝えればいいですか
- このデモのように、「はじめての方へ」でカウンセリングから仕上がりの確認までの時間を並べておくと、どれくらいかかるか、何をされるかが分かって安心してもらえます。
- 初回割引は、どこに書けばいいですか
- 料金表のすぐ上の説明文と、トップの予約の案内に書いています。期間限定のキャンペーンは、お知らせで出すと更新が楽です。
- 男性のアイリストでも、写真を出したほうがいいですか
- 出したほうが安心してもらえます。このデモでは、トップで経歴とひと言を写真つきで紹介し、「サロン」のページにも名前と得意なことを載せました。
この構成で作れるサイト
まつげ・眉サロン以外にも
このデモはまつげ・眉サロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
まつげエクステ専門店／眉毛サロン／ネイルサロン／エステサロン／美容室／整体院 など、「メニューが少なく、予約をいつも見えるところに置きたい」サロンであれば、そのまま当てはまります。
メインカラーを変えると、ロゴの箱・見出しの英字と線・メニューの印・写真の下の波の線の色がまとめて変わります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る