ホーム
〇〇駅前のメンズヘアサロン。カット・シェービング・ヘッドスパ。
<< デモ一覧に戻る
メンズヘアサロンのデモ
- このページでは、Frames CMS の製品版で実際に作ったメンズヘアサロンのサイトをご紹介します。駅前の、仕事帰りにも寄れるメンズヘアサロンを想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本の白い背景を黒に、水色のメインカラーをゴールドに変えています。キャッチの上の手書き風の文字は「使わない」に、メイン画像は静止画1枚に、フッターは背景と同じ黒のデザインにしました。
まずは全体像から
このデモの構成
5つのページで構成しています。トップで想い・選ばれる理由・メニュー・スタイリストまでを見せ、「メニュー」と「スタイリスト」のページでくわしく伝える構成です。
01
02
メニュー
メニューと料金。
03
スタイリスト
スタイリスト紹介。
04
お知らせ
BARBER SAMPLE からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「script1（曲線シェイプ・右テキスト）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像の右側に曲線の土台があり、そこにキャッチが乗るフレームです。見出しの右には、手書き風の英字（装飾テキスト）が入ります。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、背景色を黒に、文字色を明るいベージュに、メインカラーとアクセントカラーをゴールドに、薄い色（差し色）を少し明るい黒にしています。背景を濃くしたら、文字色も明るい色に変えるのがポイントです。「トップの大きな画像 → メイン画像のタイプ」は「静止画」に、キャッチの上の手書き風の文字は「デザイン → このフレーム専用の素材」で「この素材を使わない」にしました。さらに「フッター設定 → フッターのデザイン」を、メインカラーの帯にならないものに変えて、ゴールドはボタンや価格など小さな面だけに使っています。
横幅いっぱいの写真で、店内の雰囲気を
横幅いっぱいレイアウト（テキスト＋写真）で半個室のシェービングを、最後はパララックス背景の店内写真に「ご予約は、24時間ネットで。」を重ねています。黒い背景に照明の写った写真が入ると、落ち着いた大人の雰囲気になります。
お客さまの声は「文字だけ」の横スクロール
写真を使わず、短い一言と年代・職業だけを並べるパーツです。お客さまの写真がなくても、どんな人が通っているかが伝わります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が黒なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「script1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
ヨガスタジオ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 月に一度、自分を整える時間を。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 選ばれる理由 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| シェービングの席 | 横幅いっぱいレイアウト（テキスト＋写真） | |
| メニュー | コース・メニュー一覧 | |
| 画像（1枚） | 画像（1枚） | |
| スタイリスト | スタッフ紹介 | |
| お客さまの声 | お客様の声（横スクロール・文字だけ） | |
| ご予約への誘導 | パララックス背景（写真／動画） | |
| お知らせ | お知らせ一覧（自動） |
メニュー
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| メニュー | メニュー名と価格（2列） | |
| おすすめのメニュー | 横並び（写真＋文章） | |
| ご予約への誘導 | パララックス背景（写真／動画） | |
| 営業時間 | 表（項目と内容） |
スタイリスト
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| スタイリスト | スタッフ紹介 | |
| お店のこと | コラージュ（写真2枚＋テキスト） |
全14種類のパーツのうち、11種類は製品版でのみ使えるものです。選ばれる理由（左に見出し＋アイコンのカード）やパララックス背景、お客さまの声の横スクロール（文字だけ）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
メンズヘアサロンのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 料金は、どこまで細かく載せればいいですか
- よく選ばれるメニューを6〜8つ載せれば十分です。このデモでは、トップに写真つきで3つ、メニューのページに「カット＋シェービング」のようなセットも含めて8つ並べ、パーマやカラーは「〇〇円〜」にしました。
- 指名の予約を受けたいのですが
- スタイリストを一人ずつ、得意なことと一緒に紹介すると、指名のきっかけになります。予約は、メニューの「ご予約」ボタンから、お問い合わせフォームで受けられます。
- 黒い背景で、写真は暗く見えませんか
- 店内の照明が写った写真なら、黒い背景によくなじみます。真っ白な背景の写真は浮いて見えやすいので、少しトーンを落とすのがおすすめです。
この構成で作れるサイト
メンズヘアサロン以外にも
このデモはメンズヘアサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
理容室／美容室／バー／テーラー・紳士服店／靴磨き店／メンズエステ など、「大人っぽい雰囲気で、予約してもらいたい」お店であれば、そのまま当てはまります。
背景色と文字色は「対」の関係です。片方だけ変えると読みにくくなるので、2つ一緒に変えてください。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る