かぜ、発熱、生活習慣病など
クリニックのホームページの構成と、各部の名前
クリニックのホームページで、来る前にいちばん見られるのは、診療時間と、休診の知らせ、予約の方法です。だから、この3つを最初の画面に集めます。そのうえで、何を診てもらえるか、どんな医師か、初めてのときの流れ、場所の順に、受診の不安を減らしていきます。
図は、内科・小児科「つばめ通りクリニック」の架空のページです。気になる場所か名前を選ぶと、その言葉の説明が開きます。
- お知らせバー
休診や臨時の知らせを、いちばん上の帯で見せる。
- ナビゲーションバー
右端に、電話番号と予約のボタン。いつでも押せる。
- ピル型ボタン
両端の丸いボタン。やさしく、押しやすく見える。
- ヒーローセクション
診療時間まで、最初の画面に入れてしまう。
- チップ(タグ)
診てもらえる科を、小さなタグで先に伝える。
- アクセントカラー
色数をしぼり、予約のボタンだけを濃い色にする。
- 営業時間表
いちばん見られる情報。画像にせず、表で組む。
- アラート
発熱時の注意など、見落とせない案内を色で目立たせる。
- フィーチャーセクション
診てもらえることを、同じ形のカードで並べる。
- ピクトグラム
単純な絵のアイコンで、科の違いがひと目でわかる。
- お知らせ一覧
休診や予防接種の知らせ。種類を色の札で分ける。
- スプリットスクリーン
左半分に絵、右半分に言葉。院長の人柄を伝える。
- ステッパー
予約から受付までの手順。初めての不安を減らす。
- CTAセクション
最後にもう一度、予約へ。スマホの画面も見せる。
- ボトムナビゲーション
スマホでは、電話・予約・地図を画面の下に固定。
- アクセスマップ
地図と道順、駐車場の台数。通う人が知りたいこと。
- フッター
ロゴと行き先の一覧、電話番号をもう一度。
図 クリニックのページの中にある、17の名前。
この構成で、AIに頼む
図と同じ順番と部品で、ページをつくってもらうための文章です。
文章を確かめる
「内科と小児科のクリニック」のホームページ(トップページ)を作成してください。 ページは、上から次の順で組み立ててください。 1. お知らせバー:休診日などの大事な知らせを、一文とリンクひとつで表示する。 2. ナビゲーションバー:左にロゴと診療科、中央にメニュー、右に電話番号と、ピル型の「WEB予約」ボタンを置く。スクロールしても、上に固定して残す。 3. ヒーローセクション:左に、診療科を示す小さなタグ、大きなキャッチコピー、駅からの近さ、「WEBで予約する」ボタンと「電話する」ボタンを置く。右に、診察の場面のやわらかいイラストを置く。その下に、曜日ごとの診療時間表を、白いカードに入れて重ねる。 4. フィーチャーセクション:診療の内容(内科・小児科・予防接種・健康診断)を、アイコン・名前・ひとことの説明のカードにして、4列で並べる。 5. お知らせ一覧:お知らせを新しい順に3件、日付・種類のラベル・タイトルの順で並べる。「休診」のラベルだけ、目立つ色にする。 6. スプリットスクリーン:院長のあいさつを、左半分に医師のイラスト、右半分に見出しと文章を置いた、左右2分割で見せる。 7. ステッパー:初めての人に向けて、予約・問診票の入力・来院の3つの手順を、番号つきのカードで順に並べる。 8. CTAセクション:最後にもう一度、WEB予約へ誘う。短い呼びかけとボタンを左に、スマートフォンでの見え方を右に置く。 9. アクセスマップ:左に地図、右に、住所・最寄り駅からの道順・駐車場の台数と、「地図アプリで開く」リンクを置く。 10. フッター:ロゴ、メニューへのリンク、電話番号、コピーライトを置く。 あわせて、次の部品を入れてください。 ・アラート:発熱やせきのある人への注意を、黄色の地と注意のアイコンで目立たせて、最初の画面のすぐ下に置く。 ・ボトムナビゲーション:スマートフォンでは、画面の下に「電話・WEB予約・アクセス」の3つのボタンを固定して、常に表示する。 全体は、白と淡い緑を基調に、青緑を1色だけアクセントカラーにした、清潔でやさしい雰囲気にしてください。予約のボタンだけを濃い色にし、角は丸めてください。写真のかわりに、やわらかいフラットイラストを使ってください。 スマートフォンでも読みやすいレスポンシブ対応にし、見出し・本文・ボタンに一貫したルールを適用してください。写真は、仮の画像でかまいません。

