🏥 デモサイトを実際に操作できます
処方箋事前送信・AIチャット・営業カレンダーなどを実際にお試しください。
「薬局のホームページ、そろそろリニューアルしたい」
「2024年の調剤報酬改定でWeb掲示が義務化されたと聞いたが、何を載せればいいかわからない」
——そんな薬局経営者・管理薬剤師の方に向けて、Pharmapiaが制作したデモサイトを公開します。
このデモサイト「みどり薬局」は、法的必須項目を完全網羅しながら、患者体験（UX）を最大化することをコンセプトに設計した、調剤薬局向けのホームページサンプルです。実際に薬局HPを制作・リニューアルする際の参考にしてください。
このデモサイトでわかること
- 2024年調剤報酬改定で義務化されたWeb掲示事項の網羅方法
- 「待ち時間ゼロ」体験を実現する処方箋事前送信フォームの実装例
- AIチャットウィジェット（Claude API）の薬局サイトへの組み込み方
- スマートフォンファーストのレスポンシブデザイン設計
- 地域密着型薬局らしい温かみのあるビジュアル設計
デモサイト「みどり薬局」の設定
デモサイトは架空の調剤薬局「みどり薬局」を想定して制作しました。実際の薬局への制作時は、各薬局の届出状況・加算体制に合わせてカスタマイズします。
| 薬局名 | みどり薬局（架空） |
|---|---|
| コンセプト | 地域密着型・かかりつけ薬局 |
| 技術スタック | HTML / CSS / Vanilla JS（外部ライブラリなし） |
| 対応機能 | 処方箋事前送信、AIチャット、営業カレンダー、掲示情報ページ |
| 法的対応 | 2024年調剤報酬改定の掲示義務15項目に完全対応 |
【スクリーンショット】サイトのデザインと機能紹介
① ファーストビュー（ヒーローセクション）
「あなたの健康を、地域でそっと支えます」
——サイトを訪問した患者さんが最初に目にするヒーローセクションです。薬局らしい深みのある緑をメインカラーに採用し、温かみのあるオレンジのCTAボタンで処方箋事前送信へ誘導します。
- 固定ヘッダーに電話番号を大きく表示（スマホでワンタップ電話対応）
- 「処方箋を事前送信する」（オレンジ）と「オンライン相談」（アウトライン）の2段階CTA
- 右下固定のAIチャットアイコン（常に相談しやすい状態に）
- SVGの葉・十字アイコンでデコレーション（軽量）
② 薬局の特長カード
6つの特長をカード形式で視覚的に整理。「かかりつけ薬剤師」「在宅訪問対応」「ジェネリック対応」「処方箋ネット受付」「マイナ保険証対応」「健康相談」を、アイコンとシンプルなテキストで伝えます。
③ 処方箋事前送信フォーム
患者さんの待ち時間を削減する、薬局HPの差別化機能です。
お名前・生年月日・電話番号・処方箋画像アップロード・アレルギー情報を送信でき、薬局側で事前に調剤準備ができます。
- ドラッグ＆ドロップ対応のファイルアップロードエリア（JPG/PNG/PDF、最大10MB）
- 送信前のリアルタイムバリデーション（未入力・形式エラーを即座に表示）
- 送信後はモック確認画面を表示（「準備ができたらご連絡します」）
- フォームにはデモ環境の明記を必ず入れる（実際の導入時は削除）
④ AIお薬相談ウィジェット
Claude（Anthropic API）を活用した、薬局サイト向けAI相談ウィジェットです。
「市販薬の飲み合わせ」「ジェネリック医薬品の違い」「お薬手帳の使い方」など、一般的な薬に関する質問にAIが回答します。
- Claude（claude-sonnet-4-20250514）を薬局スタッフとして設定
- 「診断・処方は行わない」「かかりつけ薬剤師にご相談ください」と案内
- 免責事項をチャットウィンドウ上部に常時表示
- チャット展開時はスムーズなスライドインアニメーション
⑤ 営業時間・診療カレンダー
Vanilla JavaScriptで実装したリアルタイム営業状況表示と翌月カレンダー。「本日は営業中（受付 18:00まで）」などのステータスをページロード時に自動判定して表示します。
⑥ FAQアコーディオン
患者さんからよく寄せられる質問をアコーディオン形式でまとめています。「処方箋の有効期限」「ジェネリック医薬品への切り替え」「マイナ保険証の使い方」など、薬局スタッフの負担を減らす情報を先回りして提供します。
⑦ スマートフォン表示
薬局HPの閲覧者の多くはスマートフォンユーザーです。モバイルファーストで設計し、ハンバーガーメニュー・電話番号のワンタップ発信・フォームの入力しやすさすべてに配慮しています。
2024年調剤報酬改定対応：掲示義務15項目を完全網羅
2024年の調剤報酬改定により、薬局は下記の情報をホームページに掲載することが原則義務化されました。デモサイトには専用の「掲示情報ページ」を用意し、全15項目に対応しています。
| No. | 掲示項目 | 概要 |
|---|---|---|
| 1 | 薬局開設許可・管理薬剤師 | 開設者名・管理者名・薬剤師一覧 |
| 2 | 取扱保険・公費 | 各種保険・生活保護・特定医療等 |
| 3 | 服薬管理指導料・調剤管理料 | 算定内容の説明 |
| 4 | 明細書発行について | 無料発行・希望しない場合の手続き |
| 5 | 後発医薬品調剤体制加算 | ジェネリック積極対応の旨 |
| 6 | 調剤報酬点数表一覧 | 厚労省告示に基づく一覧 |
| 7 | 個人情報保護方針 | 利用目的・第三者提供・お問い合わせ先 |
| 8 | オンライン資格確認（医療DX） | マイナ保険証対応・薬剤情報取得 |
| 9 | 医療DX推進体制整備加算 | マイナ保険証・電子処方箋等の5項目 |
| 10 | 地域支援体制加算 | 対応体制の説明 |
| 11 | かかりつけ薬剤師指導料 | 算定要件・患者への説明 |
| 12 | 長期収載品の選定療養 | 先発品希望時の自己負担について |
| 13 | 連携強化加算 | 災害・感染症対応体制 |
| 14 | 健康サポート薬局 | 認定有無と対応内容 |
| 15 | 在宅患者訪問薬剤管理料 | 在宅対応体制 |
※ 実際の薬局への制作時は、各加算の届出状況に合わせて内容を更新します。
技術仕様・実装のポイント
jQuery・React等の外部ライブラリを一切使用せず、HTML / CSS / Vanilla JSのみで実装しています。表示速度が速く、依存関係のトラブルがありません。ページ全体のコードが読みやすいため、文言変更も容易です。
| 機能 | 実装方法 |
|---|---|
| ハンバーガーメニュー | Vanilla JS classList toggle（ESCキー・外クリック対応） |
| 営業時間カレンダー | Date APIで翌月分を自動描画 |
| 本日の営業状況表示 | 曜日・時間判定（営業中/受付終了/休診日） |
| FAQアコーディオン | classList toggle + max-height CSS transition |
| フォームバリデーション | inputイベントでリアルタイム検証 + FileReader |
| スクロールフェードイン | Intersection Observer API |
| AIチャットウィジェット | Fetch API → Anthropic API（claude-sonnet-4-20250514） |
薬局HP制作のご相談はPharmapiaへ
薬局のホームページは、2024年の制度改定以降、単なる「広告」ではなく法的な掲示板としての役割を持つようになりました。同時に、処方箋事前送信・AIチャットのようなUX機能を加えることで、患者さんの体験価値を高め、薬局の差別化にもつながります。
Pharmapiaは薬剤師資格を持つ制作者が在籍しており、制度対応の正確性とWebの使いやすさを同時に担保できる点が強みです。
「うちの薬局にもこんなHPを作りたい」というご相談はお気軽にどうぞ。
※「みどり薬局」はデモ用フィクションです。実在する薬局・法人とは一切関係ありません。
