競合他社が簡単に注目を集めているのに、WordPressの直帰率が上昇するのを見ているのはイライラするものです。多くの場合、その違いは1つのこと、つまり「動き」にかかっています。
静的なページは興味を持続させるのに苦労し、訪問者はエンゲージメントなしにスクロールして通り過ぎてしまいます。
これを修正する1つの方法は何でしょうか?動画スライダーを追加することです。
動画スライダーは、動き、ビジュアル、ストーリーテリングを組み合わせてコンテンツに命を吹き込みます。静止画ではできない方法で注目を集め、ユーザーがサイトに長く滞在するように促します。
このチュートリアルでは、コーディングなしでWordPressに動画スライダーを作成する方法を紹介します。完了すると、サイトをより魅力的にし、訪問者を惹きつけるダイナミックなホームページが完成します。🙌

📕 簡単な概要:コーディングなしでWordPressに動画スライダーを作成する最も簡単な方法は、Soliloquyプラグインを使用することです。このツールを使用すると、モバイル対応のスライダーに最適化されたYouTube、Vimeo、またはWistiaの動画を埋め込むことができます。
WordPressでビデオスライダーを使用する理由
動画スライダーは、WordPressサイトをより魅力的で記憶に残るものにする簡単な方法です。
静止画像とは異なり、動画はすぐに注意を引き、短時間でより多くの情報を伝えることができるため、ページ滞在時間を最大88%増加させます。強力な第一印象は、訪問者がサイトに留まるかサイトを離れるかの分かれ道となります。
動画スライダーは非常に用途が広いです。製品デモの紹介、顧客のレビューの共有、プロモーションコンテンツの紹介などに使用できます。
例えば:
基本的に、ビデオスライダーは画像ではなくビデオを使用するスライドショーです。これにより、サイトがより生き生きとし、インタラクティブになります。

WordPressウェブサイトで動画スライダーを使用するための実用的な方法をいくつか紹介します。
- 🛍️ 製品またはサービスのレビューを紹介する。
- 🧑🏫 機能と製品の仕組みを実演する。
- 📢 満足している顧客からの短いお客様の声を共有する。
- 📚 詳細なケーススタディを強調する。
それを念頭に置いて、WordPressで動画スライダーを簡単に作成する方法を説明します。これにより、視聴者を引き付けることができます。
このガイドで説明するすべての手順の簡単な概要を以下に示します。
準備はいいですか?早速始めましょう!
WordPressサイトに動画スライダーを追加する
ウェブサイトに動画スライダーを追加する最も簡単な方法は、プラグインを使用することです。
私たちはSoliloquyを推奨します。なぜなら、それは市場で最高のWordPressスライダープラグインだからです。実際のWordPressサイトでテストしたところ、Soliloquyはページの読み込み時間に影響を与えることなく、非常に高速であることがわかりました。
これは、YouTube、Vimeo、Wistiaのような人気の動画プラットフォームをサポートしており、動画URLを貼り付けるだけでスライダーに追加できます。また、完全にモバイル対応なので、動画スライドはどのデバイスでも見栄えがします。
さらに、動画だけでなく、画像やその他のコンテンツを組み合わせて、より魅力的なスライダーを作成することもできます。詳細については、Soliloquyの完全レビューをご覧ください。
さて、最初にやるべきことは、SoliloquyのウェブサイトからSoliloquyアカウントを作成し、zipファイルをWordPressサイトにアップロードしてインストールすることです。

💡 注意:動画スライダーを作成できる無料のSoliloquyプラグインがあります。しかし、このチュートリアルではSoliloquy Proプラグインを使用します。なぜなら、YouTube、Vimeo、Wistiaの組み込みサポートと、より多くの動画制御設定を備えているからです。
インストールの詳細については、WordPressプラグインのインストール方法に関する投稿をご覧ください。
アクティベートしたら、Soliloquy » Add Newに移動するだけです。
次の画面で、新しいビデオスライダーにタイトルを付ける必要があります。次に、「他のソースからファイルを選択」というボタンをクリックしてください。

