成功
スライドショー
レスポンシブなレイアウト、コントロール、自動再生を備えた柔軟なミックスコンテンツのスライドショーを作成できます。
- スライドショーコントロール設定に関するCompany XYZドキュメント
- バナーブロックに関するCompany XYZドキュメント
- ブログ記事ブロックに関するCompany XYZドキュメント
- 画像ブロックに関するCompany XYZドキュメント
- 商品ブロックに関するCompany XYZドキュメント
- リッチテキストブロックに関するCompany XYZドキュメント
- テスティモニアルブロックに関するCompany XYZドキュメント
- 動画ブロックに関するCompany XYZドキュメント
- ヘッダー設定に関するCompany XYZドキュメント
- セクションの余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
- セクションとブロックに関するShopifyドキュメント
- テーマエディターの機能概要に関するShopifyドキュメント
Slideshow を使って、シンプルな画像中心のプロモーションから複数カードの特集コンテンツまで、混在したブロックタイプを含むスワイプ可能またはクリック可能なコンテンツ領域を作成できます。見た目のバリエーションを出しつつ、各画面サイズで表示されるアイテム数と、訪問者がスライドをどのように移動するかを管理したいときに適しています。テーマエディターでセクションとブロックがどのように機能するかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
これらの設定で、スライドショーの動作を細かく調整する前の基本レイアウトを定義します。ここでは、一度に表示されるブロック数と、各行でコンテンツがどれだけ均等に並ぶかを管理します。
レイアウトとレスポンシブ動作
Section titled “レイアウトとレスポンシブ動作”デスクトップ、タブレット、モバイルごとに個別の列数を設定して、各画面サイズでのスライドショーの密度を調整します。タブレットの値が 0 に設定されている場合、タブレット画面ではデスクトップの列数が使用されます。これは、管理するブレークポイントを少なくしたい場合に便利です。
各スライドにより多くの読み取りスペースが必要な場合や、混在したブロックタイプが小さい画面で横並びだと窮屈に見える場合は、モバイルで積み重ねる を使用します。これにより、よりシンプルな1列表示になります。
コンテンツを縦方向に引き伸ばす を使うと、各行で最も高いブロックに合わせてブロックの高さを揃えられます。テキスト量の多いブロックと画像ベースのブロックを組み合わせる場合に特に有効で、全体の行がよりすっきり見えます。
スライドショー設定
Section titled “スライドショー設定”このコントロールを使って、訪問者がセクションをどのように操作するかを定義します。スライドショーのコントロールのリファレンスは、スライドショーコントロール設定にあります。
アニメーションと遷移
Section titled “アニメーションと遷移”希望する見せ方に応じてアニメーションスタイルを選択します。デフォルトのアニメーションは複数のスライドを見渡す閲覧に最適で、フェード はより集中したヒーロー風のストーリーテリングに適しています。
フェード は単一スライドのレイアウトを強制し、プレビュー形式の動作とページネーション表示を無効にします。
アニメーション速度は、スライドの切り替わりの速さを変更します。動きが速いと販促用途ではより活気のある印象になり、遷移が遅いと編集的またはプレミアムなビジュアルコンテンツに向いていることが多いです。
自動再生とループ
Section titled “自動再生とループ”自動再生を使うとセクションに動きが出ますが、各スライドがすぐに理解できる場合に最も効果的です。スライドに長めの文章、商品詳細、動画が含まれる場合は、より長い自動再生の遅延時間のほうが、たいてい良い体験につながります。
ホバーで一時停止 はデスクトップのみで適用され、訪問者がスライドショーが進んでしまうことなく読みたり操作したりするのに役立ちます。スライドをループ は、明確な終点があるよりも連続的に感じさせたいセクションで便利です。
ナビゲーションとページネーション
Section titled “ナビゲーションとページネーション”訪問者にわかりやすい手動操作を求める場合は、ナビゲーションを表示 を使用します。これは、複数のカードが一度に表示されるミックスコンテンツのスライドショーや、特に重要です。
ナビゲーション位置 では、どれだけ目立たせたいかに応じて、コントロールをコンテンツの上または下に配置できます。画像中心のレイアウトではコンテンツ下の配置のほうがすっきり見えることが多く、セクションに見出しも含まれる場合はコンテンツ上の配置がうまく機能することがあります。
ページネーションは、スライドショーが順序を示す場合や、一度に1つのメインスライドを表示する場合に最も役立ちます。分数表示と進行バーのスタイルは、コンテンツ量の多いスライドでは動的ページネーションよりも理解しやすいことが多いです。
次のスライドのプレビュー表示
Section titled “次のスライドのプレビュー表示”次のスライドのプレビューを表示 は、次のカードの一部を見せることで、さらにコンテンツがあることを示します。これは、閲覧を促したい複数カードのレイアウトで最も効果的です。
すでにレイアウトが窮屈に感じられる場合は、プレビューをオフにするとセクションがより落ち着いて見え、見やすくなります。この設定は、フェード アニメーション使用時には適用されません。
これらのカラー上書き設定は、個々のスライドブロックではなく、セクション見出し領域に影響します。導入部分のコンテンツをグローバルなカラー設定や強めの背景処理から分けて見せたいときに使用してください。
アイコン、見出し、サブ見出しの色をまとめて調整し、導入部の読みやすさを保ちます。スライドで既に鮮やかな色や画像を使っている場合は、セクションヘッダーの色を控えめにすると、全体のバランスがよくなります。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- バナー
- ブログ記事
- 画像
- 商品
- リッチテキスト
- お客様の声
- 動画
バナーブロックはこのセクションで最も柔軟なオプションで、プロモーション、ヒーロー風のスライド、画像中心のストーリーテリングに最適です。ブロック固有の設定については、バナーのリファレンスを参照してください。
スライド自体にはブロックの背景を使い、その上にテキスト、ボタン、必要に応じて前景メディアを重ねます。コンテンツにさらにスペースが必要な場合、バナーブロックは選択したアスペクト比を超えて広がることもできます。
ブログ記事ブロックは、スライドショー内に記事カードを表示します。詳細は、ブログ記事ブロックのリファレンスを参照してください。
特集編集コンテンツやジャーナルのハイライトに適しています。標準的な記事カードよりも見た目の調整を細かく行いたい場合は、代わりにバナーブロックを使用してください。
画像ブロックは、任意のキャプション、オーバーレイ、リンク、配置コントロールを備えたビジュアルスライドを追加するシンプルな方法です。詳細は、画像ブロックのリファレンスを参照してください。
ルックブック、キャンペーン画像、ロゴスライド、軽めのプロモーションに便利です。キャプションは、明確な文脈を加える場合のみ追加してください。
商品ブロックは、購入可能な商品カードをスライドショーに追加します。詳細は、商品ブロックのリファレンスを参照してください。
特集アイテム、厳選行、関連商品の紹介に使用します。商品詳細やバリアントコントロールを多く表示する場合は、各カードが見やすいように表示列数を減らしてください。
リッチテキスト
Section titled “リッチテキスト”リッチテキストブロックでは、見出し、本文テキスト、アイコン、ボタン、任意のブロック背景を含むメッセージ主導のスライドを追加できます。詳細は、リッチテキストブロックのリファレンスを参照してください。
お知らせ、価値提案、よりビジュアルなスライドの間の編集的な区切りに便利です。独自の背景メディアを含められるため、テキスト中心でありながら、バナーのような印象にもできます。
お客様の声ブロックは、顧客の引用を強調表示し、必要に応じてその引用を関連商品にリンクできます。詳細は、お客様の声ブロックのリファレンスを参照してください。
動きのあるレイアウトでは、最良の結果を得るために、お客様の声のテキストはかなり短く保ってください。画像や動画を追加する場合でも、引用が引き続き主メッセージとして感じられるようにしてください。
動画ブロックでは、ホスト型または埋め込み型の動画をスライドショー内に直接配置できます。詳細は、動画ブロックのリファレンスを参照してください。
自動再生カルーセルでは、動画の使用は控えめにしてください。再生開始前でも、ポスター画像、キャプション、オーバーレイを使うことで、スライドをより洗練された印象にできます。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共有ヘッダー設定を使って、キャプション、見出し、補足テキスト、アイコン、任意のボタンでスライドショーを導入します。ヘッダー設定の完全なガイダンスは、ヘッダー設定リファレンスにあります。
セクションヘッダーは、スライドショーがページの下部に表示される場合や、複数のコンテンツタイプを混在させる場合に特に役立ちます。コンテンツを示しつつスライドと競合しないよう、簡潔に保ってください。
共有の余白コントロールを使って、セクションコンテンツの上下の間隔を調整します。余白設定の完全なリファレンスは、セクションの余白リファレンスにあります。
スライドショーを独立した機能のように見せたい場合は余白を大きくします。より密なページレイアウトに、セクションをより詰めて配置したい場合は余白を小さくします。
セクション背景設定
Section titled “セクション背景設定”共有のセクション背景コントロールを使って、セクション全体の背後に色、グラデーション、画像、オーバーレイ、動画を追加します。背景設定の完全なリファレンスは、セクション背景リファレンスにあります。
これらの設定は、個々のスライドではなくセクションラッパーに影響します。強い背景は奥行きを加えられますが、その分、コントラストと間隔がより重要になります。
個々のスライドですでに印象的な画像、オーバーレイ、カラー処理を使っている場合は、視覚的な競合を避けるために、より落ち着いたセクション背景を使用してください。
区切り線設定
Section titled “区切り線設定”共有の区切り線コントロールを使って、上または下の区切り線を追加します。区切り線のオプションは、区切り線リファレンスに記載されています。
周囲のセクションが似た背景を使っている場合、区切り線はスライドショーを区別するのに役立ちます。ページが枠で囲われすぎた印象にならないよう、控えめに使用してください。
共有の表示コントロールを使って、セクションをデスクトップ、モバイル、または両方に表示するかを決めます。表示動作は、表示設定リファレンスに記載されています。
これは、ページの別の場所でモバイル向けの見せ方を変えたい場合や、複雑な複数スライドのレイアウトが大きい画面でのみ適している場合に便利です。
共有の幅コントロールを使って、コンテンツ幅とセクションラッパーの幅の両方を管理します。幅オプションは、レイアウト幅リファレンスに記載されています。
コンテンツ幅はスライドショーのコンテンツをどこまで広げられるかを決め、セクション幅は背景を使う場合により重要になります。エディターでは幅変更の見え方が制限されることがあるため、レイアウトを確定する前に実際のページ表示を確認する価値があります。関連するテーマエディターのコンテキストについては、テーマエディター機能の概要に関するShopifyドキュメントを参照してください。
使用上の注意
Section titled “使用上の注意”- 列数をコンテンツに合わせる。 スライドにテキスト、ボタン、評価、動画が含まれる場合は、各アイテムを読みやすく操作しやすいよう、列数を少なくします。
- アニメーションは意図的に選ぶ。 複数カードの閲覧にはデフォルトのアニメーションを使い、フェード は1つのスライドに集中させたい場合だけ使います。
- 自動再生はゆったり設定する。 ミックスコンテンツのスライドショーでは、特に商品、お客様の声、動画が含まれる場合、長めの自動再生遅延が適しています。
- 競合する背景を避ける。 ブロックですでに印象的な画像やオーバーレイを使っている場合は、視認性と明瞭さを高めるために、セクション背景をよりシンプルに保ってください。
- 実際のレイアウトを確認する。 公開前に、モバイルでの積み重ね、タブレットの列動作、ナビゲーションの配置、幅の変化を実際のフロントエンドで確認してください。
- ブロック変更の影響を確認する。 ブロックの追加や削除でセクション全体の印象が変わることがあるため、編集後は余白、バランス、ナビゲーションの有用性を再確認してください。