猫さんが伸びたり太ったり。超レスポンシブなWeb作品がスゴかわいい!

「Caaaaat」というWeb作品を見つけたのでご紹介。サイトを開くとノリノリで音楽を聴く猫さんのキャラクターが現れます。そしてブラウザの大きさを変えるとそれに合わせて猫さんが、とっても気持ちの良い動きをしてくれるんです。

ウィンドウに合わせてアニメーション

最初はブラウザのウィンドウサイズいっぱいに一生懸命伸びてます。ノリノリで音楽を聴いて楽しそう。

ブラウザサイズいっぱいに伸びる猫さん

そこでウィンドウを小さくしていくと、それに合わせて猫さんが太ります。「CAT」の文字も「FAT」に。

ブラウザを小さくすると太る猫さん

今度はまたウィンドウを広げて行くとまた伸びます。ん?背中に花が咲いた!首もぶんぶん振って猫さんテンションアップ!

またウィンドウを広げると伸びつつテンションが上がる猫さん

そのままさらに広げるとボヨーンと戻る!なんか顔でかくなってない?

ボヨーン!と戻って顔が大きくなる猫さん

という作品でした。ウィンドウに合わせてアニメーションが変化するっていうのはすごいなあ。そしてなにより、動きが気持ちいい!ちなみにサイト左上の「change view」をクリックで猫さんがどうやって作られているのかの構造が表示されます。

これを作ったのってどんな人?

作ったのは、ウェブデザイナーでアーティストの城戸雅行さん。国内外で数々の広告賞を獲っているすごい人です。roxikというサイトで他の作品も見れるのでおもしろいなと思ったらそちらもどうぞ。

城戸雅行さん

紹介作品:
Caaaaaaaaaat

…というわけで今回は、roxikの「Caaaaat」という作品の紹介でした。パっと見かわいいキャラクターなのに、裏にはすごい技術が隠されてます。見ている人はそれを感じる必要なく、単純に気持ち良い!と思えるのもスゴイなーと思いました。