ホーム
〇〇市の動物病院。犬・猫・うさぎの診療、予防接種、健康診断。
<< デモ一覧に戻る
動物病院のデモ
- このページでは、Frames CMS の製品版で実際に作った動物病院のサイトをご紹介します。犬・猫・うさぎを診る、土日も診療している町の動物病院を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本の青から、メインカラーを深い緑に、メイン画像をスライドショーから静止画1枚に変えた「こんな使い方もできる」の見本です。
まずは全体像から
このデモの構成
6つのページで構成しています。「何を診てもらえるか」「いつ開いているか」「どんな病院か」を、それぞれ1ページにしています。
01
02
診療案内
診療の内容と、予防・健康診断。
03
診療時間
診療時間とアクセス。
04
病院紹介
獣医師・スタッフ・院内のご案内。
05
お知らせ
さんぷる動物病院からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「catbar1（写真の下端にカテゴリーの帯）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像の下端に、メニューの項目がカテゴリーの帯として並ぶフレームです。右上の丸いボタンを押すと、すべてのメニューが開きます。見出しは角の丸い帯になります。
フレームの見本から変えたところ
「デザイン → テーマカラー」で、メインカラーを青から深い緑に、アクセントカラーを赤からオレンジに、「薄い色（差し色）」をごく淡い緑にしています。見出しの帯やフッターが、まとめて落ち着いた緑になります。さらに「トップの大きな画像 → メイン画像のタイプ」を「静止画」にし、メニューは「アイコン（任意）」を入れず、名前と「サブ表記（任意）」だけにしました。同じフレームでも、医院らしいやさしい印象になります。
トップだけで、病院のことがひと通りわかる
「ようこそ」の文章のあとに、3つの特長、診療時間の曜日表、院内の写真、診療案内、院長あいさつ、よくあるご質問、ご予約への誘導までを並べました。院内は角丸と丸の写真2枚を重ねるレイアウト、院長あいさつはテキストと写真の横長レイアウトで、写真を大きく見せています。
診療案内は「写真＋アイコンのカード」を3列で
一般診療・予防と健康診断・しつけと食事の相談を、写真の下にアイコンを重ねたカードで並べ、「列の並べ方」を「3列」にして1行にそろえました。カードを押すと、診療案内のページへ移ります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップの写真の上と、緑のフッターでは白いロゴを使いたいので、「メイン画像の上に重ねるロゴ（任意）」と「フッター用ロゴ（任意）」に白いロゴを入れ、ほかのページのヘッダーは色つきのロゴ、と使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「catbar1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
ペットサロン
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 小さな「いつもと違う」に、気づける病院でありたい。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| さんぷる動物病院の3つの特長 | 特徴・サービス（アイコン3列） | |
| 診療時間 | 営業時間・曜日表 | |
| 院内のこと | テキスト＋写真2枚（角丸と丸） | |
| 診療案内 | 写真＋アイコンのカード | |
| 画像（1枚） | 画像（1枚） | |
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| ご予約への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
診療案内／診療時間
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 診療案内 | 横並び（写真＋文章） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 予防の料金（税込） | 表（項目と内容） | |
| 診療時間 | 営業時間・曜日表 | |
| アクセス | 店舗情報（写真＋情報＋地図） |
病院紹介
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| スタッフ | スタッフ紹介 | |
| 院内のご案内 | ギャラリー（複数画像） |
全17種類のパーツのうち、14種類は製品版でのみ使えるものです。営業時間・曜日表や写真＋アイコンのカード、テキスト＋写真2枚（角丸と丸）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
動物病院のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 午前と午後で休診の曜日が違うときは、どう載せればいいですか
- 営業時間・曜日表で、午前と午後を別の行にするのがおすすめです。このデモでは、休診の枠を斜線にして、表の下に「水曜・日曜午後は休診です。」と書き添えました。
- 料金は載せたほうがいいですか
- ワクチンや健康診断のように、決まった料金のものだけで十分です。治療は症状によって変わるので、載せなくても構いません。
- 診られる動物は、どこに書けばいいですか
- メイン画像のサブテキスト・トップの特長・よくあるご質問に書いています。うさぎやハムスターの飼い主さんは、まずそこを確かめます。
この構成で作れるサイト
動物病院以外にも
このデモは動物病院を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
ペットサロン／内科・小児科／整骨院／歯科医院／薬局／トリミングスクール など、「診療時間と、いくつかのサービスを見せたい」ところであれば、そのまま当てはまります。
メニューのアイコンは、入れても入れなくても帯の形はそのままです。サブ表記だけにすると、すっきりした印象になります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る