WEBブラウザ上で表現できるマルチ映像の制作
- Takeru Komori
- Movie , Shape Animation , Web Design , Mulch Pattern
- http://normotion.html.xdomain.jp
- Presentation Page
- https://normotion.github.io/prog-8.github.io/
Overview
Introduction / What is This
- Normotion Graphicsはブラウザ上を利用したマルチ映像と、その映像を展示するWEBサイトを制作するプロジェクトです。
Background and Purpose
- Instagramの#mortiongraphicsのタグには323万件の投稿がされている。
- 私もモーショングラフィクスを検索して眺める事があるが、多様なジャンルの映像があるため、その中から自分の好きな映像を探すのが難しい。
- 自分の好きなテイストの作品に特化したコンテンツがあればいいなと思い、映像を制作していく中で、WEBサイトを大きなコンポジションがわりに使用したギャラリーサイトがあれば面白いのではと思った。
Concept
- Webを映像表現の新たな舞台としたインタラクティブな映像体験ができる。
- シンプルな図形のアニメーションが複数あるマルチ映像。
- 映像のテイストに合わせたミニマルな雰囲気のサイト。
- 映像の色を制限して統一感を出す。
Output
Tools
illustrator , dreamwever
Term
Conclusion / Summary
Survey
Present Status
項目別のページの映像の本数が少ない
どんなサイトなのか伝わりやすくするためにサイトの世界観を作り込む必要がある
Precedent
インタラクティブなサイトの先行事例
https://canvas.jjangik.com/?ckattempt=1
Technique / Technology
Project Management
Schedule
ToDo
- 操作方法が表示されるポップアップウィンドウ(?)を作りたい
- 個別ページの映像を増やす
- 右クリックでの機能を増やしたい(向きが変わる、色の反転など...?)
NotToDo
2021.07.29
研究発表
指摘いただいた点、気づいたこと
- 映像のオリジナリティが足りない(?)
→色味や質感で差別化を図ってはいるが、今後映像を追加する際はよりオリジナリティがあるかを意識した方が良いと思った。 - 対象年齢を下に広げてみても良いかも
→どんな人が見てもサイトの操作方法が分かるようにしていく必要がある。 - ソーシャルデザイン的なことも絡めた研究内容にしていけると尚良い
調査
100 years Bauhaus
バウハウス(bauhaus)の教育者たち。ヨハネス・イッテンとモホリ=ナジ
2021.07.05
https://normotion.github.io/prog-8.github.io/
2021.07.01
デザイン修正
2021.06.25
- memo
https://illo.tv
2021.06.18
サイトのデザインリニューアル案の作成
映像だけでなくサイト全体でひとつの作品として見てもらえるような雰囲気作りを意識しました
before→after
2021.05.21
中間報告
- なぜこの研究をするのか
→javascriptやjQueryを使うことでWebならではの作品性を高める事ができる - 作品の方向性
Webの機能を活かしたグラフィック作品 or ゲームの一通りのジャンルを網羅した作品
調査
https://canvas.jjangik.com/?ckattempt=1
https://editor.p5js.org/SybilQin/present/c47v21yP1
javascriptを使用したインタラクティブなサイトの先行事例
https://goworkship.com/magazine/repelling-effect-in-web-design/
2021.05.20
調査
https://virtualmuseum.fukuoka-kenbi.jp/takara/
2021.05.08
進捗
2021.05.07
テーマの模索
グラフィックとWebを掛け合わせた作品
プログラミングでどんな事ができるのかを調査
調査
読み込んだ画像から自動でパズルを生成
http://www.2meter3.de/jqPuzzle/
2021.04.22
調査
2021.04.20
テーマの模索
https://pin.it/5NCydzY
https://pin.it/2Q2KFgq
タイポグラフィーやイラストの自動生成、カスタマイズができるサイトを作ってみたい
調査
- 先行事例
https://picrew.me
キャラクターもののアイコンをカスタマイズできるサイトを見つけたが、文字やポスター、背景などを作れそうなサイトは見つからなかった。