ホーム
〇〇駅前の整骨院。肩こり・腰痛・スポーツのけが・交通事故の治療。夜8時まで、土日も受付。
<< デモ一覧に戻る
整骨院のデモ
- このページでは、Frames CMS の製品版で実際に作った整骨院のサイトをご紹介します。保険施術・自費施術・交通事故の治療をしている、駅前の整骨院を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ20種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、メニューの「施術メニュー」を見出しにして、保険施術・自費施術・交通事故の治療の3ページをまとめています。広い画面では、プルダウンメニューになります。
まずは全体像から
このデモの構成
7つのページで構成しています。「保険」「自費」「交通事故」を、それぞれ1ページに分けると、料金や手続きの説明がまざりません。
01
02
保険施術
骨折・脱臼・捻挫・打撲など、健康保険が使える施術。
03
自費施術
骨盤矯正・肩こりの施術・スポーツのケア。料金のご案内。
04
交通事故の治療
自賠責保険での治療と、手続きの流れ。
05
当院について
院長あいさつ・スタッフ・受付時間・アクセス。
06
お知らせ
さんぷる整骨院からのお知らせ一覧です。
07
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「seikotsu1（全面1枚ビジュアル・テキスト重ね）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
画面いっぱいの大きなメイン画像1枚に、キャッチとボタンを重ねるフレームです。広い画面では、ロゴとメニューが写真の上に乗ります。メニューの「見出し」は、ヘッダーのプルダウンになります。
メニューの「施術メニュー」をプルダウンに
メニュー管理で、リンクの種類を「見出し（リンクなし）」にした「施術メニュー」の下に、3つのページを入れています。ヘッダーのメニューが短くまとまり、右端の「ご予約」のボタンが目立ちます。
トップだけで、はじめての人の不安に答える
「ようこそ」の文章のあとに、こんな症状に・施術メニュー・院内・院長あいさつ・はじめての流れ・患者さまの声を順に並べ、最後に写真を背景にしたご予約への誘導を置きました。院内は写真2枚を重ねるコラージュ、院長あいさつは画面の左右いっぱいに広がる写真で見せています。
「こんな症状に」から、施術メニューへ
肩こり・腰痛・スポーツのけがなどを、左に見出し、右にアイコンのカードが並ぶパーツで見せ、すぐ下に写真＋アイコンのカードで3つの施術メニューを置きました。カードは「列の並べ方」を「3列」にして、1行にそろえています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターは濃い紺なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「seikotsu1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 「なんとなく痛い」を、そのままにしない。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| こんな症状に | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 施術メニュー | 写真＋アイコンのカード | |
| 院内のこと | コラージュ（写真2枚＋テキスト） | |
| 院長あいさつ | 横幅いっぱいレイアウト（テキスト＋写真） | |
| はじめての方へ | ステップ案内（横4列・アイコン） | |
| 患者さまの声 | お客様の声（星評価） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
保険施術／自費施術／交通事故の治療
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 保険施術 | 基本セット（見出し＋本文＋画像） | |
| 窓口でのお支払いの目安（3割負担の方） | 表（項目と内容） | |
| 自費施術 | 料金表（プラン比較） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 施術の流れ | ステップ案内（縦・番号＋画像） | |
| 交通事故の治療 | 特徴・ステップ（アイコン＋番号・枠つき） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
当院について／お知らせ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| スタッフ | スタッフ紹介 | |
| 受付時間 | 営業時間・曜日表 | |
| アクセス | 店舗情報（写真＋情報＋地図） | |
| お知らせ | お知らせ一覧（自動） |
全20種類のパーツのうち、16種類は製品版でのみ使えるものです。「こんな症状に」の選ばれる理由（左に見出し＋アイコンのカード）や横幅いっぱいレイアウト（テキスト＋写真）、お客様の声（星評価）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
整骨院のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 保険が使える施術と、使えない施術はどう書き分ければいいですか
- ページを分けてしまうのがいちばん分かりやすいです。このデモでは、保険施術のページに「慢性的な肩こりは保険の対象になりません（自費施術でご案内します）」と書き、自費施術は料金表のあるページに分けました。
- 患者さまの声は、載せてもいいですか
- ご本人の了承をいただいたうえで、年代や「会社員」「高校生」くらいの書き方にするのが安心です。「必ず治る」と受け取られる書き方の声は避け、通いやすさや説明の分かりやすさの声を選ぶのがおすすめです。
- 「必ず治る」のような書き方は、してもいいですか
- 効果を言い切る表現は避けます。施術所の広告には決まりがあるので、「痛みの原因を、いっしょに探します」のように、方針として書くのが安心です。詳しくは、地域の柔道整復師会などでご確認ください。
この構成で作れるサイト
整骨院以外にも
このデモは整骨院を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
接骨院／整体院／鍼灸院／マッサージ院／リハビリ施設／パーソナルトレーニング など、「症状から選んでもらい、メニューと料金を案内したい」ところであれば、そのまま当てはまります。
メニューの見出しは、メニュー管理の「リンクの種類」で「見出し（リンクなし）」を選ぶだけで作れます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る