ホーム
〇〇市の小型犬・猫のトリミングサロン。ペットホテルも。
<< デモ一覧に戻る
ペットサロンのデモ
- このページでは、Frames CMS の製品版で実際に作ったペットサロンのサイトをご紹介します。小型犬・猫のトリミングとペットホテルのお店を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ21種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メニューに「アイコン」と「サブ表記」を入れています。写真の下に、アイコン付きのカテゴリーの帯が並びます。
まずは全体像から
このデモの構成
6つのページで構成しています。「トリミング」「ペットホテル」の2つのサービスを、それぞれ1ページにまとめています。
01
02
トリミング
シャンプー・カット・部分ケアの料金と、ご来店からお迎えまでの流れ。
03
ペットホテル
お泊まりの料金と、1日の過ごし方。持ち物とお預かりの条件。
04
お店について
スタッフのご紹介と、店内・アクセス。
05
お知らせ
Sample Pet Salon からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「catbar1（写真の下端にカテゴリーの帯）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像の下端に、メニューの項目がカテゴリーの帯として並ぶフレームです。右上の丸いボタンを押すと、すべてのメニューが開きます。
メニューに「アイコン」と「サブ表記」
メニュー編集の「アイコン（任意）」で、項目ごとにアイコンを選んでいます（ハサミ・月・家・ベル）。名前の下の「シャンプー・カット」のような小さな文字は「サブ表記」です。アイコンがあると、何のページかがひと目で伝わります。
メニューのアイコンは、アイコンを表示するフレームでだけ出ます。表示しないフレームに切り替えても、設定はそのまま残ります。
帯に出す項目と、ボタンの中だけに出す項目
「ホーム」と「お問い合わせ」は、メニュー編集で「パソコンのメインメニューに表示」を外し、右上のボタンで開くメニューにだけ出しています。帯には、見てほしいサービスの4つだけを並べました。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。写真の上に重なるトップページでは白いロゴを使いたいので、「メイン画像の上に重ねるロゴ（任意）」に白いロゴを入れ、ほかのページは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「catbar1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
動物病院
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ようこそ | テキスト＋写真2枚（角丸と丸） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| サービス | 写真＋アイコンのカード | |
| お客さまの声 | お客様の声（星評価） | |
| 画像（1枚） | 画像（1枚） | |
| ご予約・お申し込みへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
トリミング
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| トリミング | 基本セット（見出し＋本文＋画像） | |
| コースの料金（トイプードル 5kgまで） | 料金表（プラン比較） | |
| ほかの犬種・猫・部分ケア | メニュー名と価格（2列） | |
| ご来店からお迎えまで | ステップ案内（縦・番号＋画像） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） |
ペットホテル／お店について
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ペットホテル | 横長レイアウト（テキスト＋写真） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お泊まりの1日 | スケジュール・1日の流れ | |
| 料金とお預かりの条件 | 表（項目と内容） | |
| 持ち物 | 箇条書き（中黒・番号） | |
| スタッフ | 丸画像リスト（スタッフ・講師） | |
| 店内 | ピックアップギャラリー（大1枚＋小2枚） | |
| アクセス | 行き方の案内（アイコン付きの枠） | |
| 埋め込み（YouTube・地図・iframe） | 埋め込み（YouTube・地図・iframe） |
全21種類のパーツのうち、17種類は製品版でのみ使えるものです。料金のプラン比較表や、スタッフ紹介の丸い写真のリストは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
ペットサロンのサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 料金は犬種ごとに全部載せるべきですか
- 全部は載せなくて大丈夫です。このデモでは、いちばん多い犬種（トイプードル 5kgまで）だけをプラン比較表にし、ほかの犬種は「メニュー名と価格」の2列で目安を並べました。「〇〇円から」と書いておくと、問い合わせのきっかけになります。
- ペットホテルの条件は、どこに書けばいいですか
- ホテルのページに、料金とまとめて書くのがおすすめです。ワクチンの証明書や、お預かりできない子の条件は、預ける前に必ず読んでほしい情報なので、料金の表のすぐ下に置きました。
- 写真はどんなものを用意すればいいですか
- カット後の、かわいい写真がいちばん強い材料です。飼い主さんの許可をもらって、ビフォー・アフターや、お店でのくつろいだ表情を撮っておきましょう。
この構成で作れるサイト
ペットサロン以外にも
このデモはペットサロンを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
動物病院／ドッグカフェ／しつけ教室／ペットシッター／猫カフェ／ペット用品店 など、「サービスが2〜4つあって、それぞれ料金がある」お店であれば、そのまま当てはまります。
メニューのアイコンは、美容室（ハサミ）・整体院（手）・学習塾（本）のように、どの業種でも使えます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る