アゲインストアゲイン 工程と感想

この記事はみす53代 Advent Calendar 2020の22日目です。

1日ぶりに参上しました、53代のろろです。
長い話がお嫌いでしたら一番大事な「おわりに」だけお願いします。

昨日お話ししたばかり、アゲインストアゲイン

という作品があります。

今回は"アゲインストアゲイン"動画制作中の裏話を書き尽くします。動画作成編に至ってはこの動画の作り方、つまり動画で視えることに限って完全攻略ガイドです。(今後の自分のためのメモです)

はじめにチームについて

チームメイト、曲担当のyulaxyくん、本当にありがとうございます！　自分があの曲の動画をつけることができて本当に良かったと思いますし、誇りに感じます。アゲインストアゲインを生んでくださり感謝感激であります…！(私信)

マジでカッコよくてバーンと貫かれてしまったんだよな

誰かと一緒に作ることは今回が初めてで、ボカロ企画が始まる前は大変に緊張していました。今まで既知の曲に勝手に動画をつけるばかりだったのに、チームを組むことになり、動画を完成させられるか、そして責任持てるのだろうか…と不安がいっぱいいっぱいでした。
その曲には自分以外に動画つける人がいないんですよ？信じられない…

そしてあの曲「アゲインストアゲイン」がyulaxyくんから共有されました。

言葉を失い
我に返ると、責任重大な仕事が待っていました。

……。

完成して、よかったね〜ホントにね〜〜〜〜
満足できるものにできてよかったね〜〜〜〜〜〜

ちなみに私たちのチーム名は"La × Y33"ですが、yulaxyくんの"la x y"と私の"ろろ"を合体させたものです。"×"ってなんかのコンビとかコラボっぽくないですか？ちょっと気に入ってます。

ちなみに次点は"釧路"でした。両名から共通で出た案です。

---

じゃあ、動画の解剖していくぞ！！！！！

---

動画作成編1 　参考動画と実装結果

つまりこの動画の源泉たる参考動画を挙げてしまうし、演出の実装も書いてネタバラシしてしまうのです。先のアドカレで言及していたことを詳らかにしてしまいましょう……パッチワークから生まれたこの動画の姿を……

アゲインストアゲイン一度はご覧いただけましたか？必ず一見の後にお読みください。

見ながらだと分かりやすいのかもしれません。

イントロ

正三角形によって構成された図形が踊り狂う図です。なぜ正三角形なのかは後に回すとして、ここ作ってて一番苦労したのは動く菱形をループさせるにはどうするか、でした。

反省点

1. 菱形は長方形のシェイプを作り、歪度を30度にして作る

   イントロの菱形の素材はすべて正三角形を目見当でくっつけて作っています。菱形が合体して正六角形になるところがありますが、アレも目見当です……そしたらびみょ〜〜〜〜〜に隙間空きました。
   目見当はやめましょう。

2. シェイプを並べる時は縦横大きめのコンポジションで、まっすぐ並べる

   1で書いたように、正三角形で目見当で作った結果、レイヤーの数値ではまっすぐ並べられなくなりました……実は流れている点線自体が目見当で作られた直線なのでした…

3. タイトルロゴは存在感を持たせるために試行錯誤する

   線の細いロゴですが、元々は「アゲインストアゲイン」の途中で折り返しなく全ての文字を横並びにするつもりでした。その案の貧弱さといったら！
   折り返しにして文字同士の線の干渉・傾きを調整し、存在感のために正三角形を背景に置きました。ロゴの作りに合わせてﾓｰｼｮﾝｸﾞﾗﾌｨｯｸｽいい感じにできたので結果よし

ここで１つ種明かし。

ココ

これどうなってんの？

わざわざ分析したくはなりませんね、面倒そう。
作ろうと思ったモーションは、「不定な形のパーツが中心で六角形になりまたバラバラになる様子」です。

種明かししてみるとアッサリ薄味です。

その１：中心に六角形とクレジットがくるパーツ（コンポジション）を作る

六角形の移動する向きが左右対称になるものを１つずつ用意します。イージングも合わせます。フワッとセンターに入場し、ニュルッと退場していただきました。

その２：正三角形で画面を２つに分割するコンポジションを作る

画面の中央を中心として六十度ずつ、交互に画面を分割します。上下反転したものと合わせれば、ピッタリ画面を覆い尽くすことができます。

