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

WEBブラウザ上で表現できるマルチ映像の制作

• Takeru Komori
• Movie , Shape Animation , Web Design , Mulch Pattern
• http://normotion.html.xdomain.jp
  
  
  
  
  
  
  
  

概要

これは何か

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

背景・目的

• 映像の新たな表現の舞台としてWebサイトを使いたい。
• 研究Ⅰで制作したサイトに新たな機能を追加したい。
• WEBの利点を生かした映像作品にすればさらに面白くなるのではないか。
  
  
  
  
  
  
  
  

調査

現状の調査、問題点

• 研究Ⅰの段階では映像を貼っただけでWEBの利点を生かしきれておらず、面白みに欠けている。
• 映像が少ない。
  
  
  
  

映像の先行事例

• 正方形グリッドに合わせて作られたようなジオメトリックなポスター。
• 映像ではないがモーショングラフィックスとの相性も良さそう。
  
  画像出典：・society6.com/geometric_poster・pinterest.jp/641270434414673685
  
  
  
  

WEBサイトの利点

• Javascript、jQueryを使用すると文字や映像に動きを加えることができる。
  
  
  
  
  
  
  
  

制作

コンセプト

• シンプルな図形のアニメーションが複数あるマルチ映像。
• 映像のテイストに合わせたミニマルな雰囲気のサイト。
• 映像の色を制限して統一感を出す。
  
  

WEB

研究Ⅰ		研究Ⅱ
	→

• レイアウトを変更し、映像を大きくしても窮屈な印象にならないようにした。
• 映像の下にAboutページを追加。
• 映像を要素ごとに分類したページの作成。
• 下までスクロールするとTOPに戻るボタンが出てくる。
  
  

映像

• 前回の4種類の映像からさらに12種類ほど追加。
• ドラッグ&ドロップで映像の組み替え。
• 映像をクリックするとフルスクリーンモードに切り替わる。
• 真ん中の映像をホバーした際に注意書きの吹き出しが出る。
  
  

完成品

まとめ

• 企画段階では映像とHTMLタグを使うだけの予定だったので、ゼロからWebサイトを作ることへの不安も大きかったが、結果的にCSSやJavascript,jQueryなどの基礎知識を得ることができたのでやって良かったなと思った。
• シンプルな技術で面白い表現ができたと思う。
• 今後は動作環境によって正しく動作しないバグなどの修正をし、どんな環境でも楽しめるような作品にしたい。
  
  
  
  

ToDo

・フルスクリーン対応
・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

授業メモ

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

2020.10.13

進捗

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

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