視差効果とは何ですか? WordPress での使用方法

視差効果は、WordPress Web サイトでよく使用される非常に人気のあるデザイン機能です。この特殊効果は何年にもわたってゲームの世界で注目されてきましたが、最近では Web デザインにも取り入れられています。そして今のところ、この大きなトレンドはどこへも進んでいないようで、むしろ、これまでよりも広く使用されています。では、視差効果とは何ですか?なぜWordPress Webサイトで視差効果の使用を検討する必要があるのでしょうか?

この記事では、視差効果とは何か、また視差効果がサイトやビジネスにもたらすメリットについて考えます。次に、テーマやプラグインを使用して、WordPress の Web サイト、ページ、投稿に視差効果をすばやく簡単に追加する方法について説明します。

視差効果とは何ですか?

視差効果には、Web ページの背景が前景よりも遅い速度で移動することが関係します。これにより、ページに奥行きがあるような錯覚が生まれ、閲覧者が下にスクロールするとコンテンツに 3D 効果が与えられます。

プレミアム WordPress テーマの大部分には、ホームページに視差効果が組み込まれています。無料のWordPressデフォルトテーマTwenty Seventeenにも視差機能が搭載されています。ほとんどのページビルダーには視差効果ツールも組み込まれており、Web サイト上の任意のページや投稿に効果を追加できます。そしてもちろん、Web サイトに視差効果要素を追加するためにインストールできる WordPress プラグインが多数あります。

視差効果を使用する利点は何ですか?

WordPress Web サイトで視差効果を使用すると、多くの利点があります。 1 つ目は最も明白ですが、視差効果の視覚的な側面です。視差効果は見た目にも美しいため、ウェブサイトに新鮮でスタイリッシュでモダンな外観と雰囲気を与えます。このすごい効果により、コンテンツが非常に目立つようになり、エキサイティングで興味深いブラウザエクスペリエンスが生まれます。

サイトで視差効果を使用するもう 1 つの主な理由は、特にホームページなどのページを読みやすいチャンクに分割することです。この効果を使用して、紹介したいコンテンツのさまざまなセクションやタイプを強調します。これは、Web サイトのさまざまな側面を宣伝し、重要な情報を明らかにし、ユーザーが選択した方法でサイトに移動してコンテンツにアクセスすることを奨励するのに役立ちます。

視差効果は Web サイトのどのページや投稿でも使用できますが、最もよく見られるのはホームページ、ランディングページ、または 1 ページサイトです。パララックスが生み出す見事なビジュアルと、パララックスがユーザーエクスペリエンスに与えるプラスの効果により、訪問者のサイト滞在時間が長くなり、サイトのコンバージョン率目標の向上につながります。

視差を使用する場合の考慮事項

利点もありますが、Web サイトに視差セクションを追加する際に留意すべき重要な点がいくつかあります。

背景画像の選択

各背景セクションに使用する画像について慎重に検討してください。それらがサイトに関連しており、ブランドと同期していることを確認してください。この背景画像の上にヘッダーやその他のコンテンツを表示する場合は、写真や注目を集めるグラフィックの代わりにブロックカラーや微妙なパターンを使用することを検討してください。これにより、画像がコンテンツの邪魔をするのではなく、確実にコンテンツと連動し、宣伝することができます。

写真を使用する場合は、高品質の画像を使用する必要があります。目を引く美しい画像は、サイトにプロフェッショナルでユニークな外観を与えるのに役立ちます。これらのビジュアルは視聴者に強い印象を与え、その結果、人々があなたのサイトを思い出して再訪問するようになります。最高品質の画像をダウンロードできるストック Web サイトが豊富にあります。無料およびプレミアムのストックフォト Web サイトのコレクションをチェックして、視差の背景に最適な素晴らしい写真をすぐに見つけてください。

モバイルでの視差

