LogoMark.png

小森丈/情報デザイン研究II

logo01.png

WEBブラウザ上で表現できるマルチ映像の制作
Keywords:Movie , Shape Animation , Web Design , Mulch Pattern
http://normotion.html.xdomain.jp

SS03.jpg








イントロダクション


これは何か

Normotion Graphicsはブラウザ上を利用したマルチ映像と、その映像を展示するWEBサイトを制作するプロジェクトです。

背景・目的

調査


WEBサイトの利点

映像の先行事例

コンセプト

制作


WEB

研究Ⅰ研究Ⅱ
web01.jpg
web02.jpg

映像

完成品








まとめ










worklog


ToDo

・フルスクリーン対応
・footerを作る
・大きなディスプレイで起こるフルスクリーンのバグを修正する
・フルスクリーンモード、ホバー注意書き



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

授業メモ

フルスクリーン対応にする。
サイト閲覧者も自由に動画を組み替えられることをどこかで説明する。
文章の段落を整理した方が良い。
クリックで映像が回転、全体のリセットボタンなどもできれば作りたい。




2020.10.13

進捗

aboutページのフォントサイズを大きくした。
色違いの動画を追加。
使用した色をまとめた表を作成。

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サイト制作。








PAGES

GUIDE

添付ファイル: filelogo01.png [詳細] fileSS03.jpg 1件 [詳細] fileSS02.jpg 4件 [詳細] fileweb02.jpg [詳細] fileweb01.jpg 2件 [詳細] fileimg02.jpg [詳細] fileimg01.jpg [詳細] filemov_sankoh.jpg 6件 [詳細] fileNMGcolor.jpg 11件 [詳細] filetopnew.jpg 20件 [詳細]
Last-modified: 2020-11-22 (日) 18:33:12