🧑💻 プロのヒント: Soliloquyでは動画を直接アップロードできますが、これは推奨されません。動画をWordPressライブラリにアップロードするとサイトが遅くなる可能性があるため、YouTube、Vimeo、Wistiaなどの動画ホスティングサービスを使用する方が良いでしょう。
詳細については、WordPressに動画を絶対にアップロードしてはいけない理由に関するガイドをご覧ください。
ポップアップウィンドウが表示され、「動画スライドを挿入」オプションをクリックする必要があります。ここから、動画のタイトル、動画URL、キャプション、および代替テキストを追加できます。
後で整理しやすくするために、スライドにわかりやすい名前を付けて開始できます。
次に、「動画URL」フィールドに動画のリンクを入力します。メディアライブラリからのリンクを使用することも、YouTube、Vimeo、Wistiaなどの動画ホスティングサイトからのリンクを使用することもできます。ブラウザの標準の動画URLを貼り付けるだけで、埋め込みコードは不要です。

メディアライブラリから動画を使用する場合は、「画像URL」フィールドにカバー画像ファイルをアップロードする必要があります。この画像は動画が再生される前に表示され、動画がすぐに読み込まれるのを防ぐことでパフォーマンスを向上させるのに役立ちます。
ただし、YouTube、Vimeo、またはWistiaのリンクを使用している場合、Soliloquyは「画像URL」フィールドを自動的に非表示にします。
必要に応じてキャプションを追加することもできます。ここは、動画の内容を簡単に説明し、ユーザーに再生ボタンをクリックするように促すのに最適な場所です。

ビデオスライドをもう1つ追加したい場合は、「別のビデオスライドを追加」ボタンをクリックしてください。
そこから、次の動画のタイトル、動画URL、画像URL、キャプション、および代替テキストをアップロードする必要があります。

それが終わったら、追加したいすべての動画スライドに対してプロセスを繰り返すことができます。
その後、「スライダーに挿入」ボタンをクリックするだけです。

ビデオスライドは、新しいスライド画面にこのように表示されます。
変更が必要な場合は、いつでも鉛筆アイコンをクリックしてビデオを編集したり、「非アクティブ」アイコンをクリックして非アクティブにしたりできます。
ここから、「設定」タブに移動して、ビデオスライダーの表示方法をカスタマイズできます。

この画面では、いくつかの設定を切り替えることができます。
たとえば、スライドの寸法を変更してウェブデザインに合わせることができます。スライダーとキャプションの位置をカスタマイズして、ページ上の他の要素と揃えることもできます。

その他のオプションとして、動画の自動再生を許可するかどうかを検討することもできます。
訪問者がページにアクセスしたときに動画スライドが自動再生されるように設定できるため、コンテンツを強制的に視聴させることができます。
ただし、ブラウザも動画を読み込む必要があるため、ページの速度が低下する可能性があることに注意してください。さらに、現代のブラウザは、ミュートされていない限り、自動再生される動画を頻繁にブロックします。

Soliloquyの良い点は、プラグインが動画スライダーをモバイルデバイス向けに最適化することもできることですが、これらの設定は手動で構成する必要があります。
これを行うには、「モバイル」タブに移動しましょう。
内部に入ったら、モバイルスライダー画像を作成し、キャプションを表示して、再生ボタンをクリックする前に視聴者が何を見るかを知ることができるようにできます。

これで、WordPressブログまたはウェブサイトにスライダーを追加する準備ができました。
右側のパネルにある「公開」ボタンをクリックしてください。

WordPressでのビデオスライダーの表示
スライダーを埋め込むには、表示したい投稿またはページを作成または編集したい場合があります。
WordPressエディターでは、「+」ボタンをクリックして、Soliloquyブロックをページに追加できます。プロセスを簡単にするには、検索バーに「Soliloquy」と入力します。

次に、Soliloquyウィジェットから作成したばかりのビデオスライダーを選択し、ページに挿入しましょう。
それが終わったら、一番上にある「公開」または「更新」ボタンをクリックしてください。

これで完了です。投稿をプレビューして、ビデオスライドがどのように機能するかを確認できます。
このようになります:

まだクラシックWordPressエディターを使用している場合は、WordPressの任意のページまたは投稿にビデオスライダーを追加することもできます。
すべての動画スライダーが保存されているSoliloquyページにあるショートコードをコピーする必要があります。次に、そのショートコードをコンテンツに挿入するだけです。
詳細については、WordPressにショートコードを挿入する方法に関するガイドをご覧ください。

