WordPressでSlideDeck 2を使って美しい商品ツアーを作成する方法

コンテンツスライダーは現在WordPressでは当たり前のように使用されていますが、一般的にはごく限られた状況でしか使用されていません – 一般的には、ホームページや最近の投稿日、画像ギャラリーなどに設置されています。WordPressサイトでは、コンテンツスライダーの可能性と柔軟性を利用して、訪問者に行動を起こさせるような魅力的なストーリー、つまり製品ツアーを伝えるという新しいトレンドが生まれつつあります。

WordPressの製品ツアーにコンテンツスライダーを使用することで、ユーザーを自分のペースで重要なポイントに誘導することができ、製品をよりよく販売することができます – これは、単に動画を使用するよりも優れています。さらに、この方法でコンテンツスライダーを使用すると、すべての種類のウェブメディアを活用できます。つまり、ユーザーに受動的に動画を見ることを強いるのではなく、インタラクティブなコンテンツをスライドに含めることができます。

最近まで、最もシンプルなコンテンツスライダーの商品ツアー以外を作成するためにはコードの知識が必要でしたが、私たちはSlideDeck 2という素晴らしいスライダープラグインを使用しており、このプラグインがすべてを変えてくれました。

このパワフルなプラグインを使えば、個別コードを一行も必要とせず、数分で素晴らしいスライダーを超シンプルに作成することができます。私たちは過去の投稿でSlideDeck 2の他の強力な機能の一つを取り上げましたが、最新の更新ではカスタムコンテンツスライダーを構築し、各スライドのコンテンツを調整することで、訪問者に行動を起こさせるような魅力的なプレゼンテーションを作成することが有効化されています。このクイックガイドでは、SlideDeck 2を使ってあなたのWordPressサイトに素敵な製品ツアーを作る方法を紹介します。

プラグインの購入とインストール

まず最初に：カスタムコンテンツスライドはSlideDeck 2のプレミアム機能です。SlideDeckのサイトに行ってプラグインを購入することをお勧めします – このコンテナのパワーの割にはかなり安いですし、簡単にアップグレードしてより良い機能を手に入れたり、より多くのサイトで使用することができます。

カスタムコンテンツ機能をアンロックするには、プロフェッショナルパッケージか開発者パッケージを購入し、プラグインと追加機能をアンロックする’アドオン’をインストールする必要があります。

プラグインをインストールするには、WordPressプラグインをインストールするための便利なステップバイステップガイドに従ってください。

用語解説

プラグインをインストールする前に、いくつかのキーワードについて説明します：

• スライドタイプ– スライドには、画像、動画、テキスト、HTMLの4種類があり、それぞれ特定のコンテンツに対応するように設計されています。
• レンズ– レンズはコンテンツスライダーのテーマのようなものです。スライダーの見た目や動作、ページ上のコンテンツの表示方法をコントロールします。WordPressテーマと同じように、コンテンツに異なるレンズを適用するのはほんの数秒で、スライダーのルック＆フィールを大きく変えることができます。

さて、専門用語はこの辺にして、SlideDeck 2を有効化して始めましょう！

カスタムコンテンツSlideDeckの作成

SlideDeckのカスタムコンテンツ機能を使って、4つの異なるタイプのコンテンツをミックスした商品ツアーコンテンツスライダーを作成する方法を紹介します。まず “管理 “をクリックしてメインダッシュボードに移動します。この画面で新しいSlideDeckを作成したり、既存のSlideDeckを並べ替えたりできます。

カスタムコンテンツセクションで、青い “Create SlideDeck “ボタンをクリックしてください。カスタムコンテンツエディター画面に移動し、最初のスライドを作成します。カスタムコンテンツエディターに移動したら、SlideDeckに名前を付けます。最初のスライドが作成され、SlideDeck 2のどのパッケージを使用しているかによって、3つまたは4つのスライドタイプから選択することができます。

このフライアウトメニューの下には、SlideDeck 2の最もユニークな機能の一つであるライブプレビューウィンドウがあります（WPBeginner’s BlueprintでSlideDeck 2がおすすめWordPressプラグインである理由の一つです）。スライダーを編集するとリアルタイムで更新されます。

Imageスライドから始める

訪問者がこれから参加するツアーの概要をすばやく視覚的に理解できるようなイメージスライドから始めましょう。イメージスライド “スライドタイプをクリックしてください。フライアウトメニューが更新され、イメージスライドの作成に関連するすべてのオプションが表示されます：

画像のアップロード｜URLの指定– WordPressのメディアギャラリーに画像をアップロードするか、他の場所にホスティングされている場合はURLを貼り付けるかを選択します。
キャプション｜本文｜なし – 画像の上にテキストキャプションを表示するか、簡単な本文を表示するかをSlideDeckに指定します。テキストを表示せずに画像全体を表示することもできます。
スライドリンク– ユーザーがスライドのどこかをクリックした時にアクセスする URL を指定します。
タイトル– キャプションエリアまたは本文エリアに表示するスライドのタイトルを指定します。
説明– スライドの説明コピーを入力します。ここにリッチテキストを入力できます！
キャプションの位置– スライド上のテキストオーバーレイの位置を決定します。キャプションは上/下、本文は左/右に配置できます。

