東京都府中市是政にある「Tama Vets Clinic（タマベッツクリニック）」は、犬と猫の総合診療に循環器と腎泌尿器の専門診療を重ねた動物病院です。サイトでは「犬猫の循環器リサーチセンター」という呼称も併せて掲げられています。公式サイトは、画面の左側に縦長のサイドバーを固定し、右側の広い面へ写真とコンテンツを積み上げる2カラムでまとめられています。
ここでは、動物病院やクリニックのサイトデザインを探している方に向けて、レイアウト、配色、ファーストビュー、情報設計、細部のUIという順に読み解きます。装飾を足すのではなく、置く場所と色の役割を決め切ることで信頼感を作っている点が、このサイトの学びどころです。
左に固定したサイドバーが決める画面の骨格
このサイトでいちばん目を引くのは、ページの左側を占有し、スクロールしても位置が変わらない縦長のサイドバーです。メニューだけでなく、連絡先や診療時間、住所までを1本の帯にまとめているため、来院を検討する人が情報を探し直さずに済みます。
来院前の判断材料をサイドバーに集約する
サイドバーは、ロゴ、メニュー、連絡先、予約ボタン、診療時間の表、住所という順で並びます。ハート形の輪郭に心電図の波形と犬猫のシルエットを重ねたロゴが最上部に置かれ、その下へ病院の呼称が小さく添えられています。
メニューは項目ごとにアイコンと日本語のラベルを組み合わせ、細い罫線で1行ずつ区切られています。文字だけを並べた一覧に比べて視線が止まりやすく、縦に長く続いても窮屈に見えません。
下部では、受話器のアイコンを添えた電話番号が大きく置かれ、その下に丸みのあるゴールド系のボタンで予約の入口が続きます。さらに診療時間の表と休診日、最終受付、郵便番号と住所まで載せているため、この帯だけで来院できるかどうかをおおむね判断できます。
右側は背景色を交互に切り替えて区切る
主コンテンツは右側の広い面へ縦一列で積み上げられています。背景は白と淡いグレーを交互に使い分け、太い区切り線を引かずに区画の切り替わりを示す組み立てです。
写真の帯、クリーム色のメッセージ、白いお知らせ欄、淡いグレーの診療時間、白い診療案内という並びで、背景の明るさが変わるたびに話題も変わります。読み手はスクロールの手を止めなくても、今どのまとまりを読んでいるのかを把握できます。
深いグリーンとクリームでまとめた配色設計
配色は、青みを含んだ深いグリーンを軸に、クリーム色とゴールド系の色を添える構成です。いずれも彩度を抑えた色でそろえているため、医療らしい清潔感と、動物を迎える場所らしい穏やかさが両立しています。
内装の色とブランドカラーがそろっている
ファーストビューの写真には、受付の背面に張られた深いグリーンの壁が写り込み、そこへ白いロゴマークが掲げられています。ロゴ、診療時間の表の見出し行、小見出しの脇に立つ短いバーも同じ系統のグリーンで、画面上の色と実際の内装の色が一致します。
写真とUIの色がそろうと、用意された素材写真を当てはめただけのサイトには出せない一体感が生まれます。訪れた人が写真と同じ景色を目にできるので、期待と現実のずれも起きにくくなります。
押してほしい要素だけをゴールドでそろえる
予約ボタン、アクセス情報へ進むボタン、お知らせの一覧へ進むボタン、カード内の「詳細を見る」ボタンには、砂色を帯びたゴールド系の色が共通して当てられています。グリーンとは別系統の色を行動の入口だけに割り当てているため、押せる場所が背景に埋もれません。
例外は、お知らせ欄の右に置かれた明るいブルーのバナーです。基調色から大きく離れた色がここだけに現れるので、予約に関わる入口として視線が集まります。色数を絞った画面だからこそ、1か所の差し色がよく効いています。
院内写真とクリーム帯で作るファーストビュー
ファーストビューは、説明文を詰め込まずに写真とキャッチコピーで印象を作る組み立てです。イラストや文字装飾に頼らず、実際の院内を大きく見せる判断が、サイト全体のトーンを決めています。
受付まわりの写真を横長のスライドで見せる
先頭に置かれているのは、受付カウンターまわりを写した横長の写真です。木目のカウンターの足元に間接照明が入り、白い天板、深いグリーンの壁、淡いグリーンの椅子が同じ画面へ収まっています。
写真の左右の端には、グリーンの四角いボタンへ白い山形を載せた切り替えの矢印が置かれ、複数の写真を順に見られることが分かります。上端には半透明の帯が重なり、地域名と病院の呼称を白い文字で1行にまとめています。
大きな英字を敷いたメッセージ帯
写真のすぐ下には、クリーム色に塗られた帯が続きます。背景には白に近い色でサイト名の英字が大きく敷かれ、写真との境目で文字の上側が切れる位置に置かれているため、装飾でありながら主張しすぎません。
その上へ、茶色がかったゴールドの見出しと2行の説明文が中央ぞろえで重なります。総合診療を土台に置きながら専門的な診療へつなぐという方針が短くまとめられ、写真の情報量を受け止める静かな面として働いています。
知りたい順に積み上げた情報設計
主コンテンツの並びは、来院を考える人が確認したい順番に沿っています。お知らせ、診療時間とアクセス、診療案内という流れで、疑問が生まれる前に答えが現れる構成です。
お知らせと予約の入口を左右に並べる
お知らせ欄は、見出しと日付を積んだ一覧を左に置き、右へ予約用のバナーを収めた枠を添えた2カラムです。一覧の各行は細い罫線で区切られ、右端に小さな山形が付くことで、行全体を押して進めることが分かります。
更新情報を確かめに来た人の視線の先に予約の入口があるため、告知の確認から次の行動までの距離が短くなります。一覧の下には続きを読むためのボタンが中央に置かれ、さかのぼって読みたい人の受け皿も用意されています。
表とカレンダーで診療日を二重に伝える
診療時間の区画では、曜日ごとの可否を丸とバツで示す表と、日付ごとに色を塗ったカレンダーを左右へ並べています。見出し行だけを濃いグリーンで塗った表は行数が少なく、午前と午後の違いを一目で読み取れます。
カレンダーは2か月ぶんを横に並べ、診療する日、休みの日、午後だけ休む日を塗り分けています。色の意味は下の凡例で示されているため、記号を覚えなくても読み解けます。曜日で覚えたい人と日付で確かめたい人の双方に応える二重構成です。
同じ面の左下にはアクセスの住所と駐車場の案内が続き、詳細ページへ進むボタンで締められています。診療時間、診療日、所在地という来院前に欠かせない事柄が、1つの区画にまとまっています。
診療対象を囲みで先に示す
診療案内のセクションでは、カードよりも先に細い枠で囲んだ区画が置かれています。枠の上辺へ「診療対象動物」というラベルが食い込む形で重なり、囲みの中身が何を示すのかがすぐに分かります。
中には犬と猫を線で描いたアイコンが淡いグレーの円へ載せられ、その下に対象が犬と猫であることが一文で添えられています。文章を読む前に対象を図で示す並べ方は、来院前の行き違いを減らすうえで効果的です。
同じ型のカードを3列で反復する
その下には、写真、グリーンのバーを添えた見出し、数行の説明、ゴールドのボタンという同じ型のカードが3列2段で並びます。要素の順番と大きさをそろえているため、内容が違っても比べやすく、読み進めるリズムが保たれます。
- 当院の紹介 … 院長の経歴や資格、所属学会を伝えるページへの入口です
- 診療案内 … 総合診療として扱う範囲を伝えるページへの入口です
- 初めての方へ … 初診の流れやよくある質問をまとめたページへの入口です
- 循環器科 … 心臓や血管の病気を扱う専門ページへの入口です
- 腎泌尿器科 … 腎臓や尿路の病気を扱う専門ページへの入口です
- 紹介診療について … 獣医師に向けた案内ページへの入口です
飼い主に向けた5枚と、ほかの動物病院の獣医師に向けた1枚が同じ列に並ぶ点は、読み手が2種類いることを前提にした設計です。カードの下には支払いに関する案内をまとめた区画も独立して置かれ、来院前の疑問を残さない情報量になっています。
見出しとフッターに通した一貫した作法
細部のUIにも共通の規則があり、それが全体の落ち着きを支えています。見出しの型をそろえる考え方と、ページの末尾で導線を回収する組み立ての2点に、その姿勢がよく表れています。
見出しは2つの型で使い分ける
大きな区切りの見出しは、小さなグリーンの英字ラベルを上に、大きな日本語の見出しを下へ置く2段構成で中央にそろえられています。お知らせや診療案内といったセクションは、いずれもこの型で始まります。
区画の中の小さな見出しには、左端へ短いグリーンのバーを立てた左ぞろえの型が使われます。2種類の型を混ぜずに階層で使い分けているため、縦に長いページでも現在地を見失いません。
フッターで連絡手段と道順をもう一度そろえる
フッターはクリーム色の面に切り替わり、左へ連絡先、右へアクセス情報を並べています。左側にはロゴ、電話番号、予約ボタン、診療時間の表が改めて置かれ、ページを最後まで読んだ人が上へ戻らずに行動へ移れます。
右側には、周辺の目印を描いたイラストの地図が入ります。駅や線路、幹線道路に加えて近くの店舗や施設まで描き込まれ、病院の位置は赤い枠、駐車場は青い枠と色を分けて示されています。地図の下には拡大して見るためのリンクがあり、電車と車それぞれの経路が箇条書きで続きます。
最下部にはサイト内のメニューが山形付きの一覧で並び、著作権の表示で締められます。画面の右下に浮かぶ丸いグリーンのボタンと、本文の末尾に置かれたテキストリンクという2つの方法で先頭へ戻れる点も、縦に長い構成に合った配慮です。
府中市で動物病院の循環器診療を伝えるサイトの見本として
このサイトは、左に固定したサイドバーで来院前の判断材料を常に見せる構造、内装と一致した深いグリーンの配色、表とカレンダーを併置した診療日の見せ方という3点で、動物病院サイトの見本になります。色数と型をそろえるだけでも落ち着いた信頼感が生まれることが、画面全体からよく伝わってきます。
専門性の高い診療を扱うサイトほど、伝えたい情報が増えて画面が複雑になりがちです。このサイトのように、常に見えるサイドバーへ連絡先と診療時間を預け、主コンテンツでは1つの面に1つの話題だけを置くと、情報量を保ったまま読みやすさを守れます。
院長の森田 祥平様は、大学病院の総合診療科で犬や猫の診療にあたってきた経歴を持ち、獣医学博士や獣医腎泌尿器上級認定医といった資格をサイト内で紹介しています。専門的な診療を扱う施設が、担当する人の背景まで丁寧に開示している点も参考になります。
配色の質感や写真の選び方、地図の描き込みは、実際の画面で見るとより伝わりやすくなります。デザインの参考として、府中市の動物病院で循環器診療を案内する公式サイトもあわせてご覧ください。
