Facebook 【デザイン・コーディング】架空/保育園のWEBサイト
Logo

【デザイン・コーディング】架空/保育園のWEBサイト

クレジット
Avatar
Webデザイン
コーダー
【デザイン・コーディング】架空/保育園のWEBサイト-1
シェア

【デザイン・コーディング】架空/保育園のWEBサイト

※スクール課題 【クライアント】 ハタフル保育園(架空の保育園) 【概要】 ・福島県郡山市にある保育園(架空) ・クライアント様の長所、短所 <長所>食育に力を入れていること。管理栄養士によるバランスの取れた手作り給食を提供している。 <短所>強みの打ち出しが弱い。採用も強化したいが、保育士の応募が少ない。 ・ターゲット 福島県郡山市在住の0〜5歳児の子供を持つ両親。 保育園の最終決定権が母親にある場合が多い為、女性寄りとする。 【期間】 約2ヶ月 【担当領域】 サイトマップ作成、ワイヤーフレーム作成、デザイン、コーディング 【使用したデザインツール】 Adobe XD 【開発手法】 HTML/CSS/JavaScript 【クライアントの要望】 <目的> ・入園者数を増やしたい ・採用を強化したい ・他の園との比較検討の候補に挙がるようにしたい <デザイン> ・印象:活発、安心安全、清潔感 ・メインカラー:ロゴの黄色 ・配色:オレンジ、黄緑、水色 ・フォント:丸みのあるゴシック 【設定した課題】 ・サイトへのアクセスが少ない為、他の園との比較検討の対象にならない ・サイトに園からのお知らせを発信できる場所がない為、保護者に電話やメールで連絡しなければならず対応に工数が取られる ・サイトに採用情報が掲載されていない為、採用も強化したいが応募が来ない ・資料請求ページに辿り着きにくい作りとなっている為、資料請求フォームからのメールが少ない ・サイトに園の様子や子供達の写真が少なく、保育園の特徴や強み、施設見学の詳細などの掲載情報が少ない為、施設見学の申込みがほとんどない 【実施した施策】 <全体像> ・丸みのあるゴシックの使用がクライアント様より要望として挙げられていた為、画像やボタンなどの角にも丸みを付け、トンマナが合うようにしました。 ・活発さが伝わるよう、サイト全体やボタンにアニメーションを付けたり、サイト全体の色味を暖かみのある色にしました。 ・子供達の保育園での様子や保育園の雰囲気が伝わるよう、子供達の写真を多く掲載しました。 <各エリア> ・ヘッダーメニュー 1.「資料請求」「お問い合わせ」「採用情報」は入園者数増や採用応募増を達成させる大事な情報である為、ボタンにして他のリンクと差別化しました。 2.入園者増や保護者への連絡工数減を達成させる為、「基本情報」や「お知らせ」へのリンクをヘッダーに掲載し、すぐにアクセス出来るようにしました。 ・コンセプト 園が何に力を入れているのかが伝わるよう、「食」や「育」などの文字の色を一部変えました。 ・入園をご検討の皆様へ アクセスして欲しいページ(入園のご案内・資料プレゼント・施設見学案内)にすぐアクセスできるよう、ボタンを目立たせ横並びに配置しました。 ・保育園での1日、入園をご検討の皆様へ、採用情報 目的を達成させるのに重要なエリアである為、水玉やボーダーの背景にして他のエリアと差別化を図りました。 ・お知らせ お知らせのカテゴリが一目で分かるよう、色分けしました。 ・お電話でのお問い合わせ 1.電話番号が一目で分かるよう、色付けしました。 2.電話受付している曜日と時間が分かるよう、電話番号の下に掲載しました。 ・メールでのお問い合わせ お問い合わせフォームへのリンクボタンが一目で分かるよう、大きめのボタンにし、アニメーションも追加しました。 ・フッターエリア トンマナに合うよう、フッターやコピーライトの上部分に丸みを付けました。
クレジット
Avatar
Webデザイン
コーダー
シェア
Mami Hirutaの他の作品
foriio