その３：その２の２つのコンポジションを回転させる

こちらの回転のイージングも互いに揃えました。その１の正六角形のニュルッと感とも合うといいなあ〜と祈りを込めてイージングをつけます。

その４：その３のコンポジション(アルファマット)直下にその１をおく

アルファマットの機能を使うとクリスタの"クリッピング"のようなことができます(CG研向け)。つまりその３の正三角形それぞれで正六角形の動きを切り取ってしまう訳です。

その５：合体して完成

使う機能単純なのに思った通りの見た目になって、かつ予想以上の出来となりました。動画制作ではこういう偶然の産物に支えられています。

これだから動画制作やめらんねえよなあ！

参考動画様方

動画	場所
GETCHA!	全体(グラデーションの使用)
レンリ	0:00〜(タイトルなど出すタイミング)

ハイ次。

"終焉の"〜

どこまでがAメロなんでしょう…わからないため歌詞で区切ります。

ここから人物2人が登場となりました。(長髪の子はダイヤ/もう1人はエメラルド)(勝手)
キャラクターを登場させるタイミングや動かし方って難しくないですか？私だけですかね…。

今回はイントロの目を開くアニメーションからの自然な登場のために”モーションタイル”を使っています。ここのシーンの繋げ方が、この動画制作の最後まで残ったラスボスでありました。華やかな討伐をできました。

参考動画様方

動画	場所
ジャックポットサッドガール	0:42〜
ELFENSJóN	全体(テキストの動き)
リコレクションエンドロウル 歌ってみた【そらる×天月】	全体(テキストの動き)
Ready Steady	0:10〜

"だだだ"〜

キネティックタイポグラフィーというのだそうです。早稲田祭の後に知りました……

絵・素材を使わないシーンを作る、というのは初の試みでした。（イントロはロゴがpng素材)
不安でしたがAメロに比べてあっさりとできました。元々"だだだ"をどう出すか決めていたせいがあるかもしれません。

計画性、大事。

参考動画様方

動画	場所
モラトリアム群像劇	0:35〜(文字のもちもち感)
人生逆転の神業	0:31〜
Ready Steady	2:07〜
Gossip	1:52〜
最高のライバルとの戦い【はじめてのポケモン剣盾】#23(一例)	6:34〜6:36

"世界は"〜

「世界はもう終わったね」という言葉を印象付けるにはどうするか、考えた時にすぐに「携帯恋話」0:59の動きを思い出しました。ココこそ使い所でしょう。
振り返ってみても良き采配でした。

参考動画様

動画	場所
携帯恋話	0:59(ﾁｸﾀｸﾁｸﾀｸ)

"守れなかった"〜

このシーンでハッとした方、ありがとうございます。狙い通りです。
１つ前のシーンはセリフのために力を入れた、と話しましたが、ココは動画全体の中で最大限の気を配って忘れられぬシーンになるようにしています。


ここで一番注目していただきたかったのは"瞳”なのです。

そのために彼女の瞳はこのシーンの最後以前には決して見えないようにしていました。もしよろしければ確認してみてください。

ちゃんと皆さんの記憶に残ったでしょうか？

ここの演出をどうするかでyulaxyくんと解釈一致して本当に楽しかったです。

参考動画様方

動画	場所
ロスタイムメモリー	3:46〜
アネモネ	1:57〜

"叶えたかった"〜

サビ、やってまいりました！！！！！

大変悩んでしまい、作り始めるまでが長かったんですココは…。
途中のシーンのように絵なしでテキストアニメーション全振り！というわけでもなく、しかしながら曲とともに盛り上がった画面にならねばなりません。困ってしまいました…

しかし作り始めたらノンストップで終わりました。よかったね。
学んだことは、「案ずるより産むが易し」です。

ここで種明かしいたしますのはコレです。

画面の一部が一方向にずれていき、ずれる一方なのに画面が元に戻ります。
これに関してはすぐ見破られていそうですが、私がこの動画でやりたかったことの１つなのです。あと、神動画から習得したスキルとしても紹介いたします。

これを学んだのは次の動画です。

背景がｼｭﾙｼｭﾙｰとずれて、いつのまにか背景のずれが無くなっていますね。私も一度見たときは、あまり不思議に思わなかったのですが……

