digital hollywood Studio

【厳選】スクロールでサイトに奥行きを見せる背景効果「パララックス効果」って何だ?

  • デザイン

2021年2月13日更新

2010年代の始め頃から、あちこちのサイトでよく見かけるようになったWebデザインの手法「パララックス効果」。直訳すると「視差効果」で、スクロールやスワイプ等の動作に応じて、ウェブサイトの要素が異なるスピードで動き、サイトに奥行きを演出するものです。

今では、「パパラックス効果」という名前は知らなくても、パララックス効果を使ったサイトを見たことない人はいないほど、Webデザインの定番の演出になっています。

ということで、今回はユーザーのスクロールやスワイプ等の操作に対応して独特な動きを見せるパララックス効果と、その演出を使った代表的サイト、そして今や定番になったその他の背景効果2つをご紹介いたします。

今も大御所はやはりコレ:パララックス効果

ポルシェ

ドイツの自動車メーカー、ポルシェのサイトです。スクロールに応じて年代ごとの車のデザインが変化していき、音楽も伴って独特のお洒落な雰囲気を演出しています。車の位置はそのままで上塗りするように車が変化していくので、時間が経っても変わらないポルシェテイストがより鮮明に。

神椿市建設中

架空の都市「神椿市」を舞台とするアフターコロナ時代の新しい遊びを生み出すプロジェクト。パララックス効果による不規則な動きと画面を走るノイズで不可思議な世界観を演出しています。

Render

映像制作などを請け負うクリエイティブスタジオのホームページ。線や文字を使ったモーショングラフィックスが美しく、マウスを動かすことで変化が生まれる遊び心が楽しいサイト。

The Deep Sea

海の深さと生き物の生息域を表示するだけのシンプルなサイト。しかしスクロールやスワイプで深海の奥深くまで潜っていくデザインにワクワク!

ぼかして便利、blur効果

パララックス効果と並び、大流行した画像効果に、「blur(ブラー)効果」があります。iOS7くらいからよく目にするようになり、背景をぼかして項目を強調させる効果です。画像がどんどん大きくなるなかで、高解像度の画像を買わなくて済むので節約になる! という利点もありました。

ちなみにblur効果を付けるJava Scriptとして定番だったVague.jsは、現在も稼働中です。

http://johnpolacek.github.io/BigVideo.js/

リッチな演出も今や定番に:背景動画

かつては「リッチなサイトを作りたい」とリクエストされた時に使ったのが、背景動画です。現在はツールも通信環境も格段に進化。Webデザイナーの強い味方だった背景動画のためのjQueryプラグイン「BigVideo.js」も健在です。

http://johnpolacek.github.io/BigVideo.js/

まとめ:簡単に使えるようになった今でも、見づらくなるほど使いすぎるのは禁物

以上、古くから人気の3つの老舗背景効果を紹介しました。最近のウェブサイトにも、多く見られるデザインです。視覚的に楽しいサイトは人の印象にも残りやすいので、あらためてチェックして、使ってみるのがおすすめ。ただし、スマホの性能や通信環境が進化した今であっても、過剰に使うと見づらくなってしまうことも。文字だけではない、だからといって動画だけでない情報を手軽にみられるWebサイトのせっかくのメリットを損なわないためにも、使いすぎは禁物です。

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

※2014年の記事を、2021年2月10日、訂正、加筆しました

WEB制作 カテゴリーに含まれる最新記事

スクール説明会予約
ページトップへ