保育園を想定して仮想サイトをデザインしました。

クライアント

都内の閑静な住宅街にある保育園。マンモス型ではなく、子ども一人ひとりの成長に寄り添うことを大切にしている。イベント等も積極的に行い、アクティブな教育方針である。

という想定にしました。

UI／UX設計

保育園という施設全体にいえることですが、利用者は近隣の家族連れになるため、たくさんの方にサイトを見ていただくというよりは、検索などでたどり着いた方に適切な情報を提供することが大切だと考えました。そこで、サイトが対象とするターゲットと果たすべき役割を次の3つに設定しました。また、そこから必要と思われる具体的な情報や見せ方を絞っていきました。

ターゲット1. 子どもの入園先を探している保護者

サイトの役割：園の雰囲気が直感的に伝わり、入園後の生活が想像できる。
→写真を多く使用し、園のことが視覚的に伝わるようにする。園内の様子など、情報としての写真だけではなく、園児やスタッフの表情などからも、園の雰囲気が感じられるサイトにする。

ターゲット2. 現在入園している園児の保護者

サイトの役割：個別の連絡のやり取りだけでは伝わらないような園児たちの生活の発信源となる。
→お知らせやブログを通して、園児たちの様子を紹介することで、サイトを一つのコミュニケーションの場として活用する。

ターゲット3. 園の利用者ではない近隣の住民

サイトの役割：園の内部を可視化し、教育方針などを理解してもらうことで、地域コミュニティとの信頼関係の構築を図る。
→2と同様になるが、ブログなど、定期的に情報発信する。

デザイン・トンマナ

アクティブな教育方針を表すような、楽しげなカラーリングになるようにしました。ベースカラーに子供らしいポップな黄色（#FED500）、地のフォントや線に茶色（#483C0F）、見出しなど強調したい箇所に緑（#00746C）、と統一感を意識しながら、三色で全体を構成しました。

書体の丸ゴシック体、円形の画像や角丸など、角が目立たず丸みのある表現を意識しました。全体的に枠線をつけアニメのようなポップさを演出しました。

実装

ブログやお知らせは、保育園のスタッフが自ら運営していく必要があると考え、サイト全体をWordPressで開発しました。重要性や緊急性が高い、主に園児の保護者向けの「お知らせ」ページと、じっくり読んでほしい、広く一般向けの「BLOG」ページを分けたいと考え、カスタム投稿でそれらを別に管理することにしました。

トップページからも「お知らせ」「BLOG」にアクセスしてもらうため、数件表示するように設定しました。「お知らせ」は新しいもののみ取得したいため、過去1週間に投稿されたものを（ない場合はその旨を）表示。ブログは直近の3件を表示するようにPHPで設定しました。また、PCでは「お知らせ」にカルーセルアニメーションを加え、目を引く様にしました。