MAIL [email protected] 相談・お見積もりは無料
無料相談 CONTACT
デザイン

【厳選】オシャレな薬局ホームページのデザイン事例6社をまとめてみた

HomeBlog / 【厳選】オシャレな薬局ホームページのデザイン事例6社をまとめてみた

記憶に残る薬局のホームページは、きれいなサイトではなく、何かを1つだけ極端にやっているサイトです。

薬局のサイトは似た形になりがちです。白と水色、笑顔の写真、上から「ごあいさつ・店舗案内・採用情報」。悪くはないのですが、10軒見ると全部同じに見えます。ここでは実際に公開されている6つのサイトを取り上げて、それぞれが何を捨てて何に振り切ったのかを書きます。自分の薬局で真似するとしたらどこか、という目で読んでみてください。

自分薬局(奈良)── 文字を縦に組む

自分薬局は、奈良市と大和郡山市を中心に8店舗を展開する薬局です。トップページを開くと、画面の左端に「自分を新しくするファーマシー」という言葉が縦に組まれています。

自分薬局のトップページ(jibun-pharmacy.com のスクリーンショット)
自分薬局のトップページ(jibun-pharmacy.com のスクリーンショット)

日本語を縦書きにするだけで、画面は一気に静かになります。横書きの見出しは読み流されますが、縦組みは目が止まる。書店の平積みや、雑貨店の看板と同じ効果です。英字にはCinzelという細いセリフ体、差し色は金色。薬局というより、暮らしの店の佇まいに寄せています。

捨てているのは「医療機関らしさ」です。清潔感を青で表現する定番をやめて、木の什器が並ぶ店内写真を大きく見せています。

ねこねこ薬局 ── パソコンでもスマホの幅で見せる

ねこねこ薬局は、パソコンで開いても、画面の中央にスマホくらいの幅で内容が縦に流れます。両脇は淡いピンクの余白と、ゆるい曲線のイラストで埋めています。

ねこねこ薬局のトップページ(nekoneko-pharmacy.com のスクリーンショット)
ねこねこ薬局のトップページ(nekoneko-pharmacy.com のスクリーンショット)

普通は逆をやります。パソコンでは横に2列3列と並べて、情報量が多く見えるようにする。このサイトはそれを捨てて、どの端末で見ても同じ1本の流れになるようにしています。患者さんがスマホで見ることを前提にすれば、こちらのほうが理にかなっています。

猫のシルエットが背景に大きく敷いてあり、名前とデザインが最初から最後までつながっています。マスコットを右下に小さく置いて終わりにしない、という判断です。

三気堂薬局(熊本)── カプセルの形をレイアウトに使う

三気堂薬局のトップには、オレンジと白に塗り分けられた大きなカプセルの形が置かれ、その中で「地域のそばに/BESIDE PHARMACY」という言葉と街並みのイラストが切り替わります。背景は水彩のかすれが残る水色。

三気堂薬局のトップページ(sankido-kumamoto.com のスクリーンショット)
三気堂薬局のトップページ(sankido-kumamoto.com のスクリーンショット)

薬のカプセルという、薬局なら誰でも持っているモチーフを、飾りではなく画面の骨格に使っているのが面白いところです。ロゴにも同じ形が入っていて、看板・名刺・サイトが同じ記号でつながります。

写真を1枚も使わずにここまで印象を作れる、という例でもあります。店舗の写真がまだ用意できない段階でも、この方向なら成立します。

榎本調剤薬局(立川)── 色を1つに絞る

榎本調剤薬局は、立川市内で4店舗を運営する薬局です。サイトで使っている色は、ほぼミントグリーン1色だけ。イラストも細い線でその1色、文字も極細のゴシックで、余白がとにかく広い。

榎本調剤薬局のトップページ(enomoto-pharmacy.com のスクリーンショット)
榎本調剤薬局のトップページ(enomoto-pharmacy.com のスクリーンショット)

