ホーム
〇〇市のネイルサロン。完全予約制。ジェルネイル、フットネイル、ケア。
<< デモ一覧に戻る
ネイルサロンのデモ
- このページでは、Frames CMS の製品版で実際に作ったネイルサロンのサイトをご紹介します。ひとりで営む、完全予約制のネイルサロンを想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ15種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、下辺がゆるやかな曲線の写真と、キャッチの上の手書き風の飾り文字が特徴のフレームを使っています。
まずは全体像から
このデモの構成
6つのページで構成しています。「デザイン」と「メニュー」を分けると、写真で選びたい人にも、料金で選びたい人にも届きます。
01
02
デザイン
これまでのデザインと、季節のおすすめ。
03
メニュー
定額コースと、オプションの料金。
04
サロン
ネイリストの紹介、営業時間、アクセス。
05
お知らせ
nail salon SAMPLE からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「arch1（曲線の写真＋飾り文字）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
右に下辺がゆるやかな曲線の写真、左にキャッチ。キャッチの上に手書き風の飾り文字（差し替え可）が入るフレームです。見出しの上の装飾テキストは、アーチ状に出ます。
デザインは「丸く流れる写真」と「ギャラリー」
トップでは写真が横に流れるパーツで最近のデザインを見せ、デザインのページではギャラリーで一覧にしています。
料金は多列テーブル
定額コースを「ハンド／フット」の2列の表にしています。何がいくらかが、ひと目で分かります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴが小さく見えたので、「ロゴの大きさ」を「大きめ（120%）」にしています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「arch1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
ハーブ＆アロマショップ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| メニュー | かわいい形のカラム（自動幅・マスク選択） | |
| 最近のデザイン | サムネイル横スライド（写真の流れ） | |
| ジェルで、ツヤと強さを | ビフォーアフター（画像比較） | |
| お知らせ | お知らせ一覧（自動） |
デザイン／メニュー
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 今月のおすすめ | ピックアップギャラリー（大1枚＋小2枚） | |
| これまでのデザイン | ギャラリー（複数画像） | |
| メニュー | 多列テーブル（自由な列数） | |
| 画像（1枚） | 画像（1枚） | |
| オプション | メニュー名と価格（2列） | |
| 区切り線 | 区切り線・余白 | |
| お知らせボックス | アラート（お知らせボックス） |
サロン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ネイリスト | スタッフ紹介 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| サロンのこと | 横並び（写真＋文章） | |
| 営業時間 | 営業時間・曜日表 |
全15種類のパーツのうち、14種類は製品版でのみ使えるものです。ビフォーアフター（画像比較）やサムネイル横スライド、スタッフ紹介は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
ネイルサロンのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- デザインの写真は、どれくらい載せればいいですか
- 6〜9枚くらいが見やすいです。季節ごとに入れ替えると、「また来たい」と思ってもらえます。
- 料金が細かく分かれているときは
- このデモのように、定額コースを表に、オプションは2列のメニューに分けると、すっきりします。
- 自宅サロンなので住所を出したくないのですが
- 「最寄り駅から徒歩〇分。詳しい場所はご予約のときにお伝えします」と書く方法があります。
この構成で作れるサイト
ネイルサロン以外にも
このデモはネイルサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
まつげサロン／エステサロン／美容室／ヨガ教室／アロマサロン／花屋 など、「やさしい雰囲気の、個人のサロン」であれば、そのまま当てはまります。
キャッチの上の飾り文字は、画像を差し替えたり、非表示にしたりできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る