LogoMark.png

小森丈/Presentation

logo01.png

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

SS2.jpg


研究の背景

モーショングラフィクスは映像表現とグラフィックデザインの中間のような性質を持つ表現方法である。近年では電車内のデジタルサイネージやウェブサイト、ミュージックビデオでも部分的に活用されており、触れる機会も多い。また、日頃からSNS やウェブサイトでモーショングラフィクスを目にする事があるが、シェイプアニメーションを全面的に押し出し、映像作品単体として活用されている例や、シンプルなシェイプアニメーションに特化したギャラリーサイトを制作している例が少なく感じた。そこで私はウェブの利点を生かしたインタラクティブな映像体験がきる、ミニマルなシェイプアニメーションに特化したギャラリーサイトを制作しようと考えた。





調査・先行事例

インタラクティブなウェブサイトについての調査を行ったところ、ウェブと映像が融合した事例として、ミュージックビデオにインタラクティブな仕組みを取り入れたMAI LANのウェブサイトがあった。
このサイトでは映像をクリックする背景の模様が変化するなどの仕掛けがされている事おり、ただ眺めるだけで完結しないユーザー参加型の体験ができるサイトになっている。 
他にもインタラクティブな仕掛けを部分的に用いたサイトは見つかったが、モーショングラフィクスを全面的に押し出したインタラクティブな映像体験のできるサイトは見つけることができなかった。
research01.jpg






次にウェブサイトの利点を活かせるような映像表現がないか調査をしたところ、このようなポスターがあった。 
この作品は映像ではなくグラフィックの作品であるが、シンプルな図形で構成されており、シェイプアニメーションにも応用ができるところや、映像コンテンツの量が増えても全体の統一感が損なわれず、マウスを使った組み替えなどの機能を取り入れやすいといった観点から、正方形の映像が等間隔にたくさん並べられたジオメトリックな作品が良いのではないかと思った。
research02.jpg











制作

コンセプト

調査の結果、シェイプアニメーションとインタラクティブを軸にした既存の作品は見受けられなかったので、モーショングラフィクスを全面に押し出し、映像を組み換えたりカスタマイズすることでユーザーが作品に自分の意思を介入できるウェブサイトをコンセプトに制作していこうと思う。 
シェイプアニメーションのもつ小限で単純なリズムや心地の良い動きに重きを置いた映像制作、ミニマルな雰囲気に合わせたテイストのサイトを制作する。





制作物

ウェブサイトの制作とデザインの変更を行った。
インタラクティブな映像体験ができる機能として以下の要素を追加。
・ クリックで映像の切り替え
・ ダブルクリックでフルスクリーンに切り替え
・ ドラッグ・アンド・ドロップで映像の並び替え

product.png






今後の計画

 前期ではインタラクティヴなウェブサイトの骨格やシステムの構築を行い、大を作る事ができたので、、今後はこれらを元に操作性の向上やコンテンツの充実をさせていきたい。また、自分以外の人にサイトを使ってもらい、フィードバックをもらいながら改良を重ねていこうと思う。











PAGES

GUIDE

添付ファイル: fileSS2.jpg 26件 [詳細] fileresearch02.jpg 14件 [詳細] fileresearch01.jpg 16件 [詳細] fileproduct.png 21件 [詳細] filelogo01.png 17件 [詳細] fileSS1.jpg 19件 [詳細]
Last-modified: 2021-07-28 (水) 11:55:59