あおぞら薬局 デモサイトを実際に体験できます
PC・スマートフォン両対応。店舗紹介、オンライン服薬指導、採用情報、問い合わせ導線まで確認できます。
はじめに
Pharmapiaでは、医療・介護・福祉領域の事業者さまに向けて、業種別のデモサイトを制作しています。今回の医療デモサイト⑥は「あおぞら薬局（架空）」です。
調剤薬局のホームページは、患者さんが「今日開局しているか」「どんな相談ができるか」「オンライン服薬指導や在宅訪問に対応しているか」をすぐ確認できることが大切です。あわせて、薬局側にとっては店舗情報、受付時間、掲示事項、採用情報、問い合わせ導線を無理なく管理できる設計が必要です。
このデモでは、白を基調にした明るい薬局写真とネイビーの落ち着いたUIを組み合わせ、地域のかかりつけ薬局らしい安心感を出しました。掲載内容はすべてフィクションで、薬局名・住所・電話番号・スタッフ・求人情報は実在しません。
このデモでわかること
- 薬局サイトで重要な受付時間・営業案内をファーストビュー直下に出す情報設計
- 保険調剤、かかりつけ薬剤師、オンライン服薬指導、在宅訪問などのサービスをカードで整理する見せ方
- 患者さん向けページと、採用候補者向けページを同じサイト内で両立させる構成
- 保険調剤に関する掲示事項を、スマートフォンでも読みやすく掲載するレイアウト
- 問い合わせ、電話、LINE導線をPC・スマホそれぞれに配置する導線設計
- HTML / CSS / Vanilla JSのみで構成する、軽量で管理しやすい静的サイト制作
デモサイト仕様
| 項目 | 内容 |
|---|---|
| サイト名 | あおぞら薬局（AOZORA PHARMACY） |
| 業種 | 調剤薬局・地域のかかりつけ薬局 |
| コンセプト | 白×ネイビーの清潔感、地域密着、迷わず使える導線 |
| キャッチコピー | 「あなたの毎日に、ずっと寄り添う薬局を」 |
| 想定エリア | 静岡県浜松市中央区（架空） |
| 技術スタック | HTML / CSS / Vanilla JS（フレームワーク不使用） |
| フォント | Zen Kaku Gothic New / Noto Sans JP |
| カラー | メイン: #1B3358（ネイビー） / アクセント: #FFD75E（イエロー） / LINE導線: #06C755 |
| 対応デバイス | PC / タブレット / スマートフォン（レスポンシブ） |
| ページ構成 | トップ / 店舗紹介・掲示事項 / オンライン服薬指導 / 採用情報 / お問い合わせ |
| 公開URL | https://demo-aozora.pharmapia.jp/ |
各セクション解説
① ヒーローセクション
トップページの第一印象は、薬局選びの安心感に直結します。あおぞら薬局デモでは、明るい薬局写真を背景に、大きなキャッチコピー、アクセスの目安、土曜営業、駐車場台数をまとめて表示しました。
右側にはPC向けの固定問い合わせ導線、下部にはスマートフォン向けの電話・問い合わせ・LINE導線を配置しています。患者さんが「今すぐ電話したい」「まずは問い合わせたい」と思ったときに、迷わず行動できる構成です。
② サービスカード
薬局のサービスは、患者さんから見ると違いがわかりにくくなりがちです。そこで、トップページでは保険調剤・処方箋受付、かかりつけ薬剤師、オンライン服薬指導、在宅訪問、マイナ保険証・医療DX、健康相談・市販薬相談を6つのカードで整理しました。
それぞれのカードはアイコンと短い説明文だけに絞り、詳しい内容は個別ページや店舗紹介ページへ誘導します。スマートフォンでも1つずつ読みやすく、薬局の強みを短時間で理解できる設計です。
③ オンライン服薬指導ページ
オンライン服薬指導は、初めて利用する患者さんにとって「何を準備すればいいのか」がわかりにくい領域です。このページでは、ご予約、処方箋情報の確認、ビデオ通話による服薬指導、お薬の受け取り・支払いの4ステップで流れを説明しました。
また、対面での服薬指導が必要になる場合や、通信環境、配送料、本人確認についても注意事項として掲載しています。実際の導入時は、薬局の運用方法・配送方法・使用するオンライン服薬指導システムに合わせて内容を調整します。
④ 店舗紹介・保険調剤に関する掲示事項
店舗紹介ページでは、薬局名、所在地、開局時間、駐車場、開設者、管理薬剤師などの基本情報を表形式で掲載しています。あわせて、保険調剤に関する掲示事項の記載例も同じページ内にまとめました。
掲示事項は文章量が多くなりやすいため、項目ごとにカード状のブロックへ分けています。実制作では、各薬局の届出状況、加算体制、地域支援体制、後発医薬品の取扱いなどを確認したうえで、実態に合う内容へ差し替えます。
⑤ スマートフォン表示
薬局サイトはスマートフォンから見られることが多いため、モバイル表示を前提に設計しています。スマートフォンでは、ヘッダーをシンプルにして、下部に電話する・お問い合わせ・LINEの固定ボタンを表示します。
受付時間やサービスカードも1カラムで読みやすく並びます。外出先や通院後にスマートフォンで確認しても、必要な情報へすぐたどり着けることを重視しました。
制作で重視したポイント
薬局らしい信頼感を、硬くしすぎない
医療系サイトは、正確さと信頼感が必要です。一方で、硬すぎる印象になると、患者さんが相談しにくく感じることもあります。今回はネイビーで信頼感を出しつつ、白い余白と明るい写真、イエローのアクセントで親しみやすさを加えました。
患者さん向け情報と採用情報を分けて見せる
薬局ホームページは、患者さんだけでなく求職者にも見られます。あおぞら薬局デモでは、トップページに採用情報への入口を置き、採用ページでは薬剤師・医療事務の募集情報、働き方、選考フローを別ページで整理しています。
実運用時に差し替えやすい静的構成
このデモは、HTML / CSS / Vanilla JSのみで構成しています。小規模な薬局サイトであれば、重い管理画面を持たせず、軽量な静的サイトとして運用する選択肢もあります。写真やテキストは差し替え前提で作っているため、実制作では薬局の実写真、実際の開局時間、届出内容、問い合わせ方法に合わせて調整できます。
薬局ホームページ制作を検討中の方へ
薬局のホームページは、きれいに作るだけでは不十分です。患者さんが必要な情報へすぐたどり着けること、薬局の運用に合わせて無理なく更新できること、そして医療・薬局領域の表現に配慮することが重要です。
Pharmapiaでは、薬剤師の視点を活かしながら、調剤薬局・医療機関・介護福祉事業所向けのWeb制作を行っています。既存サイトの見直し、デモをもとにした新規制作、LINE導線や問い合わせ導線の整理までご相談いただけます。