好きなようにスライドを設定したら、「適用」ボタンを押すだけで、ライブプレビューエリアが更新され、最初のスライドが表示されます。この例では、URLを指定してスライドをビルトインし、下部にキャプション、スライドリンクは設定していません。

これで最初のカスタムコンテンツスライドができました。では、2つ目を追加して、製品のデモ動画を追加してみましょう。

動画スライドの作成

SlideDeck 2はYouTube、Vimeo、Dailymotionの3つのソースからの動画コンテンツをサポートしています。つまり、これらのサービスのいずれかに製品のデモ動画をアップロードし、動画のページのURLを貼り付けて “更新 “を押すだけです。

Imageスライドタイプと同じように、タイトルと簡単なキャプションを追加することができます。初期設定では、SlideDeck 2はあなたのYouTube/Vimeo/Dailymotionページにあるキャプションコンテンツを取り込みますが、商品ツアーのニーズに合わせて調整することができます。

先ほどと同じように、適用をクリックし、スライダーをクイッククリックしてください – 画像と動画のスライドを行き来できるようになります。

テキストスライドの作成

たとえば、機能リストを表示したり、製品レビューからの引用を共有したりする場合などです。このような場合は、テキストスライドタイプを使用します。

このスライドタイプは非常にシンプルで、いくつかのオプションを設定するだけです：

レイアウト– 基本的なレイアウトでは、スライドの上部にタイトルを配置し、その下にテキストを配置します。マルチカラムは、テキストを自動的に2つのカラムに折り返すことで、より新聞のようなフォーマットを提供します。ブロック引用では、テキストの短い部分を大きく太いタイポグラフィで強調することができます。先ほどと同じように、適用を押してスライドをSlideDeckに追加します。

スライドの再編成

この時点で、画像スライドではなく動画スライドでリードし、ユーザーをすぐにツアーに参加させたいと考えているかもしれません。スライドヘッダーエリアで、動画スライドをクリックしてドラッグし、画像スライドの左側の光っているスペースにドロップします。とても簡単です！

HTMLスライドタイプを使う

HTMLスライドタイプはSlideDeck 2の開発者パッケージに追加されたパワフルな機能で、スライドに独自のHTMLコードを入力することができます。コンテンツのより複雑なレイアウトや、コンテンツスライダーにより強力なインタラクションを追加したい場合に最適です。例えば、サインアップフォームを埋め込むことができ、カスタマイザーは製品ツアーの最後にメールマガジンを受け取ることができます！

HTMLスライドタイプを選択すると、フライアウトメニューにHTMLエディターが表示されます。

HTMLの挿入]フィールドに、カスタムコードを貼り付けることができます。タグが自動的に色分けされ、正しい構造になっていることを確認できます。注意すべき点がいくつかあります：

• <style></style>タグの間にスライドコンテンツのCSSスタイルルールを含めることができ、それらはSlideDeckのすべてのスライドに適用されます。
• SlideDeckのライブプレビューはあなたのテーマのスタイルがコンテンツスライダーとどのように相互作用するかを予測できないので、複雑なスタイルの場合はSlideDeckを公開する予定のページで表示した方がより正確なプレビューが得られます。

コードが配置されたら、適用をクリックし、スライドがローテーションに追加されます。

レンズの設定

これで最初のカスタムコンテンツSlideDeckが作成できました！ライブプレビューで数分スライドをクリックし、よくできた仕事に酔いしれてください。

さあ、次はあなたのサイトとシームレスに見えるようにレンズを設定しましょう。SlideDeckには、レンズをカスタムすることで新商品ツアーの外観をコントロールするためのオプションが豊富に用意されています。

SlideDeckを保存して公開する

素晴らしいコンテンツですか？チェックテーマを選び、カスタマイズしましたか？チェック新商品ツアーを公開し、訪問者をカスタマイザーに変える準備はすべて整ったようですね！

SlideDeckはあなたのWordPressサイトにスライダーを埋め込む3つの方法を提供しています。既存のページや投稿のコンテンツに挿入する方法、スライダーを埋め込んだ新規ページや投稿を作成する方法、そして最後にページテンプレートに挿入する方法です。

まとめ

コンテンツスライダーは通常画像ギャラリーやおすすめ投稿にしか使用されませんが、SlideDeck 2はコンテンツスライダーの可能性を追求し、訪問者を惹きつけて離さない魅力的な体験を作るための柔軟性を提供してくれます。WPBeginnerでは、ぜひチェックしてみることをお勧めします！カスタムSlideDeckをどのように使っているかは、無料WordPressブログセットアップのページでご覧いただけます。

共有したいSlideDeckの例をお持ちですか？コメントで教えてください！また、このシリーズのパート1では、Dynamic Source SlideDeckの作成方法をご紹介しています。

タッチインターフェーススライダーはウェブデザインの未来です。今すぐSlideDeckを手に入れよう。クーポンコードをご利用ください：WPB-SD2で20%オフ。