ひだまりキッズルーム — 病児保育室の、あたたかい手描き調 HP

クリニックに併設された病児保育室を想定した HP です。あめ色の背景に紙の質感を重ね、手描き調のふうせん・おひさま・ことりを浮かべて、こわくない・あたたかい印象にしました。

こんな方に向いています

• 病児保育室・一時預かり・小児科クリニックを運営している
• 「どんなときに使えるのか」が分からず問い合わせが来ない、という状態を変えたい
• 施設のようすや部屋の分かれ方を、写真と図で見せたい
• 予約・電話への導線を常に画面に出しておきたい

構成

ヒーロー → どんなときに利用できるの？（丸バブル 4 つ）→ 6 つの特長 → 真上から見た間取り図 → 施設写真 3 点 → ご利用の流れ 5 ステップ → 一日のようす → 対象・料金 → Q&A → アクセス、の 10 ブロックです。

間取り図は SVG で作っています。 保育室・隔離室 2 室・スタッフスペース・水まわり・玄関を真上から見た図にして、それぞれの部屋に説明を置きました。病児保育は「うつらないように部屋が分かれているか」が保護者のいちばんの関心事なので、文章より図のほうが速く伝わります。

動きについて

スクロールでの出現、ふうせんとことりのゆれ、雲の流れ、おひさまの拍動、カードのホバー、Q&A の開閉を入れています。

動きは入れていますが、JavaScript が止まっても本文は必ず読めます。出現アニメは「最初から表示」を既定にして、動く時だけ隠す作りです。OS で「視差効果を減らす」を設定している方には、動きが自動的に止まります。

差し替えるところ

施設名・ロゴ・写真・料金・電話番号・住所・間取り図のラベルが差し替え箇所です。配色は CSS の先頭にまとめてあるので、あめ色から別の色に変えるのも 1 箇所の書き換えで済みます。