「西尾薬局様」ホームページ制作

富山市の調剤薬局「西尾薬局」様（株式会社オルタナ）のホームページをリニューアル制作しました。

昭和30年の創業から70年以上にわたり地域医療を支えてこられた薬局で、富山市内に保険調剤薬局5店舗を展開されています。あわせて、アロマ・ハーブ・漢方を扱う「フローラメディカ」を1店舗運営されており、商品販売だけでなく資格取得講座やワークショップの開催、健康相談まで手がけておられます。

最大の課題：性格の異なる2つの事業を、1つのサイトにどう収めるか

今回の制作で最初に決めなければならなかったのが、「西尾薬局」と「フローラメディカ」という2本の柱をどう扱うかでした。

調剤薬局は医療機関です。清潔感と信頼性が求められ、営業時間や住所といった実用的な情報を、迷わせずに届けることが第一になります。

一方のフローラメディカは、植物を使ったセルフケアを提案する場です。教室に通う方やオリジナル商品を求める方が対象で、求められる印象も動線もまったく違います。

サイトを2つに分ける選択肢もありました。実際、事業ごとにドメインを分ける薬局様も少なくありません。

ただ、それをやると更新の手間もコストも二重になります。ドメインもサーバーも2つ、WordPressの管理画面も2つ、保守も2件分。日々の業務の合間に更新される薬局様にとって、これは現実的な負担ではありません。

そこで、1つのサイトの中に2つの世界を同居させるという方針を採りました。以下は、そのために行った設計です。

設計①：書体と色で、2つの事業に別々の「人格」を持たせる

同じサイトの中で事業の切り替わりを伝えるために、書体と色を分けました。

• 西尾薬局：ゴシック体 × グリーン。読みやすく、医療機関としての誠実さが出る組み合わせです
• フローラメディカ：明朝体 × ピンク。線の細い明朝体は植物や香りの繊細さと相性がよく、やわらかい印象になります

ページ全体を作り分けるのではなく、共通のパーツにクラスを1つ足すだけで書体と配色が切り替わる仕組みにしています。見た目は別世界でも、中身は1つのテーマで動いているという状態です。

これにより、デザインの統一感を保ちながら、修正が発生したときの改修箇所も1か所で済みます。

設計②：ヘッダーとフッターを左右に分ける

ナビゲーションは、左側に西尾薬局のメニュー、右側にフローラメディカのメニューという構成にしました。

お知らせ・会社概要・店舗紹介・採用情報が左、教室案内・ショップ・Instagramが右です。

フッターも同じ考え方で、左に「FARMACIA NISHIO」、右に「FLORA MEDICA」と、ロゴごと領域を分けています。

どのページを見ていても、画面の上下に必ず「この会社には2つの顔がある」ということが提示される構造です。処方せんを持ってサイトに来た方が教室の存在を知り、教室を探して来た方が薬局の存在を知る。一方の入口が、もう一方の入口になることを狙っています。

設計③：ページごとに、出すバナーを変える

画面右下には固定バナーを配置していますが、ページによって出し分けています。

• トップページ・店舗紹介・会社概要など：採用情報へのバナー
• フローラメディカページ：教室予約フォームへのバナー
• 採用情報ページ：薬剤師・調剤事務それぞれの問い合わせバナーを2枚

その画面を見ている人が次に取るであろう行動は、ページごとに違います。教室を探している方に採用バナーを出しても意味がありません。「今そのページにいる人にとって、次の一歩は何か」を基準に出し分けました。

あわせて、バナーには×ボタンを付け、閉じたら同じ訪問中は再表示されないようにしています。フッターまでスクロールすると自動で消える設定も入れました。

固定バナーは効果がある反面、消せないと読む邪魔になります。スマートフォンでは特にそうです。訴求は残しつつ、閲覧の妨げにはしない。この線引きは、患者さまが見るサイトである以上、外せないと考えています。

フローラメディカページ：更新の手間を増やさずに、最新情報を出し続ける

