#author("2020-12-16T18:39:58+09:00;2020-12-16T18:26:40+09:00","default:member","member")
//*Normotion Graphics
#image(logo01.png,,43.5%);
WEBブラウザ上で表現できるマルチ映像の制作
~
#image(SS03.jpg);
//#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
~
~
~
~
**概要
~
***これは何か
-Normotion Graphicsはブラウザ上を利用したマルチ映像と、その映像を展示するWEBサイトを制作するプロジェクトです。
//シンプルな動きの映像が多いので
//normalの略称であるnormと単語のmotionを掛け合わせた造語である、Normotion //Graphicsの由来です
//複数の映像を
~
***背景・目的
-映像の新たな表現の舞台としてWebサイトを使いたい。
-研究Ⅰで制作したサイトに新たな機能を追加したい。
-WEBの利点を生かした映像作品にすればさらに面白くなるのではないか。
~
~
~
~
**調査
~
***現状の調査、問題点
//#image(web01.jpg,,58%);
-研究Ⅰの段階では映像を貼っただけでWEBの利点を生かしきれておらず、面白みに欠けている。
-映像が少ない。
~
~
***映像の先行事例
//&color(red){先行事例の紹介、傾向分析など};
-正方形グリッドに合わせて作られたようなジオメトリックなポスター。
-映像ではないがモーショングラフィックスとの相性も良さそう。
&image(img02.jpg,,28%); &image(img01.jpg,,28%);
&size(12){画像出典：};[[&size(12){・society6.com/geometric_poster};>https://society6.com/product/mid-century-retro-shapes-geometric_poster]][[&size(12){・pinterest.jp/641270434414673685};>https://www.pinterest.jp/pin/641270434414673685/]]
~
~
***WEBサイトの利点
-Javascript、jQueryを使用すると文字や映像に動きを加えることができる。
~
~
~
~
**制作
~
***コンセプト
-シンプルな図形のアニメーションが複数あるマルチ映像。
-映像のテイストに合わせたミニマルな雰囲気のサイト。
-映像の色を制限して統一感を出す。
~
***WEB
//&image(web01.jpg,,40%); &image(web02.jpg,,40%);
|研究Ⅰ||研究Ⅱ|
|#image(web01.jpg,);|→|#image(web02.jpg,);|
-レイアウトを変更し、映像を大きくしても窮屈な印象にならないようにした。
-映像の下にAboutページを追加。
-映像を要素ごとに分類したページの作成。
-下までスクロールするとTOPに戻るボタンが出てくる。
~
***映像
-前回の4種類の映像からさらに12種類ほど追加。
-ドラッグ&ドロップで映像の組み替え。
-映像をクリックするとフルスクリーンモードに切り替わる。
-真ん中の映像をホバーした際に注意書きの吹き出しが出る。
~
***完成品
#iframe(http://normotion.html.xdomain.jp,100%,70%)
~
~
~
~
**まとめ
~
-企画段階では映像とHTMLタグを使うだけの予定だったので、ゼロからWebサイトを作ることへの不安も大きかったが、結果的にCSSやJavascript,jQueryなどの基礎知識を得ることができたのでやって良かったなと思った。
-シンプルな技術で面白い表現ができたと思う。
-今後は動作環境によって正しく動作しないバグなどの修正をし、どんな環境でも楽しめるような作品にしたい。
~
~
//**Overview
//~
//***Introduction
//&color(red){これは何か？ 簡潔に};
//Normotiongraphics
//前期に制作したものをさらにブラッシュアップさせる。
//***Background and Purpose
//&color(red){プロジェクトの背景と目的};
//映像表現の場をWebに移し、新たな表現方法を模索したい。
//***Target
//&color(red){誰のために};
//***Output
//&color(red){成果物の形式・サイズ};
//Webサイト
//映像
//***Tools
//AfterEffects
//Dreamweaver
//&color(red){使用する機材・ソフトウエア};
//***Term
//&color(red){プロジェクトの期間};
//**CurrentStatus
//http://normotion.html.xdomain.jp
//#iframe(http://normotion.html.xdomain.jp,100%,70%)
//&color(red){ここにプロジェクトの最新の状態を掲載};
//**Survey
//***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
//研究Ⅰの段階では映像を貼っただけだったので面白味に欠けている
//映像が少ない
//TOPページだけだと何のサイトなのか分からない
//***Precedent
//&color(red){先行事例の紹介、傾向分析など};
//マルチ映像の参考:
//[[&image(mov_sankoh.jpg);>https://pin.it/3V7VKFf]]
//***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
//jQuery
//**Project Management
//***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
//・円、三角、四角の新しい動きの映像を1つ以上制作する
%%・フルスクリーン対応%%
//・列の数が変化するなどの仕掛けがあるボタンも設置したい
%%・footerを作る%%
%%・大きなディスプレイで起こるフルスクリーンのバグを修正する%%
%%・フルスクリーンモード、ホバー注意書き%%
%%・script.js にまとめて独立化した方が良い%%
%%・htmlのエラーを修正する%%
~
~
**2020.12.04
***進捗
発表後に指摘を受けたhtmlのエラー修正とscriptの独立化を行った。
~
~
**2020.11.24
***進捗
全ページ更新
あえて映像を敷き詰めずに余白を作り、遊びを持たせている
~
~
**2020.11.18
***進捗
%%フルスクリーンモードで映像をクリックする際に、注意書きの吹き出しを出した方が良い。%%
***進捗(追記)
Balloon.cssを使用し吹き出しを追加。
全ての映像に追加すると映像の邪魔になるかなと思い、一箇所のみに配置。
***問題点
一箇所だけだと吹き出しの存在に気付きにくい。
→映像全体にcssを適応させ、吹き出しを追従させたい。
~
~
**2020.11.11
***進捗
footerを追加。
トップに戻るボタンを追加。
***問題点
トップに戻るボタンは下にスクロールすると表示されるような仕組みにしたい。
~
~
**2020.11.11
***進捗
全体の文字詰め。
***問題点
ナビやタイトルには適応されてない（？）
~
~
**2020.11.10
***進捗
使用フォントの見直し。
映像のテイストに合わせ、テキストの色を黒のベタ塗りより若干淡い色味に変更。
・ヘッダー、タイトル #252525
・文章 #626262
映像を一段追加。
~
~
**2020.11.03
***進捗
screenfull.jsでフルスクリーンモードを導入
***問題点
映像の間に隙間ができる
~
~
**2020.10.28
***進捗
ヘッダーやアバウトページの文字の間隔の修正。
フルスクリーンモードの仕組みの調査。
クリックで映像以外を非表示にする方法が良さそう（？）
https://liginc.co.jp/490960
~
~
**2020.10.21
***メモ
タイトルとナビの間をもう少し狭めて、ナビと映像の間はもう少し広げたほうが良い
Aboutの行間が広すぎる
→文字を詰めた時に出るスカスカ感は他の方法で補った方が良い
参考:https://valentin-chevalier.com/workflow
~
~
**2020.10.16
***調査
マウスカーソルが独特なサイト
https://maisoncacao.com
実装方法
https://www.useful-blog.info/mouse-cursor/
https://wemo.tech/3229
問題点
リンクのホバーアニメーションが効かない
~
~
**2020.10.14
***授業メモ
フルスクリーン対応にする。
%%サイト閲覧者も自由に動画を組み替えられることをどこかで説明する。%%
%%文章の段落を整理した方が良い。%%
//flex
クリックで映像が回転、全体のリセットボタンなどもできれば作りたい。
~
~
**2020.10.13
***進捗
aboutページのフォントサイズを大きくした。
色違いの動画を追加。
使用した色をまとめた表を作成。
#image(NMGcolor.jpg);
~
~
**2020.10.07
***調査
セクションが変わるときに背景色が変わるサイト
https://valentin-chevalier.com/workflow
https://in-general.com
参考にしたいテイストのサイト
https://canvascreative.co
~
***授業メモ
動画に一定のルールを加えてみる
→色は何色まで、動画の秒数など。
すでにある動画のバージョン違いを作る。
→色、スピード、形など。
~
~
**2020.10.03
***進捗
可視範囲に入ると横からフェードインしてくるアニメーションを追加した。
ジャンプボタンを押すとスムーズスクロールで移動できるように変更した。
~
~
**2020.09.29
***進捗
簡単なjsを使い、ドラッグ&ドロップで映像の並び替えが出来るようにした。
トップページとアバウトページを連結し、スクロールするとアバウトページがフェードインするようにしてみたい。
~
~
**2020.09.22
***企画案
前期に制作したNormotiongraphicsのブラッシュアップ。
・jsを使い、動きのある仕掛けを作りたい。
・映像の数を増やしたい。（4×6で配置する24種類の動画）
~
架空の企業やアーティストのWebサイト制作。
~
~
~
~
