← ポートフォリオに戻る

制作例

開業医向けのウェブサイト

診療時間や順番待ちを自動で表示し、患者が迷わず受診できるようにするクリニックのウェブサイトです。医療広告等ガイドラインで問題になりやすい表現を、原稿の段階で洗い出す道具も添えています。このページのデモは、架空の内科・小児科のクリニックで作ったものです。

架空のクリニックによる展示用です。実在の医療機関ではありません。医院名・医師・住所・電話番号・受付状況はすべて架空で、電話や予約はできません。

解いている課題
診療所のウェブサイトは、患者が受診の前に最初に見る場所です。診療時間、休診日、混み具合、初めて行くときの持ち物がすぐに分からないと、電話の問い合わせが増えます。また、ウェブサイトは医療広告の規制の対象で、比較・誇大な表現や体験談には注意が要ります。
位置づけ
制作の例として作ったデモです。実際の医療機関では運用していません。
担当
企画、設計、実装を一人で担当しています。
技術
Next.js、TypeScript、Tailwind CSS。診療時間表から、診療中の表示、次の診療の案内、検索エンジン向けの構造化データ(schema.org の MedicalClinic)を同じデータから作ります。お知らせからは、X・Instagram・LINE 公式アカウント向けの投稿の下書きを作ります。外部の地図・予約サービス・フォントは読み込みません。
医師が作る意味
医療広告等ガイドラインへの配慮と、受診する人の動線を、最初から設計に入れられます。たとえば発熱の枠を「○○外来」と書かない、急な症状には受付の画面ではなく 119 番を案内する、といった点です。ただし表現チェッカーは見直しの補助で、最終的な確認は人がガイドラインに照らして行います。

デモ: 架空のクリニックのサイト

医院名・医師・住所・電話番号・待ち人数はすべて架空です。

シミュレーション日時

実際の現在時刻ではなく、ここで選んだ日時で表示します。

https://clinic.example/架空

内科・小児科

ほしなみ内科・こどもクリニック架空

お子さまから大人まで、地域のかかりつけとして

診療中シミュレーション: 月曜 10:00
一般の診療
ただいまの枠(受付は 11:45 まで)
発熱などの症状がある方の診察時間
次は 本日 14:30〜

一般の診療の順番待ち架空のサンプル値

11 人待ち(目安 66 分)

受付は各枠の終了 15 分前までです。目安の時間は診察の内容で前後します。

お知らせ

  • インフルエンザの予防接種の受付を始めました
  • 臨時休診のお知らせ
  • Web での受付の案内を新しくしました

診療時間

時間月火水木金土日祝
午前9:00〜12:00診療(今の枠)診療診療診療診療診療休診休診
発熱などの症状がある方14:30〜15:00診療診療休診診療診療休診休診休診
午後15:00〜18:00診療診療休診診療診療休診休診休診

休診日: 水曜午後・土曜午後・日曜・祝日。受付は各枠の終了 15 分前までです。 発熱などの症状がある方は、一般の診療と時間を分けています。来院の前にお電話ください。

初診の方へ

お持ちいただくもの

  • マイナ保険証 または 資格確認書
  • お薬手帳(お持ちの方)
  • 紹介状(お持ちの方)
  • お子さまは母子健康手帳と医療証

受付から会計まで、混み具合によって時間が変わります。

Web 受付の案内

胸の痛み、息苦しさ、意識がおかしい、けいれんが止まらないなど、急な症状があるときは、この画面ではなく 119 番に電話してください。

来院の目的を選んでください

院長あいさつ

院長 (架空の人物)

内科と小児科の診療を行っています。気になる症状があれば、ご家族そろってご相談ください。

アクセス

〇〇駅当院駐車場
住所
〇〇県〇〇市〇〇町 1-2-3
電車
〇〇駅から徒歩 5 分
駐車場
駐車場 8 台
電話
0X-XXXX-XXXX
このサイトは展示用の架空のものです。実在の医療機関ではありません。

見どころ

  • 上の日時を変えると、「診療中」の表示、次の診療の案内、順番待ちが変わります。診療時間表の該当する枠にも印が付きます。
  • 「Web 受付の案内」で来院の目的を選ぶと、受付の枠と持ち物を案内します。症状から受診先を判断することはしません。
  • スマートフォンの表示では、電話と受付のボタンを画面の下に固定します。デモではどちらも押しても発信・予約しません。

SNS 投稿の下書き

サイトのお知らせから、X・Instagram・LINE 公式アカウント向けの下書きを作り、文字数と医療広告の表現を確かめます。

  • X169 / 280(重み付きの文字数の目安)

    【ほしなみ内科・こどもクリニック】インフルエンザの予防接種の受付を始めました 予防接種は事前の予約制です。お子さまは母子健康手帳をお持ちください。 https://clinic.example/news/vaccine

    一覧の語は見つかりませんでした

  • Instagram107 / 2200 文字

    インフルエンザの予防接種の受付を始めました 予防接種は事前の予約制です。お子さまは母子健康手帳をお持ちください。 詳しくはプロフィールのリンクからご覧ください。 #予防接種 #インフルエンザ #内科 #小児科

    一覧の語は見つかりませんでした

  • LINE 公式アカウント102 / 5000 文字

    インフルエンザの予防接種の受付を始めました 予防接種は事前の予約制です。お子さまは母子健康手帳をお持ちください。 詳しくはこちら https://clinic.example/news/vaccine

    一覧の語は見つかりませんでした

