効果的な投稿ディスプレイは、訪問者のコンテンツへのエンゲージメントを維持する上で重要な役割を果たします。重要なポイントを的確に示し、訪問者がさらに深く探求したくなるような仕掛けを施すことが求められます。静的な投稿ループも一定の効果を発揮しますが、より注目を集めるためには、動的な要素の追加が有効な場合がございます。そこで、カルーセルの活用が効果的です。カルーセルは動きを加えることで、訪問者を実際に立ち止まらせ、コンテンツへの興味を引き出すことができます。
本記事では,Divi 5のグループカルーセルとループビルダーを組み合わせて、注目を集めエンゲージメントを高める投稿カルーセルを作成する方法について、詳しくご説明いたします。
ポストカルーセルが静的ループに勝つ方法
静的ループは一定の効果を発揮します。投稿を行またはグリッド形式で表示し、訪問者がスクロールしながら閲覧できるようにします。
一方、カルーセルは、従来の静的表示とは異なる価値を提供します。動きが視線を自然に引きつけ、コンテンツが画面に現れると、訪問者は立ち止まり、注目する傾向があります。この一瞬の注目は、想像以上に重要な要素となります。
スワイプ操作は、いわゆる「マイクロコミットメント」を生み出します。最初のスライドに一度触れた訪問者は、その後も閲覧を続ける可能性が高くなります。つまり、ユーザーの関心を効果的に惹きつけることができたということです。
カルーセルを使用することで、滞在時間の延長も期待できます。訪問者は、静的なグリッドをざっと見るよりも、複数のスライドを閲覧する方が滞在時間が長くなる傾向があります。コンテンツに長く滞在すればするほど、クリック、購読、購入といった行動につながる可能性が高まります。
Divi 5のグループカルーセルとは
グループカルーセルモジュールは、あらゆるコンテンツをスライドショーのように表示することができます。各スライドは空白のキャンバスとして機能し、必要なDiviモジュールを追加して、ご希望のデザインに合わせて自由に配置していただけます。特定のレイアウトやコンテンツ構造に縛られることなく、柔軟にカスタマイズすることが可能です。
操作の邪魔にならないよう、直感的なコントロールを設計しております。一度に表示されるスライドの数を設定したり、スライドの切り替え速度を調整したり、訪問者が手動でスワイプするか自動再生するかを選択したりすることができます。カルーセルの動作は標準的ですが、コンテンツは完全に柔軟に調整していただけます。
各スライドはDiviのデザイン設定にリンクされており、背景のスタイル設定、間隔の調整、枠線の追加、影の適用など、多様なカスタマイズが可能です。通常のDiviレイアウトを、縦に積み重ねるのではなく横にスライドさせるように作成することができます。モーションは、各フレーム内で作成できるものを制限することなく、動的な魅力を加えることができます。
Divi 5のループビルダー：概要
ループとは、同じ構造を異なるコンテンツで複数回表示する仕組みです。ブログページに複数の投稿がリストアップされ、それぞれにタイトル、アイキャッチ画像、抜粋が同じ形式で表示されている場合に、このレイアウトが適用されます。ループビルダーは、サイトからデータを取得し、デザインテンプレートに繰り返しデータを入力するため、この繰り返し作業を自動化することができます。
Loop BuilderはこのコンセプトをDiviに導入しております。10枚の商品カードを手動で作成する代わりに、テンプレートを1つデザインし、Loop Builderがデータベースから実際の商品データを自動的に入力して表示します。同じ構造で、繰り返しごとに異なるコンテンツを作成することができます。
クエリ設定により、表示内容を細かく制御することができます。特定のカテゴリのブログ投稿を表示したり、特定の価格以下のWooCommerce商品を表示したり、特定の役割を持つチームメンバーをリスト表示したりすることが可能です。ACFを使用されている場合は、カスタムフィールドでフィルタリングすることもできます。
ビジュアルビルダー内で完全なデザインコントロールを実現することで、高い柔軟性を確保できます。固定された構造に縛られるプリセットレイアウトはございません。必要なものを自由に構築し、ループ処理によって実際のコンテンツを自動的に追加していくことができます。
Divi 5でループカルーセルを構築する
それぞれのツールを個別にご紹介してまいりましたが、次はそれらを連携させる方法についてご説明いたします。以下の手順でシステムを一度設定していただければ、新しいコンテンツを公開するたびに投稿が自動的に表示されるようになります。
グループカルーセルモジュールを追加する
まず、ビジュアルビルダーを開きます。プラスアイコンをクリックして行を挿入し、「グループカルーセル」モジュールを選択してください。
空のグループコンテナが1つある行にドロップすると、このグループがテンプレートスライドになります。中央のプラスアイコンをクリックすると、見出し、画像、テキストブロックなどのモジュールを追加できます。
これで基本的な設定は完了です。モジュールがページに追加され、コンテンツを追加する準備が整いました。空のグループコンテナは、次のステップでモジュールを追加するのを待っている状態です。次のステップに進む前に、必要に応じてコンテナの外側にタイトル、小見出し、その他の要素を追加していただくことができます。
例のループを設計する
サンプルループを最初に作成することで、動的なデータを接続する前に具体的な作業を進めることができます。すべてのモジュール、間隔、プレースホルダーコンテンツ、そしてご希望通りのスタイルでスライドを1枚デザインしてください。
最初のカルーセルスライドに、見出し、テキストブロック、画像などのモジュールを追加します。デザイン変数を使用して、ブランドに合った境界線、パディング、色でスタイルを設定することができます。サンプルループは完璧である必要はございません。実際の見た目をリアルに再現できるもので十分です。
このチュートリアルでは、投稿タイプとして「オフィスの場所」を使用します。
なお、このプロセスはあらゆるコンテンツタイプに適用できます。ポートフォリオ、チームメンバー、製品紹介、ブログ投稿、顧客の声など、幅広い用途に対応可能です。構造は変わりません。コンテンツの種類だけが変わります。Divi 5のループビルダーは、ACF、Toolset、WooCommerceなどのツールから提供されるあらゆる動的コンテンツをサポートしております。
カルーセル内にグループを1つ作成し、スタイルを設定するだけで準備が整います。そのグループでループを有効にすると、Diviはデータベース内のすべての投稿に自動的に複製します。スタイル設定されたスライドが、すべての投稿のテンプレートとなります。スライドの見た目が整っていれば、ループを有効にするのは数秒で完了します。カルーセルには実際のコンテンツが自動的に表示されます。
ループを有効にして実際のデータを入力する
グループ設定をクリックしてモジュールパネルを開きます。上部にある「ループ要素」トグルをオンにしてください。パネルが展開され、クエリ設定が表示されます。
クエリタイプを「投稿タイプ」に設定し、「投稿タイプ」でコンテンツソースを選択してください。出力を完全にカスタマイズできるオプションは他にも多数用意されております。
次に、モジュールを実際のデータに接続します。先ほど追加した各モジュールをクリックし、動的コンテンツアイコンを見つけてください。
見出しには「ループ投稿タイトル」を選択してください。テキストモジュールは、必要に応じて「ループ抜粋」や「ループ作成者」も表示することができます。
画像の場合は、「ループアイキャッチ画像」を選択し、お好みのサムネイルサイズを選択してください。必要に応じて、各モジュールをACFフィールドに接続することも可能です。
シングルスタイルのスライドがカルーセル全体に広がり、それぞれにデータベースから直接取得した異なるコンテンツが表示されます。構築した構造がテンプレートとなり、実際の投稿が自動的に入力される仕組みです。
グループカルーセルをスタイル設定する
これで、カルーセルに実際のコンテンツが表示されます。カルーセルレベルのスタイル設定コントロールを使用すれば、すべてのグループに同時にデザインを適用することができます。
「コンテンツ」タブの「カルーセル設定」では、スライドの切り替え方法を細かく制御することができます。「自動回転」を有効にすると、ユーザー入力なしでスライドが自動的に切り替わります。回転速度はミリ秒単位で設定でき、各スライドの表示時間を指定していただけます。
「ホバー時に一時停止」を有効にすると、訪問者がカルーセル上にカーソルを移動した際に自動回転を停止することができます。これにより、訪問者は自分のペースでコンテンツを読むことができます。インタラクションの有無にかかわらず、継続的にコンテンツを表示したい場合は、この機能をオフにしてください。
中央モードを有効にすると、アクティブなスライドが中央に配置され、隣接するスライドの一部が表示されます。トランジション速度は、スライドが切り替わる際の移動速度を調整します。値を低くすると素早いトランジションになり、値を大きくするとスムーズで緩やかな動きになります。最適な流れを実現するために、回転速度とバランスを調整していただくことをお勧めいたします。
「表示するスライド数」では、同時に表示されるグループの数を指定することができます。従来のスライダーの場合は1に設定し、複数のスライドを並べて表示する場合は3、5、あるいはそれ以上に増やすことができます。「スクロールするスライド数」では、自動的にスクロールするか、訪問者が次の矢印をクリックしたときにスクロールするかを指定できます。
一方、「要素」ドロップダウンでは、カルーセル内での訪問者の動き方をコントロールすることができます。「ドットナビゲーションを表示」をオンにすると、カルーセルの下にクリック可能なドットが表示されます。ユーザーはこれらのドットをクリックすることで、任意のスライドに直接移動することができます。必要に応じて、ナビゲーション矢印を置き換えることも可能です。
これらの基本設定以外にも、「デザイン」タブに切り替えて、カルーセル全体のスタイルを設定することもできます。
利用可能なオプションについて、以下で詳しくご説明いたします。
矢印とドットのナビゲーション
「矢印」タブでは、カルーセルに表示される矢印をカスタマイズすることができます。色を変更したり、矢印をコンテナの内側または外側に配置したり、レイアウトに合わせてサイズを調整したりすることが可能です。また、必要に応じて背景色、境界線、影、間隔も設定していただけます。
ドットナビゲーションセクションでは、ドットのスタイルを設定することができます。必要に応じて色とサイズを変更していただけます。また、コンテンツの上または下に配置することも可能です。
グループのスタイル設定オプション
「グループ」ドロップダウンでは、非アクティブなスライドの表示方法を制御することができます。これらのスライドはアクティブなスライドの横に表示されますが、現在フォーカスされていません。「グループ」セクションを展開すると、利用可能なすべてのデザイン設定が表示されます。ここでは、いくつかの主要なオプションについてご説明いたします。
間隔を設定すると、ループアイテムの間隔を空けて、見た目をすっきりさせることができます。スクリーンショットでお気づきかもしれませんが、グループ/ループアイテムが少しぎゅうぎゅうに詰まっているように見えますが、これはまだ間隔を設定していないためです。
「背景」では、スライドのコンテンツの背景となる色、グラデーション、画像を追加することができます。「背景画像の上にグラデーションを配置」をオンにすると、背景画像の上にグラデーションが重ねられます。
また、ボックスシャドウ、境界線、フィルター、変換など、グループをさらにカスタマイズするためのオプションも多数用意されております。
アクティブグループのスタイルオプション
アクティブグループのスタイルは、現在フォーカスされているスライドにのみ適用され、訪問者が閲覧しているコンテンツを識別するのに役立ちます。アクティブグループのドロップダウンを展開すると、メインのグループセクションと同じデザインオプションにアクセスすることができます。
その他のデザイン設定は、グループのスタイル設定と同様に機能します。境界線、ボックスの影、変形、間隔設定などを使用することができます。有効なスタイルと無効なスタイルを区別することで、個々のグループを手動で編集することなく、明確な視覚的な階層構造を作成することができます。
さらに、ボックスシャドウ、境界線、フィルター、変換などの同様の設定があり、これらは個々のグループではなく、グループカルーセルモジュール自体に適用される一般的なデザイン設定です。
応答性に合わせて調整
カルーセルはデスクトップで美しく表示されます。次はタブレットとスマートフォン用に設定していきましょう。
ビジュアルビルダーの上部にある3つの点をクリックすると、サイト全体のレスポンシブブレークポイントパネルが開きます。Divi 5には、有効化とカスタマイズが可能な7つのブレークポイントが用意されております。横向きで表示するには「スマートフォンワイド」、大型タブレットで表示するには「タブレットワイド」をオンにしてください。必要なオプションを有効にして、「保存」をクリックしてください。
Divi 5のレスポンシブエディターを使用すれば、画面サイズを切り替えることなく、あらゆる画面サイズで設定を調整することができます。設定項目の横にあるレスポンシブエディターアイコンをクリックするだけで、デスクトップ、タブレット、モバイルの値を一括で調整していただけます。
設定が他のブレークポイントで異なる値を使用している場合、アイコンは青色に変わります。これにより、変更箇所をすぐに確認することができます。タブレットの場合は、「表示するスライド」を2または1に変更してください。この設定は、特に編集しない限り、「スマートフォン全体」と「スマートフォン」に自動的に反映されます。
モバイルでは、スライドを1枚ずつ表示するのが最も効果的です。ユーザーは混雑を感じることなくスワイプできるため、モバイルのブレークポイントには1だけ入力してください。モバイルでは自動回転をオフにすることも検討していただくことをお勧めいたします。多くのユーザーはスマートフォンでは手動で操作することを好みます。画面が小さいため、自動再生は違和感を覚える場合があります。
各ブレークポイントで遷移速度をテストし、最適なパフォーマンスを確保していただくことをお勧めいたします。デスクトップではスムーズに動作するものが、モバイルではよりスムーズなインタラクションを期待するため、遅く感じることがあります。
Divi 5のループビルダーとグループカルーセルモジュールの活用
グループカルーセルとループビルダーの連携により、サイト全体の可能性が大きく広がります。自動的に更新されるポートフォリオギャラリー、在庫の変化に合わせて更新される商品ショーケース、社内におけるチームメンバーの成長を示すコンテンツなど、多様な用途にご活用いただけます。
投稿は自動的にスライド表示され、コンテンツは余計な手間をかけずに常に最新の状態を保ち、訪問者はスクロールせずにそのまま流し見するのではなく、実際にインタラクションを起こすことができます。オンラインで注目を集めたい場合、動きのあるコンテンツは静止したコンテンツよりも効果的です。これらのツールは
Divi 5で今すぐご利用いただけます。
本記事が、皆様のWordPressのWEB制作の一助となれば幸甚に存じます。ご不明な点がございましたら、お気軽にお問い合わせください。皆様の素晴らしいWEBサイト制作を心よりお祈り申し上げます