視差は視覚的な面白さを加えるのに最適ですが、モバイルデバイスでは常にうまく機能するとは限りません。通常、携帯電話やタブレットでは (デスクトップのようなスクロールではなく) スワイプナビゲーションが使用されるため、視差効果が正しくレンダリングされない可能性があります。もちろん、これは独自の視差セクションに使用する方法とアニメーションによって異なります。ただし、使いやすさを考慮して、デバイスの視差を無効にすることを検討することをお勧めします。

視差とアクセシビリティ

モバイルでのユーザビリティの低下に加えて、パララックスはアクセシビリティの問題を引き起こす可能性もあります。視差は動きに基づいているため、読みにくくなる可能性があり、ブラウザまたはデバイスの互換性の問題が発生する可能性があります (前述したように、特にモバイルで)。さらに、レイヤーが移動するとコントラストの問題が発生し、可読性がさらに複雑になる可能性があります。これらの理由から、Web サイト上で視差セクションを作成する際には細心の注意を払う必要があります。

視差効果のあるテーマを選択する

新しいプロジェクトを始める場合は、視差効果機能を含むプレミアムテーマを選択する必要があります。また、ホームページだけでなく、Web サイトのさまざまなページで視差効果を使用したい場合は、高度なページビルダーに付属する多目的テーマを検討することをお勧めします。

Elegant Themes の Divi、Themify の Parallax、および当社独自の Total MultiPurpose WordPress テーマなどのテーマには、視差効果ツールを提供するページビルダーがすべて含まれています。

合計で視差背景を追加

視差がテーマでどのように機能するかを理解するために、Total テーマの行に視差背景を追加する方法のガイドを以下に示します。 Total はフロントエンドページの構築に WPBakery を使用していますが、他の多くの WordPress ページビルダーには同様のオプションが含まれています。

まず、行を挿入し、そこにコンテンツを追加する必要があります。次に、鉛筆アイコンをクリックして行を編集します。上記で作成したデザインはボックス化されておらず、サイドバーも含まれていないため、視差背景が行を完全に埋めるために「行を伸ばす」オプションを選択しました (注 – 合計には、有効にできる全画面オプションも含まれています)行と視差の背景がブラウザウィンドウを完全に埋める必要があります)。

次に、[視差] セクションで、背景画像を簡単に追加し、視差効果のスクロール速度を設定できます (数値が大きいほど、画像の移動量が多くなり、大きな画像が必要になる場合があります)。

Total は、モバイルでの効果の有効化/無効化、画像スタイル (カバー、固定、または繰り返し) の選択、効果の方向、そしてもちろん速度の定義に関する詳細な設定を備えた高度な視差オプションも提供しています。

1 つ上のタブのオーバーレイ設定を使用して、行の背景とコンテンツの間に十分なコントラストがあることを確認することもできます (画像に白いオーバーレイを追加しました)。完了したら、行の変更とページを必ず保存してください。

スライダー革命で視差スライダーを追加

視差効果を備えた注目のスライダーが必要な場合、一番のおすすめは Slider Revolution プラグインです。このプレミアムプラグインには、フォント、レイヤー、スライダー効果、レイアウト、そしてもちろん視差に関する何百もの組み込みオプションと機能が含まれています。

スライダー回転視差を有効にする

まずプラグインをインストールし、次にスライダーテンプレートをインポートするか、独自のスライダーを最初から構築し始めます (詳細については、完全な Slider Revolution ガイドをお読みください)。

次に、スライドのメイン背景を編集してソース背景画像を追加し、視差/3Dタブを選択して視差レベルを割り当てます。次に、レイヤーを追加するときに、視差深さの視差/3Dレイヤーオプションを選択して、テキスト、画像、ボタン、その他のレイヤーに動きを追加します。とても簡単です！

完了したら、スライダーを保存し、ショートコードを使用して投稿またはページに挿入します。または、WPBakery (旧名 Visual Composer) などのページビルダーを使用している場合は、ページビルダーの Slider Revolution 要素を使用して、スライダーをすばやく選択して挿入できます。

無料の高度な WordPress 背景プラグインを使用して視差セクションを追加する