これどうやるの？？？？

文字を何かシェイプにクリッピングしながら動かす…？
いや、それではズラしきった後に画面を完成させることができません。
というよりも、そもそも文字が動いているのではなく背景が丸ごと動いているように見えるのです…

ここで1:29あたりをじっくり(スペースキー長押しで一時停止と再生を繰り返して)観ると……

判明しました。左上の"捨"のところが顕著ですが、左右反転した文字があるように見えますね。恐らく"モーションタイル"を使っているのではないでしょうか、めいびー。

モーションタイルとは

使ってみることができる人は使ってみたほうが理解が早いと思いますが……
画面の映像をタイル状に敷き詰めて、そのタイル床を丸ごと移動させたり、ズームイン・ズームアウトができる、という感じです。(伝われ)

わかってしまえば実装は簡単。です。

"遥か彼方で"　"止めて 止めて"のところのリズムを強調したくて、曲を初めて聞いた時からココはこうだ！！！ と決めていました。

参考動画様方

動画	場所
携帯恋話	1:27〜
タイニーバニー	1:04〜

"君といた"〜

ここは正直、動画制作も大分興が乗って、慣れてきて、あまり思考の記憶がありません。参考動画様方だけ…

参考動画様方

動画	場所
人生逆転の神業	0:49〜
セツナドライブ	0:33〜

アウトロ

色着いちゃいましたね。

アウトロへのシーン遷移も、エメラルドの目に注目して欲しいがためのものでした。参考にしたのは「脱獄/Neru」3:17〜です。

できたんでしょうかね…わかりません。

背景にはここまでの動画の逆再生が流れている

のではなく、

ここまでの動画のカラーバージョンが逆再生で流れています。お気付きでしたでしょうか？
この演出をするために、動画のため用意されたイラストは全て、一度カラーで描いてからモノクロに加工されています。正直、アホです。

プロジェクトファイルを丸ごとコピーして、画像ファイルのパスを差し替えてレンダリングしました。ほぼ完成品の状態で、レンダリング時間は3時間ほどでした。(これのせいで完成品のレンダリング時間を甘く見ていました。なぜ16時間もかかったのでしょう…)

参考動画様方

動画	場所
アングレイデイズ
脱獄	3:17〜
レンリ	0:00〜(逆再生)

アニメーション

本作品には

• 目を開く横顔
• 振り向く少女

の２つのアニメーションが出てきます。アニメーションの描き方こそ見よう見まね学ばず一年過ぎてしまいました…ﾍﾟﾗｯﾍﾟﾗの素人のやり方です。

始点となる絵、終点となる絵、そしてその中間に二枚の絵の線画の等距離、角の二等分線的に一枚(中割りというらしい？)を描く。同じことを始点と中割り、中割りと終点で行う、と繰り返していくだけです。つまりフレーム数は指数関数的に増えます。

ただ、人間は一様な速度で動いているわけではありません。動き出しの方が速いとか、逆に遅いとかあると思います。そういった動きの場合は、単純に角の2/3分線とか描けばいいと思います。

fpsに関してですが、10fpsあれば十分だと思います。なんなら6fpsでも。
アゲインストアゲインもその予定でアニメーションを書きました。

10fpsでアゲインストアゲインの振り返りみたいに滑らかになるんだ！と思った方、お待ちください。
振り返りのシーン、実際にAdobe Premiereで各フレーム並べたら10fpsは動きが緩慢過ぎました…。つまり、曲の尺に対して何故か多すぎる枚数のフレームを用意してしまったということですね。結局あの振り返る瞬間は30fps近くあります。そりゃあ滑らかだ！

作業効率的には失敗していますが、アニメーションの動きの速さも今回の私のように一部分だけ枚数がリッチになるだけで一応緩急など調整はできます。

慣れるまでは目標枚数を決め、その枚数描いてから悩みましょう。
描き過ぎは疲れますが、何事もほどほどに、です。

創作編1  アゲインストアゲインの中身

自由に作らせてもらったので曲の流れの解釈は勝手です。ご承知おきください。

全体の流れ

動画全体は基本的にモノクロにしました。彩度の高い色はほんの一部です。
モノクロで作ろう、と決めたことがこの動画制作の難易度を上げてしまった気がします。画面の情報量、華やかさ、圧力を増すには色の変化以外の要素しか使えません。いや、ﾓｰｼｮﾝｸﾞﾗﾌｨｯｸｽよくわからない人間にはきついって…。
しかしアウトロだけはカラーです。

