LogoMark.png

小森丈/卒業研究I のバックアップの現在との差分(No.0)


#author("2021-07-29T12:00:21+09:00;2021-07-29T06:42:34+09:00","default:member","member")
#settableborder( none )


#image(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.07.29
***研究発表
指摘いただいた点、気づいたこと
-映像のオリジナリティが足りない(?)
→色味や質感で差別化を図ってはいるが、今後映像を追加する際はよりオリジナリティがあるかを意識した方が良いと思った。
-対象年齢を下に広げてみても良いかも
→どんな人が見てもサイトの操作方法が分かるようにしていく必要がある。
-ソーシャルデザイン的なことも絡めた研究内容にしていけると尚良い
***調査
[[100 years Bauhaus>https://www.bauhaus100anos.com.br/en/home]]
[[バウハウス(bauhaus)の教育者たち。ヨハネス・イッテンとモホリ=ナジ>https://nostos.jp/archives/102613]]
~
**2021.07.05
https://normotion.github.io/prog-8.github.io/
~
**2021.07.01
デザイン修正
#image(after_2.jpg,,43.5%);
~
**2021.06.25
-memo
https://illo.tv
~
**2021.06.18
サイトのデザインリニューアル案の作成
映像だけでなくサイト全体でひとつの作品として見てもらえるような雰囲気作りを意識しました
before→after
|#image(before.jpg,);|→|#image(after.jpg,);|

~
**2021.05.21
***中間報告
-なぜこの研究をするのか
→javascriptやjQueryを使うことでWebならではの作品性を高める事ができる
-作品の方向性
Webの機能を活かしたグラフィック作品 or   ゲームの一通りのジャンルを網羅した作品

~
***調査
https://canvas.jjangik.com/?ckattempt=1
https://editor.p5js.org/SybilQin/present/c47v21yP1
javascriptを使用したインタラクティブなサイトの先行事例
//https://brooke-stanley-finalproject.glitch.me
//コマ送りのアニメーション
https://goworkship.com/magazine/repelling-effect-in-web-design/

~
~
**2021.05.20
***調査
https://virtualmuseum.fukuoka-kenbi.jp/takara/
~
~
**2021.05.08
***進捗
ライブラリを使用したパズルゲームとイラストの試作
&image(img01.jpg,,50%); &image(img02.jpg,,50%); 

**2021.05.07
***テーマの模索
グラフィックとWebを掛け合わせた作品
プログラミングでどんな事ができるのかを調査
***調査
読み込んだ画像から自動でパズルを生成
http://www.2meter3.de/jqPuzzle/
~
~
**2021.04.22
***調査
-先行事例
https://www.prototypo.io

~
~

**2021.04.20
***テーマの模索
https://pin.it/5NCydzY
https://pin.it/2Q2KFgq
タイポグラフィーやイラストの自動生成、カスタマイズができるサイトを作ってみたい
~
***調査
-先行事例
https://picrew.me
キャラクターもののアイコンをカスタマイズできるサイトを見つけたが、文字やポスター、背景などを作れそうなサイトは見つからなかった。
~
~



~