あなたのforiioを無料で作成

fori.io/
【デザイン・コーディング】架空/保育園のWEBサイト-1

【デザイン・コーディング】架空/保育園のWEBサイト

※スクール課題 【クライアント】 ハタフル保育園(架空の保育園) 【概要】 ・福島県郡山市にある保育園(架空) ・クライアント様の長所、短所 <長所>食育に力を入れていること。管理栄養士によるバランスの取れた手作り給食を提供している。 <短所>強みの打ち出しが弱い。採用も強化したいが、保育士の応募が少ない。 ・ターゲット 福島県郡山市在住の0〜5歳児の子供を持つ両親。 保育園の最終決定権が母親にある場合が多い為、女性寄りとする。 【期間】 約2ヶ月 【担当領域】 サイトマップ作成、ワイヤーフレーム作成、デザイン、コーディング 【使用したデザインツール】 Adobe XD 【開発手法】 HTML/CSS/JavaScript 【クライアントの要望】 <目的> ・入園者数を増やしたい ・採用を強化したい ・他の園との比較検討の候補に挙がるようにしたい <デザイン> ・印象:活発、安心安全、清潔感 ・メインカラー:ロゴの黄色 ・配色:オレンジ、黄緑、水色 ・フォント:丸みのあるゴシック 【設定した課題】 ・サイトへのアクセスが少ない為、他の園との比較検討の対象にならない ・サイトに園からのお知らせを発信できる場所がない為、保護者に電話やメールで連絡しなければならず対応に工数が取られる ・サイトに採用情報が掲載されていない為、採用も強化したいが応募が来ない ・資料請求ページに辿り着きにくい作りとなっている為、資料請求フォームからのメールが少ない ・サイトに園の様子や子供達の写真が少なく、保育園の特徴や強み、施設見学の詳細などの掲載情報が少ない為、施設見学の申込みがほとんどない 【実施した施策】 <全体像> ・丸みのあるゴシックの使用がクライアント様より要望として挙げられていた為、画像やボタンなどの角にも丸みを付け、トンマナが合うようにしました。 ・活発さが伝わるよう、サイト全体やボタンにアニメーションを付けたり、サイト全体の色味を暖かみのある色にしました。 ・子供達の保育園での様子や保育園の雰囲気が伝わるよう、子供達の写真を多く掲載しました。 <各エリア> ・ヘッダーメニュー 1.「資料請求」「お問い合わせ」「採用情報」は入園者数増や採用応募増を達成させる大事な情報である為、ボタンにして他のリンクと差別化しました。 2.入園者増や保護者への連絡工数減を達成させる為、「基本情報」や「お知らせ」へのリンクをヘッダーに掲載し、すぐにアクセス出来るようにしました。 ・コンセプト 園が何に力を入れているのかが伝わるよう、「食」や「育」などの文字の色を一部変えました。 ・入園をご検討の皆様へ アクセスして欲しいページ(入園のご案内・資料プレゼント・施設見学案内)にすぐアクセスできるよう、ボタンを目立たせ横並びに配置しました。 ・保育園での1日、入園をご検討の皆様へ、採用情報 目的を達成させるのに重要なエリアである為、水玉やボーダーの背景にして他のエリアと差別化を図りました。 ・お知らせ お知らせのカテゴリが一目で分かるよう、色分けしました。 ・お電話でのお問い合わせ 1.電話番号が一目で分かるよう、色付けしました。 2.電話受付している曜日と時間が分かるよう、電話番号の下に掲載しました。 ・メールでのお問い合わせ お問い合わせフォームへのリンクボタンが一目で分かるよう、大きめのボタンにし、アニメーションも追加しました。 ・フッターエリア トンマナに合うよう、フッターやコピーライトの上部分に丸みを付けました。
クレジット
Avatar
Webデザイン
コーダー
シェア
Mami Hirutaの他の作品
foriio

あなたのforiioを無料で作成

fori.io/