見出し画像

URAMABUTAコンセプトアニメーションが出来るまで

今回紹介するのは我々URAMABUTA(ウラマブタ)のコンセプトアニメーションについて。作るきっかけから完成までの紆余曲折のお話です。


はじめのきっかけはWebサイトリニューアル

2022年の春頃、来年23年は創業10年目だと気づき、良いタイミングだからWebサイトもリニューアルしようと思いつきました。

そしてその後、Webサイトの構成やコピーなどを相談する方を決めて夏頃から一緒に内容を考えていきました。Webサイトリニューアルの内容は別で記事を書こうと思うので、細かいことは端折りますが、デザインの手前でサイトの世界観を決める一枚絵が必要だよねという話になりました。

世界観を表す一枚絵を描くことに

リニューアルの方向性としてシンプルなポートフォリオサイトでなく、自分達らしい世界観のあるサイトにしようとなったので、デザインに入る前にその核となる一枚絵を描くことに。

ただ、自社サイトあるあるだと思いますが、クライアントの仕事は納期があるので仕上げられますが、いざ自社サイトとなると締め切りがないので、何を核として描けば分からずズルズルと完成が伸びる病にハマりました。。

URAMABUTAサイト用に作った初回ラフイメージ

色々迷った結果、好きなものを詰め込もうと考えたラフイラストがこちら。海の生物や宇宙など未来的な世界観は最終のビジュアルから見ても大まかにここで決まっていました。このラフ自体は迷いつつでしたが何とか描けました。

アニメーション願望がムクムクと

この世界観を軸にWebサイトのデザインも進めていこうとなりましたが、以前からオリジナルのアニメーションを作りたいという思いがボンヤリあり、ここでついでにアニメーションを作れば良いのでは!と安易に思いついてしまいました。。

Webサイトだけでなく、映像にすることでより深くURAMABUTAのイメージを伝えれるのではと思い、アニメーション制作に踏み切りました。キャラクターが動き出す様子を想像するだけで、ワクワクしました。

ただ、最終完成まで2年かかる長い道のりになるとはこの時は夢にも思わず・・・

絵コンテ制作からの迷走

ここからはこの一枚絵のブラッシュアップと同時にどのようなアニメーションにするかの絵コンテ制作が始まりました。

初めの動画コンテ短め

初めの絵コンテというか動画コンテはこちら。一枚絵を元に制作。はじめなので、ぼんやりとしたイメージで一旦作ってみました。

初めの動画コンテに何シーンか追加

さらに肉付けをしようということで、絵コンテにいくつかシーンを追加していきました。ただ、目的なく作っているので、何が正解か分からず迷走しておりました。自社コンテンツって本当に自由度があり過ぎて難しい。。

世界観完成からの絵コンテ詰め

(左)前回のイラストからさらに描き込み、(右)そこからさらにテクスチャ追加

同時に一枚絵もブラッシュアップして、世界観をさらに詰めていきました。ただ、グラデーションや影などニュアンスをつけることでとんでもなく着色に手間取り、日々憂鬱さが半端なかったです。一つ一つこだわって考えたので、要素決めも着色もなかなか進まず凄いジレンマでした。

完成イラスト!(レイヤー数がエゲつない)

そんな憂鬱な日々を過ごしましたが、何とか完成!このイラストを核にすることで、詳細な絵コンテを描くことが出来ました。海の生物や、植物のような建物、アイデアのカケラを生成・循環させる妖精のようなキャラクターなど不思議な要素を随所に詰め込みました!(一旦ここで燃え尽きました。。)

また、ジブリの宮崎監督がよく街全体のイラストを描いてからアニメの世界を構築している意味が今更ながら理解出来ました。。この街のどこで何が起こっていて、どのシーンを切り取るのかを考えるベースとなりました。

完成形に近い絵コンテ

世界観をしっかり作り込んだ一枚が出来たので、その街のどこで何が起こっているかイメージしやすく、絵コンテのブラッシュアップに役立ちました。完成系とほぼ同じ内容まで詰めていけました。

絵コンテを繋ぎ合わせ

全体の絵を繋いだのがこちら。ようやくアニメーションの全体像が決まってきました。

このアニメーションが動くことを考えるとワクワクしましたが、ここから各シーン清書することを思うと絶望。。結局ここに来るまで仕事もガッツリしながら合間合間で作っていたので、半年以上かかっていたのでは。。

各シーンの色付けが完了

そして、ここから各シーンの清書を仕事の合間にコツコツと進めていきました。

一部抜粋:(左)ラフイメージ、(右)完成イメージ

結局10数シーンの着色をしたので、色塗りだけでもさらに1,2ヶ月かけてしまったのでは、、と思います。(もはや覚えていない)

各シーンを繋ぎ合わせたカラー動画コンテ