曲を聴いたときから、イントロとアウトロは全く同じ構成にしようと心に決めていました。この曲のテーマは「離別と再会」(と伺いました)。またタイトルも「アゲインストアゲイン」ですから、繰り返した抵抗の果て、ついに再会を果たす色鮮やかな一瞬を作りたいという意図がありました。

いえ、もしくは離別より前の情景にも見えたら。いいなと。

動画全体は別れの後の孤独な、色あせたモノクロの風景です。ですから明るいアウトロの部分は離別前か再会の瞬間でしょう。
どちらであるかは、知りませんけど。

ですが、どちらであるかをウヤムヤにするために、イントロの全く同じシーンまでを逆再生で敷くことにしました。

どう思います、皆さん。

エメラルド

この動画の粋な仲間を紹介するぜぃ！
まずは別れ時にも素敵な笑顔を見せてくれてきたエメラルドちゃんだ！！！

どうしてエメラルドかと言いますと、まず、Aメロ(と思われる)の歌詞に「翠玉の瞳に眩んだ」というフレーズがあります。
翠玉-Wikipedia
無知がバレました、ググりました。

さらに、初めのうちyulaxyくんから伺っていた曲名候補にも「エメラルド」を表すものがいくつかあったのです。

そこで、歌詞に出てくる「守れなかった笑顔」と「翠玉の瞳」の持ち主をエメラルドをシンボルとする少女に変えてしまいました。(単純)

エメラルドちゃんの見た目はエメラルドの持つ六角柱の結晶を元にしています。直線的な髪型や、服装の縫い目などスパイス程度の要素となりました。カラーで塗っても後々モノクロにすることが決定していましたから、カラーでもモノクロでもエメラルドの瞳が映えるカラーリングが念頭にありました。

そういえば「守れなかった」〜のアニメーションからサビに入るあたり、画面の色ずれでバラバラになる演出がありますね。動画では伝わらなくなりましたが、あの破片は宝石のエメラルドカットというものに沿った切れ目になっています。

ちなみにエメラルドの石言葉の１つは幸運です。

ダイヤ

続いて紹介するのは、登場しないタイミングを探す方が難しい！凛々しく立ち向かうダイヤさんだ！！！

ダイヤさんは私の独断により石の中から選抜されました。彼女の採用理由は、不屈の精神を象徴している石であることです。彼女、硬いですから。

彼女の見た目もエメラルドちゃん同様、「ダイヤ」から発想を得ています。髪型は、ブリリアントカットからイメージしていました(過去形)。
服装のダイヤ要素は、上の右下の絵が一番体現しています ♦️。個人的にこの絵がベストオブ美脚です。

細かすぎて伝わらないことですが、エメラルドちゃんのブレスレットとダイヤさんの足のアクセサリー、互いの色が入ったお揃いなんですよね……

正三角形

随分引っ張ってしまいましたが、イントロで正三角形が踊り狂っていた理由、すでにお分かりかもしれません。
エメラルドの六角柱(正六角形)とダイヤマークを構成する共通要素として正三角形を使っているわけです。

ﾓｰｼｮﾝｸﾞﾗﾌｨｯｸｽを分からないなりにも作るには、最低限材料を決めてしまおうと考えた結果、正六角形、ダイヤマーク、そこから派生して正三角形が用意されたわけです。
iPadで各図形を描きながらモーションをひねり出していたわけですが、そもそも正六角形が３つの菱形に分解されることに気づいた時は感動しました。イントロで具現化されました。

ということで、動画全体を通して正六角形・菱形・正三角形がある種モチーフとなりました。

動画作成編2 目標達成率

一通りイマジネーション的創作の面のお話を終えたところで、この動画制作での目標達成率を見ていきたいと思います。反省会開催。

まず目標は次のようなものでした。(昨日のアドカレより)

1. ピクセルソート

   新たなプラグインとして

2. イージング

   下手、直したい

3. シーン遷移

   さらに下手、考える癖つけましょう

4. 立ち絵減らし

   ﾓｰｼｮﾝｸﾞﾗﾌｨｯｸｽできないので絵を描く以外に画面が考えられない
   ﾓｰｼｮﾝｸﾞﾗﾌｨｯｸｽしようね…

