Normotion Graphics
WEBブラウザ上で表現できるマルチ映像の制作
Keywords:movie WEB
http://normotion.html.xdomain.jp
プロジェクトの概要
これは何?
- HTMLタグを用いたマルチ映像の作品制作。
Normotion Graphicsとは?
- Normotion Graphics(ノーモーショングラフィクス)とは、normalの略称であるnormと単語のmotionを掛け合わせた造語です。直訳すると「何の変哲も無いモーショングラフィクス」という意味ですが、シンプルなものの中にある面白さを見出せるような動画が作れたらいいなといった願いを込めて名付けました。
プロジェクトの背景・目的
- シンプルなモーショングラフィクスが好きで、日頃からinstagramなどでよく映像を見る。
- モーショングラフィクスという検索ワードでは幅広いジャンルの映像がヒットするため、その中から自分の好きな映像を探すのが難しい。
- 自分の好きな作品に特化したコンテンツがあればいいなと思い、映像を制作していく中で、WEBサイトを大きなコンポジションがわりに使用したギャラリーサイトがあれば面白いのではと思った。
Webサイトの調査
- ファッションブランドのWebサイトはルックがしっかり見れるように、その他の情報は削ぎ落とされており、ギャラリーサイトとしての参考になると思ったのでいくつかのブランドサイトを調べた。
- 個人的にすっきりと感じるレイアウトはサイドバーとメインコンテンツの2カラムで構成されているものが多い印象。
- ヘッダーのブランドロゴ、メニューなどの要素を一つにまとめる事で目線が散らないような工夫がされている。
参考:
映像表現の調査
コンセプト
- シンプルな映像に特化したミニマルな雰囲気のサイト。
試作
- 正方形ピクセルの映像を大きなコンポジションにまとめたもの。
- 鮮やかな色が多く、ミニマルな雰囲気には合わない。
- 映像が増えた時に色がごちゃつかないように淡い色味にした方が良さそう。
完成品
http://normotion.html.xdomain.jp
- メインのページとは別に、映像を要素ごとに分けたページを作成した。
- モダンな印象にしたかったので、タイトル・メニューにはサンセリフ書体の「Raleway」を使用し、本文には読みやすく多言語に対応している「Noto Sans JP」を使用した。
- レスポンシブデザイン。
- スマホ用にレイアウトを変更。
- スマホのホーム画面に追加した時用のアイコンも制作した。
- 映像は全体のバランスを考え、淡い色味でおとなしい動きの映像にした。
- 淡さを強調するために、水彩のテクスチャーを加えて質感を整えた。
- シンプルな分、フォントの選定や映像の質感などの細部にはこだわりました。
まとめ
- 難しい技術を使わずとも細部にこだわり丁寧に制作をすることで、面白い表現ができるんだという発見があった。
- 今後も映像を増やしていき、コンテンツを充実させていきたい。
ToDo(発表後)
発表後に修正した方が良いなと思った点
HTMLのvideoタグのエラー(素材自体を反転させて解決)スマホ環境でautoplayが効いていない(playsinline属性を追加して解決)サイドバーとコンテンツの間隔。- 映像のレイアウト変更ができた方が面白い。
→レスポンシブに合わせて列を減らすか、レイアウトを組み替えられるボタンを設置。 - レイアウト変更機能は今後映像がさらに増えてから導入する。
- 参考サイトのようにレスポンシブに合わせて滑らかに映像サイズが変わるようにしたい。
概要
ターゲット
instagramの#motiongraphicsには225万件の投稿がされており、それなりに盛り上がっているジャンルだと思うので、SNSに限らず何らかの方法で発信すれば見てくれる人も少しはいるのではないか。
制作物
- 映像(Vimeo,youtubeで公開?)
長さ 5~10秒の映像をループさせる
本数 8本〜
画面サイズ 400×400正方形
正方形グリッドにあわせて作るので収まりの良い比率にしたい。
- Web
HTML CSSで簡易的なサイトの制作
プロジェクトで使用するツール
Adobe After Effects
Photoshop
Dreamweaver
プロジェクト管理
スケジュール
- 進行管理表(ガントチャート形式)へのリンク
進捗・記録
2020.07.17
- 進捗
発表後に気になった箇所や不具合を修正した。
簡易的ローディングアニメーションの追加。
2020.06.26
- 進捗
http://normotion.html.xdomain.jp
要素ごとに分けたページとサイトの説明のページを作った。
メニューのホバーアニメーションを追加。 - 問題点
フルスクリーン以外の環境だとレイアウトが美しくないので
画面幅に合わせて全体を縮小させたい。
サイドバーを追従させたい。
2020.06.25
- 授業メモ
メニューバーを作ってみても良いかも。
レイアウトの邪魔にならないように基本的には隠れているようにしたい。
『What is NormotionGraphics?』の項目や
要素ごとに並び替えられるボタンがあると面白そう。
フッダーの内容とフォントの統一。
参考:https://www.nxworld.net/tips/css-sort-elements.html
keywords:CSS radio sort
- 調査
ファッションブランドのWebサイトはルックがしっかり見れるように、その他の情報は削ぎ落とされているのでギャラリーサイトとしての参考になると思いいくつかのブランドサイトを調べてみた。
https://www.unused.jp
https://auralee.jp
https://www.comoli.jp
https://oaofootwear.com
左側にヘッダー、メニュー、フッダーの要素をまとめ縦に配置する事でシャープな印象になっている。
タイトルを中央にして端にメニューボタンを配置するテンプレート的なサイトよりもこっちの方がイメージに合う気がする(?)ので参考にする。
2020.06.24
- スマホだとautoplayが効いてない
2020.06.20
- 進捗
http://normotion.html.xdomain.jp
サイトが重いのでスクリーンショットの動画も上げてます。
2020.06.17
- 進捗
X Freeの無料レンタルサーバーにアップロードした。
http://normotion.html.xdomain.jp
cssで映像サイズを変えられる事がわかったので更に小さめにしました。
これからメインビジュアルの雰囲気に寄せた映像を作っていく。 - 問題点
映像の隙間が気になる。
映像ファイルがサーバー上で文字化けし見れなくなる。
サイトが重い
2020.06.14
- 進捗
gmailアカウントの作成(normotiongraphics@gmail.com)
https://vimeo.com/normotiongraphics
https://www.youtube.com/channel/UCh8NhoJRkpWeFnoFqJlsQng?view_as=subscriber - 映像
今後たくさんの映像を並べていく事を想定すると動きはシンプルにしてトーンや質感にこだわった方がまとまりが出そう。
2020.06.11
- 授業メモ
正方形サイズならHTMLタグで載せるのはどうか。
→(正方形の動画を何種類か作って大きいコンポジションにまとめようと考えてたが、その都度レイアウトを変更でき見せ方を変えられるこの方法も面白いなと思った。)
とりあえず作品をあげる用のアカウントを作る。
→(この研究のためだけにGoogleアカウントを作るのには抵抗があったが、その後も運用できるかもしれないので一応作ってみる。)
5~10秒だと短い(?)
ループものの方がやりやすい気がする
2020.06.10
制作途中
2020.06.03
- 試作
制作途中のものを全部一応載せます。
色が変わるアニメーション 円を描くアニメーション テキストアニメーション
作品に生かせそうなモーションを練習しただけのものなので画面サイズがバラバラです。
2020.06.01
企画案
- 映像
長さ 5~15秒程度
本数 未定
画面サイズ 800×800正方形
正方形グリッドにあわせて作るので収まりの良い比率にしたい。
(SNSでの発信には向いてる気がするが、Vimeo等での相性はどうなのか)
*画面サイズはあくまでも候補なので変わる可能性あり
- 音楽
映像の動きとリンクした音楽というよりも雰囲気に合わせたシンプルなBGMや効果音の方が幅が広がりそう。
2020.05.23
- 映像
参考:
https://www.pinterest.jp/pin/649785052464299418/
https://dribbble.com/shots/6454763-Color-Composition-Testing-Temp-late
2020.05.17
- 試作
オーディオスペクトグラム 効果音アニメーション モーショングラフィック
2020.05.14
- 授業メモ
したい事よりしない事を決めていくべき。
Adobeの環境はあるのでとりあえず試作を作りその過程で絞り込みを行う。
keyword:
After Effects エクスプレッション
2020.05.10
現時点ででている案のざっくりとした展開図を作成
- 映像
オーディオをキーフレームに変換する方法
memo:
https://paintexxx.com/after-effects/interlocking_with_sound
2020.05.07
- 課題
案1「かたち」の研究
→ただのスライドショーになってしまわないか
もうひと工夫アイデアを練った方が良さそう
→ストップモーションを使うはどうか
映像の案(箇条書き)
参考:
案1のイメージに近いもの 0:20〜
2020.05.03
- 映像
音と映像が連動しているアニメーションを作る。
|
|
2020.04.30
- 音楽
映像に合わせて作ると面白いかも?
- 映像
シェイプアニメーション
ストップモーション
2020.04.29
企画案
- 音楽
効果音やBGMを作る
参考:https://orangeplus.me/ambient-music/
keywords:『環境音楽』『ブライアン・イーノ』
- 映像
空間演出
映像投影
参考:keyword:『Norman McLaren』『John Whitney』
- Webサイト