カメレオン
知育教材「カメレオン」を広めるサイト
- 三浦 遥
- Keywords：Webサイト, イラスト
- カメレオンサイト
概要
これは何？
過去に作成した知育教材の「カメレオン」を広めるためのサイト
背景と目的
短期大学部にいた時、「カメレオン」を製作した。これは子どもがテレビやスマートフォンに簡単に触れることが多くなった時代に得にくくなった「五感」を育てることができるキットである。この「カメレオン」を制作したのみで、多くの人に知ってもらえる機会がないこと、また、「カメレオン」の効果を検証してもらえることが少なかったため、検証として試行してくれる人を募るためにWebサイトを制作した。目的は「カメレオン」に興味を持ってもらえる、試行したいと思ってもらえるようなサイトを制作すること。
コンセプト
- 「カメレオン」のターゲットは親や保育園の先生など→「親近感」をキーワードにかわいさ、見やすさ、シンプルを目指す。
- カメレオンの世界観を大切にする
成果物の仕様
Webサイト
制作ツール
HTML・CSS
プロジェクトの期間
2024.09.16 - 2024.12.23
まとめ
- 手書きのイラストやアニメーションを入れることで優しく、親近感のあるサイトが制作できた。
- 青を主に使用し、フォントもパッケージなどに似ているものを使用したため、世界観を大切にできた。
- カメレオンの重要な情報や魅力をサイトに十分に詰め込むことができた。
- HTMLとCSSだけでは表現できないものがあったため、JavaScriptもこれから勉強してブラッシュアップしていきたい。
調査
現状調査
親近感をキーワードに
WEB DESIGN GALLERY
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
ワイヤーフレーム作成- Webサイト製作
説明
遊び方
セット内容
contact
テキスト入力
進捗記録
2025.01.09
- ブラッシュアップ
- 文章を左揃えに変更
- 「ここをクリック」の文章を、「わたしたちをクリック」に変更
- ふきだしの不自然な形を訂正
- お問い合わせフォームにダミー表記
2024.12.23
- 最終発表三週目
ブラッシュアップ
2024.12.16
- 最終発表二週目
発表後のコメント
作品の雰囲気に沿って制作できてて良い、可愛らしさがある
お問い合わせフォームはダミーならしっかりダミーと表記する
お問い合わせはGoogle formの方が使いやすい
ここをクリックはどこを押すかわからない
内容が多く難しいが遊び方もHTMLで構成できたら良い
文章が長いので左揃えの方が良い
2024.12.09
- 最終発表一週目
概要提出
サイト更新(絵本の内容を追加！)
2024.12.02
- 概要制作
制作の調査をわかりやすく
まとめを具体的に - サイト更新(フォント変更)
Google Fonts ＋ Japanese
2024.11.25
- サイト製作
Fille Zillaのエラー 大文字小文字をしっかり確認
2024.11.18
- 画像が大きすぎる
Google Squooshを使用する
2024.11.11
- サイト製作
新しくイラストを描く、Fille Zillaの使い方
2024.10.28
- 中間発表
2024.10.21
- 中間発表
- 配布は難しいのでは?
試行してもらうという形にする。
- 配布は難しいのでは?
2024.10.14
- サイト制作
シングルページは多いのでマルチページにする。
- サイトのonedrive
2024.10.07
- 試作サイト作成
- 参考
2024.9.30
ワイヤーフレーム作成
- シングルページで製作する
質問のところは別のフレームにしても良い(出来そうだったら)
2024.9.24
方向性の決定
- 「カメレオン」を広めるサイトの作成
販売にしてしまうと金銭や製作などに問題が起こるため、あくまで知ってもらうというところにフォーカスを当てる。また、contactのページを作成し、欲しいという要望があれば製作する方向でも考える。
2024.9.16
テーマ内容
- 短大で製作した卒業作品を紹介するサイト製作
紹介サイトを作ることで作品を知ってもらうきっかけになる。
保育園や幼稚園で使ってもらいたい。
カメレオン3.jpg
ワイヤー.jpg
ワイヤー-02.jpg
ワイヤー_アートボード 1.jpg
カメレオン.jpg
ワイヤーフレーム.jpg
