#author("2024-12-20T13:56:51+09:00","default:member","member") #author("2024-12-20T14:36:45+09:00","default:member","member") *NekoSui 猫の匂いを販売する架空のwebサイト &image(main.jpg); -''Idemitsu Miko'' -'''Keywords：website, animation, cat''' -URL：http://nekosui.starfree.jp/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 猫の匂いを販売する架空のwebサイト ~ //&color(red){プロジェクトの背景と目的}; ***背景 近年では猫ブームと言われるほど猫の需要が高まっており、猫を飼う人々も増えている。猫にはヒーリング効果があり、特に匂いは飼い主にリラックス効果を与えるが外出先では愛猫の匂いは嗅げない。そこで「どこにいても猫の匂いで癒しを提供する」ということをテーマに現実には存在しないものを販売するという面白さと、癒しを与える架空のWebサイトを制作する。 ~ ***目的 架空の猫の匂いを販売するWebサイトを作ることで、日常のちょっとした楽しさと癒しを提供するため ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; ・Webサイトの中に、非現実的な架空の商品を入れ込む ・アニメーションを組み込むことで没入感を提供する ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -[[NEKOSUI>http://nekosui.starfree.jp/]] webサイト GSAP、JavaScript、CSSなどを使ってスクロールアニメーション、スライドショー、テキストアニメーションを主にwebサイトに導入する ~ ***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Windows11 iPadPro Figma HTML CSS Javascript blender ~ ***プロジェクトの期間 プロジェクトの期間｜2024.04.12 - 2024.12.20 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 今回の研究では架空のものを現実にあるかのように表現することに重きを置いて、猫の可愛さと架空のサイトの面白さをWebサイト上で表現することが出来た。3Dを使うことでかなりリアリティが増して、サイトとしてのクオリティも上がった。今回はChatGPTを活用してアニメーションのコードをいくつか考えてもらい、それを書き換えながらサイトを制作した。今まで知らなかったことや出来なかったことがAIを使うことで出来ることの幅が増えたので、今後も積極的に活用していきつつ新しい事に挑戦したいと考える。 //前回の発表からモデルの制作を進め、サイトも基本的な動きは搭載させたがblenderを使った3Dのアニメーションで難航しているため今後も調べつつスクロールを使ったアニメーションが搭載できるようにしたい。 //途中で研究内容を変えたため、作業が遅れ気味になってしまっている。ほかに商品の構想やサイトのアニメーションの実装がうまくいっていないところがあるので、今後スケジュールを整理し直して作業を進めていきたい //現状調査の時点でインタラクティブという言葉や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]] -[[進化するWebアニメーション！動きがもたらすWebサイトの魅力>https://team-next.biz/web-marketing/6716/#:~:text=Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%82%92,%E3%82%84%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%82%92%E3%82%82%E3%81%9F%E3%82%89%E3%81%97%E3%81%BE%E3%81%99%E3%80%82]] -[[インタラクティブとは>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://pet-info.event.rakuten.net/articles/13897625551]] --[[なぜペットのニオイは落ち着くのか？ついつい嗅いでしまうメカニズムと対処方法を紹介>https://twist-design.life/%E3%83%9A%E3%83%83%E3%83%88/pet_smell]] ~ ***先行事例 //&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 ~ ~ **2025.01.08 - - ~ ~ **2024.12.20 &image(model1.jpg,,40%); &image(model2.jpg,,40%); -3Dモデルの修正 モデルの凹凸を無くなるようにした ~ ~ **2024.12.13 -最終発表でのアドバイス --ボタンを押したら何か起こるようにする(Add to cartなど) --トップページ以外でもロゴを表示させる --コンタクトのページは本当に送れてしまうとイタズラされる可能性もあるので、ボタンを押すとポップアップが出るとか別の動きにする --フォントの種類や余白がバラバラなので統一する --3Dモデルのマテリアルを設定して、文字を浮き出ないようにする。影はなくてもいい。リタッチでもいいので修正する -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの修正 ~ ~ **2024.12.06 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの修正 ~ ~ **2024.11.29 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] ~ ~ **2024.11.22 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] ~ ~ **2024.11.15 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -[[ワイヤーフレームの変更>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] ~ ~ **2024.11.08 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -[[ワイヤーフレームの変更>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] ~ ~ **2024.11.01 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -[[ワイヤーフレームの変更>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] ~ ~ **2024.10.25 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの作成 -[[ワイヤーフレームの変更>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] ~ 後期中間発表 ・モデルをテクスチャの貼り付けで量産する ・最初に架空のサイトであることがわかるように明記する ・少しクスッとできるような面白い要素を入れる(写真を使ったり、箱や袋に入った状態のものを作る) ・オーダーメイドが出来るような文言を入れる ~ ~ **2024.10.18 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの作成 ~ ~ **2024.10.11 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの作成 &image(japanesecat1.png,,30%);&image(munchikan1.png,,30%);&image(suco1.png,,30%); &image(japanesecat2.png,,30%);&image(munchikan2.png,,30%);&image(suco2.png,,30%); 香玉のバージョンと練り香水のバージョンの二種類を作成 ~ ~ **2024.10.04 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの作成 ~ -https://design.kyusan-u.ac.jp/OpenSquareJP/?WebGL ~ ~ **2024.09.26 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの作成 ~ ~ **2024.09.19 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] -3Dモデルの作成 ~ ~ **2024.09,12 -[[ワイヤーフレーム>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] -モデルの制作 ~ ~ **2024.09.05 -[[ワイヤーフレーム>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] ~ ~ **2024.08.28 -[[ワイヤーフレーム>https://www.figma.com/design/gsI59mUStGolw0vi9IrqMt/%E7%84%A1%E9%A1%8C?fuid=1232340974334952610]] ~ ~ **2024.07.19 -[[Github>https://github.com/IDMT-MK/NekoSui]] -[[テストサイト>https://idmt-mk.github.io/NekoSui/]] ~ ~ **2024.07.12 -相談して決まったこと --スライドショー、スクロールアニメーション、テキストアニメーションを主に使ってwebサイトを制作する --遊べるサイトを作ってみる --JavaScriptAPIで色々調べてみる ~ -[[ｐ５ｊｓ>https://design.kyusan-u.ac.jp/OpenSquareJP/?p5.js]] --[[配列変数を使った応用>https://design.kyusan-u.ac.jp/SampleSite/p5js_animation3/]] 猫を使ったアニメーションとして使えそう ~ ~ **2024.07.05 ***前期最終発表まとめ -背景を猫ではなくWebサイトやアニメーションについての記述をメインにする -調査の部分も猫に関するものはおまけ程度にする -なんのアニメーションをどの効果を与えるために使っているのかリストをつくる -新しいアニメーションの提案をする(普通のサイトじゃ使えないようなものを使う方法もあり) -作業環境を整える(Mozilla Firefox) ~ ***特徴的なアニメーション -[[Webデザインテキストアニメーション/エフェクト15選>https://note.com/yoshidaisuke/n/n18c573b2b946]] -[[WEBデザインに取り入れられるアニメーションアイデアサイト5選>https://onca.co.jp/column/design/p8615/]] -[[【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き）>https://b-risk.jp/blog/2021/01/anim-reference/]] -[[サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】>https://photoshopvip.net/133747]] -[[コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーエフェクト集まとめ>https://photoshopvip.net/127960]] -[[Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ>https://photoshopvip.net/123398#google_vignette]] ~ -[[個性的なスクロールアニメーション>https://codepen.io/cobra_winfrey/pen/OJRjBoj]] -[[個性的なスライドアニメーション>https://codepen.io/akapowl/pen/dyvygmj]] ~ -[[アニメーションリスト>https://docs.google.com/spreadsheets/d/1xKgx-Z8ulBxdUKx0IXzIoTL5FiLj1zj47R0avJrc3MI/edit?usp=sharing]] ~ ~ **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/]] -[[進化するWebアニメーション！動きがもたらすWebサイトの魅力>https://team-next.biz/web-marketing/6716/#:~:text=Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%82%92,%E3%82%84%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%82%92%E3%82%82%E3%81%9F%E3%82%89%E3%81%97%E3%81%BE%E3%81%99%E3%80%82]] アニメーションや演出の参考になりそう ~ ***スケジュールの作成 -[[スケジュール>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 //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~ ~