🌿 そよかぜ訪問看護ステーション デモサイトを実際に体験できます
PC・スマートフォン両対応。AIチャット・フォーム・全セクションを自由にご覧いただけます。
はじめに
Pharmapiaでは、AI × Web制作の実力をリアルに体感いただくため、業種別のデモサイトを順次公開しています。今回の医療・介護デモサイト④は「そよかぜ訪問看護ステーション（架空）」——在宅療養を支える訪問看護ステーションのコーポレートサイトです。
訪問看護ステーションのWebサイトは、ご利用者さま・ご家族・ケアマネジャー・医療関係者・求職者と、非常に多様なターゲットに同時に届ける必要があります。このデモでは「安心感 × 温かみ × 専門性」をコンセプトに、24時間365日バッジ・ケアマネ/医療者向け別導線・AIチャット窓口・料金シミュレーション・採用情報など、訪問看護サイトに必要な要素をすべて盛り込みました。
このデモでわかること
- 訪問看護サイトで信頼感を生むカラーパレット設計（ソフトグリーン × コーラル × ベージュ）
- ご利用者さま / ケアマネ / 医療者 / 求職者 の4ターゲットを1サイトで両立させる導線設計
- 保険種別ごとの料金目安テーブルの見せ方（介護保険1〜3割 / 医療保険 / 自費）
- ご利用の流れを4ステップで可視化するプロセスフローの実装
- AIチャットウィジェットによるよくある質問の自動応答（デモ）
- IntersectionObserver でスムーズなスクロールフェードインを実現する手法
- ハンバーガーメニュー・FAQアコーディオン・浮遊カードなどVanilla JS のみでの実装テクニック
- PC・タブレット・スマホに最適化するレスポンシブ設計
デモサイト仕様
| 項目 | 内容 |
|---|---|
| サイト名 | そよかぜ訪問看護ステーション（Soyokaze Visiting Nurse Station） |
| 業種 | 訪問看護ステーション（在宅医療・介護） |
| コンセプト | 安心感 × 温かみ × 専門性 |
| キャッチコピー | 「あなたの”いつも”に、寄り添う看護を。」 |
| 想定エリア | 横浜市全18区・川崎市全7区 |
| 技術スタック | HTML / CSS（カスタムプロパティ）/ Vanilla JS（ライブラリ不使用） |
| フォント | Noto Serif JP（見出し）/ Noto Sans JP（本文） |
| カラー | メイン: #5FA98A（ソフトグリーン）/ アクセント: #E8856B（コーラル）/ サブ: #F5EDE0（ベージュ） |
| 対応デバイス | PC / タブレット / スマートフォン（レスポンシブ） |
| ページ構成 | 1ページ完結スクロール型（全14セクション） |
| 公開URL | https://demo-nursing.pharmapia.jp |
各セクション解説（スクリーンショット付き）
① ヒーロー（ファーストビュー）
「あなたの”いつも”に、寄り添う看護を。」という感情に訴えかけるキャッチコピーを、Noto Serif JP の力強い日本語タイポグラフィで表示。右側には3枚の浮遊カード（看護師が訪問 / ご自宅で安心 / ご家族を支える）を animation: float でゆったりと上下に動かし、訪問看護の世界観を視覚的に伝えます。下部の統計（24h対応 / 0歳〜全年齢 / 15名のスタッフ）で具体的な規模感を提示。
② サービス内容（8カード）
訪問看護で提供できる8領域（日常生活支援・医療処置・ターミナル・精神/心理・認知症・小児・リハビリ・家族支援）を均等な4×2グリッドで一覧化。各カードは絵文字アイコン＋見出し＋3〜4行の解説で構成し、hover時に translateY(-6px) で浮き上がり、ボーダーが緑に変化するマイクロインタラクションを実装。『自分に必要なケアがあるか』を数秒で判断できる情報設計です。
③ 選ばれる5つの特徴（グリーン背景の強調セクション）
メインカラーのグラデーション背景の上に、大きな番号（01〜05）付きの白カードを配置。「365日24時間のサポート体制」「乳幼児〜高齢者まで幅広く対応」「複数名チームで切れ目のないケア」「ご家族に寄り添う在宅療養支援」「ICT活用」の5つを訴求。背景には大きな円形の装飾を配置し、医療サイトにありがちな”平坦な印象”を避けています。
④ ご利用の流れ（4ステップ）
訪問看護の利用開始まで『何をすればいいか分からない』という不安を、4ステップ＋矢印で完全に解消。各ステップにSTEP番号バッジ・見出し・詳細説明を配置。「主治医がいない場合はご紹介も可能」など、つまずきやすいポイントへのフォローもテキストに含めています。
⑤ ご利用対象者・料金・お支払い（3カラム）
訪問看護の料金は『いくらかかるかわかりにくい』が最大のハードル。介護保険1〜3割負担・医療保険3割・自費の4パターンの目安料金をテーブル形式で明示。左カードに対象者、右カードに支払い方法（口座振替・振込・クレカ・公費・生活保護）を配置し、1画面で『自分が使えるか・いくらかかるか・どう払うか』が判断できる情報密度の高い設計です。
⑥ ケアマネジャー・医療関係者向け（コーラル背景・専用導線）
訪問看護ステーションの集客はBtoC（利用者）だけでなくBtoB（ケアマネ・病院退院調整）が非常に重要です。しかし一般の利用者さまにも見せる必要があるため、本デモでは「温かみのあるコーラル背景」の専用セクションに分離。ケアマネ向けには「初回相談即日対応」「サ担会議参加可」「ICT情報共有（カナミックネット等）」など業務フローで響く訴求を、医療関係者には「退院前カンファ参加」「医療用麻薬対応」「在宅看取り実績」など専門的キーワードで信頼を獲得します。
⑦ スタッフ紹介（4名カード）
訪問看護の依頼判断で重要なのは『どんな人が来てくれるか』。管理者・看護師2名・PT・OT（計4名）をアバター（絵文字プレースホルダー）・名前・経験年数・専門領域バッジ（コーラル）・ひとことコメントで紹介。実制作時はここをスタッフ実写に差し替えることで、更に高い信頼性を確保できます。
⑧ よくある質問（アコーディオン）
『誰でも利用できる？』『頻度は？』『一人暮らしでも大丈夫？』など、訪問看護で実際によく聞かれる8つのQ&Aをアコーディオンで実装。<details><summary> ネイティブ要素を使うことで、JavaScript不要かつアクセシブル。Qバッジを緑の円形にし、視覚的に質問と回答を区別しました。
⑨ 採用情報CTA（グリーングラデーション）
訪問看護業界は採用難が大きな経営課題。本デモではフッター手前に独立した採用バナーを設置し、看護師・PT・OT・STが応募を決める具体ポイント（年間休日・手当・研修費・時短勤務）をチェックマーク付きリストで訴求。「見学・カジュアル面談からでもOK」の一文で心理的ハードルを下げています。
⑩ お問い合わせフォーム（種別チップ付き）
1つのフォームで4種類の問い合わせ（利用相談・連携・採用・その他）を受け付けられる設計。種別をチップ型ラジオボタンでワンタップ選択できるUIにし、選択時はメインカラーのグリーンで塗りつぶし。お問い合わせ先（電話・住所・営業日・指定番号）も併記して、BtoB先にも安心感を提供します。
⑪ AIチャットウィジェット
Pharmapia製デモサイトに共通搭載するAIチャットウィジェット。右下に固定表示されるAIバッジ付きボタンをクリックすると、そよかぜ案内ボットが展開。デモではモック応答3パターンをローテーション表示していますが、実制作時にはClaude API（Anthropic）に接続し、ステーション固有のFAQ・料金・対応エリアを学習させた自動応答が可能です。深夜・休日の問い合わせ一次対応をAIで24時間自動化する仕組みとして、訪問看護との相性は抜群です。
⑫ スマートフォン表示
ご高齢のご家族さまがスマホで検索するシーンを想定し、ボタンを大きくタップしやすく・文字を読みやすいサイズに調整。電話ボタンをヒーロー直下に大きく配置し、tel:リンクで即発信可能。ナビゲーションはハンバーガーメニューで折り畳み、ファーストビューを邪魔しません。
技術仕様
| 機能 | 実装方法 |
|---|---|
| スクロールフェードイン | IntersectionObserver API + CSS transition |
| 浮遊カードアニメーション | CSS @keyframes float（translateY 上下動） |
| ヘッダー固定・背景変化 | position: sticky + scroll イベントで classList トグル |
| ハンバーガーメニュー | クラストグル + aria-expanded |
| FAQ アコーディオン | ネイティブ <details>/<summary>（JS不要） |
| フォーム種別選択 | チップ型 radio ボタン + CSS :checked 疑似クラス |
| AIチャット（デモ） | mockReplies 配列をローテーション応答（実運用時はClaude API接続） |
| フォーム送信デモ対応 | preventDefault + alert() でデモ表示 |
| レスポンシブ | CSS Grid + clamp() + メディアクエリ（768px / 1024px） |
| スムーズスクロール | scroll-behavior: smooth + scroll-padding-top でヘッダー分補正 |
訪問看護ステーションサイトの表示必須・注意事項チェックリスト
訪問看護ステーションは介護保険法・医療法・健康保険法などに基づく指定事業所です。ホームページにも表示必須項目・広告規制があるため、実際のサイト制作時は以下を必ず確認してください。
- 運営事業者の名称・所在地・連絡先（法人格を含む正式名称）
- 介護保険事業所番号・医療機関コードの明示
- 管理者氏名の掲載
- 営業日・営業時間・緊急時連絡先の明示
- 利用料金・自己負担額・交通費の透明な提示
- 対応サービス内容の正確な記載（できないことを「できる」と書かない）
- 医療広告ガイドライン（厚生労働省）に基づき、『最高・No.1・絶対』など断定的表現を避ける
- 患者様の声・実績は事実に基づき、過度な期待を抱かせる表現を避ける
- 特定疾患・状態についての効果を示唆する表現は禁止（『◯◯が治る』等）
- プライバシーポリシー・個人情報保護方針の掲載
- スタッフ写真・利用者写真の掲載は必ず本人同意を得る
- ウェブアクセシビリティへの配慮（ご高齢の方・視覚障害のある方を想定）
Pharmapia への相談・お問い合わせ
Pharmapiaでは、今回のような訪問看護ステーション・在宅医療・介護事業所向けのホームページ制作を得意としています。運営者自身が現役の薬剤師のため、医療・介護業界の商慣習や法規制を踏まえた上で、AI活用による高品質なサイト制作をリーズナブルな価格でご提供します。
「ケアマネ・医療者向け導線を強化したい」「採用ページを整備したい」「24時間問い合わせをAIで受けたい」など、お困りごとがありましたら、まずはお気軽にご相談ください。
🌿 そよかぜ訪問看護ステーション デモサイトを実際に体験できます
PC・スマートフォン両対応。AIチャット・フォーム・全セクションを自由にご覧いただけます。
※このデモサイトは架空の事業所「そよかぜ訪問看護ステーション」を題材としたサンプルです。実在の訪問看護ステーション・スタッフ・住所・電話番号とは一切関係ありません。利用申込み・求人応募はできません。アイコンには絵文字プレースホルダーを使用しており、実制作時はスタッフ実写・事業所写真に差し替えることを推奨します。