薬剤師会向けホームページ 制作デモ｜さくら市薬剤師会
🌿 薬剤師会向けホームページ デモサイト
実際のデザイン・機能をそのままブラウザでご確認いただけます。スマートフォンからもご覧ください。
こちらは Pharmapia が制作した薬剤師会向けホームページのデモサイトです。架空の「公益社団法人 さくら市薬剤師会」を題材に、実際の制作物と同等のクオリティで仕上げました。デザイン・機能・スマホ対応のすべてを実装済みです。
▲ デモサイト全体図（クリックでサイトへ）
サイト概要
| **クライアント想定** | 公益社団法人・地域薬剤師会 |
| **サイト名** | 公益社団法人 さくら市薬剤師会 |
| **コンセプト** | 市民への健康情報発信 ＋ 会員向け業務サポートの両立 |
| **メインカラー** | 深緑 #1A6B4A（信頼・健康・安心） |
| **デバイス対応** | PC・タブレット・スマートフォン（モバイルファースト） |
| **デモURL** | [https://demo-yakuzaishikai.pharmapia.jp](https://demo-yakuzaishikai.pharmapia.jp) |
ページビュー
ヒーローセクション
キャッチコピー・CTAを前面に出した、ファーストビューのデザイン。深緑グラデーション背景で信頼感を演出。
お知らせ（タブ切り替え）
「市民向け」「会員向け」「緊急・重要」をタブで整理。対象者別に情報を素早く届けられる設計。
薬局を探す
エリア・機能（夜間・在宅・小児）での絞り込みUIを搭載。住民が薬局をすぐ見つけられる動線設計。
市民向け情報
お薬手帳・かかりつけ薬剤師・夜間休日対応など、よく調べられる6テーマをカードで一覧化。
取り組み紹介
在宅医療・禁煙サポート・地域包括ケアを左右交互レイアウトで訴求。活動の実績感を伝えるセクション。
イベント・研修
横スクロールカードUIで研修・イベント情報を一覧表示。対象バッジ・申込ボタンもカードに内包。
所在地・アクセス
地図＋住所・電話・開館時間を2カラムで表示。問い合わせへのハードルを下げるシンプルな構成。
スマートフォン表示
390px幅でのスマホ表示。ハンバーガーメニュー・縦積みレイアウト完全対応。
-
モバイルファースト設計（768px / 1200px ブレークポイント）
-
ハンバーガーメニューで全ナビにアクセス可能
-
タッチ操作に最適化したボタンサイズ
-
横スクロールカードはスワイプ操作に対応
-
テキスト・余白はスマホでも読みやすいサイズ調整済み
実装機能
インタラクション
-
スクロール連動ヘッダー影
-
ハンバーガーメニュー開閉
-
タブ切り替え（お知らせ）
-
エリア・機能ボタントグル選択
-
スクロールフェードイン（全セクション）
UI / UX
-
横スクロールカード（イベント）
-
左右交互レイアウト（取り組み）
-
カードグリッド（市民情報 3×2）
-
数値カウントバナー
-
アンカーリンクナビ
技術スタック
-
HTML / CSS / Vanilla JS
-
Google Fonts（Noto Serif JP 他）
-
Font Awesome 6.5
-
Intersection Observer API
-
CSS Grid / Flexbox
薬剤師会サイト制作のご相談
このデモサイトをベースに、実際の会名・ロゴ・写真・薬局データへの差し替えが可能です。以下のような拡張にも対応しています。
-
薬局検索（地図・GPS連携）
-
会員専用ページ・ログイン機能
-
お知らせ・イベントの自己更新CMS
-
研修単位管理システムとの連携
-
多言語対応（やさしい日本語・英語）
🌿 薬剤師会向けホームページ デモサイト
実際のデザイン・機能をそのままブラウザでご確認いただけます。スマートフォンからもご覧ください。
※本記事で紹介しているデモサイトは架空の団体・薬局を使用したフィクションです。実在する団体・組織・薬局とは一切関係ありません。掲載している情報（住所・電話番号・人名等）はすべて架空のものです。