#author("2024-05-10T14:53:01+09:00","default:member","member") #author("2024-05-10T16:02:46+09:00","default:member","member") *CINEMA 体験できる架空の映画館のwebサイト ・・・・・・・・・・・・・・・・ メインビジュアル、あるいは プロジェクトの最新の状態を視覚的に掲載 -''Idemitsu Miko'' -'''Keywords：・・, ・・・, ・・・, ・・・''' -https://www.example.com //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; ユーザーがゲームのような世界観を体験できるインタラクティブな架空の映画館のwebサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; ***背景 近年webサイトのアニメーションに様々なものが生まれている。今回アニメーションに関して研究することでユーザーがwebサイトを通した体験から得られる情報を増やして新しい表現方法をwebサイトで見つけたいと思ったから ~ ***目的 映画館には様々なコンセプトの映画がありアニメーションとの相性もよく、作品の世界観に引き込みやすいと考え選定した。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){プロジェクトが完結したら「まとめ」を記載して下さい。}; ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 ***スケジュール //&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.05.10 ***映画館のウェブサイト -[[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 [[カラーパレット>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://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 //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~ ~