ヨコハマとともに生きるクリエイティブ研究サイト
私事ではありますが、最近学生が作ったwebサイトの発表を見る機会がありました。やたらとパララックス効果を使用したサイトが多かったのが印象に残っているのですが、はやっているからといって、なんでもかんでもパララックスでつくればいいとは思いませんよね？ 他にもサイトのテイストに合ったものがあるはず！
ということで、今回はパララックス効果含め代表的な３つの背景効果についてご紹介いたします。
2012年頃に注目度を上げたパララックス効果。
とはいえ、パララックス効果とはどんなもの？ と思っている方もいらっしゃいると思います。分かりやすい例としては、東京スカイツリーのサイトでしょうか。
下へスクロールしていくと、キャラクターが楽しく動きながら、スカイツリーの紹介をしてくれます！
この他に気になったのは、キリンさんの【澄みきり！】サイトです。
こちらは、一歩進んだもので、gifアニメ+パララックスで、しずる感もうまく演出しているサイトですね。
パララックス効果は、下記サイトで基本的なところから説明してくれています。
いろんなパターンのパララックス効果は下記サイトで紹介しています。
blur効果は、iOS7くらいからよく目にする、背景をぼかして項目を強調させる効果です。ぼかしを使った画像の利点としては、高解像度の画像を買わなくて済む！ という所です。retina対応などを考えると、画像サイズがどんどん大きくなっていくので、ぼかし効果を使って高解像度画像購入の費用を節約できる利点もあるのではと思います。
blur効果を付けるjsはいくつかあるようですが、どんなものか試してみるのに下記のVague.jsが分かりやすいと思います。
GitHabに公開されているので、こちらのサンプルを参考にしてください。
リッチなサイトを作りたいとリクエストされた時に使えそうなのが、背景動画を使ったサイトです。いろんなプラグインやスクリプトが出ていたのですが、レスポンシブ対応で使えそうな「BigVideo.js」を紹介します。
videoタグが使えない古いブラウザも静止画が出るように設定されているようなので、便利なツールだと思います。
今回３つの背景効果を紹介しましたが、日に日にモバイルデバイスの性能が上がってきているので、表現方法の幅はどんどん増えていきます。回線速度問題もあるので、デザイン表現と容量のバランスは重要ですが、スマホサイト、タブレットサイトだからといって、コンテンツや装飾を削ってシンプルにしなければならないということはありません。
まだまだ対応ブラウザの問題などありますが、特集やレスポンシブLP、問い合わせフォームなどで、より効果を高める為に使ってみるというのも良いのではないでしょうか。
モバイルラボ 編集部
ヨコハマ・モバイルラボとは？
モバイルならではの表現ってなんだろう？
一瞬のひらめきや感動は手のひらから始まっています。
新しいクリエイティブのカタチをここから探してみましょう。 
