🌿 薬剤師会向けホームページ デモサイト
実際のデザイン・機能をそのままブラウザでご確認いただけます。スマートフォンからもご覧ください。
こちらは Pharmapia が制作した薬剤師会向けホームページのデモサイトです。架空の「公益社団法人 さくら市薬剤師会」を題材に、実際の制作物と同等のクオリティで仕上げました。デザイン・機能・スマホ対応のすべてを実装済みです。
サイト概要
| クライアント想定 | 公益社団法人・地域薬剤師会 |
| サイト名 | 公益社団法人 さくら市薬剤師会 |
| コンセプト | 市民への健康情報発信 ＋ 会員向け業務サポートの両立 |
| メインカラー | 深緑 #1A6B4A（信頼・健康・安心） |
| デバイス対応 | PC・タブレット・スマートフォン（モバイルファースト） |
| デモURL | https://demo-yakuzaishikai.pharmapia.jp |
ページビュー
ヒーローセクション
お知らせ（タブ切り替え）
薬局を探す
市民向け情報
取り組み紹介
イベント・研修
所在地・アクセス
スマートフォン表示
- モバイルファースト設計（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
- 研修単位管理システムとの連携
- 多言語対応（やさしい日本語・英語）
🌿 薬剤師会向けホームページ デモサイト
実際のデザイン・機能をそのままブラウザでご確認いただけます。スマートフォンからもご覧ください。
※本記事で紹介しているデモサイトは架空の団体・薬局を使用したフィクションです。実在する団体・組織・薬局とは一切関係ありません。掲載している情報（住所・電話番号・人名等）はすべて架空のものです。