LogoMark.png

小森丈/卒業研究II の変更点


#author("2021-11-11T23:29:38+09:00;2021-11-04T13:41:37+09:00","default:member","member")
#author("2021-11-26T15:00:59+09:00;2021-11-04T13:41:37+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
・10月-1週目
%%カラーチェンジ実装(〆)%%
%%映像の追加%%
~
・10月-2週目
%%映像の追加%%
%%ブラッシュアップ%%
%%概要作成%%
~
・10月-3週目
%%ブラッシュアップ%%
%%概要作成%%
~
・10月-4週目
概要作成
作品提出
~
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

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

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

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
**2021.11.10
***進捗
概要のブラッシュアップ
https://drive.google.com/file/d/1UCQ8Hd4kbKU3BduXIeIm-4nR3wZA7K-D/view?usp=sharing

プレゼンページの整理
[[小森丈/Presentation]]

//#image(小森丈/Presentation/mainvisual.jpg,center,100%) 
モックアップの作成
|#image(小森丈/Presentation/wall2.jpg,,100%)| |#image(小森丈/Presentation/wall3.jpg,,100%)|
~
~
**2021.12.26
***進捗
映像消去を取り入れるのであれば操作方法は別にしたほうが良い
メニューが目立ちすぎている感じがする
無彩色にする、サイズを小さくなど試してみる
~
~
**2021.11.4
***進捗
概要作成
https://drive.google.com/file/d/1UCQ8Hd4kbKU3BduXIeIm-4nR3wZA7K-D/view?usp=sharing

ナイトモードの不具合を修正
SVGパスを直接書き込むことでクリック時の色の変更に対応できるようにした
~
~
**2021.11.3
***進捗
ナイトモードの不具合を修正
画像の色の変更が効かない箇所が一部ある
~
~
**2021.10.28
***進捗
レイアウトの微調整
個別ページのレイアウト調整
ナイトモード試作
→CSSメソッドでフィルターを付与しているが、
.toggleClassで切り替える方法にしたい
-memo
css 基本のやつから上で、強調させたい(例外)のを下に
変数予約語

~
~
**2021.10.20
***memo
設定項目はナビボタンに格納する

~
~
**2021.10.15
***memo
映像スピードをJavascriptで変更
スローはコマ数が足りないので一番遅いスピードから早回しする。
メニューのサイズはもう少し小さくしても良いかも
~
~
**2021.10.08
***memo
映像制作のヒント
・時間を変える
・線の太さを変えるなど
~
~
**2021.10.07
***進捗
リロード時に映像がランダムで表示される仕様に変更した
https://ecmemo.net/jquery-shuffle
~
***memo
直感的な操作ができるように、矢印ボタンで列数を変更できるようにしたい
~
~
**2021.10.05
***進捗
画面幅によって映像の列数が変化する機能
クリックで任意の映像を消せる機能の2つを新たに追加した

丸、四角、三角の映像を1種類づつ試作した
作品に入れ込んでみて違和感がなければ3色展開にしようと思う
~
~
**2021.10.01
***進捗
カラーチェンジの実装完了
クリックで映像の色が変わるようになった。
***memo
前期から大きなアップデートがないので分かりやすい変化を作る必要がある(?)
モックアップを制作し展開事例を紹介する
映像を多くストックし、リロード時にランダムで映像を読み込むようにする

配列変数
let fileNameでファイルを読み込ませてランダムで並べさせる
https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Syntax
https://koichi-inoue.github.io/JQ_ImageSwitcher/script.js
https://koichi-inoue.github.io/JQ_ImageSwitcher/
~
~

**2021.09.29
***memo
個別ページの作成、アップロード
border、other shapesはそのままの並べ方で新色を追加する方向性でも良いと思ったが、circleのページの映像の並べ方はもう少し考えようと思う。
~
~
**2021.09.24
***memo
拡大時のレイアウト崩れを防ぐために高さの調整を行った。
#canvas{height : auto}
~
~
**2021.09.20
操作ガイドのデザイン例や追加する映像の調査
~
~
~
~