コンテンツにスキップ

スライドショーのコントロール設定

スライドショーの動き、自動再生、ナビゲーションを調整して、スライドを閲覧しやすくします。

スライドショーのコンテンツの動き、切り替え、さらに多くのスライドがあることを示す方法を制御するには、これらの設定を使用します。このグループはスライドショー対応のコンテンツ全体で再利用できるため、ここでいくつかの配慮した選択を行うことで、テーマ全体の閲覧体験をより一貫したものにできます。より広い背景については、セクションとブロックに関するShopifyドキュメント を参照してください。

このグループには、動き、自動再生、ナビゲーションのコントロールが含まれます。まず全体的な操作スタイルを決めてから、表示しているコンテンツの種類に合わせてタイミングとインターフェースの詳細を調整してください。

アニメーションとスライドの動作

Section titled “アニメーションとスライドの動作”

Animation style は、スライドショーの全体的な印象を設定します。デフォルトのスタイルはより従来型のスライド体験をサポートし、Fade は1枚ずつ表示する、よりシンプルなプレゼンテーションを作成します。

Fade は単一スライドのレイアウトを強制し、ページネーションや次のスライドのプレビューを含む、複数スライドの動きに依存する機能を無効にします。

Animation speed を使って、スライドの切り替わる速さを制御します。速い動きはより活気のある印象になり、遅い切り替えは画像中心のコンテンツにより洗練された印象を与えることがあります。スライドにテキストが含まれる場合は、体験が急に感じられる速度は避けてください。

Show preview of next slides は、次のスライドの一部を表示して閲覧を促します。これは、スライドショーをインタラクティブで順次的に感じさせたい場合に適しています。各スライドをしっかり見せたい場合は、プレビューをオフにすると、通常はよりすっきりした結果になります。

自動再生は、プロモーションバナーや軽めのストーリーテリングコンテンツのように、スライドが自動で切り替わることを想定している場合に便利です。各スライドを丁寧に読む必要がある場合や、じっくり見る必要がある場合は、あまり効果的ではありません。

自動再生が有効な場合、Autoplay delay は、次のスライドに進むまで各スライドをどれだけ表示するかを制御します。短い遅延は緊張感を生みますが、長い遅延のほうが読みやすく、画像とテキストが混在するコンテンツでは一般的に安全です。

Autoplay pause on hover は、デスクトップでスライドショーにカーソルを合わせたときに動きを一時停止します。これにより、自動再生を完全に無効にすることなく、訪問者がスライドを読む、または確認するための追加時間を確保できます。

Loop slides は、最後のスライドの後にシーケンスを最初から再開するかどうかを制御します。連続するカルーセルのような印象にしたい場合はオンにし、シーケンスに終わりがあるようにしたい場合はオフのままにします。

ナビゲーションとページネーション

Section titled “ナビゲーションとページネーション”

Show navigation は、スライド間を移動するためのコントロールを追加します。これは、自動再生がオフの場合や、訪問者が前のスライドに戻したい場合に特に便利です。

Navigation position は、それらのコントロールがスライドショーのコンテンツに対してどこに表示されるかを変更します。スライド領域が視覚的に忙しい場合や、コントロールの存在感を抑えたい場合は、ナビゲーションをコンテンツの下に移動すると役立ちます。

Show pagination はスライドの進行状況を示す視覚的なインジケーターを追加し、Pagination style はその表示方法を変更します。スライドショーの役割に合ったスタイルを選んでください。実用性を重視する場合はコンパクトで直接的なものを、プレゼンテーションの一部として進行を見せたい場合はより視覚的なものを選びます。

ページネーションのスタイルは、実際には次のように異なります。

  1. Dynamic は、より視覚的なインジケーターにしたい場合に適しています。
  2. Fraction はコンパクトで、ひと目で把握しやすいです。
  3. Progress bar は、シーケンスの進行を強く感じさせます。

これらのコントロールの正規の参照情報は、スライドショーのコントロール設定ガイド でも確認できます。

  1. まずアニメーションスタイルを選びます。 この判断によって、プレビューとページネーションを使用できるかどうかが決まり、また、より静的なレイアウトと比べてスライドショーの動作も変わります。
  2. 読みやすさを基準に自動再生を設定します。 スライドショーが進む前に、最も長いスライドを無理なく読めることを確認してください。
  3. 手動ナビゲーションを利用できるようにします。 表示されたコントロールは、特にプロモーションやテキスト量の多いスライドショーで、訪問者が自分のペースで移動するのに役立ちます。
  4. プレビューは目的を持って使います。 次のスライドのプレビューは、各スライドを独立したフレームとして切り離すよりも、閲覧を促したい場合に最適です。
  5. コントロールは見やすい場所に配置します。 スライドの内容が視覚的に密な場合は、ナビゲーションをコンテンツの下に移動すると、しばしばわかりやすくなります。
  6. ナビゲーションは顧客の導線として扱います。 並び替え、非表示、またはモバイルのみのコントロールによって、訪問者が到達できる内容が変わることがあるため、メニュー型やドロワー型のナビゲーションは慎重に確認してください。
  7. ローカルの上書きは最小限にします。 空またはデフォルト風の値は通常、継承されたスタイルを維持し、明示的な色、グラデーション、またはメディアの上書きはスライドショー領域をより独立して見せます。