展示用のため、投稿はしません。SNS の投稿も医療広告の規制の対象です。実際に運用するなら、各サービスの公式 API と利用条件を確かめたうえで予約投稿の仕組みを作り、公開の前に人が確かめる工程を挟みます。下書きはテンプレートから作っており、生成 AI は使っていません。

医療広告の表現チェッカー

ウェブサイトの原稿を入れると、医療広告で確かめたほうがよい表現に印を付けます。対象は日本語の文です。

要確認の表現例

10 か所

地域で一番1の名医2が、最新の治療3で必ず治4します。 当院のインフルエンザ予防接種は今だけ5半額6キャンペーン7中です。 患者様の声8: 「他院より9待ち時間が短く、痛くない10検査でした」 最高血圧が高めの方は、健康診断の結果をお持ちください。

  1. 1.「地域で一番」比較・最上級の表現

    他の医療機関より優れていると示す表現は、事実でも広告に使えません。

    見直しの例: 順位ではなく、診療日や診療体制などの事実を書く

  2. 2.「名医」誇大・断定の表現

    効果や安全性を言い切る表現は、誤認させるおそれがあります。

    見直しの例: 経歴や資格など、確かめられる事実だけを書く

  3. 3.「最新の治療」比較・最上級の表現文脈によります

    他の医療機関より優れていると示す表現は、事実でも広告に使えません。

    見直しの例: 「最新」と書くなら、機器の名前や導入した年など確かめられる事実にする

  4. 4.「必ず治」誇大・断定の表現

    効果や安全性を言い切る表現は、誤認させるおそれがあります。

    見直しの例: 効果を言い切らず、治療の内容と、効果に個人差があることを書く

  5. 5.「今だけ」費用や期限で誘う表現

    値引きや期限で受診を急がせる表現は、品位を損ねる広告に当たるおそれがあります。

    見直しの例: 値引きや期限で受診を急がせず、通常の費用を書く

  6. 6.「半額」費用や期限で誘う表現

    値引きや期限で受診を急がせる表現は、品位を損ねる広告に当たるおそれがあります。

    見直しの例: 値引きや期限で受診を急がせず、通常の費用を書く

  7. 7.「キャンペーン」費用や期限で誘う表現

    値引きや期限で受診を急がせる表現は、品位を損ねる広告に当たるおそれがあります。

    見直しの例: 値引きや期限で受診を急がせず、通常の費用を書く

  8. 8.「患者様の声」体験談文脈によります

    治療の内容や効果に関する患者の体験談は、ウェブサイトに載せられません。

    見直しの例: 治療の内容や効果に関する患者の感想は載せない

  9. 9.「他院より」比較・最上級の表現

    他の医療機関より優れていると示す表現は、事実でも広告に使えません。

    見直しの例: 他の医療機関と比べず、自院の取り組みだけを書く

  10. 10.「痛くない」誇大・断定の表現

    効果や安全性を言い切る表現は、誤認させるおそれがあります。

    見直しの例: 痛みを和らげる工夫と、起こりうる副作用・リスクを書く

これは法的な判断ではありません。決めた語の一覧と照らすだけなので、一覧に無い表現、画像、事実と違う記載は見つけられません。区分も例であり、ガイドラインを網羅していません。見直しの例も、そのまま使えば問題が無くなるわけではありません。

SEO の点検

検索で見つけてもらうための点検表です。「確認済み」の 2 項目は、このデモが実際にデータを突き合わせています。

  • 確認済み構造化データの診療時間と、診療時間表の一致曜日ごとに分単位で突き合わせます。ずれていると、検索結果に違う時間が出ることがあります。
  • 確認済み医院名・住所・電話の表記の一致サイトと構造化データで揃えます。Google ビジネスプロフィールの表記とも揃えます(こちらは人が確かめます)。
  • 公開前に確認ページごとの title と description診療案内、アクセス、初診の方へなど、ページごとに内容に合った文を付けます。
  • 公開前に確認正規 URL(canonical)各ページが自分自身を指しているかを、公開後に実際の HTML で確かめます。
  • 公開前に確認スマートフォンでの表示電話と受付のボタンを画面下に固定し、文字の大きさと押しやすさを確かめます。
  • 公開前に確認サイトマップと Search Consoleサイトマップを送り、インデックスの状況を定期的に確かめます。

検索エンジン向けのデータ(出力例)

診療時間表と同じデータから、schema.org の MedicalClinic を作ります。続いている枠はつなげ、曜日ごとに書きます。架空の医院を実在と誤認させないよう、このページには埋め込まず、値もプレースホルダーにしています。

{
  "@context": "https://schema.org",
  "@type": "MedicalClinic",
  "name": "(架空)ほしなみ内科・こどもクリニック",
  "url": "https://clinic.example/",
  "telephone": "0X-XXXX-XXXX",
  "medicalSpecialty": [
    "https://schema.org/PrimaryCare",
    "https://schema.org/Pediatric"
  ],
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "JP",
    "streetAddress": "〇〇県〇〇市〇〇町 1-2-3"
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Monday",
      "opens": "09:00",
      "closes": "12:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Monday",
      "opens": "14:30",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Tuesday",
      "opens": "09:00",
      "closes": "12:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Tuesday",
      "opens": "14:30",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Wednesday",
      "opens": "09:00",
      "closes": "12:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Thursday",
      "opens": "09:00",
      "closes": "12:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Thursday",
      "opens": "14:30",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Friday",
      "opens": "09:00",
      "closes": "12:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Friday",
      "opens": "14:30",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday",
      "opens": "09:00",
      "closes": "12:00"
    }
  ]
}