Design デザイン・UI

 
レスポンシブデザイン・UI

【厳選】サイトをリッチに見せる背景効果3選

pixta_3485132_S
私事ではありますが、最近学生が作ったwebサイトの発表を見る機会がありました。やたらとパララックス効果を使用したサイトが多かったのが印象に残っているのですが、はやっているからといって、なんでもかんでもパララックスでつくればいいとは思いませんよね? 他にもサイトのテイストに合ったものがあるはず!

ということで、今回はパララックス効果含め代表的な3つの背景効果についてご紹介いたします。

一番のはやりはコレ:パララックス効果

2012年頃に注目度を上げたパララックス効果。
とはいえ、パララックス効果とはどんなもの? と思っている方もいらっしゃいると思います。分かりやすい例としては、東京スカイツリーのサイトでしょうか。

スカイツリー

東京スカイツリー TOKYO SKYTREE

下へスクロールしていくと、キャラクターが楽しく動きながら、スカイツリーの紹介をしてくれます!

この他に気になったのは、キリンさんの【澄みきり!】サイトです。

澄みきり

キリン 澄みきり

こちらは、一歩進んだもので、gifアニメ+パララックスで、しずる感もうまく演出しているサイトですね。
パララックス効果は、下記サイトで基本的なところから説明してくれています。

@IT – パララックスエフェクトの基本 (1/4)

いろんなパターンのパララックス効果は下記サイトで紹介しています。

skuare.net – パララックスサイトを簡単に作成できるjQueryプラグイン8選

iOSでは当たり前:blur効果

blur効果は、iOS7くらいからよく目にする、背景をぼかして項目を強調させる効果です。ぼかしを使った画像の利点としては、高解像度の画像を買わなくて済む! という所です。retina対応などを考えると、画像サイズがどんどん大きくなっていくので、ぼかし効果を使って高解像度画像購入の費用を節約できる利点もあるのではと思います。

blur効果を付けるjsはいくつかあるようですが、どんなものか試してみるのに下記のVague.jsが分かりやすいと思います。
GitHabに公開されているので、こちらのサンプルを参考にしてください。

Vague

Vague.js

リッチサイトに効果的:背景動画

リッチなサイトを作りたいとリクエストされた時に使えそうなのが、背景動画を使ったサイトです。いろんなプラグインやスクリプトが出ていたのですが、レスポンシブ対応で使えそうな「BigVideo.js」を紹介します。
videoタグが使えない古いブラウザも静止画が出るように設定されているようなので、便利なツールだと思います。

bigvideo

BigVideo.js

まとめ:スマホだからとシンプルにしすぎなくてもいい!

今回3つの背景効果を紹介しましたが、日に日にモバイルデバイスの性能が上がってきているので、表現方法の幅はどんどん増えていきます。回線速度問題もあるので、デザイン表現と容量のバランスは重要ですが、スマホサイト、タブレットサイトだからといって、コンテンツや装飾を削ってシンプルにしなければならないということはありません。
まだまだ対応ブラウザの問題などありますが、特集やレスポンシブLP、問い合わせフォームなどで、より効果を高める為に使ってみるというのも良いのではないでしょうか。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事