社会福祉法人あしたの芽めばえ保育園（架空）の東高円寺園のページを制作しました。主体性を尊重して子どもと丁寧に関わりながら保育することを保育理念として掲げ、育児担当制や異年齢児保育などの保育の特色があります。地域に他園が多く、定員割れしている現状が課題であり、今まで作っていなかった保育園のウェブサイトを新規に立ち上げるという依頼です。入園児童獲得とともに、保育士の採用課題も抱えているため、保育士から見ても、働きたくなるような保育の特色をしっかりとアピールできるようにしました。
URL
https://adjustacademy.com/0335/d240913-040335/site02/index.html
担当
情報収集・ペルソナ設定（5時間）
コンセプト立案（5時間）
ワイヤーフレーム作成（3時間）
ロゴ作成・キャッチコピー・ライティング（3時間）
写真収集（5時間）
デザインカンプ（7時間）
コーディング・jQuery実装（50時間）
使用ソフト
Googleスプレッドシート
Gemini
Figma
Photoshop
Illustrator
Visual Studio Code
制作期間
2024年11月5日～12月12日
サイトの目的
園見学予約、入園に関する問い合わせ、園のSNSフォロー
ターゲット
・現在育休中で来年度入園を考えている20代後半から30代の女性
・新卒入社で企業探しをしている大学生（20～22歳）
・中途入社で求人探しをしている現役保育士20代～40代女性
使用カラー
#20486E
#ABCD03
#F8B500
制作過程
他園のサイトを参考に、ページ内のコンテンツ内容をサイトマップとして整理し作成。そのうえでグローバルナビの順番やフッター表示についても設定しています。デザイン設定には、統一感が出るように大中小3パターンの余白と文字サイズを決定。イメージにあうGoogleフォントを探し、挿入タグまでメモしておくことでコーディングへの効率化を図りました。
Figmaを使用し初めてワイヤーフレームとデザインカンプを作成しました。スマホで主に見られることを想定していたため、デザインカンプの時点でしっかりレスポンシブできるよう、実機で見え方を確認しながらデザインを考えていきました。
デザインについて
園の名前にもある、「めばえ」という言葉から、新芽の色をイメージした黄緑色や、その新芽を育てる太陽からオレンジ色をメインカラーとして採用しています。近隣園にも自然なイメージのもつ保育園があり、茶色を多用しているため、違う印象を持てるように、文字色や土台の締め色としては紺色を採用しました。
子どもたちの写真を多く使用することで、保育園の実際の様子が分かるようにしました。温かい雰囲気のイラストや、曲線や丸を使うことで親しみやすさを演出しています。保育に関してしっかりと文章で伝え、気になったらすぐに問い合わせ、アクセスの確認、ができるようにボタンを固定で配置しています。
コーディングについて
子育て中で忙しいお母さんや、仕事の合間で職探しをする保育士を想定し、スマホサイズで見やすいことを第一に優先し、レスポンシブ対応をしています。ハンバーガーメニューからすぐに気になったページへ移動できます。
Jqueryを挿入し、動きのあるウェブサイトにいたしました。園の特長などは、文章が長くなりがちであるので、ページ離脱率を下げるためにもslickを導入して、写真をより多く見せています。
