第1フェーズ
企画となる「性教育」の現状、社会的背景、性教育コンテンツの目的などとともに具現化した世界観も丁寧に共有いただきつつスタートしました。
第1フェーズとして特設ページ全体や主要コンテンツとなる中央校舎=クイズ、相談室、図書室におけるWebデザイン、イラスト、キャラクター作成を行いました。
学園全体のアイソメトリックイラスト
ココカラ学園入り口となる特設ページトップではアイソメトリックイラスト(斜め上から見下ろしたようなイラスト)で学園全体を表現しています。
学園の背景イラスト
現実にありそうで無い、豪華な学園の世界観を保ちつつ実際の学校と親近感が持てるように実際の建物や小物を描かせていただきました。
また、いろんな子供が通っているということを踏まえバリアフリーな建物や背景を意識しました。
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy12.png)
![学園イラスト 教室](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy08-650x468.png)
![学園イラスト 庭 外](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy07-650x468.png)
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/e50d5650050ff81c02894835b28f3701-650x520.jpg)
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/cdf795165331a0b0f504c2e017573f24-650x520.jpg)
その他カットイラスト
キャラクター作成
キャラクターは身近にいそうな小学生という考えで仕草や立ち方を提案の上制作致しました。
全体的に柔らかさも意識し、背景やキャラクターに黒の線は使用せず茶色などの色を使用しております。
※キャラクターごとにポーズ、表情違いもあります。
アイコンイラスト作成
キャラクターや建物のアイコンも作成。
ロゴデザイン
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy03.png)
Webデザイン
クイズ画面では実際に閲覧する小学生に馴染みのあるゲーム画面も意識したWebデザインになっています。
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy06-1-1300x881.png)
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy14-1300x883.jpg)
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy15.jpg)
第2フェーズ
おはなし広場=「ココカラ学園インタビュー」のオープンにむけてインタビューページのWebデザインと背景イラストを提供しました。
学園の背景イラスト
第1フェーズの背景イラストに合わせる形で広場のイラストの作成。
![学園イラスト 広場](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/42da79e499334617fec123d687d1d8be.jpg)
Webデザイン
みやすさ、読みやすさを意識しながらインタビューページのWebデザインを進めました。
![](https://www.kazmia.jp/wp/wp-content/uploads/2023/06/yy17-1-1300x755.png)
第3フェーズ
おさらいテストコーナーのオープンにあたり、背景やカットイラストの提供をしました。
学園の背景イラスト