すでにテーマがあり、組み込みの視差効果オプションが含まれていない場合は、WordPress プラグインを使用してその作業を行うことを検討する必要があります。 Advanced WordPress Backgrounds (略して AWB) は、Web サイトのページまたは投稿上のさまざまな要素に視差スクロール背景画像を追加できるようにする人気の無料オプションです。単純なショートコードを使用して、単一の要素、ヘッダーテキスト、またはコンテンツを含むセクション全体にスクロール背景を追加します。

それでは、視差のある高度な WordPress 背景をインストールして使用を開始する方法を見てみましょう。

AWBのインストール

プラグインをインストールするには、WordPress ダッシュボードに管理者としてログインし、メニューからプラグイン > 新規追加を選択します。

高度な WordPress 背景を検索し、[今すぐインストール] > [アクティブ化]を選択します。

AWB を使用して視差背景を追加する方法は、使用している WordPress エディター (Gutenberg、Classic、または WPBakery などのサードパーティのページビルダー) によって異なります。どちらを使用する場合でも、AWB には次のような簡単なオプションが数多く用意されています。

カラー、画像、またはビデオのメディア背景
メディア表示サイズ (表紙、中身、またはパターン)
背景メディアの位置。背景を揃えるパーセンテージ付き (例: 50% 50% 中央)
オーバーレイカラーピッカー。アルファセレクターを使用して色を多かれ少なかれ透明にします。
視差スクロール、スケール、不透明度を速度とモバイルで有効にするオプションを備えています
マウス視差（マウスオーバーの動きに応じて背景がわずかに移動します）

さらに、WordPress 設定メニューに AWB タブも追加されています。ここで、モバイルおよび特定のブラウザーの視差効果 (およびビデオ) を無効にするグローバル表示設定を選択できます。

AWB グーテンベルク

高度な WordPress 背景は Gutenberg と完全に互換性があり、使用できる独自のカスタムブロックも含まれています。

まず、AWB ブロックを挿入する必要があります。次に、クリックして AWB 内のコンテンツの他のブロックを追加します。

完了したら、AWB ブロックをクリックし、右側のメニューの「ブロック」タブをクリックします。ここで、ブロックの背景オプションを追加および編集できます。

AWBクラシックエディター

クラシックエディターでは、AWB はショートコードを使用して視差背景を追加します。したがって、まずコンテンツを作成してから、背景を付けたいセクションをハイライト表示して、エディターで AWB アイコンをクリックする必要があります。

背景画像を選択し、下にスクロールして残りのオプションを追加します。たとえば、オーバーレイの色や視差の種類を追加します。完了したら、「挿入」をクリックします。

ショートコードは次のようになります。

[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]This is where the content within your parallax background goes.[/nk_awb]

この場合、従来のエディターは少し使いにくい可能性があります。 AWB はショートコードであるため、エディターから背景設定を表示することはできません。

WPBakery を使用した AWB

最後に – 高度な WordPress 背景は WPBakery ページビルダーでも機能します。行設定にタブが追加されているため、ここでの使用は簡単です。

「背景 (AWB) 」タブをクリックするだけで、任意の行に独自の視差背景を作成およびカスタマイズできます。

視差効果に関する最終的な考え

テーマに視差効果機能が組み込まれていない場合、またはホームページ以外にも効果を追加したい場合は、プラグインを試してください。 Slider Revolution や無料の Advanced WordPress Backgrounds は素晴らしいです。どちらを使用しても、ページや投稿に追加する視差セクションをすばやく作成できます。

これまで見てきたように、Web サイトに視差効果を追加することは非常に価値があります。これにより、Web サイトのビジュアルが大幅に改善されるだけでなく、視聴者にアピールし、サイト内を簡単に移動してコンテンツにアクセスできるようになり、サイトの滞在時間を増やすことができます。このユーザーエクスペリエンスの向上により、最終的にはサイトの目標に対するコンバートに役立つはずです。再訪問者の増加、リードの収集、製品やサービスの販売を目的としています。

ホームページ、ランディングページ、投稿、またはその他の場所に視差効果を追加しますか?以下のコメント欄でご意見をお聞かせください。