【医療・福祉デモサイト⑤】放課後等デイサービス ホームページ制作事例｜児童デイサービス はぐくみ デモサイト by Pharmapia

はじめに

Pharmapiaでは、AI × Web制作の実力をリアルに体感いただくため、業種別のデモサイトを順次公開しています。今回の医療・福祉デモサイト⑤は「児童デイサービス はぐくみ（架空）」——小学1年生から高校3年生までを対象とした、放課後等デイサービス・児童発達支援（多機能型）の事業所サイトです。

放課後等デイサービスのWebサイトは、お子さまの保護者・関係機関（学校・相談支援員）・地域の方々に同時に届ける必要があります。とくに保護者の方は「ここなら安心して子どもを預けられそう」と感じられるかどうかでサービス選定の判断が大きく変わります。このデモでは「落ち着いた優しさ × 温もり × 信頼」をコンセプトに、1日の流れタイムライン・療育プログラム・ご利用までの流れ・AIチャット窓口・運営規程ベースの事業所概要など、放デイサイトに必要な要素をすべて盛り込みました。

このデモでわかること

• 保護者に安心感を与える落ち着いたカラーパレット設計（セージグリーン × テラコッタ × オフベージュ）
• 明朝体（Noto Serif JP）と柔らかい角丸で「優しさ」を表現するUIテクニック
• 1日の過ごし方を直感的に伝える縦型タイムラインの実装
• 5つの療育プログラム（創作・からだ遊び・SST・個別学習・クッキング）を見やすく並べるカードグリッド
• ご利用案内＋4ステップのご利用フローを2カラムで並べて理解を促す情報設計
• 運営規程・重要事項説明書ベースの事業所概要テーブル（行政指導対応の必須項目）
• AIチャットウィジェットでよくある質問に自動応答（受給者証申請・送迎エリア・営業時間など）
• 実写写真とblob装飾で温かみを演出するヒーロー設計（ChatGPTで生成した人物の写らない安全なビジュアル）
• PC・タブレット・スマホに最適化するレスポンシブ設計と、ハンバーガーメニュー実装

デモサイト仕様

項目	内容
サイト名	児童デイサービス はぐくみ（HUGUKUMI）
サービス種別	放課後等デイサービス／児童発達支援（多機能型）
コンセプト	落ち着いた優しさ × 温もり × 信頼
キャッチコピー	「子どもの『できた！』が、毎日のうれしさに。」
技術スタック	HTML / CSS（カスタムプロパティ）/ Vanilla JS（ライブラリ不使用）
フォント	Noto Serif JP（見出し・明朝体）/ Noto Sans JP（本文）
カラー	メイン: #5C8D7B（セージグリーン）／ アクセント: #E89B7F（テラコッタ）／ サブ: #F5EBDD（オフベージュ）
対応デバイス	PC / タブレット / スマートフォン（レスポンシブ）
ページ構成	1ページ完結スクロール型LP（全11セクション + AIチャット）
公開URL	https://afterschool-demo.pages.dev

各セクション解説（スクリーンショット付き）

① ヒーローセクション（メインビジュアル）

ファーストビューは、保護者の方が一瞬で「ここなら大丈夫そう」と感じられるかが勝負です。背景にはセージグリーン → オフベージュのグラデーションを敷き、ふんわりとしたblob装飾を浮かべて柔らかな印象に仕上げました。右側のメインビジュアルには木の玄関と小さな子どもの靴を写した実写写真を配置し、「ここに来たら迎え入れてもらえる」という安心感を一目で伝える構成です。タイトルは明朝体（Noto Serif JP）を採用し、ゴシック体では出せない上品さと温かみを両立。CTAは「無料見学・相談する」（テラコッタ）と「はぐくみのこと」（緑のゴーストボタン）の2種類を用意し、行動意欲の高い人と情報収集中の人、両方に対応しました。

② 私たちについて（3つの想い）

