Part 2：
自主制作作品「モーションポスター」ができるまで
制作のきっかけ
①「額縁」の中で動く、グラフィック起点のアプローチに刺激を受けた
● MOTION POSTERS
動くポスター画像を集めたアカウント。
● DESIGN IN MOTION FESTIVAL
オランダの複数の都市で行われるフェスティバルで、屋外や公共空間のスクリーンでモーショングラフィックスの展示を行う。
● Studio Dumbar
DESIGN IN MOTION FESTIVALを主催するオランダのデザイン会社。
②モーショングラフィックスが特定のスタイルに集中することへの懸念
● よく見かけるモーショングラフィックス
偶然見つけたInstagramが創作のきっかけに
「モーションポスター」は僕のWEBサイトで公開している自主制作の作品で、2023年くらいに制作したものです。作ろうと思ったきっかけのひとつには、偶然見つけた「Motion Posters」というInstagramのアカウントがあります。今はもう更新されていないようですが、さまざまな動くポスターの画像を集めたページで、初めて見た時には、「こんなアプローチもあるのか」と新鮮な刺激を受けました。「四角形の額縁があって、その中でグラフィックが動く」という発想に、映像ではなく、グラフィックを起点としたモーショングラフィックスの可能性を感じたのです。
他にも、自主制作の参考になったWEBサイトがあります。DESIGN IN MOTION FESTIVAL（通称DEMO）はオランダで開催されるイベントで、街中にあるサイネージ用ディスプレイを額縁として使い、さまざまなモーショングラフィックスの映像を流すというものです。
もうひとつはStudio Dumbarというデザイン会社です。先述したDEMOを主催している企業で、フェスティバル以外にも、ChatGPTで知られるOpenAIのモーションデザインやブランディングの手伝いなどもやっています。
既存の枠にはまらない表現を模索する
また、今回の制作の背景には、モーショングラフィックスの表現の幅を広げたいという思想もありました。なぜなら、今の日本のモーショングラフィックスが特定のスタイルに偏っているように思えるからです。
ひとつは、コーポレートメンフィスというスタイル。2Dのフラットなイラストレーションで、企業のWEBサイトでよく使われています。ふたつ目はリリックモーション。X（旧Twitter）ではリリックモーションの広がりが顕著で、若い人、特に中高生がモーショングラフィックスを始める入口にもなっていると思いますが、既に飽和状態にあるように感じていました。3つ目はサービス説明動画で、左右どちらかに機能説明があり、もう片方でそのアイコンが動いているのが定番という印象です。
このスタイルに需要があること自体は悪くありません。ただ、「モーショングラフィックスといえば、これ」と固定観念が定着することに懸念がありました。本当はそれ以外の表現もあり、もっと面白いことができるはずです。そうして表現の「幅」を伝える手段のひとつとして、モーションポスターを自主制作することになりました。
制作工程①：作りたいものを箇条書きにする
何を作りたいのか、書いて整理してみる
では、モーションポスターの制作工程を見ていきましょう。みなさんも同じかもしれませんが、何かを作ろうと決めたら、まず「何を作りたいのか」を文章に起こして整理してみます。Notionを確認してみると、2023年10月に書かれた文書が保存されており、そこには右のようなメモが残されていました。
・動くポスター、デジタルサイネージ的なものを作りたい。
・映像というよりも、動くポスター。
・ループする映像。画面を激しく動かしたいわけじゃない。
・心地良さをメインに据える。ポスターが動いている。
・マウスに付随して画面にパララックスを加える。
今回のポイントは、激しく動かすのではなく、街の中にあっても違和感のない心地良い動きを作るということだと読み取れます。ここではパララックスを加えると書いてありますが、 最終的に不必要だと判断してやめました。
制作工程②：リファレンスを集める
好きなものを集めて、求める表現を見極める
次はリファレンスを集めていきます。以前はVimeoやPinterestを使っていましたが、今ならここ1〜2年愛用しているEagleというアプリかInstagramを選びます。
EagleはPinterestと似ていますが、Pinterestが他人が保存した画像の中から自分の好みに近い画像を引っ張ってくるような使い方をするのに対し、Eagleは本当に好きなものだけを集めて管理し、自分だけのスクラップブックを作っていくような感覚です。
例えば、「SFっぽいサイバーな雰囲気で作ってほしい」と依頼されたら、リファレンスを集めるにはPinterestのほうが向いています。自分のひきだしにない要素を集めるのに適しているからです。
一方、Eagleは自分が本当に好きなものを何度も見返すためにあるツールです。そうすることで自らの好みを自覚し、作りたい作品の方向性を具体化させ、自分の求めるモーショングラフィックスに近づいていくのです。
● ダウンロード
制作工程③：Figmaでグラフィックを作る
形と動きの変化を4枚の画にまとめて絵コンテの代わりにする
画面を横に4枚並べ、左から右に形と動きの変化を示した。左は四角形、右は線で「モーション」「グラフィックス」の文字を作ったパターン。どちらもだんだん太くなっていき、最後には潰れた塊になって画面の下半分を埋める。
オブジェクトのサイズ・間隔は、すべて8ピクセルの倍数に揃える
WEB作品の場合は、オブジェクトの縦横のサイズ、画面端からの距離、他のオブジェクトとの間隔をすべて8ピクセルの倍数に揃えるようにしている。WEBサイトの画面は基本的に8の倍数で作られているため、8ピクセル単位でレイアウトすると画面が綺麗に構成されるため。
「ナッジ」メニューで「小さな調整」を1、「大きな調整」を8 ピクセルに設定すると、矢印キーでオブジェクトを移動させる時に8ピクセル単位で動かすことができるようになる。左画面は横長の長方形を右に移動させたところ。右のオブジェクトとの間隔が8ピクセルだけ縮まったことが分かる。
Figmaなら画面を複数作っても動作が軽い
リファレンスが集まったら、素材となるグラフィックをFigmaというデザインアプリで作っていきます。今回は横1080×縦1920の縦長のフルHDサイズの画面を作り、横に4枚並べました。これは絵コンテのようなもので、最初の画像からどのように形が変わって、どのように動き、最後にどうなるのかというモーションの変化を左から右に向かって示しています。
今回は四角形を組み合わせて「モーション」「グラフィックス」の文字にした2パターンと、線を組み合わせて「モーション」「グラフィックス」の文字にした2パターンを作成しました。
Figmaを使う一番の理由は、その操作の軽さにあります。Illustratorでも制作は可能ですが、画面を複数作ると、そこまで枚数が多くなくても動作がかなり重くなってしまいます。一方、FigmaはUIなどを作るツールなので、複数の画面を扱うことを前提に設計されています。多くの画面を必要とするモーショングラフィックスの作業でも動作が非常に軽く、一番使いやすいと感じています。また、プラグインを使えばFigmaで作ったグラフィックをそのままAfter Effectsに持っていくことも可能です。
制作工程④：After Effectsに貼り付ける
① SVGとしてコピー
貼り付けたいオブジェクトを選択して右クリックのメニューから「コピー/貼り付けオプション」＞「SVGとしてコピー」を選択。
② ToothPasteで貼り付け
あとはプラグイン「ToothPaste」のパネルで「Paste SVG」をクリックするだけ。オプションの「Split into Layers」にチェックを入れておくと、「モ」という文字を構成する4つの四角形が独立したシェイプとしてコピーされ、別々に動かすことができる。
プラグインToothPasteを使うのがおすすめ
Figmaで作ったグラフィックをAfter $ Effectsに取り込むには、aescriptsで販売されている「ToothPaste」というプラグイン（29.99ドル）が便利です。いちいちエクスポートせずに、右クリックしてコピーし、そのままAfter Effectsに貼り付けることができます。オプションの「Split into Layers」にチェックを入れずに貼り付けると、選択部分がパスのないひとかたまりとして読み込まれます。
制作工程⑤：After Effectsでモーションをつける（四角形バージョン）
プラグインFlexでラインに合わせて辺を動かす
Figmaの素材をすべて貼り付けたら、次はモーションを付けていきます。ここで使うのはaescriptsなどで購入できる「Flex」というプラグイン。縦横にガイドラインを引いて各文字を構成する四角形の上下左右の辺に合わせ、そのラインの位置を上下左右に動かすことで対応する四角形の辺を拡大・縮小させるという方法です。普通のシェイプレイヤーでは横方向に拡大しようとすると左右の辺が同時に伸びてしまいますが、この方法なら左辺だけ、右辺だけを別々に動かすことができます。
こうやっていくつもの四角形を伸びたり縮んだりさせながらキーフレームを打って、複雑でリッチなモーションを作っていきましょう。
制作工程⑥：After Effectsでモーションをつける（線バージョン）
1本の繋がった線を分離した5つの文字に見せる
文字の1画1画が分かれているように見えて、実際は一筆書きの1本の繋がった線になっている。パスのトリミング機能で「End」の数値を変えて線を伸ばし、キーフレームで動きをつけていく。
アンカーポイントとハンドルをヌルにリンクさせて文字の形を動かす
繋がった1本の線を伸ばしながら動かす
線のバージョンもかなり面倒な作り方をしています。最初は別々だった「モ」「ー」「シ」「ョ」「ン」の5文字が伸びて動き、最後には繋がった太い線になって潰れた塊になるのですが、そうなるには5文字が1本の線にならないといけません。そのため、文字の1画1画が分かれているように見えても、実際は一筆書きの1本の線として繋がった状態として作られています。
それをAfter Effectsのパスのトリミング機能を使って、たとえば「モ」という字の1画目の終わりのところまで線が伸びるようにレイヤーの「End」の数値を動かし、その次は2画目の終わりまで伸ばす、というようにキーフレームを打っていきます。
これだけなら簡単ですが、実際はここからが大変でした。ダイナミックで気持ちの良いモーションにするには、線を伸ばすだけでなく、線の形から位置まで全部を変えながら動かしたいと考えたからです。そのためには線のシェイプに打たれているアンカーポイントを細かく動かさなければなりませんが、これを直接キーフレームで動かすのは大変な作業になります。
そこで、各アンカーポイントの頂点とハンドルの左側（イン）と右側（アウト）をヌルにリンクさせることにしました。こうすると普通の位置プロパティと同じように座標の数値やドラッグで位置を操作できるようになり、各ヌルレイヤーにキーフレームを打って自由に動かせます。
全アンカーポイントとハンドルをヌルにリンクするのでレイヤーの数が大量になり、手間もかかりますが、自分の好き勝手にできる自主制作だからこそ実現できた作り方だと思います。
制作工程⑦：モックアップに映像を入れて完成
ストックフォトのサイトでデジタルサイネージの画面白抜き画像を探す
ストックフォトの画面部分にモーションポスターの映像をはめ込む
MP4に書き出したモーションポスターをディスプレイ画像の白く抜かれた部分にはめ込む。角度がぴったり合わない場合は、コーナーピンのパネルを開いてモーションポスターの四隅の角を動かし、うまくはまるように調節する。
一度動画に書き出してから合成すると軽い
モックアップというのは、実際のディスプレイに映像を映した時にどう見えるかを検証・確認するためのもので、ShutterstockやiStockなどのストックフォトサイトで「デジタルサイネージ モック」と検索すると、サイネージ用ディスプレイの画面部分が白抜きされた画像がたくさん見つかります。この画像を購入・ダウンロードして、画面の部分にモーションポスターの映像をはめこんで合成し、映像として書き出せば完成です。
After Effectsのコンポジットデータをそのまま入れるより、一旦映像ファイルとして書き出してからモック画像にはめ込み、もう一度書き出した方が軽くなります。ただ、既存のモック画像にサイズがぴったり合うとは限らないので、コーナーピンなどのツールを使ってうまくはまるように角の位置などを調整しましょう。
Part 3
モーショングラフィックス制作に役立つおすすめツール
Cavalry：After Effectsより軽い2Dモーショングラフィックソフト
● ダウンロード
Rive：インタラクティブなアニメーション作成ソフト
● ダウンロード
Cavalryでやったほうが軽く簡単な作業もある
その他に、モーショングラフィックスの制作でよく使っているのは、CavalryとRiveというソフトです。
Cavalryは2D専用のソフトで、画面はAfter Effectsと似ているものの動作はずっと軽く、After Effectsではかなり難しいグラフィックでも簡単に作れるのが特徴です。
たとえば何本もの線が波打つアニメーションをAfter Effectsで作るなら、線の上にタービュレントノイズをかけて波打たせるという方法がありますが、そうすると線の太さが不均一になってしまいます。
一方、Cavalryなら線のシェイプにOscillator（オシレーター）をかけるだけで、線の太さは均一のまま波打つ動きを作ることができ、さらにDuplicator（デュプリケーター）と組み合わせることで何本もの線が複雑に波打つアニメーションに仕上げることが可能です。
Riveでインタラクティブなサイトを作る
Riveもモーショングラフィックスが作れますが、こちらは最終的に映像として書き出すのではなく、WEBサイトやデジタルサイネージ、ゲーム、Unreal Engineなどに組み込むことを想定した、インタラクティブなアニメーションを作成するためのツールです。
RiveにはState Machine（ステートマシーン）という機能があり、After Effectsでいうところのコンポジットを線で繋げることで画面遷移を設計し、スクロールする、ボタンをクリックするなどのユーザー操作に合わせてリアルタイムでグラフィックが切り替わるように設定できます。
しかも、書き出したデータがものすごく軽いのも強みで、わずか2〜3MBのファイルでも高画質を保ち、心地良くダイナミックなモーションで情報を切り替え、軽快に動くサイトを作ることができます。
Part 4
Iori Iwakiさんが 創作について考えていること
なぜ自主制作をするのか？
自主制作がやりたい仕事を呼び寄せる
なぜ自主制作をするかというと、結局のところ、仕事では好きなものを好きなように作れる機会は基本的にないからです。たとえ仕事で作ったものが話題になって似たような仕事ばかりが増えても、本当に作りたいものでなければ心は疲弊していきます。そういうフラストレーションを解消し、何が好きで何を作りたいのかを自問し、他者に分かる形で発表するには、やはり自主制作という形がベストだと思うのです。
また、それ以外にもメリットがあります。自主制作では失敗するリスクから解放され、成功する保証のない新しい表現や使ったことのないツールをいくらでも時間をかけて好きに試すことが可能です。もし成功したら、次は仕事にも活かすことができるでしょう。
僕はこれまでの自主制作を自身のサイトにポートフォリオとしてまとめていますが、これは自分のやりたい仕事の方向性を主張し、僕という人間の見え方を自分の望む方向に「編集する」行為でもあります。そうやって自主制作と発信を繰り返し続けていくことが、結果的には自分のやりたい仕事を呼び寄せると考えています。
いろいろなソフトを使ったほうがいい
ひとつのツールの思想に染まらないようにする
僕は普段からいろいろなツールを使っていますが、単純に面白いからという以外にも理由があります。それは、ツールには思想があるということ。たとえばAfter Effectsはみんなが使っていますが、それしか使っていないとひとつの価値観や方法だけを正しいと思うようになり、制作物もAfter Effectsの思想になってしまうんです。
一方でさまざまなツールを使って複数の分野でものづくりをしていくと、長所短所に合わせてソフトをより効率的に使い分けられるようになり、他の人が避けて通る表現を選んだり、変わったツールを使うことで自分にしかできない表現を作り出せる可能性が出てきます。ツールの壁を越えていくことが、考えを固定化せず、自分のひきだしにない物事の組み立て方や捉え方を学ぶことに繋がっていくのだと僕は考えています。
映像における文字デザイン
文字の見せ方はもっと自由でいい
モーショングラフィックスの文字は、必ずしも読めなくてもいいと考えています。文字には「情報として読ませる文字」と「グラフィック要素として見せる文字」があり、後者では文字を文字として認識させず、ただのシェイプとして使うのも有効だと思います。
また、文字は主役にもなれます。たとえばリリックビデオを背景、キャラクター絵、リリックというように分けず、キャラクターが文字になったり文字でキャラクターを構成したりと、文字を主体に各要素を融合させる表現にしてもいいかもしれません。「フォントを選んで文字にし、用意されたパラメーターで動かす」という作法にとらわれず、柔軟に自由に動かして表現の幅を広げていきましょう。