お問い合わせ

SAMPLE / KINDERGARTEN

幼稚園向けデザインテンプレート「ひだまり」

見学・説明会の予約が、サイトの中で完結します。カレンダーで空き状況を見て、日時を選んで申し込むところまで、そのままお試しいただけます。

PREVIEW

予約の流れを、そのまま試せます

「サンプルひだまり幼稚園」は実在しません。園名・住所・電話番号・お知らせの内容は、デザインをご覧いただくためにUniMindが用意した架空のものです。見学予約は完了画面まで進みますが、お申し込みは記録されず、確認のメールも送信されません。安心してお試しください。

見学予約ページ

別のタブで開く

パソコン幅とスマホ幅で、カレンダーの見せ方が切り替わります。切り替えて比べてみてください。

BOOKING

見学予約を、電話から解放する

空き状況が見えるから、往復が減る

カレンダーに「◎ 空きあり」「△ 残りわずか」「× 満席」を出しています。保護者の方は空いている日時を選んで申し込むだけで、電話での日程調整の往復がなくなります。園にとっても、開園時間外のお申し込みを取りこぼさなくなります。

パソコンとスマートフォンで、別の部品を出している

パソコンでは月のカレンダー、スマートフォンでは日付の縦リストを出しています。CSSで隠し分けているのではなく、それぞれに合った部品を作り分けています。ひとつの部品を無理に両対応させると、スマートフォンでマス目の文字が小さくなりすぎるためです。

申し込みの取りこぼしを防ぐ作り

同じ枠に同時に申し込みが来ても、二重予約にならないようにする
満席になったときも入力内容を保持したまま、別の日時を選び直せる
受付の締切（既定は見学日の前日15時）を園の運用に合わせて決められる
申し込み後の画面から、カレンダーアプリに予定を登録できる
JavaScriptが動かない環境でも、画面の状態が保たれて申し込みまで進める

この見本での動き

実際の運用ではサーバー側に予約を記録し、保護者さまと園それぞれに確認のメールをお送りします。この見本では記録もメール送信も行わず、画面の動きだけをご覧いただけるようにしています。ご入力いただいた内容はどこにも保存されません。

PAGES

全12ページ

保護者向けと求職者向けで入口を分けています。園によってページは増減します。

  • トップページ。園庭を走る園児たちの写真の上に園名と案内が並んでいる トップ 園の雰囲気と、いま知りたいことへの入口。見学予約と採用案内は右の縦タブから常に開けます。
  • 「園について」のページ。ごあいさつと教育方針が並んでいる 園について ごあいさつ、園の紹介、教育方針、学園のあゆみ、安全対策。
  • 「保育の特色」のページ。保育の3つの柱が並んでいる 保育の特色 保育の3つの柱、園での一日、年間行事、絵本、課外教室、給食、預かり保育。
  • 「入園案内」のページ。募集要項と費用の案内が並んでいる 入園案内 見学・説明会、募集要項、費用、通園バス、制服、資料ダウンロード。
  • 「見学・説明会の予約」のページ。月表示のカレンダーで空き状況が見える 見学・説明会の予約 このサイトの主目的。カレンダーから日時を選んで、その場で申し込めます。
  • 「よくある質問」のページ。質問が折りたたみで並んでいる よくある質問 入園前の不安に先に答える。問い合わせの手前で解決する数が変わります。
  • 「採用案内」のページ。募集職種と応募の流れが並んでいる 採用案内 保護者とは知りたいことが違うので、入口ごと分けています。次点のゴール。
  • 「お知らせ」の一覧ページ。記事がカードで並んでいる お知らせ（一覧・記事） 行事や募集の告知。園で更新できる形にします。
  • 「お問い合わせ」のページ。入力フォームが並んでいる お問い合わせ 見学予約とは別の、一般のお問い合わせ用。

このほかにプライバシーポリシー、サイトマップ、404ページを含めて全12ページです。

MOBILE

スマートフォンでの見え方

スマートフォンで見たときのトップページ。案内が縦に並び、画面の下端に見学予約と採用案内のバーが固定されている

パソコンでは画面の右端に縦タブ、スマートフォンでは画面の下端にバーを置いて、どのページを読んでいても「お電話」「見学予約」「採用案内」に届くようにしています。

予約カレンダーは、スマートフォンでは日付の縦リストに切り替わる
画面幅による切り替えはすべてCSSで書き、JavaScriptに依存させない
本文の文字は16px以上。タップする場所は44px以上を確保する

JavaScriptで画面幅を見てレイアウトを組み替えると、JavaScriptが動く前に別のレイアウトが一瞬見えてしまいます。この見本ではすべてCSSのメディアクエリで切り替えています。

FULL PAGE

トップページの全体

上から下まで、どんな順番で情報が並んでいるかをご覧ください。枠の中はスクロールできます。

トップページの全体。メインビジュアル、園の案内、保育の特色、お知らせ、入園案内、見学予約への案内の順に並んでいる

IF YOU LIKE IT

この見本をもとにする場合

見本をそのままお渡しすることはありません。御社の園の言葉と写真に合わせて作り直します。だいたい次のようなところを差し替えていきます。

  • 園の情報 園名、法人名、ロゴ、住所、連絡先、系列園。系列園がなければフッターから消えます。
  • 予約の枠組み 見学・説明会を開く曜日と時間帯、1枠あたりの定員、受付の締切。園の運用に合わせて決めます。
  • お知らせの受け取り方 お申し込みを園のどのメールアドレスで受けるか。複数人での受け取りにも対応します。
  • 色と雰囲気 この見本は明るい配色ですが、園のロゴや制服の色に合わせて組み替えられます。読みやすさの基準は保ったまま調整します。
  • 写真 園の写真に差し替えます。掲載の範囲と保護者の方の同意の取り方は、撮影の前に一緒に決めます。
  • ページの増減 2年保育・3年保育で入園案内を分ける、未就園児クラスのページを足すなど、園の事情に合わせて変えられます。

ほかの見本は保育園・幼稚園のデザインテンプレート一覧と業種別の一覧からご覧いただけます。

CONTACT

この予約のしくみを、御社の園に

「電話の対応に時間を取られている」「説明会の日程調整が大変」——そういうところから、ぜひお聞かせください。ご相談・お見積りは無料です。

このデザインで相談する
このデザインで相談する