自由診療と一般内科を併設するクリニックのWebサイトを、構成設計からデザイン・コーディングまで一貫して制作しました。がんリスク検査や高濃度ビタミンC点滴といった専門性の高い診療内容を、落ち着いたトーンで整理して提示するとともに、診療時間・アクセス・電話予約といった実務情報へスマートフォンからでも短い操作で到達できる導線を設計しています。
■ 前提条件：性質の異なる2種の診療を1サイトに収める
本件は、東京・代々木に所在するクリニックのWebサイト制作です。
このクリニックは、血液検査によるがんリスク検査や高濃度ビタミンC点滴といった自由診療と、生活習慣病を中心とした一般内科外来という、性質の異なる2種の診療を提供しています。
前者は、検査内容を理解した上で受診を検討する層が対象となり、説明の丁寧さが求められます。後者は、地域の医療機関として日常的な診療を求める層が対象であり、必要なのは診療時間と所在地です。
同一サイト内でこの2つを扱う場合、どちらかに寄せると他方の閲覧者が目的の情報に到達できません。両者を並立させた上で、それぞれの導線を分けることが本件の構成上の主題となりました。
■ 構成設計：診療内容の並列提示と、実務情報への短い導線
トップページは、クリニックの概要提示、診療内容、診療時間、アクセス・問い合わせという順で構成しました。
診療内容のセクションでは、各診療をカード形式で並列に配置し、写真、名称、2〜3行の概要、詳細ページへの導線を同一のフォーマットで統一しています。診療の種別によって扱いに差をつけず、閲覧者が自身の目的に該当するものを選び取れる状態としました。
概要文は、詳細ページへ進むかどうかを判断できる粒度に調整しています。ここで説明を尽くしてしまうとトップページが長大化し、他の診療内容や診療時間への到達が遅れるためです。詳細な説明は下層ページに委ね、トップページは選択のための階層と位置づけました。
■ 実務情報の設計
クリニックサイトにおいて、閲覧数が最も多くなるのは診療時間とアクセスです。
診療時間は曜日別の表形式とし、午前・午後の区分に加えて最終受付時刻を併記しました。本件では、特定の検査について採血の受付時間が通常の診療時間と異なるため、この差異を表の直下に注記として明示しています。一般内科外来についても実施日が限定されるため、同様に併記しました。
これらは、記載が不十分な場合に来院後の齟齬を生む情報です。表としての簡潔さよりも、例外条件が確実に伝わることを優先しました。
アクセスについては、地図の埋め込みに加えて、建物外観の写真を掲載しています。所在地が2階であり、1階に別のテナントが入るビルであるため、テキストと地図のみでは現地での特定に迷いが生じます。外観写真と階数の明記を併せることで、到着時点での確認を可能にしました。
■ 予約導線
問い合わせは電話を主導線として設計しました。
検査の申し込み、診療予約、無料相談のいずれもが電話で受け付けられているため、フォームを介さず直接接続できる形が最短となります。受付時間および休診日を電話番号の直下に明示し、架電のタイミングを判断できる状態としました。
スマートフォンからの閲覧では、電話番号のタップで発信が可能です。ページのどの位置からでも短い操作で問い合わせに到達できるよう、連絡先への導線をヘッダーおよびページ下部に配置しています。
■ デザイン
白と淡いグレーを基調とし、余白を広く取った構成としました。
医療機関のサイトにおいて、視覚的な過剰さは信頼性を損ないます。装飾を抑え、写真と文字組みによって印象を形成する方針としました。院内の実写を各所に配置し、待合と診察のスペースが事前に把握できる状態としています。
セクション見出しには欧文と和文を組み合わせ、細めのウェイトで統一しました。診療内容の専門性を、硬質さではなく落ち着きとして提示するためのトーン設定です。
■ スマートフォン対応
閲覧の大半がスマートフォンからとなることを前提に、レスポンシブでの実装を行いました。
診療時間の表は、小さい画面幅でも横スクロールを発生させずに読み取れる形に調整しています。診療内容のカードは縦方向に積み上げ、順序が変わらない構成としました。
■ 対応範囲
要件整理／構成設計（ワイヤーフレーム）／ビジュアルデザイン／コーディング（レスポンシブ対応）／地図実装／問い合わせ導線設計
■ こうしたご相談に対応できます
・クリニック・医院のWebサイトを新規に制作したい、または刷新したい
・自由診療と保険診療など、性質の異なるサービスを1サイトで扱いたい
・専門的な診療内容を、閲覧者にわかりやすく整理して掲載したい
・診療時間・アクセス・予約導線を、スマートフォンから迷わず辿れる形にしたい
Weberryはデジタル広告の運用を主業とする事業者です。サイトの制作にとどまらず、流入設計から公開後の改善までを含めた対応が可能です。
開発会社の方
