つくり方の全容。

クリニックの状態は、時刻によって 1日のうちに何度も変わります。午前診療中 / 昼休み中 / 午後診療中 / 診療終了 / 本日休診、そして混雑度。これを全部、サイト側で計算しています。書いてあるのは、スプレッドシートに「午前は 8:30-12:00、午後は 15:00-19:00、木曜と日曜は休診、土曜の午後は休診」という事実だけ。サイトを開いた瞬間に現在時刻と照らし合わせて、ふさわしい一行を選んで大きく表示する。受付の人が触ることはなく、24時間ずっと正確です。

出した指示クリニックの「いま」が一目で分かるサイトを作りたい。営業時間と定休日をスプレッドシートに書いておけば、午前診療中なのか、昼休みなのか、本日終了なのか、本日休診なのかを、サイト側が現在時刻から自動で判定して、ファーストビューの一番大きな場所で実況する形に。

サイトの作り手と店主の間でいちばん起きやすい事故は、「あの欄、どこを書き換えたら何が変わるのか分からない」です。なのでスプレッドシートの見た目を、サイトの表とそのまま同じ並びにしました。横が曜日、縦が午前と午後、セルが ○ か ✕。サイトに出ている表をそのままスプレッドシートで開いている感覚で、迷いません。木曜を休診にしたければ木曜の列を ✕ に、土曜午後だけ休みにしたければ土曜午後を ✕ に。それだけ。

出した指示スプレッドシートの見た目をサイトの表と同じレイアウトにしてほしい。横軸が月 - 日/祝、縦が午前と午後で、セルが ○✕ になる形。普通の「項目 / 値」の縦長リストではなく、サイトの診療時間表とそっくりに。書き換えた瞬間にどこが変わるか視覚的に分かるように。

クリニックの受付は、患者さんの応対で常に忙しい。待ち時間を逐一更新するのは「やってられない」運用です。なので受付が日々触るのは、混み具合のセルだけ。「空きあり」「混雑中」「受付終了」の3つから選ぶ形にしました。朝シャッターを開けるときに 1度、満員になったら 1度、それくらいの粒度です。サイト側はこの値を受け取って、信号機の色で表示する。詳細な「待ち人数」や「待ち時間」は無理に作らない。受付の運用が破綻しない最小限の入力に絞ります。

出した指示受付の人が手で更新するのは、混み具合のドロップダウンだけにしたい。それ以外の営業時間や臨時休診は事前にスプレッドシートに書いておけば自動で動く形に。混み具合は「空きあり / 混雑中 / 受付終了」の 3 段階で、信号の色で表示する。

クリニックのサイトは、清潔すぎると冷たく、親しみを足しすぎると安っぽくなりがちです。今回は白基調 + 水色アクセント 1色 + 丸ゴシック書体でその境目を狙いました。タイトルやステータス文は Zen Maru Gothic という丸ゴシック書体で、輪郭が柔らかい。だけど色は白と水色のクリーンな組み合わせ。写真は左上の角を斜めにカットした台形にして、左カラムの文字情報と視覚的につなげています。清潔だけど来やすい温度感を目指しました。