モーショングラフィックスで、イラストの世界観をより味わい深く描く。（映像作家 島猛）｜Motion Summer Campメイキング

イラストが起用されたCMやリリックビデオが盛り上がりを見せる昨今、After Effectsを使って“イラストを映像に変える力”を身につけるVookオリジナルカリキュラム「モーションサマーキャンプ Powered by Vook School Lite」が開講中だ。

本稿では、本カリキュラムのLPでも流れている作例動画を手がけた映像作家の島 猛氏に、作例制作の裏側や特にこだわって仕上げたカットや演出法について話を聞いた。

• 
  映像作家 島 猛／Takeru Shima

  フリーランスとして MTV Japan のクリエイティブに携わりながら本格的に映像制作を開始。グラフィックスやモーション全般を得意としている。 TVCM・MV・映画やゲームのほか、アニメーション作品にも多数携わる。 Twitter:@takeru_shima

イラストにインスパイアされ、用意していたビデオコンテをイチから作り直した

企画段階ではまず島氏がアイデアとしてビデオコンテを2編制作。どちらも前もって決まっていた“夏に化けろ”というテーマに沿って、少女の心情がどう変化したのかを表現しているコンテで、再現（制作）難易度の高低で2種制作した。

その後、ダニエル氏のイラストを使用できることが決まった。

ダニエル
ショートカット偏愛家/イラストレーター。2019年より本格的に活動を開始。ショートヘア好きが高じ、「ショートカット女子」をアイコンに感情と物語が聴こえる絵を目指してSNSを中心に作品を発表している。Twitter:@DanyL_robamimi

島氏がイラストから感じたのは圧倒的な実在感。

映像作家 島猛氏（以下、島）：ダニエルさんのイラストには、ただそこに立っているだけではなくて、悩んでいるのか、考えているのか、一体そのキャラクターの目線の先には何があるのか？　と、受け手が考えてしまうような世界観があると感じました。デジタルで描かれているのにとても手触り感がありますし、魅力的だと思ったポイントですね。

イラストにインスパイアされた結果、先に制作した構成はなかったことにして、またイチからビデオコンテを制作し直したという島氏。

島：魅力的なイラストを多様な形で見せつつ、それを生み出したイラストレーターのダニエルさんをも魅力的に見せるという構成に舵を切りました。音楽も、最初のビデオコンテで使ったものは不採用にして、ダニエルさんのイラストに合った、都会的で洗練された印象の曲を選び直しました。

イラストの世界観を活かす、トップカットとラストカット

ここからは、今回の作例で島氏のこだわりを特に垣間見ることができるカットを2点掘り下げて紹介していく。

トップカットのポイント

まずは冒頭のカット。ここで使用しているイラストは、ダニエル氏から受け取ったイラストたちを順番に見ていた際に、島氏が”一番目が合った”と感じた少女だ。

島：目力が強くて、これをトップカットにしたいと一瞬で思いました。仕上がった映像は、パーツが組み上がり完成したイラストの上に、「Dany.L」のサインが踊る。ここでグッと、これはダニエルさんの絵ですよというのを見せています。ビシッと決まったと思っています。

映像では、元データが非映像用のデータであることとカリキュラムの難易度を考慮し、基本的にダニエル氏のイラストデータ（PhotoshopまたはIllustrator形式）のレイヤー構造をそのまま活用。動かす箇所によってパーツ単位で少々のマスク処理を行なった。

ブレイクダウン

イラストを映像化するための描き足しやパーツの追加依頼など、ダニエル氏とのやり取りを重ねて仕上げたトップカットのブレイクダウンを紹介。

▲実際のイラストでは両肩と頭がフレームで見切れていたため、映像用に描き足し
▲イラストのレイヤー構造をそのまま活かし、時間軸のあるカットを構成
▲動きに応じてパーツを追加。カリキュラム内ではパーツに合わせた動かし方の例も紹介

ラストカットのポイント

3輪のひまわりを手に持ち風を受ける姿が印象的な少女と、その上に映し出されるテーマ「夏に化けろ」の文字が印象的なラストカット。このイラストは、本作例のためにダニエル氏が描き下ろしたものだ。

本カットのポイントは、正方形で納品された1枚のイラストを上下で分けてカメラワークをつけているところ。これによって、「手持ちのひまわり」と「少女の顔となびく髪の毛」という2箇所に、効果的に強弱を持たせている。

ラストカットで使われたテクニックは、それ以前のカットで用いた技の集大成。それだけに留まらず、パーティクルのようなものを細かく飛ばしたり、蒸気のようなものを手前に走り抜けさせたりして、他のシーンとの差別化を測った印象深いカットに仕上がっている。
▲カリキュラム内での、フラクタルノイズ（煙のようなノイズを作るエフェクト）についての解説部分

なお本カットでは当初、After Effectsでは定番のパーティクル生成プラグイン「Trapcode Particular」を使用していた。しかし、本プラグインはスイートの一部として高額なサブスクリプションが必要となるため、受講生側の再現性の観点から標準機能を使った表現に置き換えられている。

普段の業務では、Trapcode Particularを使用することが多いという島氏。今回のような表現を標準機能で置き換えたことがなかったため手間取ったが、標準エフェクトでも納得のいくものができたと明るい表情で語る。

