WEBsite

Web site-design/coding-

pc画像




Smiley保育園


『のびのび楽しく育つ。ここでしか出来ない体験にチャレンジ』を理念とした保育園のWEBサイトを作成しました。
親しみやすいイメージを持ってもらえる優しい雰囲気のデザイン構成にしました。





使用ツール:Illustrator/Photoshop/Dreamweaver


使用言語:HTML/CSS/jQuer/JavaScript


制作期間:1.5ヶ月 全てデザインからコーディングまで一人で作成しています。




ターゲット
保育園の入園を考えている0〜5才児のお子様をもつ親御様


ペルソナ
・2歳児を育てる30代の専業主婦
・求職活動をする為、子供に合う保育園を探している
・心配性で几帳面な性格


目的、ゴール
保育園の紹介をし、見学や申し込みをしてもらうこと


デザイン①
子供が好きそうなポップで優しい雰囲気の構成にしました。しっかりとした理念があり、誠実な印象を持ってもってもらえるよう詳細を細かく記載しました。明るく、楽しいこと全面にアピールするデザインになっています。


デザイン②
情報量を多くし、ペルソナが疑問に感じるであろう点を考慮したデザインになっています。


カラー
ロゴから採用したグリーンとくすみイエローをメインに使用し、統一感を出しています。
背景はメインカラーのグリーンで見やすい白に近いライトグリーンを使用しています。文字カラーはディープグレイを使用し、柔らかいイメージを出してます。
可読性をあげるため、見出し文字はホワイトを使用しています。


カラー画像

ユーザービリティ
⒈ ナビゲーションはスクロールすると上部に固定されます。またお問い合わせ率をあげる為、画像にて分かりやすく表示しています。
⒉ すぐにページTOPに戻れるようボタンを下部に固定しています。
⒊ レスポンシブはハンバーガーメニューを採用しています。
⒋ 可読性を重視して、モバイルの文字サイズや間隔を設定しています。


ユーザービリティ

ユーザービリティ ②
どこのページなのかすぐに分かるようページトップに見出しをつけ、文字を統一しています。
画像は圧迫感のないよう爽やかで関連するようなイメージのものを使用しています。


ユーザービリティ