LogoMark.png

小森丈/卒業研究II のバックアップソース(No.3)

#author("2021-09-24T18:14:13+09:00;2021-09-09T19:23:01+09:00","default:member","member")
//#image(小森丈/卒業研究I/sample.jpg, center, 50%) 

#settableborder( none )


#image(小森丈/卒業研究I/logo01.png,,43.5%);
WEBブラウザ上で表現できるマルチ映像の制作
~
//#image(SS03.jpg);
#image(小森丈/Presentation/SS2.jpg,center,100%);
//#iframe(http://normotion.html.xdomain.jp,100%,70%)
//http://normotion.html.xdomain.jp
~
-''Takeru Komori''
-'''Movie , Shape Animation , Web Design , Mulch Pattern'''
-http://normotion.html.xdomain.jp
-[[Presentation Page>小森丈/Presentation]]
-https://normotion.github.io/prog-8.github.io/
~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
-Normotion Graphicsはブラウザ上を利用したマルチ映像と、その映像を展示するWEBサイトを制作するプロジェクトです。
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
-Instagramの#mortiongraphicsのタグには323万件の投稿がされている。
-私もモーショングラフィクスを検索して眺める事があるが、多様なジャンルの映像があるため、その中から自分の好きな映像を探すのが難しい。
-自分の好きなテイストの作品に特化したコンテンツがあればいいなと思い、映像を制作していく中で、WEBサイトを大きなコンポジションがわりに使用したギャラリーサイトがあれば面白いのではと思った。
//-Webサイトを映像の新たな表現の舞台とし、その利点を生かした作品にすることで、一方通行ではない新たな映像体験ができるのではないか。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-Webを映像表現の新たな舞台としたインタラクティブな映像体験ができる。
-シンプルな図形のアニメーションが複数あるマルチ映像。
-映像のテイストに合わせたミニマルな雰囲気のサイト。
-映像の色を制限して統一感を出す。
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
#iframe(https://normotion.github.io/prog-8.github.io/,100%,100%)
~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
illustrator , dreamwever
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
~

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
項目別のページの映像の本数が少ない
どんなサイトなのか伝わりやすくするためにサイトの世界観を作り込む必要がある
~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};
インタラクティブなサイトの先行事例
https://canvas.jjangik.com/?ckattempt=1
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};

~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-操作方法が表示されるポップアップウィンドウ(?)を作りたい
//-コーディング
-個別ページの映像を増やす
-右クリックでの機能を増やしたい(向きが変わる、色の反転など...?)
~

***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};
~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
**2021.09.24
***memo
拡大時のレイアウト崩れを防ぐために高さの調整を行った。
#canvas{height : auto}
~
~
**2021.09.20
操作ガイドのデザイン例や追加する映像の調査
~
~
~
~