事業所の「想い」を3カラムカードで簡潔に伝えるセクション。各カードの上部にはキーワードを象徴する実写写真（くつろぎのリビング・寄り添う手元・創作の道具）を入れ、ひと目で雰囲気が伝わる構成にしました。ホバー時に translateY(-6px) でカードが浮き上がり、写真が scale(1.04) でズームするマイクロインタラクションで、静的なページに動きと奥行きを与えています。「安心」「一人ひとり」「遊び」という、保護者が放デイ選びで気にする3つのキーワードを最初に出すことで、続きを読みたくなる流れを作りました。

③ 1日の流れ（タイムライン）

放デイ選びで保護者が真っ先に知りたい情報の一つが「うちの子は1日をどう過ごすのか」です。このセクションでは、左側に時刻、中央に縦線とアクセントカラーのドット、右側に活動内容のカードという3カラムグリッドで構成。CSSの ::before 疑似要素で1本の縦線を引き、各時刻のドットを ::after で重ねることで、JS不要・軽量なタイムラインを実現しました。スマートフォンではカラム幅を縮めつつも縦線とドットの位置関係を維持し、読みやすさを担保しています。

④ 毎日のプログラム（5つの療育の柱）

放デイの「療育」は専門的に聞こえてしまいがちですが、ここでは「楽しみながら『できる』を増やす」という保護者目線の言葉に置き換えて訴求しました。各カードには明朝体の大きな 01〜05 のナンバリングを配置し、リズミカルに目線を流せる設計に。 auto-fit, minmax(220px, 1fr) のグリッドで、画面幅に応じて2列・3列・4列と自動的に切り替わります。

⑤ ご利用案内 ＋ ご利用までの流れ

「ご利用案内（左）」では dl/dt/dd による定義リスト形式で、対象年齢・営業日・営業時間・定員・送迎・料金を整理。「ご利用までの流れ（右）」では、「お問い合わせ → 無料見学・体験 → 受給者証の申請 → 契約・ご利用開始」の4ステップを、テラコッタの丸番号付きカードで視覚化しました。受給者証の申請段階から事業所がサポートすることを明記することで、初めて放デイを利用される保護者の不安を取り除く狙いです。

⑥ 施設の様子（ギャラリー）

「どんな場所で過ごすのか」を最も雄弁に伝えるセクション。プライバシー保護の観点から人物が写り込んでいない実写写真を採用し、空間の温度感・光の入り方・道具の質感まで伝わる仕立てにしました。aspect-ratio: 4/3 で全カードの縦横比を揃え、ホバー時には scale(1.05) で写真がゆっくりズームする演出を追加。グリッドの整列を保ちながら、視線をひとつずつ留めるリズムをつくっています。

⑦ よくあるご質問

HTMLの <details>/<summary> 要素を使い、JS不要のアコーディオンを実装。「Q」「A」のサークルバッジは ::before 疑似要素で生成し、開閉時の「＋／×」アイコンは ::after をCSS transform で回転させています。SEO上もテキストとしてクローラーに読まれるため、検索流入にも貢献する構造です。

⑧ 事業所概要（運営規程ベース）

放課後等デイサービスは児童福祉法に基づく障害児通所支援のため、運営規程および重要事項説明書ベースの情報を必ずWebサイトに掲載することが推奨されます。このセクションでは、事業所番号・運営法人・営業日／時間・休業日・サービス対応エリア・苦情相談窓口・連携医療機関といった必須項目をテーブル形式で整理。スマートフォンではテーブルが破綻しないよう、th/tdをブロック化して縦並びに切り替えるレスポンシブ対応を入れています。

⑨ お問い合わせフォーム

左カラムに電話・メール・所在地、右カラムに入力フォームを並べ、「電話派」「メール派」どちらの保護者にも対応。フォームでは「お子さまのお名前・学年」フィールドを設けることで、初回問い合わせから具体的な相談ができるよう設計しました。デモではフォーム送信時にメッセージを表示するモック実装になっています。

