ホーム
ごあいさつ・受診の入口・主な診療科・救急・数字・看護部。
<< デモ一覧に戻る
総合病院のデモ
- このページでは、Frames CMS の製品版で実際に作った総合病院のサイトをご紹介します。救急・内科・外科・整形外科・小児科などがある、地域の総合病院を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの見本のえんじ色のメニューの帯を深い緑に、ヘッダーを緑がかった墨色に変え、メイン画像をスライドショーから静止画1枚にしています。ヘッダーの右には「外来受診」「面会」のボタンが並びます。
まずは全体像から
このデモの構成
6つのページで構成しています。「いつ受診できるか」「どの科があるか」「面会はどうするか」を、それぞれ1ページにしています。トップページでは、来る人の目的別の入口から、診療科・救急・数字・看護部まで見せています。
01
02
外来のご案内
曜日ごとの受付時間と、受付から会計までの流れ。
03
診療科
医師の紹介と、診療科の一覧。
04
面会のご案内
面会の時間と人数、面会の方へのお願い。
05
お知らせ
さんぷる総合病院からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「menuband1（ボタン付きヘッダー・均等メニュー帯）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーの右にボタン、その下に均等な幅のメニューの帯が並ぶフレームです。表示中のページのメニューには、小さな三角の印が付きます。メイン画像は横長の全幅で、静止画・スライドショー・動画から選べます。
メニューの帯を深い緑に、ヘッダーを墨色に
「デザイン → テーマカラー」で、メインカラーを深い緑（標準はえんじ色）、文字色を緑がかった墨色、アクセントカラーをオレンジ、薄い色（差し色）を淡い緑に変えています。このフレームのヘッダーの背景は「文字色」なので、文字色を変えるとヘッダーの色も変わります。メニューの帯とフッターは緑、ヘッダーのボタンはオレンジです。さらに「メイン画像のタイプ」を静止画にして、写真1枚にキャッチとボタンを重ねました。
受診の入口は「アイコン3列」、診療科は「写真＋アイコンのカード」
「初めての方」「救急の方」「面会の方」は、アイコンとボタン付きの3列で、目的ごとのページへ案内しています。救急のボタンは電話番号です。診療科は、写真の下にアイコンを重ねたカードを「列の並べ方」で「4列」にしました。
救急は「横幅いっぱいレイアウト」、看護部は「テキスト＋写真2枚」
24時間の救急外来は、文章と大きな写真を画面の左右いっぱいに並べるパーツで見せています。病床数や救急車の受け入れ件数は、数字がカウントアップするパーツを4列に。看護部の紹介は、角を大きく丸めた写真と丸い写真を重ねるパーツです。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーが濃い墨色なので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「menuband1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
私立高校
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| いつもの診察も、もしものときも。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 受診される方へ | 特徴・サービス（アイコン3列） | |
| 主な診療科 | 写真＋アイコンのカード | |
| 救急外来 | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 数字で見る さんぷる総合病院 | 実績カウンター（数字） | |
| 看護部より | テキスト＋写真2枚（角丸と丸） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 発熱のある方へ | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
外来のご案内／診療科
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 受付時間 | 営業時間・曜日表 | |
| 受診の流れ | ステップ案内（縦・番号＋画像） | |
| 診療科と医師 | スタッフ紹介 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 診療科の一覧 | 表（項目と内容） |
面会のご案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 面会のご案内 | 表（項目と内容） | |
| 面会の方へのお願い | 箇条書き（中黒・番号） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。写真＋アイコンのカードや実績カウンター、横幅いっぱいレイアウトは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
病院のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 来る人の目的がばらばらで、トップに何を置けばいいか迷います
- 「初めての方」「救急の方」「面会の方」のように、目的別の入口をトップの上のほうに置くのがおすすめです。このデモでは、ヘッダー右のボタンにも「外来受診」「面会」を並べています。
- 診療科が多いとき、ぜんぶトップに載せるべきですか
- トップは主な4つだけをカードで見せて、すべての科は診療科のページの表にまとめると、トップが長くなりすぎません。
- 急なお知らせは、どう出せばいいですか
- 休診や感染症の注意は、お知らせに書いて、トップのお知らせ一覧に出します。長く続くお願いは、このデモの「発熱のある方は」のように誘導のパーツで常に出しておきます。
この構成で作れるサイト
総合病院以外にも
このデモは総合病院を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
クリニック／介護施設／健診センター／調剤薬局／公共施設／大学 など、「来る人の目的が分かれていて、入口をボタンで示したい」ところであれば、そのまま当てはまります。
ヘッダー右のボタンは、メニュー管理で「ボタン風に表示」にした項目です。このデモでは「外来受診」「面会」「お問い合わせ」の3つが並びます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る