2022年7月10日

ロゴアニメーション作成まで(失敗を経て)

トップページのロゴのアニメーションの修正をしていたら、過去のロゴのアニメーションも出てきました。特に発表する場もないのでここでご紹介させていただきます。

現在のロゴになる前に試行錯誤の中で生まれたものです。表札とかネームプレートのイメージです。イタリック体は意識せずに踏襲していますね。まだLottieと出会っていませんのでGIFで作ろうかと思っていました(しかしおそらくLottieでも出力できそうです)。

その後ロゴが完成し、同時にLottieに興味を抱きました。

とりあえず作ってみました。TV画面のイメージで、色収差とグリッチノイズを表現しています。1コマ単位で「位置」を変えて独特のガタつきを表現しました。しかし……。

コンポジション設定を30fpsに設定していました。当然1コマは1/30秒。しかし、そもそもLottieアニメーションにフレームレートの概念は実質なく、モニターのリフレッシュレートに準拠する形でLottieも連続的にアニメーションされます。私のMacBook Proの60Hzに合わせアニメーションされることとなり、従って、あるはずのない0.5コマが生まれてしまいました(上はGIFなのでうまくいっています)。

もっと極端にわかりやすくすると、

こうなってほしいのが

こうなってしまいました。

いうまでもなくTV画面のガタつきはデジタルな動きなので、下の動きは違和感があるわけです。
じゃあ、コンポジション設定を60fpsにすればいいのか、というとモニターのリフレッシュレートには個体差があるので、根本的な解決にはなりません。停止フレームもLottie未対応です。解決策があるとすれば、ロゴを位置ごとにコピーしてそれぞれのフレームの長さを調整することで出たり消えたりさせれば解決すると思いますが、レイヤー数がものすごいことになるのでやりたくありません。そんなことを考えているうちに、ポートフォリオのデザインにもいまいち合わないし、文字が細くなるモーションが微妙だなと思うようになりやめました。どうせTV画面っぽくするならシェイプで作らず、エフェクトを使った方がかっこよくなるから、Lottieじゃない方がいいかも、とも思いましたし。

ということで、現在のロゴに至るまでにいろいろと紆余曲折ありましたという話でした。不採用になったアニメーションたち、成仏してください。