小森丈/情報デザイン研究I の変更点 - ソーシャルデザイン学科

追加された行はこの色です。
削除された行はこの色です。
小森丈/情報デザイン研究I へ行く。
#author("2020-07-18T13:56:34+09:00;2020-07-17T16:33:56+09:00","default:member","member")
*Normotion Graphics
WEBブラウザ上で表現できるマルチ映像の制作
'''Keywords：movie WEB'''
http://normotion.html.xdomain.jp
~
#image(topnew.jpg);
~
~

**プロジェクトの概要
//&color(red){このプロジェクトに関する外部向け情報を記載して下さい。};

//プロジェクトごとに作業の進め方は異なるので、見出しの構成もそれに応じて変わるものと考えて下さい。要は、メンバー間で「情報共有」すべき内容を、整理して書く・・ということです。};

***これは何？ 
-HTMLタグを用いたマルチ映像の作品制作。

~
~
***Normotion Graphicsとは？
-Normotion Graphics（ノーモーショングラフィクス）とは、normalの略称であるnormと単語のmotionを掛け合わせた造語です。直訳すると「何の変哲も無いモーショングラフィクス」という意味ですが、シンプルなものの中にある面白さを見出せるような動画が作れたらいいなといった願いを込めて名付けました。

~
~



***プロジェクトの背景・目的

-シンプルなモーショングラフィクスが好きで、日頃からinstagramなどでよく映像を見る。
-モーショングラフィクスという検索ワードでは幅広いジャンルの映像がヒットするため、その中から自分の好きな映像を探すのが難しい。
-自分の好きな作品に特化したコンテンツがあればいいなと思い、映像を制作していく中で、WEBサイトを大きなコンポジションがわりに使用したギャラリーサイトがあれば面白いのではと思った。


~
~

