懐かしのカセットテープを WebGL 作品に仕立てた ATOMIXTAPE が面白い!

doxas : 2018-01-05 14:11:34

クリスマスの楽しい雰囲気満点

今回ご紹介するのは、昨年のクリスマスに公開されたサイトになります。ちょっと紹介するのが遅くなってしまった……

こちらのサイト、今となってはもう懐かしのアイテムとなりつつあるミュージックテープ(カセットテープ)をメインテーマにしており、非常に味わい深い内容となっています。

カセットテープの特徴を見事に再現したデモになっていて、カセットテープを使ったことがある世代には、なんとも言えない懐かしい気持ちを思い起こさせてくれる、そんな作品になっています。

カセットテープの特徴を出来る限り再現

今回のサイトは、クリスマスにちなんだサイトなので、背景などはまさにクリスマスカラーという感じです。

静止画ではわかりにくいと思うのですが、背景の部分などもカーソルの動きに応じてぐいぐいと動くので、思いの外、しっかりとした立体感を感じることができると思います。

サイトを開いた直後のロードが終わると、デモをスタートする前にユーザーにクリックを促すイントロ画面が出てくるのですが、この部分からすでにカセットテープを意識した作りになっていますね。

カセットテープが巻き取られていくような変化をアイコン風のイラストで表現したローディング画面。

イントロ画面が終わり、実際にデモがスタートすると、同時に BGM が鳴り始めます。

一般的なクリスマスソングも含む様々な楽曲をこのサイトで視聴できるようになっていて、画面の下のシークバーのような部分を見れば、全体の長さや現在の再生位置などがわかるようになっています。

驚くべきことに、再生されている楽曲に合わせて、カセットテープの「テープの巻き加減」が変わるようになっていて、まるで本物のカセットテープみたいです。

面白いなこれ……

さらには、カセットテープのもうひとつの大きな特徴のひとつ、A 面と B 面を再現するところまで徹底して行われています。

デモの実行中に、カセットテープそのものをクリックするようにしてやると……

テープが一瞬で裏返ったかと思うと、B 面に変わります。

B 面には当然別の楽曲が用意されているので、一度で二度美味しい不思議な感慨が得られます。

カセットテープなんて、今の若い子たちは見たこともないんだろうな(笑)

私が高校生くらいのころは、まだカセットテープを使ったポータブルプレイヤーとかがありましたし、通学のときとかに聴いたりしてましたね……

テープが巻き取られていく様子や A 面 B 面などの裏表を活用した動作など、かなり本物志向で作られている面白い作品になっていると思います。

楽曲の再生なども、少なくとも私がこの記事を書いている段階ではかなりスムーズで、ロード時間もほとんど一瞬です。

クリスマス系のコンテンツだけに、もしかするとそのうち見られなくなってしまうかもしれませんので、気になる方は早めにチェックしてみてください。

リンク:

ATOMIXTAPE

share

follow us in feedly

search

search

monthly

sponsor

social