色数を減らすほど、写真や文章の質が問われます。逃げ場がないので、ごまかしが効きません。その代わり、うまくいけば「静かで清潔」という印象だけが残ります。「おくすりに まっすぐ」というキャッチを、あえて上下にずらして大きく置いているのも、余白を怖がっていない証拠です。

ページを切り替えたときの動きがなめらかなのも特徴で、これは読み込みのたびに画面が白く点滅しないよう作られているためです。細かいところですが、体感の質に効きます。

足立いつき薬局 ── サービスをそのまま看板にする

足立いつき薬局は「待ち時間のない薬局」を掲げていて、トップページがそのまま使い方の説明になっています。LINEで処方箋の画像を送る、店頭で受け取る、または自宅で受け取る。この3ステップが最初に出てきます。

足立いつき薬局のトップページ(adachi-itsuki-pharmacy.com のスクリーンショット)
足立いつき薬局のトップページ(adachi-itsuki-pharmacy.com のスクリーンショット)

理念やあいさつではなく、患者さんが得することを先に出す構成です。画面は鮮やかな青一色で、こちらもスマホ幅を主役にしています。文字はZen Kaku Gothic Newという読みやすいゴシック。

サイトを見た人にしてほしい行動が1つに決まっていると、デザインはここまで単純になります。逆に言えば、盛り込む要素が多いサイトは、してほしいことが決まっていないだけかもしれません。

FREERUN JOURNAL ── 薬局サイトの体裁を捨てる

FREERUN JOURNALは、くるーず薬局が運営する採用向けのウェブメディアです。開くと灰色の画面に朱色の太いロゴタイプが1つ、下に小さく「scroll」とあるだけ。薬局の情報は最初の画面に何もありません。

FREERUN JOURNAL のトップページ(freerunjournal.net のスクリーンショット)
FREERUN JOURNAL のトップページ(freerunjournal.net のスクリーンショット)

採用サイトを会社案内の延長で作るのをやめて、雑誌として作った例です。スタッフの記事が並び、地域の話題も載っています。丸みのある独特な書体と、朱色に蛍光イエローという配色は、医療とは普通は結び付きません。それが狙いだと思います。

薬剤師の採用でどこも苦戦している中、「うちで働くとどんな毎日か」を読み物で伝える方法は、他の業種ではもう当たり前になっています。

尖らせるときに外してはいけないもの

デザインに振り切るほど、実用の部分が犠牲になりがちです。上の6サイトはそこを外していません。最低限、次の4つはトップページから2タップ以内に置いてください。

  • 営業時間と定休日
  • 地図と駐車場の有無
  • 電話番号(スマホでタップして発信できる形)
  • 処方箋の送り方(FAXやLINEに対応しているなら、その手順)

患者さんがホームページを開く理由のほとんどは、この4つのどれかです。世界観を作り込んでも、ここが3階層下に埋まっていると、来院前に離脱します。

どこから手をつけるか

6つとも同じ方向には振っていません。文字組み、レイアウトの幅、形、色数、導線、コンテンツの種類。尖らせる場所は1つで十分です。2つ以上やると、ただ読みにくいサイトになります。

まず、自分の薬局が持っているもので他所にないものを1つ書き出してみてください。それが待ち時間の短さなのか、店内の雰囲気なのか、スタッフなのか。決まったら、その1つだけをホームページの最初の画面に置く。残りは全部その下です。

こうしたサイトはSANKOU!MUUUUU.ORGといったデザインギャラリーで業種別に探せます。気になったサイトのURLを控えて相談していただければ、実現できるかどうかを含めてお答えします。

掲載しているスクリーンショットは、各サイトを2026年8月18日に閲覧して撮影したものです。デザインの紹介のために引用しており、著作権は各社に帰属します。

CONTACTお問い合わせ

「これ頼めるのかな」という段階で構いません。
いまの困りごとをお聞かせください。相談・お見積もりは無料です。