⑩ AIチャットウィジェット

サイトに搭載しているAIチャット窓口です。デモではAPIキーなしで、3パターンのモック回答（サービス概要・送迎・営業時間）をローテーションで返答。本番運用ではAnthropic Claude API（claude-sonnet-4 / claude-opus-4-7 など）と接続し、よくある質問に24時間対応する自動応答ボットとして機能します。「電話するのは少しハードルが高い」と感じる保護者の方に、気軽な問い合わせ手段として活用いただけます。

⑪ スマートフォン表示

放デイ情報を探す保護者の方は、圧倒的にスマートフォンからの閲覧が中心です。デザインフェーズからモバイルファーストで設計し、768px以下ではナビゲーションがハンバーガーに切り替わり、グリッドは1〜2カラムに、フォーム要素は親指で押しやすいサイズに最適化されます。clamp() 関数でフォントサイズを流動的に調整しており、どの画面サイズでも自然に読めるレイアウトを実現しています。

技術仕様

機能	実装方法
スクロールフェードイン	IntersectionObserver API + CSS transition
ヘッダー背景変化	scroll イベント + classList トグル + backdrop-filter
ハンバーガーメニュー	クラストグル + aria-expanded（アクセシビリティ対応）
縦型タイムライン	CSS Grid + ::before / ::after 疑似要素（JS不要）
FAQアコーディオン	HTMLネイティブ <details> / <summary>（JS不要・SEO対応）
blob装飾	CSS keyframes による float アニメーション
レスポンシブ	CSS Grid + clamp() + メディアクエリ（480px / 768px / 1024px）
スムーズスクロール	scroll-behavior: smooth
AIチャット	右下固定ウィジェット + 3パターンのモック応答（本番はClaude API接続）
フォーム送信	preventDefault + メッセージ表示（本番はFormspreeまたはCloudflare Workers）

放デイサイトの掲載必須・推奨チェックリスト

放課後等デイサービスのホームページは、児童福祉法・障害者総合支援法・関連ガイドライン（厚生労働省「放課後等デイサービスガイドライン」など）に基づき、掲載が望まれる項目があります。実際にサイトを制作する際は以下の点を必ず確認してください。

• 事業所名称・運営法人・所在地・電話番号・FAX番号の明示
• サービス種別（放課後等デイサービス／児童発達支援の単独 or 多機能型）の表示
• 事業所番号（指定番号）の掲載
• 定員・営業日・営業時間・休業日の明示
• サービス対応エリア・送迎範囲の明記
• 料金（受給者証の自己負担割合・上限額制度）の説明
• 運営規程および重要事項説明書の概要掲載（または閲覧可能な体制）
• 苦情相談窓口（所内 + 第三者委員）の明記
• 連携医療機関・緊急時の対応体制の記載
• 個人情報保護方針（プライバシーポリシー）の掲載
• 過度な期待を抱かせる表現（「絶対治る」など）を避ける
• お子さま・保護者の写真掲載は同意取得・肖像権配慮を明記

Pharmapiaへの相談・お問い合わせ

Pharmapiaでは今回のような放課後等デイサービス・児童発達支援・障害福祉サービス事業所のホームページ制作を承っています。AIを活用した高品質なサイト制作を、リーズナブルな価格でご提供。運営規程・重要事項説明書ベースの法的必須項目もしっかりカバーします。「まず話を聞いてみたい」という段階でも、お気軽にご相談ください。

※このデモサイトは架空の事業所「児童デイサービス はぐくみ」を題材としたサンプルです。実在の事業所・人物とは関係ありません。事業所番号・所在地・電話番号・運営法人はすべて架空です。問い合わせ・体験申込はできません。イラストはSVGで制作し、お子さま・スタッフの実写真は使用していません。