出光美心/卒業研究

NekoSui

猫の匂いを販売する架空のwebサイト

Idemitsu Miko
Keywords：website, animation, cat
URL：http://nekosui.starfree.jp/

↑

概要

↑

これは何？

猫の匂いを販売する架空のwebサイト

↑

背景

近年では猫ブームと言われるほど猫の需要が高まっており、猫を飼う人々も増えている。猫にはヒーリング効果があり、特に匂いは飼い主にリラックス効果を与えるが外出先では愛猫の匂いは嗅げない。そこで「どこにいても猫の匂いで癒しを提供する」ということをテーマに現実には存在しないものを販売するという面白さと、癒しを与える架空のWebサイトを制作する。

↑

目的

架空の猫の匂いを販売するWebサイトを作ることで、日常のちょっとした楽しさと癒しを提供するため

↑

コンセプト

・Webサイトの中に、非現実的な架空の商品を入れ込む
・アニメーションを組み込むことで没入感を提供する

↑

成果物の仕様

NEKOSUI
webサイト
GSAP、JavaScript、CSSなどを使ってスクロールアニメーション、スライドショー、テキストアニメーションを主にwebサイトに導入する

↑

メンバー

↑

制作ツール

Windows11
iPadPro
Figma
HTML
CSS
Javascript
blender

↑

プロジェクトの期間

プロジェクトの期間｜2024.04.12 - 2024.12.20

↑

まとめ

今回の研究では架空のものを現実にあるかのように表現することに重きを置いて、猫の可愛さと架空のサイトの面白さをWebサイト上で表現することが出来た。3Dを使うことでかなりリアリティが増して、サイトとしてのクオリティも上がった。今回はChatGPTを活用してアニメーションのコードをいくつか考えてもらい、それを書き換えながらサイトを制作した。今まで知らなかったことや出来なかったことがAIを使うことで出来ることの幅が増えたので、今後も積極的に活用していきつつ新しい事に挑戦したいと考える。

↑

調査

↑

現状調査

インタラクティブに関する調査

猫に関する調査
- 「猫ブーム」となったのはいつから？その理由をリサーチ！
- なぜペットのニオイは落ち着くのか？ついつい嗅いでしまうメカニズムと対処方法を紹介

↑

ToDo

~~サイトマップ・ワイヤーフレームの作成~~
webサイトのコーディング
商品の制作
中間発表準備
最終発表準備
修正・手直し

進捗記録

↑

2025.01.08

ブラッシュアップした部分

モデルの凹凸感を無くした
ロゴをトップページ以外でも表示されるように修正
フォントの種類や余白祖そろえるように修正
「add to cart」や送信ボタンを押すと最後のページに飛ぶように修正
Github

↑

2024.12.20

3Dモデルの修正
モデルの凹凸を無くなるようにした

↑

2024.12.13

最終発表でのアドバイス
- ボタンを押したら何か起こるようにする(Add to cartなど)
- トップページ以外でもロゴを表示させる
- コンタクトのページは本当に送れてしまうとイタズラされる可能性もあるので、ボタンを押すとポップアップが出るとか別の動きにする
- フォントの種類や余白がバラバラなので統一する
- 3Dモデルのマテリアルを設定して、文字を浮き出ないようにする。影はなくてもいい。リタッチでもいいので修正する
Github
テストサイト
3Dモデルの修正

↑

2024.12.06

Github
テストサイト
3Dモデルの修正

↑

2024.11.29

↑

2024.11.22

↑

2024.11.15

↑

2024.11.08

↑

2024.11.01

↑

2024.10.25

Github
テストサイト
3Dモデルの作成
ワイヤーフレームの変更

後期中間発表
・モデルをテクスチャの貼り付けで量産する
・最初に架空のサイトであることがわかるように明記する
・少しクスッとできるような面白い要素を入れる(写真を使ったり、箱や袋に入った状態のものを作る)
・オーダーメイドが出来るような文言を入れる

↑

2024.10.18

Github
テストサイト
3Dモデルの作成

↑

2024.10.11

Github
テストサイト
3Dモデルの作成


香玉のバージョンと練り香水のバージョンの二種類を作成

↑

2024.10.04

Github
テストサイト
3Dモデルの作成
https://design.kyusan-u.ac.jp/OpenSquareJP/?WebGL

↑

2024.09.26

Github
テストサイト
3Dモデルの作成

↑

2024.09.19

Github
テストサイト
3Dモデルの作成

↑

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

↑

相談して決まったこと

架空の販売サイトをつくる
絶対に売っていないようなもの、現実ではありえないものを題材にする
先にワイヤーフレームとコーディングをする

江戸時代に今をはるかにしのぐ猫ブームがあった
「猫ブーム」となったのはいつから？その理由をリサーチ！
猫のもつ癒しのメカニズムと効果とは？猫の気持ちは？専門家に聞いてみた
猫が人を癒してくれるのはなぜ？猫の持つ「癒し効果」を探る！
【調査】猫から感じるいいニオイとは？「気持ちが落ち着く」「精神安定剤」とまで感じる飼い主さんも
飼い主さん263名に「愛猫の体から『いいニオイがする』と感じたことがあるかどうか」アンケート調査。飼い主の約7割が該当する結果に
【意外】猫はとてもいい匂い！理由はグルーミングと日向ぼっこにあった！#119

↑

架空の販売サイトを作っているもの

↑

新しいサイトマップとワイヤフレームと商品構想

商品は猫の品種ごとに19ページ作成予定

ワイヤフレーム

香り玉を使って猫のにおいを提供する設定。香り玉にした理由は家の外でも愛猫の匂いで癒されてほしいという考えから、持ち運びやすい香り玉を採用した。香り玉の瓶の形はミルクの形をイメージしており、子猫がミルクを飲んでいる所から連想してこの形にした。ラベルの部分はその商品の猫の柄や顔を載せて何の猫の匂いなのかが一目でわかるようにした。
制作はblenderで行う予定。