【GIG勉強会Vol.15】「After EffectsでGIFアニメを作る方法」と「Webにおける写真の重要性&手っ取り早く写真をうまく撮る方法」を学ぶ|株式会社GIG

【GIG勉強会Vol.15】「After EffectsでGIFアニメを作る方法」と「Webにおける写真の重要性&手っ取り早く写真をうまく撮る方法」を学ぶ

【GIG勉強会Vol.15】「After EffectsでGIFアニメを作る方法」と「Webにおける写真の重要性&手っ取り早く写真をうまく撮る方法」を学ぶ
NEWS

こんにちは!2018年4月に入社し、GIG勉強会の記事執筆を任されました編集のじきるです!これってGIGのコーポレートサイトのブログなんですよね?たぶん、けっこう大事なコンテンツですよね?僕みたいな新入社員が書いちゃっても大丈夫なんですか?

大丈夫!!!書いちゃいますよーーー!!!

入社して数日経ちますが、GIGはすごく自由な会社だなって思います。例えば、服装は完全自由です。パーカーにサンダルの社員もいます。先日スーツで会社に行ったら、「あれ?なんでじきるスーツなんか着てるの??」と18回くらい聞かれました。スーツを着てると浮く会社、それがGIGです。

さて、今回は楽しく学べるLT(ライトニングトーク)の模様をご紹介します!

 

前半のテーマは「After EffectsでGIFアニメを作る方法」について

まず登壇してくれたのは、デザイナー兼エンジニアのみやっちさんこと、宮本信二さん。Adobeの映像制作ソフトウェア「After Effects」でGIF動画を作る方法について、実演を交えながら分かりやすく解説してくれました。

宮本 信二(みやもと しんじ):1987年広島県生まれ。デザイナー兼エンジニア。大阪の専門学校を卒業後、3年間東京で美容師として働く。その後ITに転換し、デザイン制作会社や大手人材サービス会社で社員経験を経て、7月よりGIGに入社。
過去のインタビューはコチラ

 

当日使用したスライドは以下からご覧いただけます。

After Effectsを使ったGIFアニメの紹介 from GIG inc.

 

After EffectsでスタイリッシュなGIFアニメを作ろう!

宮本さんは実際にその場でAfter Effectsを用いて、企業ロゴのGIFアニメーション制作を実演しました。

宮本:「例えば画像の透明度を数フレームかけて0→100にするだけで、簡単にスタイリッシュなGIFアニメが作れます。これをサイトトップに置くだけでもカッコいいですよね」

After Effectsで作った動画データ(.movファイル)をPhotoshopで開いて、Web用のGIFアニメとして保存すれば完成だそうです。

またAfter Effectsは、同じくAdobeの動画編集ソフトウェアであるPremire Proと相性が良く、両方を使うことでよりハイレベルなGIFアニメを作ることもできるとのこと。

 

フレームレートとは

続いて宮本さんは、GIFアニメ制作の際に必ず考えなければならい「フレームレート」について教えてくれました。

宮本:「フレームレート(fps)とは、1秒間の動画に使われる画像の枚数のことです」

宮本:「fpsの値が高ければ高いほど、滑らかな動画になります。しかし同時に必要となる画像の枚数も増えるので、容量が大きくなり、また手間がかかります」

例えば身の回りのfpsには以下の様なものがあります。

  • テレビ映像:29.97fps
  • 映画:24fps
  • 日本のテレビアニメ:12~24fps

仮に2時間のアニメ映画が24fps(1秒間に24枚の画像)だった場合、

24fps × 60秒 × 120分 = 17万2800枚

の絵が必要になります。アニメ映画って恐ろしいですね…!!

 

宮本:「またWeb用のGIF動画の場合、特に容量の問題が大きく絡んできます。ある程度軽くしないとサイトが重くなってしまうので」

宮本:「アニメの滑らかさと容量のバランスを見極め、人が気持ち良いと感じる最適なデザインができるよう日々試行錯誤しています」

 

後半のテーマは「Webにおける写真の重要性&手っ取り早く写真をうまく撮る方法」について

次に登壇したのは、アートディレクターのTKこと、高橋佑人さん。ご自身の作例を用いて、Webで効果的に写真を用いる方法や、簡単にカッコよく写真を撮る方法を教えてくれました。

高橋 佑人(たかはし ゆうと):アートディレクター。プログラミング系の専門学校卒業後、プログラマーとして携帯電話の開発に携わる。その後、制作会社に転職しWebデザイナーに転身。フロントエンドエンジニア、フォトグラファー、レタッチャーとしても活躍。2018年1月、GIGにジョイン。

 

当日使用したスライドは以下から。

Web写真の重要性 & 写真をうまく撮る方法 from GIG inc.

 

 

Web写真の活用事例を切る!!

高橋さんは、Webサイトにおける写真活用の事例を挙げながら、苦言を呈しました。

高橋:「写真を効果的に使えてないWebサイトが多い。良い写真が、ただの飾り程度に落ち着いてしまっている」

高橋:「せっかく写真を載せるなら、画面全体を使って写真を大きく見せるべき」


また、現状のWebと写真の相性は”最悪”だと述べました。

高橋:「写真の表示は画面サイズに依存している。そのため横長の写真はスマホだとトリミングされてしまい、写真の一部しか表示されないことがある」

高橋:「PCは横長、スマホは縦長の写真が最適。どちらに適応させるかは非常に難しい問題」

 

写真の良し悪しの8割はレンズで決まる

良い写真を撮る方法として、これまでに「三分割構図」「斜め二分割構図(対角線構図)」「黄金分割点」などさまざまな構図理論が述べられてきました。

しかし高橋さんは、それらはあまり重要ではないとしています。

高橋:「写真の良し悪しの8割はレンズで決まる」

高橋:「カメラ本体は何でもいい。解像度が違うだけ」

カメラのレンズには大きく分けて、ズームレンズと単焦点レンズの2種類があります。単焦点レンズはズーム機能がないものの、背景のボケや空気感がよく撮れます。

 

また高橋さんは、カメラレンズを選ぶ際には以下のポイントに気をつけるべきだと述べました。

  • 本体付属のレンズキットは絶対使ってはならない
  • ボケや空気感を出したいなら単焦点レンズ一択
  • どうしてもズーム機能が欲しい場合は、15万以上の高級ズームレンズを買うべき(それすら安い単焦点レンズに敵わない)

 

LTの後は恒例のピザパーティー!

勉強会が終わり、皆さんお待ちかねのピザパーティー!! ピザやお酒代は全て会社持ちです!夕飯代が浮くので、一人暮らし組には非常にありがたいシステム。GIGに入社して良かった……!!

 

お酒やジュースを持って乾杯!皆さんしっかりカメラ目線です。素晴らしい、わかってらっしゃる。ピザパーティーでは年齢や役職は関係なく、それぞれ仕事や趣味について熱く語り合いました。社員同士の仲がものすごく良いです!

 

GIGでは、一緒に働く仲間を募集しています

現在GIGでは「一緒に学びながら、成長していきたい!」と意欲のある仲間を募集しています。
くわしく話を聞きたい方はコチラからどうぞ。

 

RELATED ARTICLES