***Webサイトの調査
-ファッションブランドのWebサイトはルックがしっかり見れるように、その他の情報は削ぎ落とされており、ギャラリーサイトとしての参考になると思ったのでいくつかのブランドサイトを調べた。
-個人的にすっきりと感じるレイアウトはサイドバーとメインコンテンツの2カラムで構成されているものが多い印象。
-ヘッダーのブランドロゴ、メニューなどの要素を一つにまとめる事で目線が散らないような工夫がされている。
~
参考:
[[&image(web_sankoh.jpg,);>https://auralee.jp]]

~
~
***映像表現の調査
-WEBの利点を活かせるものにしたい。
-正方形の映像をたくさん並べた作品にして、後で組み替えをしたりできるようなものが面白そう。
~
参考:
[[&image(mov_sankoh.jpg);>https://pin.it/3V7VKFf]]
~
~
***コンセプト
-シンプルな映像に特化したミニマルな雰囲気のサイト。

~
~
***試作
#vimeo(419429771,50%,)
-正方形ピクセルの映像を大きなコンポジションにまとめたもの。
-鮮やかな色が多く、ミニマルな雰囲気には合わない。
-映像が増えた時に色がごちゃつかないように淡い色味にした方が良さそう。

~
~
***完成品

#image(SS.jpg)
http://normotion.html.xdomain.jp
-メインのページとは別に、映像を要素ごとに分けたページを作成した。
-モダンな印象にしたかったので、タイトル・メニューにはサンセリフ書体の「Raleway」を使用し、本文には読みやすく多言語に対応している「Noto Sans JP」を使用した。
-レスポンシブデザイン。
-スマホ用にレイアウトを変更。
-スマホのホーム画面に追加した時用のアイコンも制作した。
-映像は全体のバランスを考え、淡い色味でおとなしい動きの映像にした。
-淡さを強調するために、水彩のテクスチャーを加えて質感を整えた。
-シンプルな分、フォントの選定や映像の質感などの細部にはこだわりました。

~
~
***まとめ

-難しい技術を使わずとも細部にこだわり丁寧に制作をすることで、面白い表現ができるんだという発見があった。
-今後も映像を増やしていき、コンテンツを充実させていきたい。
~
~
***ToDo（発表後）
発表後に修正した方が良いなと思った点
-%%HTMLのvideoタグのエラー%%(素材自体を反転させて解決)
//→今後を考えJavaScriptで反転させるようにしておいてもいいかも。
-%%スマホ環境でautoplayが効いていない%%(playsinline属性を追加して解決)
-%%サイドバーとコンテンツの間隔。%%
-映像のレイアウト変更ができた方が面白い。
→レスポンシブに合わせて列を減らすか、レイアウトを組み替えられるボタンを設置。
-レイアウト変更機能は今後映像がさらに増えてから導入する。
-参考サイトのようにレスポンシブに合わせて滑らかに映像サイズが変わるようにしたい。


~
~
~
~
~
~
~


**概要
//***目的・主旨


//~

***ターゲット
instagramの#motiongraphicsには225万件の投稿がされており、それなりに盛り上がっているジャンルだと思うので、SNSに限らず何らかの方法で発信すれば見てくれる人も少しはいるのではないか。
~

***制作物

-映像(Vimeo,youtubeで公開？)
長さ 5~10秒の映像をループさせる
本数　8本〜
画面サイズ 400×400正方形
正方形グリッドにあわせて作るので収まりの良い比率にしたい。

-Web
HTML CSSで簡易的なサイトの制作
~
~
***プロジェクトで使用するツール
Adobe After Effects
//GarageBand
Photoshop
Dreamweaver
~
~

**プロジェクト管理
//&color(red){プロジェクト管理のためにメンバー間で共有する情報を記載して下さい。};

***スケジュール
-進行管理表（ガントチャート形式）へのリンク
~


//***ToDo
//&color(red){解決すべき課題、やるべきことなどを箇条書きにします。};
//&color(red){完了したら「取り消し線」を付します。};
//-%%試作BGM%%
//-絵コンテ
//-%%キーフレーム補助のやり方について調べる%%
//-%%illustratorで作ったデータをafter effectsに取り込むとパスが使えなくなる。%%
//（諦めてAfterEffcctsで一から書き起こすことにしました。）
//-%%テーマに沿った試作アニメーション%%
//-%%配色を決める%%
//-%%イラレで全体像のグラフィックを作る(取り掛かり中)%%
//https://design-kotu.com/2019/06/27/layout-basic-02/
//-%%全体像からどう動かすかを考える%%
//-%%作品をあげる用のアカウントを作る。%%
//-%%Googleアカウントを作る。%%
//-%%隙間をなくしたい%%
//-映像のバリエーションを増やす
//-%%映像を軽くする%%
//-%%『What is NormotionGraphics?』のページ%%
//-%%メニューバー（丸、多角形、ボーダー）%%
//-%%要素ごとに並べ替えるボタン%%
//-%%レスポンシブ対応をする(?)%%
//-%%ホバーで色が薄くなるアニメーション%%
//-映像のバリエーションを増やす
//-サイドバー追従
//-サブタイトルを変える
//-htmlに記述しているtranceformがエラーを引き起こしているそうなので、cssやjsに書き直す
//-コンテンツとサイドバーの間隔が近い



//-◯◯に連絡を取り、◯◯の利用に関する許諾を得る
//-%%◯◯部分のバグを修正する。%%


//~
//~


**進捗・記録
//&color(red){作業の進捗を詳細に記録して下さい（最新の情報がトップ、古い情報は沈む）。};
~



//***20XX.XX.XX
//-課題（問題解決の手段）の設定
//-メンバーの役割分担
//-スケジュールの作成

***2020.07.17
-進捗
発表後に気になった箇所や不具合を修正した。
簡易的ローディングアニメーションの追加。
~
~

***2020.06.26
-進捗
http://normotion.html.xdomain.jp
#youtube(0G4vanq3Tqo)
サイドバーを設置した。
要素ごとに分けたページとサイトの説明のページを作った。
メニューのホバーアニメーションを追加。
-問題点
フルスクリーン以外の環境だとレイアウトが美しくないので
画面幅に合わせて全体を縮小させたい。
サイドバーを追従させたい。
~
~
***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
#youtube(aWHi-RW7uHE)
メインビジュアル映像の入れ込み。
サイトが重いのでスクリーンショットの動画も上げてます。


~
~
***2020.06.17
-進捗
X Freeの無料レンタルサーバーにアップロードした。
http://normotion.html.xdomain.jp
#youtube(QEE9wsnUtks)
HTMLタグのサイトの試作
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
制作途中
#youtube(2c5iXabRRO4)

~
~
***2020.06.03
-試作
|色が変わるアニメーション|円を描くアニメーション|テキストアニメーション|
|#youtube(eOmE62ODVl0)|#youtube(W_wU5hGRVf4)|#youtube(_K8lVDujrVg)|
//https://youtu.be/_K8lVDujrVg
制作途中のものを全部一応載せます。
作品に生かせそうなモーションを練習しただけのものなので画面サイズがバラバラです。
~
~

***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
-試作
|オーディオスペクトグラム|効果音アニメーション|モーショングラフィック|
|#vimeo(419429347)|#vimeo(419429076)|#vimeo(419429771)|


~
***2020.05.14
-授業メモ
したい事よりしない事を決めていくべき。
Adobeの環境はあるのでとりあえず試作を作りその過程で絞り込みを行う。
keyword:
After Effects エクスプレッション

~
***2020.05.10
//-https://drive.google.com/open?id=1XMv9KsV7JiwSk02tme4ggb4J9iuU4o0B
現時点ででている案のざっくりとした展開図を作成

-映像
オーディオをキーフレームに変換する方法
memo:
https://paintexxx.com/after-effects/interlocking_with_sound
~
***2020.05.07
-課題
案1「かたち」の研究
→%%ただのスライドショーになってしまわないか%%
%%もうひと工夫アイデアを練った方が良さそう%%
→ストップモーションを使うはどうか

~
映像の案(箇条書き)
//-https://drive.google.com/open?id=1wuWLvdwx8iM2E0KUaPxfmS42BzIF0kQY
参考:
案1のイメージに近いもの 0:20〜
//#youtube(aZlofVRKFgQ,50%)
//Link:https://youtu.be/aZlofVRKFgQ

~
~
***2020.05.03
-映像
音と映像が連動しているアニメーションを作る。

|#vimeo(98823512)|#youtube(UmSzc8mBJCM)|

~
~
***2020.04.30


-音楽
映像に合わせて作ると面白いかも？

~
-映像
シェイプアニメーション
ストップモーション
//%%変わった素材・形状の物に投影してみたい。%%
//%%光が透過したり反射したりする物（今週中にある程度考えておく）%%

~
//-問題点
//%%外出が制限されている状況なので、素材を探しに出かけたりできない。%%
//%%プロジェクターを持ってないので細かい作業もできない。%%


~
~
***2020.04.29
企画案
-音楽
効果音やBGMを作る
参考：https://orangeplus.me/ambient-music/
keywords:『環境音楽』『ブライアン・イーノ』

~
-映像
空間演出
映像投影
参考：
//|50||50|
|#youtube(SJ04bI39510)|#youtube(z2EcSLaK15w)|
//https://youtu.be/z2EcSLaK15w
//https://youtu.be/SJ04bI39510
keyword:『Norman McLaren』『John Whitney』

~
-Webサイト


//***20XX.XX.XX
//-問題点の洗い出し・整理
//-プロジェクトのタイトル決め
~
~