LogoMark.png

吉永龍太朗/情報デザイン研究I のバックアップの現在との差分(No.0)


#author("2021-09-22T19:46:25+09:00;2021-07-09T13:54:22+09:00","default:member","member")
*ICT LAB PR
総合基盤センターICT LAB室プロモーション動画制作
Motion graphics × 実写映像
#image(ICT LAB.jpg)
//#image(ICT-LAB.gif)
-''RYUTARO YOSHINAGA''
-'''Movie:Promotion,Motion graphics '''
-[[ICT LAB Promotion Movie>https://www.youtube.com/watch?v=yoUo_r7Nw-o]]
~


**Overview
~
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
モーショングラフィックと実写映像を組み合わせた映像作品
今年度に新規リニューアルされた中央会館3階ICTLAB(旧オープンスペース1)の学生に向けた周知を広げる2分程度のPR動画制作
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
ICT LAB室の利用方法などをより多くの学生に周知したいという思いから動画を制作しました。私は現在中央会館の総合基盤センターでアシスタントをしています。中央会館3階にあるICTLAB(旧オープンスペース1)はリニューアルオープンして以前と比べ、借用機材などの種類も増え遠隔授業にも対応した施設へと生まれ変わりました。しかし現状、ほとんどの学生にこの環境の利便性の周知が進んでいません。また常日頃から「施設の使い方」に関する質問が学生/職員問わず後を絶えません。このような問題をアシスタントとしてアルバイトをしている中で感じ、総合基盤センターの職員さんと話し合って制作に踏み出しました。

//遠隔授業に対応した機器や機材の貸し出しシステムなど、
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-ICT LABを知ってもらうきっかけとなる動画
-施設の簡単な使用用途/利用できるサービス紹介動画
~
~
***Output

#youtube(yoUo_r7Nw-o)
~
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
#slider(center,100%,h1,1000,2000,01.jpg,02.jpg,03.jpg,04.jpg,05.jpg,06.jpg,07.jpg,08.jpg,09.jpg,10.png,11.png,)
&small(※動画冒頭8秒ドローン映像は学校から提供していただきました);
~
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Adobe Illustrator
-Adobe After Effects 
-Adobe Premiere Pro
~
//***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
//***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
**Survey
~
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
***現状の問題
-リニューアルオープンされたICT LABの周知が進んでいない
~
***問題の原因
-コロナ禍における遠隔授業の影響でそもそも学校に来ていない
-K'sライフで授業連絡以外のメールはほとんど見ていない
-中央会館で授業がない限り立ち寄ることが少ない
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};
***先行事例
-[[AbemaTowers Office Movie>https://www.youtube.com/watch?v=P2yc9QizhzQ&list=PLPqKd0nHNTQDPM-FAevGwhpS5MrZndVZ7&index=1&t=50s]]
-[[プロパティエージェント【PropertyAgent】>https://www.youtube.com/watch?v=dKXsb6jruhg&list=PLPqKd0nHNTQDPM-FAevGwhpS5MrZndVZ7&index=5&t=2s]]
-[[トヨタ大手町 オフィス紹介>https://www.youtube.com/watch?v=G8vzHOyY314&list=PLPqKd0nHNTQDPM-FAevGwhpS5MrZndVZ7&index=3]]
//***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
~
~
**Project Management
~
***Schedule
-[[⏳スケジュール>https://docs.google.com/spreadsheets/d/1YvClG7IQYP7Gvd0munZF00YtMLkYW_83rdA1H6Ih7Ls/edit?usp=sharing]]
~
***ToDo
***今週の目標
-プレゼンテーションの練習
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
~
~
**2021.07.01
~
***講評を受けての今後の課題
-オリジナリティが足りない
今回はより多くの人に向けたシンプルでスタイリッシュな映像にしたいという自身の意識が強すぎたのかなと感じました。その結果オリジナリル性の足りない映像になってしまいました。
次回からこのようなプロモーションビデオを作成する際はカメラのアングルやモーショングラフィックスの動き、映像切り替えのトランジションなどに独自性を少し持たせても良いのではないかと感じました。
~
-映像素材が常に動いていて目が疲れる
少し凝っている映像にしたいという思いが強く出過ぎてしまったため、常に施設内の映像に動きを組み込んでいました。しかし結果として目が疲れるのといった印象になってしまったなと感じました。また今回カメラの設定を全て30fpsで撮影したのですが、このようなプロモーション動画では60fpsでの撮影も次回からは取り入れていこうと思いました。
~
-映像に映っているの目線
出演している人の “目線の先にあるモノ” をもう少し映像内の演出として取り入れた方がいいとの意見を頂き、次回からは目線と魅せたい対象物を関連付けて違和感の生じない映像制作に取り組んでいこうと思いました。
~
~
**2021.06.17
~
***構成の決定
#youtube(k_Vwu8lTqTk)
-全体の流れは決定しました。
-カラーグレイディングを再度調整
-エフェクトの動きの調整
~
~
**2021.06.09
~
***エリア紹介の試作 
//|#image(春.jpg)|#image(夏.jpg)|
~
''Sample1''
-ICT LABのロゴからインスピレーションを受けたデザイン
-図形が動く仕様にしたい
~
|#image(L1.jpg)|#image(L2.jpg)|
~
''Sample2''
-シンプルで見やすさ重視のデザイン
-背景画像をスライド式にしたい
~
|#image(S1.jpg)|#image(S2.jpg)|
~
~
**2021.06.05
~
***フォントの決定
~
***日本語フォント
-[[見出ゴMB31 >https://fonts.adobe.com/fonts/a-otf-midashi-go-mb31-pr6n#fonts-section]]
-[[中ゴシックBBB >https://fonts.adobe.com/fonts/a-otf-gothic-bbb-pr6n]]
~
***英語フォント
-[[Bilo Regular  >https://fonts.adobe.com/fonts/bilo]]

~
~
**2021.06.03
~
***動画オープニング試作 
|#youtube(Ny4emlJMgP8)|
~
***試作撮影を終えての改善点
-もう少し落ち着いた色味にする
-雨の日は光が足りなかったため次回から晴れの日に撮影を行う
~
~
**2021.05.20
~
***紹介する場所
''ICT LABエリア紹介''
~
-プレゼンテーションエリア(入口入って左側)
ソファー席及び電子黒板を設置しており、背面壁はホワイトボード仕様
プレゼンテーションの練習や、同じ場所で複数人が大画面を見ながらWeb会議を行うことなどが可能なスペース
~
-ワーキングエリア(入口正面からの6角形テーブル)
相手と会話しながら、履修登録や課題制作などが可能なスペース
Webカメラ及びマイクセットを常設しており、Web会議やオンライン面接、遠隔授業などで利用することができます。
~
-フリーアドレスエリア(入口入って右側及び窓側)
自身の保有PCを、学内の安定したネットワークに接続して利用することが可能なスペース
コンセントを常設しており、端末を充電しながら作業することができます。
~
-ディスカッションエリア(入口入って左側の壁面)
自身の保有PCを大画面モニターに映し出すことが可能なスペース
映し出された映像をもとに、プロジェクト内容の検討や企画書の作成などメンバーと話し合いながら作業することができます。
~
~
**2021.05.15
~
***制作物の選考事例
''オフィスプロモーション動画制作''
大学期間などのプロモーション動画は見つからなかったので、企業のオフィスプロモーション動画を参考として制作していこうと思います。
~
選考事例 SAMPLE
-[[AbemaTowers Office Movie>https://www.youtube.com/watch?v=P2yc9QizhzQ&list=PLPqKd0nHNTQDPM-FAevGwhpS5MrZndVZ7&index=1&t=50s]]
-[[プロパティエージェント【PropertyAgent】>https://www.youtube.com/watch?v=dKXsb6jruhg&list=PLPqKd0nHNTQDPM-FAevGwhpS5MrZndVZ7&index=5&t=2s]]
-[[トヨタ大手町 オフィス紹介>https://www.youtube.com/watch?v=G8vzHOyY314&list=PLPqKd0nHNTQDPM-FAevGwhpS5MrZndVZ7&index=3]]
~
~
**2021.05.13
~
***制作物の決定
''ICT LABプロモーション動画制作''
九州産業大学中央会館3階にある総合基盤センターのICTLAB(旧オープンスペース1)がリニューアルオープンしました。この場所の周知を広めるためにモーショングラフィックスと実写の映像を組み合わせた映像作品の制作を行おうと思います。
📍-[[ICTLAB>https://www.cnc.kyusan-u.ac.jp/facilities/guide.html]]
~
***モーショングラフィック使用箇所
''詳細なシステムの説明''
-設備しているPC/搭載ソフト
-借用することのできる機材
などの細かな情報は適切なプロトタイプなどを使用し、みている人に理解を深めてほしい箇所はモーショングラフィックを使用してわかりやすく説明しようと思います。
~
SAMPLE
|#youtube(1yVaLlLiKV8)|#youtube(OkEY5EYufk8)|
~
~
**2021.05.06
~
***調査/制作物の設定
具体的にモーショングラフィックを使用してどのような動画を制作していくのか
~
***地域飲食店の宣伝動画
やりたい理由
-コロナ禍における飲食業界の課題に目を向けてみたい
-制作動画投稿前と投稿後での売り上げの統計をとってみたい
-地域飲食店の方と交流を深めたい
~
障害となるもの
-コロナ禍における営業時間の兼ね合いでの予定の変更が多くなりそう
-動画内のモーショングラフィックを使用率の低さ
~
先行事例
|#youtube(oM_E1zntSGM)|#youtube(oG7LSgD5okQ)|
|#youtube(zjZUGT-sYeg)|#youtube(pYZnrOpv4gQ)|
~
~
**2021.04.29
~
***調査 
動画を使って情報発信することには、どのようなメリットがあるのか
~
''多くのユーザーに見てもらえる''
文字(Webサイトなど)での情報発信と比較して、動画コンテンツは「情報を得るまでの手間が少ないこと」が特徴です。例えば、YouTubeであれば、再生ボタンをクリックするだけで、ユーザーが受動的に動画を視聴できます。
最近では、動画配信を中心とした新たな働き方として、YouTuberが職業として注目されており、動画による情報取得は一般的になりつつあるのです。
実際に、YouTubeの日本国内におけるアクティブユーザー数は、2018年の調査時点で月間6200万人を超えており、17歳~60代後半までの幅広い年齢層で利用されています。
また、一般財団法人デジタルコンテンツ協会の「動画配信市場調査レポート2020」によると、2019年の動画配信の市場規模は、2,770億円(前年比約126%)を記録しました。
従来の「文字による情報取得」よりも手間が少なく、受動的に視聴できるため、より多くのユーザーに見てもらえることが動画発信のメリットです。
~
''短時間で多くの情報を発信できる''
動画コンテンツを活用することで、短時間で多くの情報を発信できます。例えば、1分ほどの短い動画であっても、一般的なWebサイトにおける3600ページ分(約180万文字)の情報量があると言われています。
また、1971年にアメリカの学者アルバート・メラビアンが提唱した「メラビアンの法則」によると、人間は情報を取得する際に「視覚から55%」「聴覚から38%」「言語から7%」の割合で、脳内にインプットをしているそうです。
動画コンテンツは、紙媒体やWebサイトのように文字単体ではなく、「映像」「音声」「文字」の3つの要素を含んでいるため、より記憶に残りやすい媒体として活用できます。
~
''直感的理解''
動き(=時間の流れ)と伴って見せる事のできる動画は、静止画や文章のみと比較して、物事をより直感的に伝えるのに向いています。例えば「簡単さ」を使えたい場合、実際にごく短時間で実行されている様を示すことで、より説得力を伴った表現を行うことが可能です。
~
**2021.04.22
~
***調査
***テーマの思考
~
制作物
-モーショングラフィックを使用したアニメーションを制作したい
-シンプルかつ情報がしっかりと伝わる映像作品
~
紹介する情報
-現在の世の中に存在するサービスやの紹介を行いたい
-意外と世の中の人が認知していない情報発信
-世の中の人のニーズに応えられるような情報発信を行いたい

-[[フラットアニメーション>https://asobo-design.com/nex/blog-854-22724.html]]

|#vimeo(55366536)|#vimeo(205183632)|
|#youtube(UwfZg6Zq-5w)|#youtube(JKqq8W5ZuE8)|

~
~
~
**2021.04.15
~
***テーマ設定
~
***現在興味のある事
-[[インフォグラフィックスデザイン(Infographic design)>https://hataraku.vivivit.com/works/infographics]]
インフォグラフィックは情報を簡潔にわかりやすく説明したい時に使われ、標識や地図、電車の路線図などの形で用いられることが多いです。
現在ではデータなどを視覚化し、それを広告などのグラフィックとして扱い見る人により印象を残す表現として使われたりもしています。
//Word[[チャート>https://www.pinterest.ch/pin/61854194870129771/]][[フローチャート>http://weddingphotography.com.ph/6861/how-to-make-movies-helpful-infographic-flowchart-guides/]][[ピクトグラム>https://www.pinterest.ch/search/pins/?q=%E3%83%94%E3%82%AF%E3%83%88%E3%82%B0%E3%83%A9%E3%83%A0&rs=typed&term_meta[]=%E3%83%94%E3%82%AF%E3%83%88%E3%82%B0%E3%83%A9%E3%83%A0%7Ctyped]]
~
-[[モーショングラフィック(Motion graphics)>https://video-b.com/blog/video/motion-graphics/#:~:text=%E3%83%A2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AF%E3%80%81%E3%83%AD%E3%82%B4,%E5%8A%A0%E3%81%88%E3%81%9F%E5%8B%95%E7%94%BB%E3%81%AE%E3%81%93%E3%81%A8%E3%80%82]]
モーショングラフィックスは、ロゴやテキスト、イラストなどに動きと音を加えた動画のこと。
ユーザーの興味を惹くことができるだけでなく、ロゴや図形など静止画では伝えにくい情報やイメージを伝える事ができます。
そのため、近年では商品やサービス、企業イメージを伝えるためにモーショングラフィックスを動画広告に利用する企業が増えてきています。
~
~
***どんなことをやりたいか
-モーショングラフィック動画制作
-グラフやピクトグラムを使用した情報発信
~
***使用するツール
-Adobe IlIustrator
-Adobe After Efects
~
***参考
-[[Explain Ninja>https://explain.ninja/works/#clubsoda]]
~
|#vimeo(264074381)|#vimeo(124038722)|
|#youtube(=KaA80GGBDBI&t=20s)|#youtube(yGSMdX_Xt5Y)|
~
~
~