Alphabet animationもMまで出来上がり、折り返し地点となりました。
私こと木村はD、G、J、Mを作りました。とにかく自分にある引き出しをひっくり返しながら作ってます。
今回は個人的に一番お気に入りの「G」についてメイキング的なものを書こうかと思います。

View this post on Instagram

Alphabet Animation – G is for Giraffe #animation #Alphabet #G #Giraffe #motiongraphics #mograph #design #graphicdesign #animationdesign #dreamy #geometric #loop #adobe #AfterEffects #AE #Tokyo #Shinjuku #lipogram #アニメーション #アルファベット #キリン #モーショングラフィック #デザイン #幾何学模様 #ループ #アドビ #東京 #新宿 #リポグラム

LiPOGRAMさん(@lipogram_animation)がシェアした投稿 – 2018年 9月月14日午前4時29分PDT

・案出し
Gの担当になった私はいくつかある単語の中からGiraffeを選び、思いついた案が「網目模様の中にGがある」というものでした。
Alphabet animation の企画の性質上、Instagramのサムネイルでしっかりアルファベットが見える瞬間を作らなければなりません。
「網目模様の中にGがある」だとGを見せてからT.B→キリンと言う展開と、キリンにT.U→Gの展開が真っ先に浮かんだのですが、流石にそれでは魅せ方に捻りがないなと悩みました。（ちなみにこれはGに限らず、どのアルファベットでも悩みがちな部分です。）
T.B、T.Uに頼らず、Gを活かしてキリンをどう描くか考え抜いた結果「Gがキリンになる」という案に落ち着きました。
Gの文字が自由な形でキリンにメタモルフォーゼするというのでは正直どのアルファベットと単語でも成立してしまう構成だと思い、ここで裏テーマとしてGeometricを取り入れ「Gが幾何学的な形のキリンになる」を最終案としました。裏テーマのGeometricは単語候補の１つのだったのと、キリンの網目模様には幾何学的な理由があるのかしらと思ったからです。

・デザイン
方向性が決まったので、まずはGの形を多角形にすることを決定。次にキリンをどう幾何学的な形に落とし込むかを検討。座り姿だとシルエット的に三角形に出来そうだと思い、三角形へ変化するには六角形が都合が良いのでGを六角形にしました。
そのあとは六角形と三角形をどう変化させるかを考えつつ、三角形を理詰めで組み合わせながらデザインを進めていきます。
網目模様はGが六角形なのでハニカム構造も良かったのですが、最後のキリンの形が三角形だったので全体的な統一感で三角に。

最後に迷ったのが顔部分。最初は顔の部分に円はなかったため、顔の輪郭線が簡略化されすぎており、あまりに説明不足なデザインでした。
ここまで直線で構成していたこともあって曲線が欲しくなり、ならば輪郭線の役割も含め三角形キリンの頂点を中心に正円を描き足しました。
輪郭として必要な長さの円弧を描く手もありましたが、それでは少し自由が過ぎると思い正円にしました。おかげでアニメーションの際、締めの役割を果たしてくれたので良かったです。

・アニメーション・コンポジット
アニメーション作業については、どう変形するかを考えながらデザインを起こしていたのであまり迷いはありませんでした。
テクニック的な面で言えば、アニメーション作業はAfter Effectsにデザインを起こしたAiデータを読み込み、AE上でシェイプに変換してパスアニメーションをさせています。
幾何学に対してゆらぎのある、手描き風のルックにしたかったので、
・シェイプにパスのウィグルの追加
・タービュレントディスプレイスでエッジを毛羽立たせる
・同じ線を太さを変えたり位置を少しだけずらしたりして重ねる
などを行ないました。他にも諸々処理は加えているのですが長くなったのでそれはまたの機会に。

長々と書き連ねましたが、こうして「G」は出来上がりました。キリンはモチーフとしてとても好きなのに今まで上手く表現出来ていなかったので、こういう形で世に出せてとても嬉しいです。

これからも続きますAlphabet animation 、ぜひ最後までお楽しみ頂けますと嬉しいです。

木村