#author("2024-07-05T16:53:10+09:00","default:member","member") *NekoSui 猫の匂いを販売する架空のwebサイト &image(nekosui.JPG); -''Idemitsu Miko'' -'''Keywords:website, animation, cat''' -[[プロトタイプ>https://idmt-mk.github.io/NekoSui/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ ~ **概要 ***これは何? //&color(red){これは何か・・を簡潔に}; 猫の匂いを販売する架空のwebサイト ~ //&color(red){プロジェクトの背景と目的}; ***背景 Webサイトでの発展は目覚ましくアニメーションや3Dなど、様々な表現方法がある。そこで「猫の匂いで癒しを提供する」ということをテーマにアニメーションを筆頭にWebデザインの研究を行い、Webサイトを制作する。 ~ ***目的 アニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えたりすることでさらに没入感のあるWebサイトを提供するため ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; ・Webサイトの中に、非現実的な架空の商品を入れ込む ・ビジュアルデザインの研究を通して伝わりやすいアイコンを制作する ・アニメーションを組み込むことで没入感を提供する ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -webサイト ~ ***メンバー //&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール|ハードウエア・ソフトウエア}; Windows11 iPadPro Figma HTML CSS Javascript ~ ***プロジェクトの期間 プロジェクトの期間|2024.04.12 - 2024.12.20 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 途中で研究内容を変えたため、作業が遅れ気味になってしまっている。ほかに商品の構想やサイトのアニメーションの実装がうまくいっていないところがあるので、今後スケジュールを整理し直して作業を進めていきたい //現状調査の時点でインタラクティブという言葉やJavaScriptの知らなかったアニメーション、GitHubのAIを使った機能を知ることが出来てよりWebに関する知識を深めることが出来た //Webサイトに載せる映画の選定や謎解きを考える作業が難航しており遅れ気味なので、今後相談したり先行事例をさらに詳しく調べて遅れを取り戻したい ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; インタラクティブに関する調査 -[[「イマーシブコンテンツ」と呼ばれるWebサイトを集めてみた>https://www.infobahn.co.jp/ib_column/6566]] -[[Webは楽しい。そんな風に思える「体験できるサイト」を集めてみました。>https://note.com/mio_u_m/n/nf8b7d80ae450]] -[[インタラクティブとは>https://edgcal.jp/what-is-interactive/#content]] -[[魅力的でインタラクティブなウェブサイト>https://www.uxpin.com/studio/jp/blog-jp/%E9%AD%85%E5%8A%9B%E7%9A%84%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%81%AA%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88/]] ~ -猫に関する調査 --[[江戸時代に今をはるかにしのぐ猫ブームがあった>https://toyokeizai.net/articles/-/512713]] --[[「猫ブーム」となったのはいつから?その理由をリサーチ!>https://pet-info.event.rakuten.net/articles/13897625551]] --[[猫のもつ癒しのメカニズムと効果とは?猫の気持ちは?専門家に聞いてみた>https://townwork.net/magazine/life/125951/#:~:text=%E7%8C%AB%E3%82%92%E3%81%AA%E3%81%A7%E3%82%8B%E3%81%AA%E3%81%A9%E3%80%81%E7%9B%B4%E6%8E%A5,%E3%81%A8%E6%84%9F%E3%81%98%E3%82%8B%E7%90%86%E7%94%B1%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82]] --[[猫が人を癒してくれるのはなぜ?猫の持つ「癒し効果」を探る!>https://www.anicom-sompo.co.jp/nekonoshiori/9327.html]] --[[【調査】猫から感じるいいニオイとは?「気持ちが落ち着く」「精神安定剤」とまで感じる飼い主さんも>https://cat.benesse.ne.jp/lovecat/content/?id=112936]] --[[【意外】猫はとてもいい匂い!理由はグルーミングと日向ぼっこにあった!#119>https://www.idog.jp/blog/2021/11/29/cat-smells-good/]] ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ***架空のウェブサイト -[[graziexxparlor>https://graziexxparlor.onedesign-eno.com/]] -[[江崎悠芽さんの卒業制作>https://design.kyusan-u.ac.jp/socialdesign/?%E6%B1%9F%E5%B4%8E%E6%82%A0%E8%8A%BD/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6II]] ~ ***アニメーション重視のサイト -[[変なWebメディア>https://web-media.blue-puddle.com/]] -[[すごいWeb>https://sugoiweb.nezihiko.com/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[GitHub Copilot>https://docs.github.com/ja/copilot/using-github-copilot/getting-started-with-github-copilot]] -[[【js】イメージにグリッチエフェクト効果を実装する>https://www.rootstyledesign.com/blog/%E3%80%90js%E3%80%91%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%B0%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E5%8A%B9%E6%9E%9C%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B]] -[[CSS/JavaScriptで文字に動きを!テキストアニメーション30選>https://goworkship.com/magazine/text-effect-typography/]] -[[トレンドウェブサイトから学べ!JavaScriptで作る本格スクロール演出>https://ics.media/entry/210426/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[スケジュール>https://docs.google.com/spreadsheets/d/1nujRJAn7Q10og84-1zYjumqmAJ69chpVP6iTfvI2aPE/edit?usp=sharing]] -[[クリティカルパスとは>https://asana.com/ja/resources/critical-path-method]] ~ ***ToDo //&color(red){やるべきこと(タスク)を箇条書きにします。}; %%サイトマップ・ワイヤーフレームの作成%% webサイトのコーディング 商品の制作 中間発表準備 最終発表準備 修正・手直し ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。}; #hr ~ ~ **2024.07.05 ***前期最終発表まとめ -背景を猫ではなくWebサイトやアニメーションについての記述をメインにする -調査の部分も猫に関するものはおまけ程度にする -なんのアニメーションをどの効果を与えるために使っているのかリストをつくる -新しいアニメーションの提案をする(普通のサイトじゃ使えないようなものを使う方法もあり) -作業環境を整える(Mozilla Firefox) ~ **2024.06.28 ***相談して決まったこと -架空の販売サイトをつくる -絶対に売っていないようなもの、現実ではありえないものを題材にする -先にワイヤーフレームとコーディングをする ~ -[[江戸時代に今をはるかにしのぐ猫ブームがあった>https://toyokeizai.net/articles/-/512713]] -[[「猫ブーム」となったのはいつから?その理由をリサーチ!>https://pet-info.event.rakuten.net/articles/13897625551]] -[[猫のもつ癒しのメカニズムと効果とは?猫の気持ちは?専門家に聞いてみた>https://townwork.net/magazine/life/125951/#:~:text=%E7%8C%AB%E3%82%92%E3%81%AA%E3%81%A7%E3%82%8B%E3%81%AA%E3%81%A9%E3%80%81%E7%9B%B4%E6%8E%A5,%E3%81%A8%E6%84%9F%E3%81%98%E3%82%8B%E7%90%86%E7%94%B1%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82]] -[[猫が人を癒してくれるのはなぜ?猫の持つ「癒し効果」を探る!>https://www.anicom-sompo.co.jp/nekonoshiori/9327.html]] -[[【調査】猫から感じるいいニオイとは?「気持ちが落ち着く」「精神安定剤」とまで感じる飼い主さんも>https://cat.benesse.ne.jp/lovecat/content/?id=112936]] 飼い主さん263名に「愛猫の体から『いいニオイがする』と感じたことがあるかどうか」アンケート調査。飼い主の約7割が該当する結果に -[[【意外】猫はとてもいい匂い!理由はグルーミングと日向ぼっこにあった!#119>https://www.idog.jp/blog/2021/11/29/cat-smells-good/]] ~ ***架空の販売サイトを作っているもの -[[graziexxparlor>https://graziexxparlor.onedesign-eno.com/]] -[[江崎悠芽さんの卒業制作>https://design.kyusan-u.ac.jp/socialdesign/?%E6%B1%9F%E5%B4%8E%E6%82%A0%E8%8A%BD/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6II]] ~ ***新しいサイトマップとワイヤフレームと商品構想 &image(sitemap.jpg,,50%); 商品は猫の品種ごとに19ページ作成予定 ~ -[[ワイヤフレーム>https://photos.app.goo.gl/fGKm1H9k4xnDm4nc7]] ~ &image(item1.JPG,,40%); &image(item2.JPG,,40%); 香り玉を使って猫のにおいを提供する設定。香り玉にした理由は家の外でも愛猫の匂いで癒されてほしいという考えから、持ち運びやすい香り玉を採用した。香り玉の瓶の形はミルクの形をイメージしており、子猫がミルクを飲んでいる所から連想してこの形にした。ラベルの部分はその商品の猫の柄や顔を載せて何の猫の匂いなのかが一目でわかるようにした。 制作はblenderで行う予定。 ~ ***テストサイト -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] ~ ~ **2024.06.21 ***企画の練り直し -アニメーションを多用した架空のサイトは作りたい -架空の販売サイト -映画館のサイト -アニメーションを紹介するサイト? ~ ~ **2024.06.14 ***決めたこと -ゲーム要素はなくしてアニメーションに絞る -Webサイトがバグっている表現は無くす ***サイト -[[Github>https://github.com/IDMT-MK/S-N3M4]] ~ ~ **2024.06.07 -研究内容の練り直し -映画の選定(仮) ~ ~ **2024.05.31 ***テキストアニメーションテスト -[[Github>https://github.com/IDMT-MK/text-anime]] -[[テストサイト>https://idmt-mk.github.io/text-anime/]] ~ ***テキストグリッチ -[[CSS Glitch Text Effect>https://www.cssportal.com/css-glitch-text-effect/]] ~ ~ **2024.05.24 ***中間発表の講評 -何をしているのか分からない。どういうゲームなのか伝えるメッセージを出す -オマージュした方が著作権侵害になりかねない。そのまま映画を載せたほうが良い -普通にインタラクティブなサイトを作ったほうがいいのでは? -フローチャートや動きのサンプル、既存のキャプチャーを使う -類似するものを見つける -構成の段階をきちんと踏む -使いたい要素が目的に合うかきちんと見る ~ ***やりたいことに一番近いもの -[[オルタネイト・リアリティ・ゲーム(ARG)>https://arg.igda.jp/p/arg.html]] 参考になりそうなもの -[[曖宝学園かがみの特殊少年更生施設>https://kagamino-jrep.net/]] -[[アートと少女を巡る冒険>https://elements-soft.com/ft5game/]] -[[みんなのスパイ大作戦~ベイサイド・ミッション~>https://elements-soft.com/ft5game/]] フローチャート &image(flowchart.jpg,,50%); ~ ~ **2024.05.17 -[[プロトタイプ>https://www.figma.com/proto/QaZ8ht1uz5lzAd48pNU52B/%E7%84%A1%E9%A1%8C?page-id=0%3A1&node-id=33-37&viewport=428%2C475%2C0.13&t=vHgl8jSlSfLC8XiE-1&scaling=scale-down&starting-point-node-id=33%3A37]] -[[映画のリスト>https://docs.google.com/spreadsheets/d/1Ykvbj_EeZriYJOBPYJ7z-OBR2vkEjg6lERBptJ69zB8/edit?usp=sharing]] -[[アニメーションのリスト>https://docs.google.com/spreadsheets/d/1mJb24pY5r2BW0DG3wOAuBa0bSDJ_gkT5SZgaXPWpbpc/edit?usp=sharing]] -メインビジュアルの作成 文字化け風にするためleetを使った(leetとは英語圏で使われるインターネット上でのアルファベットの標記のこと) //イキりました グリッチを使って画面が荒れている風にした ~ ~ **2024.05.10 ***ワイヤーフレームの作成続き -[[ワイヤーフレーム>https://photos.app.goo.gl/fGKm1H9k4xnDm4nc7]] ~ ***映画館のウェブサイト -[[TOHOシネマズ>https://www.tohotheater.jp/]] -[[T・ジョイ博多>https://tjoy.jp/t-joy_hakata]] -[[ユナイテッド・シネマ>https://www.unitedcinemas.jp/canalcity/daily.php]] ~ ***Webサイトのデザインの参考にしたいもの https://ac-bu.info/happening/ https://dozo-gift.com/ https://uniam.jp/ ~ [[カラーパレット>https://www.happyhues.co/palettes/13]] [[Figmaインタラクションの作成>https://help.figma.com/hc/ja/articles/360040315773-%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90]] ~ ~ **2024.04.26 ***仮のサイトマップとワイヤーフレーム(一部)の作成 &image(Group 1.jpg,,50%); &image(wire 1.jpg,,40%); &image(wire2.jpg,,40%); ~ ***調査 -[[「イマーシブコンテンツ」と呼ばれるWebサイトを集めてみた>https://www.infobahn.co.jp/ib_column/6566]] -[[Webは楽しい。そんな風に思える「体験できるサイト」を集めてみました。>https://note.com/mio_u_m/n/nf8b7d80ae450]] -[[インタラクティブなサイトの演出アイデア>https://www.evoworx.co.jp/blog/interactive-design/]] -[[魅力的でインタラクティブなウェブサイト>https://www.uxpin.com/studio/jp/blog-jp/%E9%AD%85%E5%8A%9B%E7%9A%84%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%81%AA%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88/]] アニメーションや演出の参考になりそう ~ ***スケジュールの作成 -[[スケジュール>https://docs.google.com/spreadsheets/d/1nujRJAn7Q10og84-1zYjumqmAJ69chpVP6iTfvI2aPE/edit?usp=sharing]] ~ ***技術に関すること -[[GitHub Copilot>https://docs.github.com/ja/copilot/using-github-copilot/getting-started-with-github-copilot]] -[[【js】イメージにグリッチエフェクト効果を実装する>https://www.rootstyledesign.com/blog/%E3%80%90js%E3%80%91%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%B0%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E5%8A%B9%E6%9E%9C%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B]] -[[CSS/JavaScriptで文字に動きを!テキストアニメーション30選>https://goworkship.com/magazine/text-effect-typography/]] -[[トレンドウェブサイトから学べ!JavaScriptで作る本格スクロール演出>https://ics.media/entry/210426/]] ~ ~ **2024.04.19 ~ ***参考になりそうなもの -[[変なWebメディア>https://web-media.blue-puddle.com/]] -[[すごいWeb>https://sugoiweb.nezihiko.com/]] サイトのアニメーションや表現が参考になりそう ***相談して決まったこと -Webサイトのアニメーションや設定にストーリー性を持たせてみる -謎解き要素などを入れて見る人に体験してもらう -インタラクティブについて調べて情報収集する [[インタラクティブとは>https://edgcal.jp/what-is-interactive/#content]] ~ ~ **2024.04.12 ~ ***参考になりそうなもの -[[木村天美さんの卒業研究>https://design.kyusan-u.ac.jp/socialdesign/?%E6%9C%A8%E6%9D%91%E5%A4%A9%E7%BE%8E/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6]] Webサイトを制作していて、アニメーションやグラフィックなどこだわりが見える -[[SPAM MUSEUM>http://meiwaku.me/]] 発想が面白い ***やりたいこと・興味のあること -Webサイト制作 -アニメーション -カラーパレット -フリーアイコン制作のサイト -ポスターの制作 -嘘の映画館のサイト ~ ~ //**20XX.XX.XX //***XXXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ //~ //***XXXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~ ~