#author("2024-06-28T14:21:07+09:00","default:member","member")
*C!N3M4
アニメーションを使ってユーザーが映画作品を視覚的にイメージを伝える架空の映画館のwebサイト
&image(main.JPG);
-''Idemitsu Miko''
-'''Keywords：website, animation, movie theatre'''
-[[プロトタイプ>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://www.example.com]]__ ← ここからコメントをお願いします。
~
~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
アニメーションを使ってユーザーが映画作品を視覚的にイメージを伝える架空の映画館のwebサイト
~
//&color(red){プロジェクトの背景と目的};
***背景
近年webサイトのアニメーションや演出の幅が広がり、様々なものが生まれている。演出の幅が広がることでユーザーの動きが反映させたりサイトとスマホを連動させたり、３DCGや記事を拡張する機能など様々な表現ができるようになった
さらにアニメーションについて研究することでより効果的に情報を伝たり、より複雑な情報をわかりやすく伝えたりする方法を研究したいと考えたから
~
***目的
映画館というモチーフを使って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/]]
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
***映画館のウェブサイト
-[[TOHOシネマズ>https://www.tohotheater.jp/]]
-[[T・ジョイ博多>https://tjoy.jp/t-joy_hakata]]
-[[ユナイテッド・シネマ>https://www.unitedcinemas.jp/canalcity/daily.php]]
~
***アニメーション重視のサイト
-[[変な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){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
%%テーマ決めのための調査%%
技術に関する情報収集
映画のポスターの制作
映画の選定
サイトマップ・ワイヤーフレームの作成
webサイトのコーディング
中間発表準備
最終発表準備
修正・手直し
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2024.06.28
***企画の練り直し
-
-
-
-
~
~
**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
//-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
//~
//~
~
