Webサイトデザイン<ハタフル保育園>

TOPページのみ(コーディングなし)ですが、スクールの卒業課題で保育園のWebサイトを作成しました。

既存のデザインが古く、園からのお知らせの発信の場所が無い。園の様子や子どもたちの写真が少ない。何を強みとしているかアピールできていない。採用・入園申し込み・資料請求・施設見学者がほとんどないなどの現状の問題があり、それらを解決できるようなWebサイトの作成をしました。その中で、園の強みである「食育」をしっかり伝える。柔らかくあたたかみのある雰囲気になるようにする。という点を意識して、保育園を探している方々の目に止まるように分かりやすさ、見やすさも大切にしました。

＜ヘッダー＞

・保育園らしさが伝わるようにメニュー項目とアイコンがリンクするものを配置して、ロゴと同じ色にすることで統一感を持たせました。また、イラストと文字を載せることで柔らかい印象になるようにしました。

・アイコンの大きさや形がそれぞれ違ったので、それを同じくらいにすることに苦労しました。

・ロゴをメインに配置することで、園の名前を強調しました。

・白の波や雲は柔らかい印象になるように自分で作成しました。

＜メインビジュアル＞

写真を大きめにして、右側にクリックして欲しいボタン(見学案内・資料請求・入園案内)を目立つように配置することで、ヘッダーボタンにあるものとの差別化をしました。

＜お知らせ一覧＞

メインビジュアルの下にお知らせを配置することで、保護者に対してもお知らせを発信する場所がなかったということだったため、下まで行かずにすぐクリック出来るようにしました。

＜あいさつ＞

簡単なあいさつを載せ、どんな園なのかまずは興味をもってもらえるようにしました。また下に写真を配置することで、園の雰囲気がより伝わるようにしました。

＜保育園の紹介＞

見に来た保護者の方がより詳しく園のことについて知ることができるように、それぞれ項目を作りました。見出しの下にテキストを配置して何の情報が見れるのかを分かりやすく載せました。

・保育理念や保育目標が知りたい方のために園の想い(コンセプト)を配置しました。

・施設案内では、どんな園なのか園内のマップなどが見れる項目にしました。

・園の生活では、年間行事や一日の流れ、クラスの様子などが見れる項目にしました。

・食育に力を入れているため、ボタンを作成して強みのアピールや給食の写真などを載せて、どんな食事をしているのかより伝わりやすくなる項目にしました。

＜採用ページ＞

採用を強化したいとの要望もあったため、求職者向けにリンクを作成してクリックしてもらえるようにしました。

・文字と共に写真を載せることで、視覚的にも園の様子が伝わるようにしました。また必要以上の文字を載せないことで、柔らかくあたたかいイメージになるように意識もしました。

・見学者の増加も目的としてあったので、別にボタンを配置して｢受付中｣｢お気軽に｣などの言葉を載せてクリックしやすいようにしました。また背景が寂しい印象にならないように園舎の写真を文字の下に配置しました。

・クリックして欲しいボタンをトンマナに合わせた色にしつつ、それぞれの場所で目に止まるようにしました。

＜フッター＞

できるだけシンプルに見やすくしました。主要リンクは囲みと文字の太さを変えることで、他との差別化をしました。