5. 背景を動かす

   背景も動くと情報量が増える、無いセンスを情報量でカバーしたい

6. グラデーション

   たまに観る、おしゃれ。せっかくある機能なのに全く使ったことない

7. 神動画で観たなんと言うのかわかんないの
   携帯恋話 0:59 ﾁｸﾀｸﾁｸﾀｸに合わせてちょっと歌詞出る,1:27 背景がずれるﾓｰｼｮﾝ
   人生逆転の神業 0:49など　ｻﾞﾘｻﾞﾘと文字出す

   ずる。やりたい。

1は使いました、達成！

2は、以前の動画でいただいたアドバイスにあったことでした。改めてアドバイスの上で制作中を振り返った結果、重大な事実が発覚したのです。
ご案内の通り、イージングをつけるときに使えるグラフエディタには値グラフと速度グラフの２つがあります。名は体を表すといいますか、そのままです。

• 値グラフ：素材の座標などの数値自体のグラフを操作する
• 速度グラフ：数値の変化率(つまり速度)のグラフを操作する

私は今まで速度グラフを使ってきました、しかし、速度グラフの曲線が表すのは速度の変化だったのです。……アホか、と思われたかもしれませんが……私がつけてきたイージングの一部ではそのことが忘れられていました。見えていたグラフは数値の変化を微分したグラフであることを。
つまり、二次関数的に動かしたいのであれば速度グラフは直線となるはずなのに、ずっと曲線でイージングをつけてきた、ということです。今まである程度できてしまっていたのは、よく使う指数関数のイージングは微分しても指数関数だから、でした。
それに気づいたらイージングが飛躍的に成長、大笑いしてアドバイスに感謝していました。成長の余地あれども目標達成したと思います。

3のための工夫は頭を悩ませたなりの功を奏したのではないでしょうか。

4は、信じていただけないかもしれませんが、イラストの出ないシーンを3つ(イントロ、だだだ〜、世界は〜)作れたことは大きな成長です、許してください……。

5,6,7はやりました。達成！

動画作成編3 これからの動画の目標

動画制作が終わると次の動画制作が始まります。

これから先作る動画で何をしたいか、どこを見直すかを反省会の下目標を立てます。

• 光
• 一枚絵のみ
• アニメーション主役
• ﾓｰｼｮﾝｸﾞﾗﾌｨｯｸｽゴリ押し
• 尚もイージング
• シーン遷移
• モーションブラー
• 最背面・最前面・中間それぞれの気配り
• カメラ

光、については頂いたアドバイス、さらには元々困っていた要素です。未だダークな動画しか作っていないので明るいポップな動画作るときにでもやってみます。

モーションブラーは……これ知らなかったんですよね……今までの動画、アゲインストアゲインも含めて、使ったことがありませんでした…
今後使っていきたいと思います…教えていただきありがとうございます…

あと未だカメラレイヤーを動画制作で使っていません。後々苦労しそうですから勉強しておきたいところです。

創作編2  死の淵に立つ人のポエム

動画制作、言わずもがな苦しんでやっています。…おかしい…なぜ私は去年のボカロ企画に影響されて足を踏み外してしまったんだ…
動画に限らず何かを作るときに拘り過ぎると苦しい、という話です。

いや主に話したかったのはそこではなく、私が神動画を観て苦しんでしまう話をします。
今年のボカロ企画Go for the Futureでも、私は他のチームの動画を観ることに非常に恐怖を覚えていました。観てどうしようもない気持ちになって自身に手をつけられなくなるのが怖いのです。

理由など、言ってしまえば劣等感、嫉妬、無力感…あげればキリがありませんが、そういったものに苛まれることが怖いのです。そして特に、企画や発表会など動画が一堂に会するときに一番怖いことは「負けること」でした。

この勝ち負け、一括りに説明することが難しいのですが…
私が負けた場合：勝者(他の制作者)、
私が勝った場合：敗者なし
という勝負です。

この「負ける」という感覚、一種劣等感なのでしょう。
自分の作った動画と周りを比較して、

「この曲に動画をつけるべきは自分でなかった」

「自分の全力でもあの作品群に混ざれない」

と思ってしまう、といったところだと思います。

