OREFOLDER

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

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

  • 本記事は広告およびアフィリエイトプログラムによる収益を得ています。

UNIQLOCK

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

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

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

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

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

試作その1

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

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

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

uniqlock_b1.klwp
制作:orefolder
価格:無料

ダウンロード

試作その2

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

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

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

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

uniqlock_b2.klwp
制作:orefolder
価格:無料

ダウンロード

今後の課題

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

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

モバイルバージョンを終了