NekoSui
猫の匂いを販売する架空のwebサイト
- Idemitsu Miko
- Keywords:website, animation, cat
- プロトタイプ
概要
これは何?
猫の匂いを販売する架空のwebサイト
背景
Webサイトでの発展は目覚ましく、ユーザーに対してコンテンツや情報をより伝えやすく見やすくするアニメーションの演出方法が増えた。視覚、聴覚で伝えてるアニメーションや3Dなど様々な表現方法がある。そこで「猫の匂いで癒しを提供する」ということをテーマにアニメーションを筆頭にWebデザインの研究を行い、Webサイトを制作する。
目的
アニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えたりすることでさらに没入感のあるWebサイトを提供するため
コンセプト
・Webサイトの中に、非現実的な架空の商品を入れ込む
・ビジュアルデザインの研究を通して伝わりやすいアイコンを制作する
・アニメーションを組み込むことで没入感を提供する
成果物の仕様
- webサイト
GSAP、JavaScript、CSSなどを使ってスクロールアニメーション、スライドショー、テキストアニメーションを主にwebサイトに導入する
メンバー
制作ツール
Windows11
iPadPro
Figma
HTML
CSS
Javascript
プロジェクトの期間
プロジェクトの期間|2024.04.12 - 2024.12.20
まとめ
途中で研究内容を変えたため、作業が遅れ気味になってしまっている。ほかに商品の構想やサイトのアニメーションの実装がうまくいっていないところがあるので、今後スケジュールを整理し直して作業を進めていきたい
調査
現状調査
インタラクティブに関する調査
先行事例
架空のウェブサイト
アニメーション重視のサイト
技法・技術情報
プロジェクト管理
スケジュール
スケジュール
ToDo
サイトマップ・ワイヤーフレームの作成
webサイトのコーディング
商品の制作
中間発表準備
最終発表準備
修正・手直し
進捗記録
2024.07.19
2024.09,12
2024.09.05
2024.08.28
2024.07.19
2024.07.12
- 相談して決まったこと
- スライドショー、スクロールアニメーション、テキストアニメーションを主に使ってwebサイトを制作する
- 遊べるサイトを作ってみる
- JavaScriptAPIで色々調べてみる
2024.07.05
前期最終発表まとめ
- 背景を猫ではなくWebサイトやアニメーションについての記述をメインにする
- 調査の部分も猫に関するものはおまけ程度にする
- なんのアニメーションをどの効果を与えるために使っているのかリストをつくる
- 新しいアニメーションの提案をする(普通のサイトじゃ使えないようなものを使う方法もあり)
- 作業環境を整える(Mozilla Firefox)
特徴的なアニメーション
2024.06.28
相談して決まったこと
- 架空の販売サイトをつくる
- 絶対に売っていないようなもの、現実ではありえないものを題材にする
- 先にワイヤーフレームとコーディングをする
架空の販売サイトを作っているもの
新しいサイトマップとワイヤフレームと商品構想
商品は猫の品種ごとに19ページ作成予定
香り玉を使って猫のにおいを提供する設定。香り玉にした理由は家の外でも愛猫の匂いで癒されてほしいという考えから、持ち運びやすい香り玉を採用した。香り玉の瓶の形はミルクの形をイメージしており、子猫がミルクを飲んでいる所から連想してこの形にした。ラベルの部分はその商品の猫の柄や顔を載せて何の猫の匂いなのかが一目でわかるようにした。
制作はblenderで行う予定。
テストサイト
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サイト制作
- アニメーション
- カラーパレット
- フリーアイコン制作のサイト
- ポスターの制作
- 嘘の映画館のサイト