こんにちは。シンディこと瀬川です。

ブログ２回目にして、早速制作のウラガワをお話しできるということで、アズマさまのプロダクト『2食おやこ電気なべ』のLP制作にあたっての擬音とアニメーションのお話をしたいと思います。

 

モノトライブではよく、擬音が飛び交うのですが、テックチームはそれをコーディングでうまいこと表現することを求められます。

そして今回のお題はコチラ！

よく見かけるけど名前は知らないこの子。

こちらをみて、皆さんどんな擬音を思い浮かべましたか？？

 

私は「キラキラ」。

こんな風に「ｷﾗｷﾗｷﾗｷﾗ~✨」をイメージしてアニメーションを付けました。

いかがでしょうか？？

連続的なキラキラを表現するために、イラストの「見せる」「見せない」を細かいスパンで繰り返すという方法を採用しました。

 

ちなみに正解は、「キラッキラッ」。

 

スタッカートが入るタイプでしたか。

ふーん。おもしれーデザイナー。

 

うそです。ごめんなさい。「キラッキラッ」ですね。

こんな感じでしょうか？？

 

さすがデザイナー。確かに、こっちのほうがかわいくてしっくりきます！

モノトライブでは「神は細部に宿る」という言葉を大事にしているのですが、この「キラキラ」に小さい「ツ」を入れるところ、デザイナーのこだわりを感じて、瀬川的鳥肌が立つ瞬間でした。

「ッ（小さいツ）」を表現するために、上記のイラストを「見せる」「見せない」の切り替えを繰り返すコードと同時に、見え始めたと同時にパンっとイラスト自体の大きさが大きくなるようにして、見えているときと見えていないときのメリハリをつけました。

 

実際に並べてみると、このような感じに変わってきます。

ちょっとのひと手間ですが、結構雰囲気が変わったの伝わりますか？？

 

というような会話と試行錯誤をして、あたたかみのある手書きのイラストと細かいアニメーションをふんだんに使って出来上がったのがこちらのサイトです。（画像クリックで詳細をご確認いただけます。）

 

そうなんです。同じイラストやパーツをみても想像する擬音や動きは、案外違いが発生するものです。そして、コーダーは、デザイナーやプランナー、お客さまのいわんとするニュアンスをうまく汲み取って表現することが求められます。

 

モノトライブ10th特設TOPページのアニメーション

モノトライブ10th特設TOPページのバナー。「ウカレテ参ります」のコンセプトに合わせて、にぎやかなイメージに仕上がっていますが、レイチェルさんを起用したこのアニメーション、

 

実際にアップされているものはコチラ。全体のカタカタ、パラパラ感に合わせて、目元のパーツにアニメーションを付けています。

 

そして、こちらがボツ案。

自社コーポレートサイトで掲載されるので、ちょっと気合が入りすぎました。ボヨンっと動く感じが“できるコーダー”っぽくて。採用はされませんでしたが、動きが面白くて結構気に入っているアニメーションです。

 

擬音やニュアンスのディテールの部分を汲み取って、一発で「こうでしょ！」って表現するの、意外に難しいですね。

デザインを忠実に再現することが求められるコーダーですが、このように微妙なニュアンスを繊細に表現したり、コンセプトに適した動きを模索したりして、サイトにちょっとの温度やリアルなリズムをのせられていたりするのかなと思っています。コーディングだからできることなんだと思っています。

なので、こうした微妙な言葉や静止画だけでは表現できない部分、こだわっていきたいですね。