教室を運営されている以上、開講内容は毎月変わります。ここが固定ページのままだと、更新のたびにHTMLを触ることになり、結局更新されなくなります。

そこで、フローラメディカページの「教室案内」には、お知らせの「教室案内」カテゴリに投稿された最新記事が自動で表示されるようにしました。

薬局様は普段どおりお知らせを1本投稿するだけで、フローラメディカページの内容も切り替わります。更新作業を1回に減らし、表示先を2か所にするという考え方です。

その下には、通年で開講している講座を体系立てて掲載しました。

• アロマテラピー：AEAJ資格対応講座、プロ資格コース
• ハーブ：JAMHA資格対応講座
• 単発講座・フローラメディカの薬箱：和精油講座、ハーブティーブレンド講座など
• その他：ベビービクス、バッチフラワーレメディー

「今月何をやっているか」は自動表示のブロックで、「そもそもどんな講座があるのか」は固定の一覧で見せる。変わる情報と変わらない情報を分けて配置することで、更新の負担を最小限にしています。

教室のご予約は、そのまま予約フォームへ遷移できるようにしました。

採用情報：コーポレートサイトの中に、採用サイトを1ページで作る

採用情報ページは、採用サイトのトップページに相当するデザインで制作しています。

スタッフの写真を散りばめたファーストビューから始まり、メッセージ、動画、取り組み、研修、先輩社員の声、よくある質問まで、1ページで会社を理解できる構成です。

採用サイトを別途立ち上げると費用も工数も跳ね上がりますが、コーポレートサイト内の1ページとして作り込めば、採用の訴求力はかなりの部分まで確保できます。中小規模の薬局様にとっては、費用対効果の高い選択肢だと考えています。

掲載内容は、求職者が実際に気にすることを軸に組みました。調剤機器の導入方針、メンターによるマンツーマン研修、外部研修やeラーニングの費用補助、希望休の取得実績、急な休みへの対応体制。いずれも「制度がある」ではなく、どう運用されているかまで書くことを意識しています。

研修資料を公開する：入社後の姿を、想像ではなく資料で見せる

採用情報ページとよくある質問ページには、実際に使用している研修チェックリストをPDFで公開しました。

求職者、特に新卒や未経験の方が最も不安に思うのは、「入ってから自分がやっていけるのか」という点です。

「研修制度が充実しています」という一文では、この不安は消えません。何を、どの順番で、どこまで身につけるのかが書かれた資料そのものを見せるほうが、はるかに説得力があります。

入社後に自分がどう成長していくのかを、具体的にイメージしてもらうための掲載です。

Googleしごと検索への対応：2職種なので、募集要項も2ページに分ける

薬剤師・調剤事務それぞれの募集要項ページに、JobPosting構造化データを実装しています。

Googleしごと検索とは、求人を検索したときにGoogle検索結果の上部へ専用枠で表示される機能です。求人サイトに掲載していなくても、自社サイトの募集要項をGoogleに直接認識させることができます。

ここで実務上のポイントになるのが、構造化データは1ページにつき1つの求人しか記述できないという点です。

薬剤師と調剤事務を1ページにまとめてしまうと、どちらか一方しかGoogleに認識されません。だからこそ、職種の数だけ募集要項ページを分ける必要があります。西尾薬局様で募集要項を2ページに分けているのは、この理由によるものです。

記述内容も細かく詰めました。

• 正社員とパートの両方の雇用形態を記述
• 月給と時給の両方の給与形態を並記
• 仕事内容・休日・手当・応募資格まで詳細に記載
• 自社サイトから直接応募できることを示す指定を追加

一方、ページ上の表示は正社員／パートをタブで切り替える形にしています。構造化データは網羅的に、画面表示は見やすく。この2つは目的が違うので、作り分けています。

西尾薬局様は募集要項に「当ホームページから直接応募いただいた方を優先的に対応いたします」と明記されています。自社サイトから直接応募が入る導線を持つことは、人材紹介手数料を考えれば、薬局にとって大きな意味を持ちます。

よくある質問：採用ページと相互リンクさせて、回遊率を上げる