動画イメージが完成したので、ようやく正式に音楽と映像を依頼する段階になりました。結局、本制作の依頼するまでに1年近くかかってしまいました。
お声掛け自体は、結構前からしていたので申し訳なかったです。。

音楽から先行して依頼


映像の方もアサインしていましたが、お忙しいタイミングだったので、先に音楽からお願いすることになりました。形としては音楽を先行して制作、それを聴いてイメージ膨らませて頂き映像に反映。さらにその映像を見て音楽をブラッシュアップと、音楽⇔映像を行き来しながら作るというお手間を取らせつつ、やっていこうという流れになりました。

そして肝心の音楽制作は「スキャット後藤」さんに依頼!
以前何度か頼んでおり、「フワッペン」や「FUKUI POP」などCUTEでPOPな音楽を得意とされているので、今回のアニメーションにもマッチすると思い依頼させて頂きました。

動画コンテを見て頂き、POPで少し不思議な感じでというざっくりオーダーでしたが、、毎回バシッと一撃で決めて頂けるので安心感が凄いです。是非、完成した音楽もじっくり聴いてみてください!

映像作家さんにも依頼

そして、映像制作は「Hiromu Oka」さんに依頼!
以前からXをフォローしていて報道ステーション」「36 Days of Type 2021」などを始め、どの作品もかわいく、モーションセンス抜群!!と思って見ていたので、いつかお仕事頼みたいなと思っておりました。ダメ元で依頼しましたが、快諾頂き本作品バッチリ仕上げて頂きました。

アニメーション制作ようやくスタート!

何度もアニメーション細かく提出頂きましたが、要所要所だけ掲載。

はじめに動画コンテを元に作って頂いたのがこちら。オープニングのURAMAUTAの「U」の動きがニョン!となっててかわいいですね。全体の動きをざっと入れて頂きました。先行して作っていた音楽も入れて頂いたので、完成イメージがグッと近づきました。

映像・音楽ともに全体像が見えたので、それぞれがブラッシュアップ作業へ。

※ちなみにこの後くらいに「シナぷしゅ」のアニメーション案件が来て、そちらもOkaさんに依頼したので、さらにURAMABUTAの映像が後回しにと…なかなかお仕事しながら自社案件は辛い…

追加でイラスト作成&作画

