試してみよう。背景の要素を自然にぼかす「Vague.js」
Vague.jsはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。
iOS 7が登場した直後に一気に注目を集め始めたのが背景をぼかす表現ではないでしょうか。類似のライブラリは幾つかあると思いますが、今回はVague.jsを紹介します。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.26.08.1382081417.png)
一例。メインの画像以外はぼかしています。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.26.14.1382081425.png)
画像を切り替えることもできます。アルバムに良さそうです。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.26.29.1382081432.png)
こちらは中央以外がぼやけています。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.26.57.1382081437.png)
こんな感じの表現も可能です。
Vague.jsでは擬似的ではなく、Webページの上に一枚重ねてぼかし表現を加えています。そのため若干重たい気がしますが、画像だけでなくテキストもぼかされるのでより正確な表現ができるようになっています。
iOS 7のレイヤーの重なり具合を表現するUIは新鮮ですが、自然なパララックスはとても難しいです。そこに大きな需要があるのではないかと思います。JavaScript/CSS3を駆使してより滑らかなパパラックスが表現できれば、そのライブラリは必ず人気が出るでしょう。
とは言えパララックスが必要になるためにはWebサイト全体の構成も考えなければなりません。デスクトップよりもモバイルくらいの大きさの画面でこそ映える気がします。ぼかし、パララックスともにiOS 7がデザイナーに面白い問題を投げかけたと言えるでしょう。