ボーナス: WordPressに注目のコンテンツスライダーを追加する
ウェブサイトに動画スライダーを追加することに加えて、WordPressのページに注目のコンテンツスライダーを追加することも検討してください。
おすすめのブログ投稿を紹介するだけでなく、おすすめの商品をハイライト表示するオンラインストア、レビューの共有、ポートフォリオアイテムの表示、人気のカテゴリの表示など、注目のコンテンツスライダーを追加できます。
動画スライダーとは異なり、注目のコンテンツスライダーは、画像とリンクの組み合わせをスライドに表示できます。
Soliloquyで「Featured Content Addon」をインストールするだけです。

次のステップは、ファイルを選択し、アドオンにアップロードし、それぞれのタイトルと説明フィールドに入力して、マルチメディアファイルのコンテンツ、リンク、および説明を追加することです。
より詳細なチュートリアルについては、WordPressに注目のコンテンツスライダーを正しく追加する方法に関するブログ投稿をご覧ください。
よくある質問:WordPressでのビデオスライダーの作成
動画スライダーがサイトにどのように影響するか、またはそれらを効果的に使用する方法についてまだ疑問がある場合は、これらのよくある質問が重要なポイントをカバーしています。
動画スライダーは私のウェブサイトを遅くしますか?
可能ですが、Soliloquyのようなプラグインはパフォーマンスのために設計されています。これらは遅延読み込みを使用するため、ユーザーが再生をクリックしたときにのみ動画が読み込まれます。動画をWordPressに直接アップロードする代わりにYouTube、Vimeo、またはWistiaなどの動画ホスティングサービスを使用することも、サイトを高速に保ちます。
同じスライダーにビデオと画像を混在させることはできますか?
はい。Soliloquyは複数のスライドタイプをサポートしているため、ビデオ、画像、カスタムHTMLコンテンツを1つのスライダーに組み合わせることができます。
ビデオの場合、ビデオ再生前に表示されるプレースホルダー画像(ポスター画像)を提供できます。これにより、パフォーマンスが向上し、読み込み中にスライダーが見栄えが良くなります。
Soliloquyの動画スライダーはモバイルフレンドリーですか?
もちろんです。当社のテストによると、Soliloquyは完全にレスポンシブであるため、スライダーはデスクトップ、タブレット、スマートフォンに合わせて自動的に調整されます。
動画スライダーを追加するためにコーディングを知っている必要がありますか?
全くありません。このチュートリアルに従えば、完全にコード不要で作成できます。これにより、初心者でも簡単にビデオスライダーを作成、カスタマイズ、追加できます。
WordPressでメディアファイルを使用するための次のステップ
この記事が、Soliloquyを使用してWordPressに動画スライダーを追加するのに役立ったことを願っています。
次に、以下のガイドも確認することをお勧めします。
- WordPressの画像サイズ入門ガイド(ベストプラクティス付き)
- WordPressで複数の投稿サムネイル/アイキャッチ画像を追加する方法
- WordPressにApple Podcastsを埋め込む方法
- ポッドキャストを開始して成功させる方法
- ブロガー、マーケター、ビジネス向けの最高の動画ホスティングサイト
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

kzain
ウェブサイトに動画スライダーを追加したいと思っていましたが、どこから始めればよいかわかりませんでした。さまざまなスライダープラグインとカスタマイズオプションの内訳は非常に役立ちます。これで、動画コンテンツを紹介するための視覚的に魅力的なスライダーを作成できます。共有していただきありがとうございます!
モイヌディン・ワヒード
これは、製品説明、提供されるサービス、および操作方法のガイドなど、指示目的で短いビデオを展示するために多くのウェブサイトで非常に必要とされています。
ウェブサイトの速度の問題のために、私は常にビデオスライダーの埋め込みという考えをスキップしてきました。
Soliloquyは速度を管理し、スライダーにYouTubeビデオを埋め込むことを許可するため、それを必要とするすべてのウェブサイトで使用することは理にかなっています。
このガイドをwpbeginnerに感謝します。私は間違いなくこれを試してみます。