SWANOIR
クリニックサイトのヒーローセクション。リアルタイム診療時間表示と週間カレンダー
Lighthouseスコア。Performance 96、Accessibility 96、Best Practices 100、SEO 100

「いま開いてる?」に応える病院のヒーローセクション

掲示ではなく、応答にするWebサイト

WHAT

病院のウェブサイトには、ほとんどの場合、同じものが並んでいます。院長挨拶、理念、初めての方へ、診療案内、スタッフ紹介。「初めての方へ」には、「まずは受付にお越しください」「問診票をご記入ください」と書かれています。来院後の流れは、どの病院でも概ね変わりません。今回、整形外科クリニックのウェブサイトを制作するにあたり、出発点をひとつの問いに置きました。「患者さんがこのサイトに来たとき、最初に探す情報は何か。」体のどこかが痛くて、近くの病院を探している。あるいは、通っている病院で今日の状況を確かめたい。どちらも、行き着く先は「いま開いてる?」です。情報は載っています。ただ、載っていることと、問いに答えていることは別です。そこで、ヒーローセクションを応答に使いました。サイトを開いた瞬間に、今日の日付、現在時刻、診療帯、担当医が表示されます。伝えたいことは、その後ろに置きました。

HOW

すばやく答える

診療時間は、多くの病院サイトで〇△×の一覧表として掲載されています。月曜から土曜まで、午前と午後に〇か△か×。この表は「いつ開いています」を伝えています。ただ、「今日は火曜だから、午前は…」という読み解きは、見る側の作業として残ります。今回のサイトでは、2つの問いを別々の部品で処理し、上から「いま」「いつ」の順に並べました。「いま開いてる?」には、ヒーローセクションの上段が答えます。今日の日付、現在時刻、午前・午後の診療帯を示すタイムラインバー、そして担当医。診療時間外であれば、担当医の欄が「時間外」に変わります。開いていないことも、答えのひとつです。「いつ開いてる?」には、その下の週間カレンダーが答えます。日付をタップすると、その日の午前・午後の時間と担当医が表示されます。休診日を選べば、休診と表示されます。来院後の流れのように、すべての病院で共通する案内は、後ろに置きました。違うことがあるときだけ前に出せばよいと考えました。

見つけてもらう

答えを用意しても、たどり着かなければ届きません。病院を探すとき、「近くの整形外科」や「整形外科 地域名」等と検索するのが一般的ですが、最近はAIに聞く方も増えています。そのとき、サイトの情報が機械に正しく読み取られなければ、候補にすら上がりません。診療時間、所在地、担当医の情報を、検索結果やAI検索が読み取れる形で実装しています。この観点で、あわせて重視したのが表示速度です。ヒーローセクション以降は画像の多いサイトですが、読み込みを遅くする要素をひとつずつ判断して最適化しました。アクセシビリティは96点で、ここは妥協しています。休診日の表示色について、赤の彩度を上げるとサイト全体の色調から浮きます。毒々しくなるより、4点落とす方を選びました。

病院のホームページに最低限必要な情報は?
一般的には、診療時間、アクセス、診療科目、担当医の情報が基本とされています。多くの病院サイトでは、これに加えて理念や院長挨拶、初めての方への案内が掲載されています。ただし、来院前の患者が最初に確認するのは「いま診てもらえるか」「今日は誰が診るのか」という情報です。今回の制作では、この2点をヒーローセクションでリアルタイムに表示し、その他の情報はその後ろに配置しました。
病院のサイトをAIに正しく読み取ってもらうには?
診療時間や所在地、診療科目といった情報を、機械が解釈できる形式で記述する必要があります。画面上で読めることと、機械が読み取れることは別で、画像内の文字や独自のレイアウトで表現された情報は、正しく伝わらない場合があります。あわせて、表示速度も影響します。今回の制作では、診療時間・所在地・担当医の情報を構造化データとして実装し、表示速度についても読み込みを遅くする要素を個別に判断して最適化しています。

WHY

掲示を重視してしまう理由

病院のウェブサイトに並んでいるものの多くは、掲示です。「言った」ことをもって果たしたとする形式で、載せた時点で完了します。読み解けたかどうかは、完了の条件に入っていません。〇△×の表がどの病院でも同じ形のまま残っているのは、載っていない状態を避けるという目的に対して、十分だからです。制作の場では、「見た目を整えたい」「ここをアピールしたい」「患者を増やしたい」といった要望が多く出てきます。どの要望にも、来訪者が何を問うているかという観点は含まれていません。制作会社が要望に真摯に応えた結果、掲示に落ち着きます。「言ったこと」ではなく「伝わったこと」で果たす形にするなら、問いを固定する必要があります。伝わったかどうかは、問いがなければ判定できないからです。

「いま開いてる?」から「いつ開いてる?」へ

先に答えるべき問いは、「いつ開いてる?」ではなく「いま開いてる?」でした。痛みがあって病院を探している人が立っているのは、「いつ」ではなく「いま」の側です。そこで、上から「いま」「いつ」の順に並べました。開いた瞬間に見えるのが「いま開いてる?」への答え、その下が「いつ開いてる?」への答えです。いずれも、その場で答えが出る設計にし、読み解いてもらう形は避けています。問いを「いま」に置くと、答えは時刻によって変わります。静的な表では出せません。掲示ではなく応答になり、作り方としては、ウェブサイトよりちょっとしたアプリケーションに近いものになりました。伝えたいことを削ったわけではありません。リハビリ室の広さも、機器の台数も、同時に施術できる人数も、写真とともに掲載しています。削ったのではなく、順番を決めました。この延長線上に、現在開発を進めているサービスがあります。センサーと連動して、待合室の混雑状況をリアルタイムで表示する仕組みです。「いま開いてる?」の次にある問い——「混んでる?」にも答えられる状態を設計しています。