映像のモーションはOkaさんにお任せして、残る作業といえば主にキャラクターの作画作業でした。しかし、まともに作画をしたことがなかったので、この作業とても大変でした。。結果、Okaさんに上手いこと作画の下手さを誤魔化して頂いた形で乗り切ったかなと。(※今度アニメーション作る時はアニメーターさんに作画お願いしたい、、アニメーターさんお友達になってください

オープニングの作画ラフ(凄く下手…)
星々を横切るシーンも

何ヶ所かキャラクター作画をして映像に一旦埋め込んでもらったのが下記になります。(※滑らかなアニメーションってどうやって作るのですか?)

そして作画したのを着色

作画が終わり、着色作業へ。ここでも、影をつけたり、模様をつけたことを大後悔!塗るのが大変すぎる。。だからアニメーションのキャラクターって色数抑えてるんですよね。そりゃ、いちいち細かいニュアンスの色付けしてたら終わらないですよね。と思いつつ、自主アニメだから普通しないことをしようと割り切って一枚一枚ニュアンスつけて塗り切りました。(※ここまでで何度も燃え尽きているので、単なる色塗りも手が重くなかなか進みませんでした 涙)


そして、ここからは映像制作目線でOkaさんに「こだわりや大変だった点」をまとめて頂きましたので、別視点でお楽しみください!

アニメーションのこだわりや大変だった点

【こだわり01】「モーションの都合を考えないでイラストを描いてほしい」

僕は基本的にイラストレーターさんと仕事する際には上記のように伝えています。
それは例えば、キャラを最終的にたくさん動かすから作業を軽くするために色数やテクスチャは減らして欲しいとか、このシーンは数秒しか映らないからそこまで描き込まなくていい、という提案をしないことです。
もちろんスケジュールや予算によってはその辺の骨抜きは打診しますが。
そうして仕上がった純度100%の引野さんイラストに対して、僕がさらにモーションで掛け算をしてクオリティを高めていく流れです。
餅は餅屋にと言うように、引野さんにはイラスト、自分は映像とそれぞれの得意分野にフルパワーで臨めるよう段取りました。

【こだわり02】 一枚絵をベースにどれだけリッチに動かせるか

引野さんが事前に各シーンの一枚絵を用意してくれていたので、映像ではそれらをベースに動かしていきました。冒頭のワープシーンのように原画にはないシーン等は僕の方で新規に制作しています。
もらった一枚絵をそのままのスケール感で動かさず、かといって自由演技をしすぎて引野さんのコンテから離れないように、という塩梅で立体的なカメラワークや世界観を演出する補助的なグラフィック(おかず)やモーションを追加していきました。

また、途中で引野さんと一緒に「シナぷしゅ」をやっていた流れもあり同様のテクスチャを適用しました。昔自作したプリセットで、こちらをうらまぶたでも使用したいと申し出てくれたのは嬉しかったです。引野さんのアナログの優しい質感を引き立てるビジュアルになったと思っています。

テクスチャあり・なし 比較

ちなみにAfter Effects上で動かすPhotoshopデータ制作を引野さんに依頼する際には金子開発さんの記事をシェアさせていただきました。

MV用と書いてありますが、フォトショで制作するイラストであればどんなジャンルでもこの仕様で制作すれば基本問題ないという内容です。毎回自分で説明していたのですが、こちらの記事を見つけてからは説明がスムーズになりとても助かっています。「隠れているところも塗りたしを」と痒いところに手が届いた説明もナイスです。

【こだわり03】 引野さんにアニメーションを依頼

僕も手描きのアニメーションスキルがあったら良かったのですが、残念ながら僕は全然絵が描けません。僕もこういう時に頼れるアニメーターの友達欲しい。とはいえ、せっかくなので原画も描いている引野さんに作画を依頼しました。
これまでの仕事でアニメーションデータのコンポジットには慣れているのですが、ディレクション的なことはあまり経験がなく、、、
というわけでCinema 4Dという3Dソフトで作画のガイドを制作しました。

3Dソフトで作画ガイド

その後、上がってきたアニメーションの静止画数枚(連番データ)をAfter Effectsに読み込み、、、

作画ガイドを元にイラスト作成

タイムリマップという任意のタイミングで早送りやスローにできる機能で絵の切り替わりのタイミングを調整したり、パペットツールというエフェクトで手足に微妙な動きを加えたりするなど、引野さんの原画がより滑らかに動くように調整しました。

細かい調整してアニメーション完成

他にも実際に棒人形をシーンに配置して「このシルエットでこの枚数描いてください」というガイドも制作しました。このガイドでは中割り(前の原画と次の原画の間をスムーズに繋ぐ絵)を9枚お願いしました。
極力お互いの出し戻しの手間が省けるよう、シルエットやサイズ感は「この棒人形をそのままトレースしてもらったら大丈夫です」というガイドを制作しました。

こちらも3Dソフトで作画ガイド

そうして仕上がったデータを配置すると

作画ガイドを元にイラストを入れて調整

自分で作画をコントロールできるのは引野さんにとっても(予算的にも)良いクリエイティブに繋がるのではと思い相談しましたが、実際に良い仕上がりになったので満足しています。
引野さんもコメントしている通り慣れない作業で大変だったかと思いますが、僕もこの経験によってイラストレーターの方が新規でアニメーションを制作する際にどのようにコミュニケーションとればよいか勉強になりました。
プロジェクトの中で慣れないことにチャレンジして上手く対応できたという経験は仕事の満足度にも繋がるので、この部分もこだわれて良かったポイントです。

【こだわり04】 良いなと思ったことはすぐ伝える

制作者でありクライアントでもある引野さんだからこそ気軽に伝えられる関係だと思いますが、共有されたデータを見た時にポジティブに感じたことは積極的にコメントしました。
メインビジュアルの街のレイヤー数を見た時、圧倒的なレイヤー数からとんでもない手数を想像して同じクリエイターとしてリスペクトしたことを覚えています、、、これもすぐ伝えました笑

LINEのやりとり

引野さんもよく好意的なコメントを残してくださり励みになりました。
そういったお互いのマインドセットが相乗効果を生み出し、より魅力的な演出のひらめきにつながったかと思います。普段の仕事もこうやって本人と話せたらいいなぁ、、、

【大変ポイント01】 レンダリングが超重い

引野さんイラストの圧倒的なレイヤー数とカンバスサイズ(全カット5000px以上)、After Effects上でのテクスチャ適用なども合わさり、プリレンダ素材(書き出し時間短縮のために特定のカットを先に書き出して動作を軽くした素材)を挟んでも約1分の動画を書き出すのに数時間はかかっていました。

After Effectsの編集画面

プレビューも最高画質で見れないくらい重いので、これが後述の間違い探しの難易度をあげる結果に、、、
可能な限りレイヤーも一体化させていたのですが、すぐに修正対応できる組み方にしていたのと、動かせるものは可能な限り全部動かすスタイルをとっていたので、逆に何でもかんでもレイヤーを一体化しすぎるとその都度中身を開くことになり作業が煩雑なって苦労したポイントです。

【大変ポイント02】 納品間際は間違い探しで大変

基本的に数百のレイヤーを一つのシーンで扱っているので、うっかり間違えて一つのレイヤーを消してしまったりするとなかなか気づかないことがありました。そんな時に限ってうっかり消してしまったレイヤーが画面の隅っこにいる小さなキャラのレイヤーで再確認しても全然消したことに気付けなかったり。
また、大事な動きをつけた親子関係を持ったヌルレイヤーをうっかり消してしまった時も大変でした。動作が重いのでキャッシュもまめに消してたせいで⌘Zも機能せず数時間前のAEデータを掘り返す作業が何回かありました。(AE勢に伝われ)
その工程を経て映像を書き出してみても数ピクセル塗り足しが必要な場所見つけてしまい、また数時間レンダリングし直すなど、、、
一度見つけたミスは必ず直さないとデジタルタトゥーみたいになるので
気づけて良かった反面、またレンダリングだ、、、 となってしまう結構大変な作業でもありました。

軽微な塗り足し作業はこちらで対応

このような軽微な塗り足し作業は基本的に僕の方で対応していました。
わざわざ引野さんに戻すのは手間だったのと、そういったチェックとリカバリーも僕の仕事のうちだったので都度対応していました。
これは他の案件でもよくあることで、引野さんを批難してるわけではありませんので悪しからず!昔、職場の先輩に「モーションのセンスも大事だけど、それ以上に間違ってる部分に気付けるネガティブチェックのセンスの方が大事だよ」と言われたのを今回の案件をやりながら思い出したので、改めてトピックとして取り上げました。
(この記事を書いている時もミスを見つけてしまい、再書き出しをしていました汗)

【大変ポイント03】 2年というスケジュール

引野さんも触れていた通り、2022年の春ごろに始まりついに2024年末に映像が完成しました。

自主制作って無限にブラッシュアップできるのでスケジュール管理難しいですよね、、、
僕は引野さんの描き込み具合など言葉ではなく手垢をみて全面的に信頼していたので、原画のブラッシュアップ、キャラ作画の追加などによるスケジュールの延長は大歓迎でした。
とはいえ途中で一緒にシナぷしゅを制作したり、その後に僕の個展の制作が始まり数ヶ月触れない時期が続きました、、、その節は融通きかせていただき感謝です。
また僕に限らず音楽やwebなど他メンバーとの進行も引野さんは調整していて、その中で他案件の制作も進めていたのでもう本当にお疲れ様ですという感じです笑
完成して良かった!

ここまでが映像担当してくれたOkaさんのまとめです。いつもさらりと苦労されている感じなく提出されていたので、そんなに大変じゃないのかなと思っていましたが、ちゃんと大変だったようで、、色々とお手間かけさせておりました。。


ブラッシュアップからの完成!

そんなこんなで大変な思いをしつつ、何度も細かいブラッシュアップを経て、完成したURAMABUTAのコンセプトアニメーションがこちら!

オープニングのモーションと音がマッチしてて最高!
全てのシーンに好きを詰め込んだ作品になっております。夢のカケラをもったヘンテコな生き物や植物のような建物、エネルギーを循環させる装置っぽいものなど入れており、隅々までこれは何だろう?と見ていただければと。URAMABUTA(裏瞼)の世界を覗き込んでみてください!!

この場を借りて改めて音楽のスキャット後藤さん、映像のHiromu Okaさんありがとうございました!感謝感謝すぎます!!

また、進めては仕事の都合で止まりと何度も頓挫しそうになりましたが、何とか2年くらいかけて完成に至りました。これを作る過程で他のキャラクターとかも作ったものの、詰め込めなかったものがあります。せっかく作った世界なので、さらにこの世界を広げてもう少し長いお話や絵本など色々と展開出来たら嬉しいなと思っていますので、何かご一緒出来る方いらっしゃればお声掛けくださいませ!

まだまだ続くよ、Web制作は…

しかし、映像の完成は、Webサイトリニューアルの一部に過ぎないという(この事実にまたも心折れそう)。。ここから、映像を活用しつつ、Webサイトを作っていきます。デザインは概ね出来つつあり、実装を2月くらいからスタートする予定です。(依頼しているエンジニアさんも売れっ子すぎて、スケジュール押さえるのが難しい。。)

Webサイトリニューアル プロジェクトは22年の夏頃からスタートし、10周年の23年の4月くらいに完成を目指していましたが頓挫。そこからずっと停滞しつつも少しずつ進んでいるので、25年こそは完成させます!ぜひどんなサイトが出来るか楽しみにしていてください!
長丁場過ぎて心折れそうですが、今年こそは!

この記事や映像を宣伝して頂けるととても喜びますので、気に入った方はぜひよろしくお願いします!!


そんなURAMABUTAの自己紹介ページはこちら。イラストレーションをメインに二人で制作しておりますので、良ければこちらもご覧下さいませ!



いいなと思ったら応援しよう!

URAMABUTA|Illustrator
ありがとうございます。いただいたサポートはイラストの勉強に使わせていただきます。♡やシェアでの応援も嬉しいです!