毎回発表会でこれやってるとキツイよね。儘ならぬものですね。

ですからボカロ企画の作品は、早稲田祭が終わるまで観ませんでした。観たら何故かみすちゃんの死体が登場することになってしまいます。困る。

アゲインストアゲインを作った後は、周りの人の制作物を観て、そういった苦しみを感じることはなくなりました。
もちろん(？)劣等感や嫉妬なんてものは無くならないもので、無事に精神的死が待ち受けています。しかしながら今までと感じ方に変化があって、動画制作の上での精神的にも成長したのかな、と思います。
死ぬ要因が１つ減りました。

Go for the Futureで私は勝ちました。
アゲインストアゲインに私が動画をつけられて本当に良かったと思います。
ありがとうございます。(墓地より)

動画作成編4 動画制作で大事そうなこと

おそらく動画制作中に私自身で気づいたであろう大事そうなことがメモられていた(ツイートされていた)ので引用してお話しします。

…ツイートでも大真面目です。

1

真理です。
妥協、ある程度のところでは必要です。楽しい創作が楽しくなくなっては本末転倒です。

あと「天才！」って自分に言ってあげられるのは主に自分です。自身を褒めながら楽しく作りましょう。

2

午前1:00に何やってるんでしょうか。

動きとは、常に何か動かすこと。
緩急は主に音ハメをして作るときに意識していることです。
こちらの動画にその緩急の大事さを思い知らされました。

そして、安心してみていられる落ち着いた場所が常にあることも一応意識しています。うまく説明できないのですが、例えば背景が激しく動くときには中心でゆったり動くオブジェを置くなどです。

最後になんだか元も子もないこと言っていますが、才能、センスは要ります。
昨日のアドカレから「簡単」という言葉を何度か繰り返してるかと思いますが、動画の体裁を整えるまでは難しくないのです。
動画制作編1にて見た通り、神動画の真似をして切り貼りしてしまえばいいからです。おそらく、挙げた動画の演出も、その動画固有のものではありません。
しかしやはり所謂神動画と私の作った動画に超えられない壁を感じるのは、それぞれの演出の使い所・使い方が違うからです。

動画制作編1で触れた、携帯恋話の背景がずれる演出を例にあげます。
あの動画と同じ動画師さんの作ったこちらの動画をご覧ください。

もう会えないと思う

いかがでしょうか。0:37〜からのサビです。やり方は変わっていないと思うのですが、演出の強烈さが全く異なります。背景にしか使っていなかった携帯恋話よりも大胆に画面全体に使われていますが、音ハメやイージングで演出が出す力を絞り、瞬間的に最大出力にしています。

こういった使い方・使い所というものは動画師自身の発想、すなわち才能やセンスに依るところが大きいと思います。
この才能が、要ります。
しかし才能は自分生誕記念ガチャ次第になってしまうため、良いものを観て学習してセンスを磨きましょう。美味しい料理を食べて、素人目には分からなかった食材の機微を学び、合わせる調味料やスパイスを考え出す能力を養う、ということです。

……頑張ります。

3 爽やかな裏切り

まだツイートしていませんでした。

爽やかな裏切りとは中学校の国語の教科書に出てきた言葉だったかと思います。

これは動画全体に言えることかと思います。

• 流動的なグラデーションの画面が突然直線的シェイプで切り取られる
• モノクロの動画が突然カラーになる
• 既出のものと同じシーンに差分が生まれる

などの裏切りがアゲインストアゲインでは実装されています。
期待していたものと違う結果がでてスカッとするような演出があると記憶に残るものになると思っています。

もちろん期待していたものが期待通りに動く時が多いからこそ、この裏切りが"""効く"""のだと思いますから、これも前述の通り使い所に気を配らねばならないでしょう。

おわりに

以上の材料で「アゲインストアゲイン」の映像は形作られていたのでした。
長旅、お疲れ様です。
何かキメて書いてるのかと思えるテンションとなりましたが、感覚を忘れたくなくてアドカレに書いてしまいました。

私は現役の活動の集大成と呼べる作品を作ってレシピは十分書き残せましたし、これでMIS.W53代ろろとしての諸々を締めてしまおうかと思います。

皆さん3年間の長らくのおつきあいに感謝いたします。大変お世話になりました。

明日のここなつさんにバトンタッチします。