よくある質問ページは、勤務／お休み／待遇・福利厚生／その他の4カテゴリをタブで切り替える構成にしました。

ここで工夫したのが、採用情報ページとの相互リンクです。

• 採用情報の「機械の積極的な導入」→ よくある質問の調剤機器の項目へ
• 採用情報の「研修制度の充実」→ よくある質問の教育体制の項目へ
• よくある質問の各回答 → 採用情報の該当セクションへ

いずれもページ内の該当位置へ直接着地するアンカーリンクにしているので、飛んだ先で目的の箇所を探す必要がありません。

採用情報ページでは方針を、よくある質問では具体名や数字を書く。同じ話題を2ページに分け、行き来できるようにすることで、読む側は知りたい深さに応じて情報を掘れますし、サイト全体の回遊率も上がります。

実際、よくある質問には導入している調剤機器の製品名やメーカーサイトへのリンク、退職金の試算額、残業時間の実績値、スタッフの平均年齢まで掲載されています。ここまで書ける会社は多くありません。書ける会社が書けば、それ自体が差別化になります。

店舗紹介：6拠点を1ページに、店舗ごとのLINE公式アカウントとともに

店舗紹介ページでは、フローラメディカと保険調剤5店舗を1ページに並べています。

営業時間は曜日ごとに異なり、隔週で開閉する店舗もあるため、曜日と時間を対にした表組みで誤読が起きないようにしました。キャッシュレス対応の有無も各店舗に明記しています。

また、各店舗にはそれぞれLINE公式アカウントの友だち追加ボタンを設置しました。処方せんの送信やお薬の相談をLINEで受け付けるための導線です。

店舗ごとにアカウントが分かれているため、患者さまはご自身が利用する店舗のアカウントだけを登録すればよく、薬局側も店舗ごとに対応できます。

制作費を抑える工夫：一部のページはお知らせ投稿で対応

調剤薬局に掲示が義務づけられている「薬局掲示事項」のページと、健康相談のご案内ページについては、固定ページとして制作せず、お知らせの投稿で対応いただく形にしました。フッターやフローラメディカページから、その投稿へリンクを張っています。

ページを1枚設計して作るごとに、当然ながら制作費は上がります。一方で、掲載は必要でも凝ったレイアウトを必要としないページもあります。そうしたページを投稿に振り分けることで、全体の制作費を抑えられます。

そのために、投稿画面のエディタには見出しや箇条書きの装飾がワンクリックで適用される仕組みを組み込んでいます。HTMLを書かなくても、サイトのデザインに沿った体裁のページになります。

限られた予算をどこに使うかは、制作者側から提案すべきことだと考えています。トップページ・採用情報・フローラメディカのように成果に直結するページには手をかけ、そうでないページは作り方を変える。この配分を最初に決めておくと、同じ予算でもサイト全体の完成度が変わってきます。

複数の事業を持つ薬局のホームページ制作について

西尾薬局様のように、調剤薬局に別の事業が併設されているケースは決して珍しくありません。健康食品や化粧品の販売、介護用品のレンタル、鍼灸院や整体の併設、教室の運営など、形はさまざまです。

こうした場合、サイトを分けるか、1つにまとめるかは最初に決めておくべき論点になります。あとから変更すると、URLの移行やデザインの作り直しが発生し、費用も手間も余計にかかります。

今回は、更新の負担と維持コストを踏まえて1つにまとめる判断をし、そのうえで書体・配色・ナビゲーションの分割によって2つの事業を見分けられる設計にしました。事業の規模や運営体制が違えば、答えは変わります。分けたほうがよい薬局様もあります。

弊所では、管理薬剤師として10年以上現場に立ってきた経験があるため、「在宅」「無菌調剤」「一包化監査」といった言葉の意味を、説明していただかなくても理解できます。

打ち合わせで業務の説明から始める必要がないぶん、何をどう見せるかという本題に時間を使えます。今回のように、事業構造そのものをどう整理するかという議論ができるのも、そこが前提にあるからだと考えています。

西尾薬局様のホームページ、ぜひご覧ください。