LogoMark.png

平塚海登/情報デザイン研究I の変更点


#author("2020-07-16T11:47:32+09:00;2020-07-02T04:08:42+09:00","default:member","member")
*Fukuoka City by numbers.
数字でみる福岡市
'''Keywords:Motion graphics / Info graphics'''
~
~ 
#image(MainVisual.png)
~
~


**プロジェクトの概要

***これは何? 
福岡市の"いま"を伝える
モーショングラフィックス
~

***背景
福岡市は日本一の成長都市(人口増加数)とも知られ、住みやすい街としても評価されている。しかし、福岡市民であっても[[Fukuoka Facts>http://facts.city.fukuoka.lg.jp/]]で公開されている福岡市の優位性などに、実生活の中で気づく場面が少ないと感じた。こうした普段暮らしている地域のよさは、住民にとって恒常的で気づきにくい。そこで、今回は福岡市のもつアドバンテージを可視化し、数字で実感していただくために、モーショングラフィックスとインフォグラフィックスでわかりやすく伝えたいと考えた。
~

***目的・主旨
動画を通して福岡市の魅力を伝える
~

***コンセプト
-動画の中における過剰な装飾を省いて、
わかりやすくモダンなデザインにする
-視聴途中の動画からの離脱を少なくするため、
スピード感のある演出にする
(TikTokやIGTVをはじめ、動画の再生時間はより短くなる傾向にある)
~

***ターゲット
-福岡市にお住まいの方
-福岡市に関心がある方
~

***制作物
#youtube(ufj7IcrrQbQ)
''動画''
スマートフォンなど縦型デバイスでの視聴に最適化。
YouTubeなど映像コンテンツにおける高フレームレート化の
トレンドにあわせて、60fpsで制作した。
(Motion graphics / Info graphics)
~

***プロジェクトで使用するツール
Adobe Illustrator, Adobe After Effects, Adobe Premiere Pro
~

***まとめ
スマートフォンになど縦型デバイスに最適化した比率と、
スピード感ある演出で視聴途中の動画からの離脱が少なくなるよう工夫した。
今後は編集・コンテンツのクオリティを高め、視聴者が惹きつけられるような動画作品を制作していきたい。
~
~


**プロジェクト管理

***スケジュール
[[スケジュール>https://docs.google.com/spreadsheets/d/1DUyKeGW2eAKZqyg_0Voy-OcovstMpXwrg65tRGl2FXg/edit?usp=sharing]]
~


***ToDo
-%%映像内のコンテンツの計画%%
-%%Illustratorを使った試作%%
-%%映像の長さを決める%%
-%%映像のコンテツを決める%%

~
~


**進捗・記録
~
~
***2020.07.08
''完成映像''
#youtube(ufj7IcrrQbQ)
スマートフォンでの閲覧に最適化。
YouTubeなど映像コンテンツにおける高フレームレート化の
トレンドにあわせて、60fpsで制作した。
~
~
~
~
***2020.07.02
~
#image(image03.png)
これまで''「People(ヒト)」''と''「Money(カネ)」''の2つにカテゴライズして
コンテンツを制作してきたが、2つのカテゴリ両方に該当する項目なども
多かったことや、動画における内容充実のため一本の動画として制作することにした。
~
~
~
~
***2020.06.25
~
#image(image02.png)
~
~
~
~
***2020.06.18
~
#image(image01.png)
~
~
~
~

***2020.06.11
~
''Illustratorを使った試作''
#image(sample04.png)
~
~
~
~
***2020.06.04
~
''映像のテーマ''

''「ヒト(人口)」''と''「カネ(経済)」''の2つにカテゴライズし、
各30秒程度の動画にする
~
~
''Color scheme''
#image(sample01.png)
現代的(モダン)な配色にする
~
~
''映像におけるアスペクト比''
#image(sample02.png)
[[HeyNews.>https://www.instagram.com/_hey.news_/?hl=ja]]や、[[ONE MEDIA>https://www.instagram.com/onemediajp/?hl=ja]]など新しいメディアの多くは、Instagramのストーリーズ、IGTVなどスマートデバイスに最適化された''9:16''比率で制作されている
ディジタルサイネージにおいても縦型として設置されることが多く、今回は''9:16''比率で制作する
~
~
''Image''
#image(sample03.png)
~
過剰な装飾を省いて
シンプルでモダンなデザインを目指す
~
~
-映像内のコンテンツの計画
-Illustratorを使った試作
-
~
~
~
~
***2020.05.14
~
''数字でわかる福岡市''
福岡市都市計画マスタープラン「[[福岡市政の課題>http://www.city.fukuoka.lg.jp/data/open/cnt/3/44615/1/02_toshikeikaku-MP.pdf?20161102163001]]」や、[[Fukuoka Facts>http://facts.city.fukuoka.lg.jp/]]などの市政によって公表されているデータベースを基に、客観的な数字によって構成
~
-''映像の長さ''
1分程度未満

-''動画のアスペクト比''
スマホライクな縦型にするか
従来通りの16:9にするか検討中
(Instagramのストーリーズや、TikTokなど多くのメディアが
縦型メディアに移行しているので縦型を念頭においています)

~

''ウォーミングアップ''
~
#youtube(cXxuWBQQ4vY)
~
#vimeo(420891695)
解説動画を見ながら、Adobe AfterEffectsでの
モーショングラフィックスのつくり方を習得していきます

-絵コンテをまとめる
~
***2020.05.07
~
[[文化・エンターテインメント活動支援事業 | 福岡市>https://www.city.fukuoka.lg.jp/keizai/contents/health/coce2.html]]
福岡市の文化・エンターテインメント活動支援事業は、''"新型コロナウイルス感染症拡大以前から継続的に,対価を得て公演やイベント等を行った実績があるアーティスト"''が対象のようです。
~
''試作品・サンプルをつくる''
~
参考 :
''グラフィックで伝える :'' 
[[Covid-19 Charts | Pentagram>https://www.pentagram.com/work/covid-19-charts/story]]
[[九州産業大学・九州産業大学 造形短期大学部 緊急支援まとめ>https://drive.google.com/open?id=1bwuLnRV0rcYN76feCEgkQ8mD4QhYAxfv]]
[[Fukuoka Facts>http://facts.city.fukuoka.lg.jp/]]
~
''みんなに伝える :''
[[特別定額給付金 | 政府広報〈動画〉>https://nettv.gov-online.go.jp/prg/prg20624.html]]
~
~
~
~
***2020.05.03
''モーショングラフィックス''
映像は、映像は視覚からだけではなく、聴覚からも情報が入り、表現力は、活字や静止画による情報伝達力と比較すると、5000倍もの差があると言われている。
また文字情報や、グラフィックと比較し、受け身のメディアとしてのアドバンテージがある。

''福岡市''
福岡市はアジア各国と近接する立地的ポテンシャルを活かし、都市成長率全国一位の九州最大の都市である。また定住人口に相対する概念である、交流人口(通勤・通学、買い物、出張などで福岡市を訪れる人)が多いのも特徴である。
参考動画のような福岡市政のPRCMは、福岡民放各局におけるCM放送や市内施設におけるディジタルサイネージでの展開など、市民を対象としたものであった。
~
-福岡市民でも福岡市のポテンシャルを理解している人は少ない気がする?
--対象は福岡市民?

-市政PRよりも数字をメーンにして、客観的な内容にする?
~
~

参考動画 : 
#youtube(WZ6Z7_Uko8w?t=245)
~

参考 :
[[Fukuoka Facts>http://facts.city.fukuoka.lg.jp/]]

[[福岡市を経営する(著・高島宗一郎)>https://www.amazon.co.jp/dp/B07KG69NVX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1]]〈読了〉


~
~

***2020.04.30

~
~

***2020.04.23
-Adobe After Effectsを使った
''インフォグラフィックス・モーショングラフィックス''
~
参考 :
~
#vimeo(9873910)
~
//|50||50|
|#youtube(DGyW4gdHtvM)|#youtube(7P8fd9Q0MK0)|
~
~
~