WordPressサイトにパララックス効果を簡単に導入する2つの方法

「小手先のテクニック」と呼ばれることもあれば、「目を引く装飾」と言われることもありますが、Webデザインにおけるパララックス(視差)効果は、今後も確実に定着していくでしょう。サイトに「WOW!」という印象を与えてくれる要素のひとつです。この効果は登場から時間が経ち、すでに多くのサイトがデザインに取り入れていますが、それでも今なおクールな演出であることに変わりはありません。

この流れに乗って、WordPressサイトにパララックス効果を加えたいと思った方は、ぜひ最後まで読み進めてください。

パララックスとは?

用語になじみがない方のために説明すると、辞書では「パララックス(parallax、視差)」は「対象物の位置や方向が、見る位置によって異なって見えるように見える現象」と定義されています。

Webデザインの世界では、パララックスとは背景画像が前景画像より遅い速度で動くようにする手法のことです。目的は、2D環境の中に奥行きのある錯覚(疑似3D効果)を作り出すことにあります。

パララックス自体は1980年代からゲーム業界で活用されてきましたが、WebデザイナーがHTML5とCSS3を使って本格的に取り入れ始めたのは2011年頃からのことです。

方法1:パララックス対応のWordPressテーマを使う

WordPressユーザーにとって最も手軽な方法は、パララックス効果が組み込まれたテーマを採用することです。テーマを切り替えるだけで完了します。

無料・有料を問わず、パララックス対応のWPテーマは数多く存在します。GoogleやWordPress公式テーマディレクトリで検索すれば、選びきれないほどの候補が見つかるでしょう。

ここでは、リポジトリから厳選したテーマ例をいくつか紹介します。すべてのパララックス対応テーマを網羅的に比較することは不可能なため、以下は筆者の個人的な視覚的印象に基づいて選んだものです。

1. Parallax Frame

2. Marvy

3. SimpleShift

4. Eleganto

5. Integral

6. Zeal

7. Juniper

8. さらに忘れてはならないのが、WordPressの公式テーマ「Twenty Seventeen」もパララックスヘッダーに対応している点です。

これらのテーマには通常、パララックス効果用の専用エリアが1つ以上用意されており、必要な作業は背景画像をアップロードするだけです。ただし、この手軽さは裏を返せば自由度の低さでもあり、アレンジの余地は限られます。

テーマごとに操作は異なりますが、一般的には管理画面の「外観 → カスタマイズ」メニューから背景のパララックス画像を設定できます。

方法2:WordPressプラグインを使う

自分の好きな場所に効果を適用したい場合は、プラグインの利用がおすすめです。テーマほどの数はありませんが、それでも選択肢は豊富にあります。代表的なものとしては、「Parallax Scroll」「Easy WordPress Parallax Slider」「cbParallax」「ML Parallax」「MG Parallax Slider」「Easy WP Parallax Slider」「Aesop Story Engine」などが挙げられます。

これらのプラグインの多くは、ショートコードを使ってパララックス要素を作成し、投稿・固定ページやウィジェットなど、サポートされている任意の場所に挿入できます。中には、パララックスを表示したい場所に直接要素を作成できるタイプのものもあります。

たとえばParallax Scrollでは、新しい投稿を作るのと同じ感覚でパララックスを作成できます。編集画面も投稿画面とよく似ており、背景画像の追加には「アイキャッチ画像を設定」オプションを使用します。タイトルと本文の入力は任意です。

コンテンツボックスの下には細かく調整できるオプションが多数用意されていますが、こちらも必須項目ではありません。

「公開」ボタンを押すとショートコードが発行されます。このショートコードを投稿、固定ページ、ウィジェットなどの任意の場所に貼り付ければ、パララックス効果が表示されます。

注意点として、オプションでどれだけ細かく設定しても、パララックスの最終的な仕上がりは使用中のテーマに大きく左右されます。テーマがフル幅表示に対応していれば、パララックス要素は画面いっぱいの迫力で表示されます。非対応の場合は、現状を受け入れるか、CSSやJavaScriptを駆使して好みの見た目にカスタマイズする必要があります。

最後にひとつ便利なコツをご紹介しましょう。テーマとプラグインを組み合わせてはいけない、というルールはどこにもありません。複数のプラグインを併用するのも自由です。たとえば、テーマにTwenty Seventeenを採用しつつ、Aesop Story EngineとParallax Scrollをインストールして、サイトに彩りを添えるのもよいでしょう。

さあ、あとはパララックスの旅に出て、訪問者を驚かせるだけです。