LogoMark.png

小森丈/Presentation のバックアップの現在との差分(No.0)


#author("2021-12-04T09:37:29+09:00;2021-11-11T12:58:30+09:00","default:member","member")
//[[小森丈/Presentation]]

//*編集中....


#settableborder( none )


#image(logo01.png,,43.5%);
WEBブラウザ上で表現できるマルチ映像の制作
~
#image(SS2.jpg);

~

-''[[Takeru Komori>小森丈]]''
-'''Movie , Shape Animation , Web Design , Mulch Pattern'''
//-http://normotion.html.xdomain.jp
-https://normotion.github.io/prog-8.github.io/
~
~
~
**研究の背景
~
''モーショングラフィクスとは...''
-映像とグラフィックデザインの中間のような性質の表現方法である
-近年では電車内のサイネージなどでも活用されており、触れる機会も多い

''しかし...''
-シンプルなシェイプアニメーションに特化したギャラリーサイトは少ない
~
→利点を生かしたインタラクティブな映像体験がきる、ミニマルなシェイプアニメーションに特化したギャラリーサイトを制作しようと考えた
~
~
~
**調査・先行事例
~

''ウェブと映像が融合した事例''
-映像にインタラクティブな仕組みを取り入れたMAI LANのウェブサイト
-ただ眺めるだけで完結しないユーザー参加型の体験ができるサイト

''調査の結果''
-モーショングラフィクスがメインのインタラクティブな映像体験ができるサイトは少ない
[[&image(research01.jpg,,70%);>https://pumper.thisismailan.com]]
//~
//~
//~
//次に、映像の方向性を固めるための調査を行った。映像コンテンツの量が増えても全体の統一感が損なわれず、マウスを使った組み替えなどの機能を取り入れやすいといった観点から、正方形の映像が等間隔にたくさん並べられたジオメトリックな作品が良いのではないかと思った。
//[[&image(research02.jpg,,70%);>https://society6.com/product/geo2325991_print?sku=s6-11646166p4a1v45)]]
~
~
~
//#image(research01.png,,50%)
//#image(research02.png,,50%)
~
~
~
**制作
~
***コンセプト
-シェイプアニメーション × インタラクティブ性
-ユーザーが作品に自分の意思を介入できるウェブサイト 
-最小限で単純なリズムや心地の良い動きに重きを置いた映像制作
-ミニマルな雰囲気に合わせたテイストのウェブサイト
~
~
~
***制作物
ウェブサイトと映像の制作を行った。
インタラクティブな映像体験ができる機能として以下の要素を追加。
-クリックで映像の切り替え
- ダブルクリックでフルスクリーンに切り替え
- ドラッグ・アンド・ドロップで映像の並び替え
- 映像のシャッフル
- ナイトモード
//#image(nightmode.jpg,,70%)
//#image(product.png,,70%)
|#image(nightmode.jpg,,100%)| |#image(product.png,,100%)|
~
~
~
**まとめ
~
-インタラクティブな要素を組み込んだ、既存のウェブサイトとは異なる映像表現
-タブレット端末での使用、プロジェクターで映像を投影などの様々な活用方法
-幅広い年齢のユーザーが使用する事が出来る可能性のある作品

|#image(wall2.jpg,,100%)| |#image(wall3.jpg,,100%)|
~
~
~
~
~
~