• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 出光美心/卒業研究 へ行く。
  • 1 (2024-11-22 (金) 05:41:57)
  • 2 (2024-11-29 (金) 07:43:22)
  • 3 (2024-12-06 (金) 13:32:11)
  • 4 (2024-12-13 (金) 16:16:02)

---

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を使うことで出来ることの幅が増えたので、今後も積極的に活用していきつつ新しい事に挑戦したいと考える。

調査

現状調査

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

• 「イマーシブコンテンツ」と呼ばれるWebサイトを集めてみた
• Webは楽しい。そんな風に思える「体験できるサイト」を集めてみました。
• 進化するWebアニメーション！動きがもたらすWebサイトの魅力
• インタラクティブとは
• 魅力的でインタラクティブなウェブサイト
  
  

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

先行事例

架空のウェブサイト

• graziexxparlor
• 江崎悠芽さんの卒業制作
  
  

アニメーション重視のサイト

• 変なWebメディア
• すごいWeb
  
  

技法・技術情報

• GitHub Copilot
• 【js】イメージにグリッチエフェクト効果を実装する
• CSS/JavaScriptで文字に動きを！テキストアニメーション30選
• トレンドウェブサイトから学べ！JavaScriptで作る本格スクロール演出
  
  
  
  

プロジェクト管理

スケジュール

スケジュール

• クリティカルパスとは
  
  

ToDo

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

---

---

2024.12.13

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

2024.12.05

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

2024.11.29

• Github
• テストサイト
  
  
  
  

2024.11.22

• Github
• テストサイト
  
  
  
  

2024.11.15

• Github
• テストサイト
• ワイヤーフレームの変更
  
  
  
  

2024.11.08

• Github
• テストサイト
• ワイヤーフレームの変更
  
  
  
  

2024.11.01

• Github
• テストサイト
• ワイヤーフレームの変更
  
  
  
  

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

• Github
• テストサイト
  
  
  
  

2024.07.12

• 相談して決まったこと
  • スライドショー、スクロールアニメーション、テキストアニメーションを主に使ってwebサイトを制作する
  • 遊べるサイトを作ってみる
  • JavaScriptAPIで色々調べてみる
    
    

• ｐ５ｊｓ
  • 配列変数を使った応用
    猫を使ったアニメーションとして使えそう
    
    
    
    

2024.07.05

前期最終発表まとめ

• 背景を猫ではなくWebサイトやアニメーションについての記述をメインにする
• 調査の部分も猫に関するものはおまけ程度にする
• なんのアニメーションをどの効果を与えるために使っているのかリストをつくる
• 新しいアニメーションの提案をする(普通のサイトじゃ使えないようなものを使う方法もあり)
• 作業環境を整える(Mozilla Firefox)
  
  

特徴的なアニメーション

• Webデザインテキストアニメーション/エフェクト15選
• WEBデザインに取り入れられるアニメーションアイデアサイト5選
• 【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き）
• サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】
• コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーエフェクト集まとめ
• Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
  
  

• 個性的なスクロールアニメーション
• 個性的なスライドアニメーション
  
  

• アニメーションリスト
  
  
  
  

2024.06.28

相談して決まったこと

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

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

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

• graziexxparlor
• 江崎悠芽さんの卒業制作
  
  

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

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

• ワイヤフレーム
  
  

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

テストサイト

• Github
• テストサイト
  
  
  
  

2024.06.21

企画の練り直し

• アニメーションを多用した架空のサイトは作りたい
• 架空の販売サイト
• 映画館のサイト
• アニメーションを紹介するサイト？
  
  
  
  

2024.06.14

決めたこと

• ゲーム要素はなくしてアニメーションに絞る
• Webサイトがバグっている表現は無くす

サイト

• Github
  
  
  
  

2024.06.07

• 研究内容の練り直し
• 映画の選定(仮)
  
  
  
  

2024.05.31

テキストアニメーションテスト

• Github
• テストサイト
  
  

テキストグリッチ

• CSS Glitch Text Effect
  
  
  
  

2024.05.24

中間発表の講評

• 何をしているのか分からない。どういうゲームなのか伝えるメッセージを出す
• オマージュした方が著作権侵害になりかねない。そのまま映画を載せたほうが良い
• 普通にインタラクティブなサイトを作ったほうがいいのでは？
• フローチャートや動きのサンプル、既存のキャプチャーを使う
• 類似するものを見つける
• 構成の段階をきちんと踏む
• 使いたい要素が目的に合うかきちんと見る
  
  

やりたいことに一番近いもの

• オルタネイト・リアリティ・ゲーム(ARG)

参考になりそうなもの

• 曖宝学園かがみの特殊少年更生施設
• アートと少女を巡る冒険
• みんなのスパイ大作戦～ベイサイド・ミッション～

フローチャート

2024.05.17

• プロトタイプ

• 映画のリスト

• アニメーションのリスト

• メインビジュアルの作成
  文字化け風にするためleetを使った(leetとは英語圏で使われるインターネット上でのアルファベットの標記のこと)
  グリッチを使って画面が荒れている風にした
  
  
  
  

2024.05.10

ワイヤーフレームの作成続き

• ワイヤーフレーム
  
  

映画館のウェブサイト

• TOHOシネマズ
• T・ジョイ博多
• ユナイテッド・シネマ
  
  

Webサイトのデザインの参考にしたいもの

https://ac-bu.info/happening/
https://dozo-gift.com/
https://uniam.jp/


カラーパレット
Figmaインタラクションの作成

2024.04.26

仮のサイトマップとワイヤーフレーム(一部)の作成

調査

• 「イマーシブコンテンツ」と呼ばれるWebサイトを集めてみた
• Webは楽しい。そんな風に思える「体験できるサイト」を集めてみました。
• インタラクティブなサイトの演出アイデア
• 魅力的でインタラクティブなウェブサイト
• 進化するWebアニメーション！動きがもたらすWebサイトの魅力
  アニメーションや演出の参考になりそう
  
  

スケジュールの作成

• スケジュール
  
  

技術に関すること

• GitHub Copilot
• 【js】イメージにグリッチエフェクト効果を実装する
• CSS/JavaScriptで文字に動きを！テキストアニメーション30選
• トレンドウェブサイトから学べ！JavaScriptで作る本格スクロール演出
  
  
  
  

2024.04.19

参考になりそうなもの

• 変なWebメディア
• すごいWeb
  サイトのアニメーションや表現が参考になりそう

相談して決まったこと

• Webサイトのアニメーションや設定にストーリー性を持たせてみる
• 謎解き要素などを入れて見る人に体験してもらう
• インタラクティブについて調べて情報収集する
  インタラクティブとは
  
  
  
  

2024.04.12

参考になりそうなもの

• 木村天美さんの卒業研究
  Webサイトを制作していて、アニメーションやグラフィックなどこだわりが見える
• SPAM MUSEUM
  発想が面白い

やりたいこと・興味のあること

• Webサイト制作
• アニメーション
• カラーパレット
• フリーアイコン制作のサイト
• ポスターの制作
• 嘘の映画館のサイト