ホーム
休診のお知らせ、ごあいさつ、診療科目、診療時間表、こんなときはご相談ください、受診の流れ、医師・スタッフ、LINE、お知らせ、地図までを1ページに。ここだけ見れば用が足りる構成です。
<< デモ一覧に戻る
クリニックのサイトデモ（内科・小児科）
- このページでは、Frames CMS の製品版で実際に作ったクリニックサイトをご紹介します。内科・小児科の診療所を想定した、7ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、医療広告ガイドラインに配慮して作っています。患者さんの体験談を載せていないのも、専門医資格の書き方を選んでいるのも、理由があります。後半でその考え方も書いておきました。
まずは全体像から
このデモの構成
7つのページで構成しています。ホームだけを長くして、下層は用途別に分ける形にしました。
01
02
診療案内
内科・小児科を、写真を全面に敷いたセクションで交互に紹介。院内でできる検査の表、初診の持ち物、よくあるご質問。
03
健診・予防接種
健診メニューを写真＋価格ラベルで4つ並べ、予防接種は表で。自費診療なので料金を明示しています。
04
医師・スタッフ
院長のごあいさつ（写真つき）、経歴・資格の表、スタッフの丸写真リスト。
05
アクセス
所在地・駐車場・最寄り駅の表、地図、お越しになる前の注意点。
06
お知らせ
臨時休診やワクチンの入荷など。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。
07
お問い合わせ
入力項目を自由に作れるフォーム。診療の相談窓口ではないことを明記しておくと、運用が楽になります。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「lp4（ズームスライド＋曲線シェイプ）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。
このデモでは、色を1つも変えていません
企業サイトのデモ・旅館のデモでは色を1つ変えていますが、このデモはフレームの初期設定そのままです。lp4 のやわらかい青が、そのままクリニックに合ったためです。
フレームを選ぶだけで成立することもある、という例として見ていただければと思います。もちろん、変えたいときは管理画面の「デザイン → テーマカラー」で、メインカラー・アクセントカラー・薄い色・背景色・文字色の5つをカラーピッカーから選べます。
その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。
そのかわり、フレーム独自の設定を1つ使いました
lp4 には、メイン画像の中に地図の画像を出す枠がありますが、このデモでは聴診器のイラストと差し替えて入れました。
フレームごとに固有の設定を持っているものがあり、それも管理画面から差し替えられます。「このフレームだけの飾り」を、自分の素材に置き換えられるということです。使わない設定にすることもできます。
フレームを切り替えても、ページの中身は一切変わりません。診療時間も、スタッフ紹介も、お知らせも、そのまま残ります。変わるのは見た目の枠だけです。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 休診のお知らせ（黄色い帯） | アラート（お知らせボックス） | |
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 診療科目 | 特徴・サービス（アイコン3列） | |
| 診療時間 | 営業時間・曜日表 | |
| こんなときはご相談ください | 箇条書き（中黒・番号） | |
| 受診の流れ | ステップ（手順） | |
| 医師・スタッフ | スタッフ紹介 | |
| LINEのご案内 | LINE誘導セクション（QR＋ボタン） | |
| お知らせ | お知らせ一覧（自動） | |
| アクセス（地図） | 埋め込み（YouTube・地図など） |
診療案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 内科・小児科（写真全面） | オーバーレイ（写真＋テキスト＋ボタン） | |
| 院内でできる検査 | 表（項目と内容） | |
| 初診の持ち物 | 箇条書き（中黒・番号） | |
| よくあるご質問 | FAQ（クリックで開閉） |
健診・予防接種／医師・スタッフ／アクセス
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 健診メニュー（写真＋価格） | カタログ（写真＋価格ラベル） | |
| 院長ごあいさつ | 横幅いっぱいレイアウト（テキスト＋写真） | |
| スタッフ（丸い写真） | 丸画像リスト（スタッフ・講師） | |
| 予防接種の料金／所在地 | 表（項目と内容） |
全16種類のパーツのうち、12種類は製品版でのみ使えるものです。とくに営業時間・曜日表は、診療時間を載せる医院サイトでは欠かせないパーツです。製品版では約50種類のパーツが使えます。
パーツの小ワザ
「カタログ（写真＋価格ラベル）」は横4列に並ぶパーツです。項目が3つだと、右端の1マスが空いて背景色（濃い色）がそのまま出てしまいます。
4の倍数で組むのがきれいですが、どうしても3つのときは、4つ目を追加して、見出しか本文に半角スペースを1つだけ入れてください。空白のカードとして白く収まり、濃い色の塊が出なくなります。
ここは特に気をつけました
医療広告ガイドラインへの配慮
医療機関のウェブサイトは、医療法（医療広告ガイドライン）の対象です。他の業種なら普通にやることが、そのままでは書けません。
このデモで実際に避けたこと・選んだことを、そのまま書いておきます。
- 患者さんの体験談は載せていません
- 治療内容や効果についての体験談は、ウェブサイトにも掲載できません。「先生が親身でよかった」といった感想も、線引きが難しい領域です。
Frames CMS には「お客様の声（星評価）」というパーツがありますが、このデモでは意図的に使っていません。旅館のデモでは使っています。同じCMSでも、業種によって使うパーツを変える、という判断の例です。 - 術前・術後の写真（ビフォーアフター）も載せていません
- 治療の前後を並べた写真は、効果を保証する表現にあたるため原則として掲載できません（詳しい説明を併記した場合の例外規定はありますが、条件が厳しいものです）。
「ビフォーアフター（画像比較）」パーツも製品版に入っていますが、医療機関では使わない前提でお考えください。エステ・リフォーム・清掃などでは有効なパーツです。 - 「日本一」「最先端」「絶対に安全」は書いていません
- 他院との比較優良広告・誇大広告にあたるため使えません。
このデモの見出しは「かぜも、予防接種も、なんとなくの不調も。」のように、できることを並べるだけにしています。売り込む言葉を使わなくても、患者さんが知りたいことは十分伝わります。 - 資格は「広告できるもの」だけを書いています
- 専門医資格は厚生労働大臣が定める基準を満たした団体のものだけが広告できます。このデモでは「日本内科学会 総合内科専門医」「日本医師会 認定産業医」だけを書き、広告できない資格名は入れていません。
学会の会員であること（所属）は書けます。 - 自費診療は料金を明示しています
- 健診・予防接種のような保険適用外の診療は、料金を分かりやすく示すことが求められます。「〇〇円〜」ではなく、できるだけ具体的な金額を。
このデモでは、健診4種と予防接種5種の料金を、すべて税込で載せています。助成の対象になる場合はその旨も添えました。 - できないことも書いています
- LINEの案内に「LINEでの診療相談・予約はお受けしていません」と入れています。
医院サイトで問い合わせが増えると、想定していない使われ方が必ず出てきます。できないことを先に書いておく方が、結局は手間が減ります。
ここに書いたのは、デモを作るときに私たちが調べた範囲の一般的な注意点です。実際の掲載内容は、地域の保健所や、医療広告に詳しい専門家にご確認ください。歯科・接骨院・鍼灸院などは、また別の法律（あはき法・柔道整復師法）の対象になります。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
医院サイトで迷いやすいところ
- トップページに何を載せればいいか分からない
- 医院のサイトを見る方が知りたいのは、ほとんどの場合「今日やっているか」「どこにあるか」「何を診てくれるか」の3つです。
このデモでは、①休診の案内 → ②何を診るか → ③診療時間 → ④こんなときは → ⑤受診の流れ → ⑥誰が診るか → ⑦地図、の順に並べました。診療時間を上の方に置くのがコツです。 - 臨時休診をどう伝えればいいですか
- 2か所あります。お知らせに1本追加するのと、トップの一番上にあるアラート（黄色い帯）を書き換えるのと。
このデモでは両方使っています。急ぎのものは帯に、記録として残したいものはお知らせに。帯は、不要になったら文章を空にすれば消えます。 - スタッフの顔写真は必要ですか
- 初めて行く医院で不安なのは「どんな人が診るのか分からない」ことです。院長の写真が1枚あるだけで、印象はかなり変わります。
スタッフの写真が難しい場合は、名前と役職だけでも構いません。丸画像リストは、写真がなくても崩れないように作ってあります。 - 予約システムは付いていますか
- Frames CMS に予約・順番待ちの機能はありません。ここは正直にお伝えしておきます。
外部の予約システムをお使いの場合は、ボタンパーツにリンクを入れて、メニューにも「web予約」を並べる形になります。このデモは予約なし（受付順）の医院を想定しています。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。
医院サイトで大事な診療時間の表も、スマホで潰れずに読めます（曜日が7列ありますが、専用のパーツなので収まります）。
この構成で作れるサイト
内科・小児科以外にも
このデモは内科・小児科を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
歯科／整形外科／皮膚科／耳鼻咽喉科／眼科／心療内科／産婦人科／動物病院／調剤薬局／訪問看護ステーション／接骨院・鍼灸院 など、「診療時間」「場所」「誰が診るか」を伝えたいところであれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「診療科目」と「健診メニュー」のセクションくらいです。取り扱う診療・自費メニューに置き換えてください。パーツはそのまま使えます。接骨院・鍼灸院・動物病院は、医療広告ガイドラインとは別の規制になりますので、掲載内容はそれぞれの根拠法をご確認ください。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る