NekoSui
猫の匂いを販売する架空のwebサイト
- Idemitsu Miko
- Keywords:website, animation, cat
- プロトタイプ
概要
これは何?
猫の匂いを販売する架空のwebサイト
背景
近年では猫ブームで猫に注目が集まっており、癒しを求めて猫を飼ったり猫カフェに行く人々が増えている。そこで「猫の匂いで癒しを提供する」ということをテーマにアニメーションを筆頭にWebデザインの研究を行うことで、人々の共感を得られるサイトを制作する。
目的
アニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えたりすることでさらに没入感のあるWebサイトを提供するため
コンセプト
・実務的で現実的なWebサイトの中に、非現実的な架空の商品を入れ込む
・ビジュアルデザインの研究を通して伝わりやすいアイコンを制作する
・アニメーションを組み込むことで没入感を提供する
成果物の仕様
メンバー
制作ツール
Windows11
iPadPro
Figma
HTML
CSS
Javascript
プロジェクトの期間
プロジェクトの期間|2024.04.12 - 2024.12.20
まとめ
途中で研究内容を変えたため、作業が遅れ気味になってしまっている。今後スケジュールを整理し直して挽回していきたい
調査
現状調査
先行事例
架空のウェブサイト
アニメーション重視のサイト
技法・技術情報
プロジェクト管理
スケジュール
スケジュール
ToDo
テーマ決めのための調査
技術に関する情報収集
映画のポスターの制作
映画の選定
サイトマップ・ワイヤーフレームの作成
webサイトのコーディング
中間発表準備
最終発表準備
修正・手直し
進捗記録
2024.06.28
相談して決まったこと
- 架空の販売サイトをつくる
- 絶対に売っていないようなもの、現実ではありえないものを題材にする
- 先にワイヤーフレームとコーディングをする
架空の販売サイトを作っているもの
新しいサイトマップとワイヤフレームと商品構想
香り玉を使って猫のにおいを提供する。香り玉にした理由は家の外でも愛猫の匂いで癒されてほしいという考えから、持ち運びやすい香り玉を採用した。香り玉の瓶の形はミルクの形をイメージしており、子猫がミルクを飲んでいる所から連想してこの形にした。ラベルの部分はその商品の猫の柄や顔を載せて何の猫の匂いなのかが一目でわかるようにした。
テストサイト
2024.06.21
企画の練り直し
- アニメーションを多用した架空のサイトは作りたい
- 架空の販売サイト
- 映画館のサイト
- アニメーションを紹介するサイト?
2024.06.14
決めたこと
- ゲーム要素はなくしてアニメーションに絞る
- Webサイトがバグっている表現は無くす
サイト
2024.06.07
2024.05.31
テキストアニメーションテスト
テキストグリッチ
2024.05.24
中間発表の講評
- 何をしているのか分からない。どういうゲームなのか伝えるメッセージを出す
- オマージュした方が著作権侵害になりかねない。そのまま映画を載せたほうが良い
- 普通にインタラクティブなサイトを作ったほうがいいのでは?
- フローチャートや動きのサンプル、既存のキャプチャーを使う
- 類似するものを見つける
- 構成の段階をきちんと踏む
- 使いたい要素が目的に合うかきちんと見る
やりたいことに一番近いもの
参考になりそうなもの
フローチャート
2024.05.17
- メインビジュアルの作成
文字化け風にするためleetを使った(leetとは英語圏で使われるインターネット上でのアルファベットの標記のこと)
グリッチを使って画面が荒れている風にした
2024.05.10
ワイヤーフレームの作成続き
映画館のウェブサイト
Webサイトのデザインの参考にしたいもの
https://ac-bu.info/happening/
https://dozo-gift.com/
https://uniam.jp/
カラーパレット
Figmaインタラクションの作成
2024.04.26
仮のサイトマップとワイヤーフレーム(一部)の作成
調査
スケジュールの作成
技術に関すること
2024.04.19
参考になりそうなもの
相談して決まったこと
- Webサイトのアニメーションや設定にストーリー性を持たせてみる
- 謎解き要素などを入れて見る人に体験してもらう
- インタラクティブについて調べて情報収集する
インタラクティブとは
2024.04.12
参考になりそうなもの
やりたいこと・興味のあること
- Webサイト制作
- アニメーション
- カラーパレット
- フリーアイコン制作のサイト
- ポスターの制作
- 嘘の映画館のサイト