島：もちろんTrapcode Particularの方が細かい調節ができますし、より実際の空気に合った表現を目指せます。ですが、標準機能でも理想の表現を実現することができました。この点は僕にとっても、改めてAfter Effetcsでできることを再確認できたところですね。

ブレイクダウン

爽やかに風でなびく髪の表現のほか、空気感・立体感を演出するためにこだわったポイントについて掘り下げる。

▲"夏を感じる風"と"爽やかさ"をどう表現するかにこだわった
▲髪は6レイヤーにわけて、風でなびく様子を表現。髪以外のパーツにも風を生かした演出をふんだんに取り入れたカットになっている
▲キャラクターの裏の描かれていない部分をどのように対処すべきかを考えて作成
▲最後にパーティクルや水蒸気を表現することで、空気感や立体感を演出

アートディレクションの観点で色味やエフェクトを調整

映像が進むにつれて次々と登場するイラストの背景には、青みがかった緑と紫の2色が使われている。これは、島氏がアートディレクションの観点から選んだ色だ。

島：イラストを全体的に見たときに、雑誌のような大きいデザインとして組み上げることで、よりダニエルさんらしい世界観が仕上がると考えました。その結果、主張し過ぎないけどダニエルさんらしいシティ感のある世界観が伝わる色をイメージし、この2色を選びました。

また、その背景にはダニエル氏のイラストから感じる手触り感を表現するためにフラクタルノイズのようなエフェクトを乗せ、さらに前面にはフィルムスクラッチのようなエフェクトを乗せている。

島：イラスト主体で映像のタイムラインを作るとなると、どうしても動きの少ないところが多くなってしまいます。そうした映像の最終クオリティを上げるため、After Effectsの標準機能でこういったエフェクトを乗せる方法を、カリキュラムでも解説しています。

イラストの髪の毛がなびく様子も印象的だが、これもAfter Effectsによる演出のひとつ。

島：いわゆるシネマグラフ表現です。髪の毛のマスクを切って、風の揺らぎのような動きを作ります。ストレートヘアのような髪型は比較的動かしやすいです。ただ、どんなキャラクターに対しても有効なわけではなくて、動かすことでより魅力的になるようなキャラクターかどうかを見極めることも必要になります。

カリキュラム制作を終えて

島氏は今回、”人に説明するための作例作り”を初めて手がけたことを通じて、作品制作のプロセスや作業手順にも意識的に取り組むようになったと話す。

島：これまではエフェクトをたくさん乗せて試行錯誤しながら、良いものができたらそれを出すというやり方が多かったです。でも、今回の仕事を経て、なぜそういう風に作るのか、頭の中で作業を1つずつ整理しながら作ることが多くなりました。

また、普段は手癖で何も考えずに作っていることが多いのですが、“なぜこの手順でこれをやっているのかを考えながら作る”というのが、思った以上に新鮮でした。自分自身の勉強になって、これが受講生の方の勉強にもなるというのは、すごく嬉しいことですね。

最後に、島氏が映像クリエイターとして今注目しているものを尋ねると、9月8日（木）に発表されたiPhone 14の新UI「Dynamic Island」に興味を引かれたという。

これまでのノッチ式インカメラを廃止し、フロントカメラ部分に拡縮する黒い帯状のUIを配しており、通知などを受け取るとダイナミックにUIが変化する。

島：ハードウェアの欠点をソフトウェアが解決しているところに惹かれました。しかもモーションやグラフィックデザインの見栄えがすごく良いのです。僕もこういうハード上のモーショングラフィックスにトライしてみたいと思いました。

クリエイターとしての創作意欲を刺激されたようだ。

「モーションサマーキャンプ」カリキュラム概要

本カリキュラムでは、イラストレーターのダニエル氏が描いたイラスト群をAfter Effectsに配置し、イラストの一部を動かしたり、テキストアニメーションを加えたり、様々な空間演出を施す方法を学ぶ。

カリキュラムの流れは島氏の普段の制作手順に沿って、演出や時間軸の構成、音楽の編集、ビデオコンテ制作について解説。単なるツールのチュートリアルではなく、映像制作の根幹にアプローチする内容となっている。

また、Adobe Community Evangelistの山下大輔氏が、島氏の説明に従って実際に制作をしてみるというハンズオンパートも含まれている。山下氏が最初の受講生として作業を進めながら、島氏の解説を補足していくという構成だ。

島：モーショングラフィックスは素材を動かすだけではなくて、構成に始まって仕上げまでやることが多いです。そこで今回は、本当に1から最後まで丸っと説明できるようにカリキュラムを組みました。

例えば、音楽も尺に合わせてイントロとアウトロを編集して綺麗に締めていて、その話も入れ込んでいます。映像全体の見栄えやクオリティが変わる要素は、細かいことでも省かずに解説しました。

「モーションサマーキャンプ」は9月30日（金）23:59まで申し込み受付中。練習素材としてイラストと作例動画のプロジェクトファイル（.aep）が手に入り、カリキュラム動画は 10月31日（月）まで見放題、さらにオフライン交流会の参加権も付いている。After Effects初心者にもやさしい解説で、基礎からのステップアップに最適なプログラムだ。

申し込みはこちらから。

INTEREVIEW＿沼倉有人 / Arihito Numakura（Vook編集部）
TEXT＿kagaya（ハリんち）
EDIT＿山北麻衣 / Mai Yamakita（Vook編集部）