KLWPでUNIQLOCKみたいなホーム画面のための試作

ずっと前から「UNIQLOCKみたいなホーム画面、KLWPのテーマ作れないかなぁ？」と思っていました。意外と動きが複雑になりそうだなぁ、と思って今まで避けていたのですが、重い腰を上げて試作してみました。まだ細部を詰めてないのでアイデア段階ですけど。

UNIQLOCK

好きだったんですよ、UNIQLOCK。今はもうないんですけど。

UNIQLOCKというのは、ユニクロの広告、ウェブキャンペーンの1つです。軽快な音楽とともに時計が表示され、1秒毎に背景が切り替わり、5秒毎にダンス映像が流れるというもの。そのダンス映像が時を刻む音（秒針音？）と妙に合っていたりして、ずっと見続けてしまう系のものです。

ブログパーツやスクリーンセーバー、アプリにもなっていました。が、2017年1月でサービス終了してしまったのです。

YouTubeに一部残ってるのでどうぞ。

これをイメージしたものを作りたいと思ってました。まぁダンス映像は無理ですが、白と色が1秒毎に切り替わるような、そんな動きのものを。

試作その1

4つの色が上下左右から出てきて、どんどん色が変わります。5秒で1セットにしたため、最後がフェードアウトで変わるようになってます。これのせいでどうにも5秒毎に区切りが出てしまいます。

ちなみに、これらの動きは頭の中で考えるだけだとどうにも混乱するので、とりあえずどんな風になるのか紙に書き出してから作ってます。まぁそれでもだいぶ混乱するのですが。

とりあえずこの試作1がこれです。

試作その2

その1の方は記憶にあったUNIQLOCKで作ったのですが、ここで改めて上の方にあるUNICLOCKの動画を見てみました。そしたら基本的に1色で（数分ごとに変わる？）それと白とで繰り返されるものだと把握しました。で、それに合わせて作ったのがこちら。

1分ごとに色が切り替わるようにしてみました。なかなかうまく行ったのではないかと思います。これは4秒ごとにループしてます。

ただ、元のUNIQLOCKを見ると、5秒毎にダンス動画を挟みますが、その前後で色のパネルが来る方向が逆になってるんですよね。うーん…これも取り入れるべきか…？

とりあえずこの試作2がこれです。

今後の課題

これらのアニメーションはKLWPの「複雑な動き」で実現してます。ただこの動きの中では計算式など使えないので、端末幅など違うものではうまく動きません。

この辺りを改良したり、UNIQLOCKのダンス動画に変わるものもKLWP内で作ってみたりすれば、わりと良さげなものができるのではないかと思っています。試作2の方は白い部分がけっこう眩しいので、ダークテーマのときは黒系にしてもいいですね。先は長いですけど、考えるのは楽しいですね。