新たな力をもう1つ - Plus One
日本を代表する広告・デザイン制作会社 日本デザインセンターに所属し、webを中心にデザインとエンジニアリングを結びつけた有機的なクリエイティブを展開する後藤健人さんは、同社が手がけるさまざまなデザインのなかで、モーショングラフィックスも担当。コミュニケーションがwebや映像にも広がりを見せるなか、グラフィックに動きをつけるニーズは日々高まっていると言います。
今回は、Adobe IllustratorとAdobe After Effectsを組み合わせ、グラフィックに時間軸を加えることで、よりデザインを伝わりやすく、表現力豊かなものに変えていく、後藤さんのモーションアプリ活用法について紹介します。
"動きでコンセプトを体現すれば、デザインをより機能させることができる"
Illustratorでロゴを作成→After Effectsで命を吹き込む
「Osaka Metro の案件はロゴの提案時点から、モーショングラフィックス担当としてチームに加わっていたのですが、制作の過程で（クリエイティブディレクターの色部義昭さんから）Osaka（大阪）の“O”とMetro（メトロ）の“M”という2面性をモーションで表現できないかという相談を受けました。
当初、After Effectsで作ろうと考えましたが、よりシームレスに2面性を実現するために、After Effectsに付属する3Dアプリ・MAXON Cinema 4D Liteで3Dモデルを作り、動きをつけ、After Effectsで仕上げたのがこのモーションロゴです。
実はそれまでAfter Effectsを入れると、Cinema 4Dもインストールされることは知らなかったのですが、触ってみるとIllustratorのパスも読み込めますし、After Effectsとも連携がしやすい。今後、ますます使用頻度が上がっていくと思います。
コミュニケーションの中心が映像に移り変わるなかで、いま、ロゴを動かすというケースは増えています。ロゴは企業の考えを視覚的に示すものですが、そこにコンセプトを体現した動き加えると、静止画で見ている以上に正しくメッセージを伝えることができますし、SNSや映像でもより効果的な訴求ができるようになりますから」
1. Illustratorで作られたロゴデータ。これがモーションロゴの原型となります
2. After Effectsに付属するCinema 4D Liteで3Dモデルと基本的な動きを作成
3. After Effectsで3Dアニメーションを読み込み、色やレイアウト等を調整
https://milo.adobe.com/libs/img/mnemonics/svg/after-effects.svg | Adobe After Effects
グラフィックデザイナーの“動かしたい”に応えるAfter Effects
「環境省の『国立公園』の仕事*では、映像の最後に挿入されるロゴのモーションを担当しました。After EffectsはIllustratorのパスをそのまま読み込むことができるので、パーツごとに読み込ませて、そこに動きを加えています。
もともと、After Effectsを使い始めたのは、社内のグラフィックデザイナーからロゴを動かしたいという要望をもらったのがきっかけです。
After Effectsというと、“難しい映像系のアプリケーション”と思われがちですが、Illustratorで作ったロゴを動かすだけなら、それほどスキルを必要としませんし、社内でAfter Effectsの使いかたを説明するときも、“こんなに簡単にロゴを動かせるんだ”と言われるほどです。
いまはグラフィックデザインにも、時間軸を持たせたコミュニケーションが求められていると感じます。After Effectsはそうしたグラフィックデザイナーの“動かしたい欲”に応えられるアプリケーションだと思います」
*業務名：平成29年度国立公園統一マークを核としたブランディング素材作成等業務
https://milo.adobe.com/libs/img/mnemonics/svg/illustrator.svg | Adobe Illustrator
揃える基準を確認しながらデザインできるIllustratorの「グリフにスナップ」
「ロゴを作るときに特に便利な機能がフォントが持つベースライン、xハイト、仮想ボディのラインや、文字の各部分にオブジェクトを合わせることができる『グリフにスナップ』です。
これまでの『スマートガイド』は、どこを基準にスナップしているのかがわかりにくいことがありましたが、『グリフにスナップ』ならスナップの瞬間にその基準が表示されるので、安心して作業ができます。
たとえば、『グリフにスナップ』の『ベースライン』をオンにすれば、Oのような膨らみを視覚的に考慮して揃えることができますし、『グリフの境界』なら文字のかたちそのものにピッタリ揃えることができます。
文字のかたちにオブジェクトを合わせたいというときに便利なのが『角度ガイド』と『アンカーポイント』です。文字をアウトライン化しなくても、オブジェクトと文字の角度を揃えたり、文字の角に正確に合わせることができるようになりました。
『グリフにスナップ』は、デザイナーがこれまで経験的にやっていた作業を機械的にアシストしてくれる機能ですね」
Webデザイナー／モーションデザイナー
後藤健人
1988年生まれ。名古屋学芸大学メディア造形学部映像メディア学科卒業。Web制作会社を経て、2016年、日本デザインセンター入社。Webデザイン、フロントエンドの実装を中心に、映像・モーショングラフィックスなど、横断的にオンスクリーンメディアのデザインを手がける。おもな仕事に「FONTPLUS」「Fontworksコーポレートサイト」のアートディレクション、「Osaka Metro」モーションロゴ等がある。