成功
ハイライト・スライドショー
柔軟なメディア、ナビゲーション、モバイル対応のレイアウトコントロールを備えた、ガイド付きの機能スライドショーを作成します。
このセクションを使用して、機能、詳細、またはセールスポイントの一覧を、ガイド付きのスライドショーに変えます。各スライドが1つのアイデアに焦点を当て、短い見出し、簡潔な本文、任意のメディアで補完される場合に最も効果的です。エディターでセクションとブロックがどのように機能するかをより広く理解するには、セクションとブロックに関するShopifyドキュメントを参照してください。
スライドショー設定
Section titled “スライドショー設定”これらの設定では、スライドショーの動き方、次のスライドがどの程度表示されるか、訪問者がスライド間をどのように移動するかを制御します。スタイルを調整する前にここから始めてください。アニメーションスタイルは、セクション全体の動作に影響するためです。
デフォルトのアニメーションスタイルは、次に来るスライドの一部プレビューを含む、よりカルーセルのようなレイアウトをサポートします。Fade はセクションを1スライド表示に切り替えます。これは、訪問者に一度に1つのメッセージに集中してほしい場合に適しています。
Fade は1スライドのレイアウトを強制し、次のスライドのプレビューを削除します。フェードが有効な場合、ページネーションも表示されません。
アニメーション速度は、セクションがどれだけ洗練されて感じられるか、または活発に感じられるかに影響します。速い切り替えは短く視覚的なスライドに適しており、遅い切り替えは通常、スライドに読む量が多い場合に追いやすくなります。
アスペクト比は、スライドのメディア領域の形状を制御します。よりすっきりと一貫性のあるレイアウトにするには固定比率を使用します。メディアの自然な比率を保ちたい場合は、Default のままにします。デスクトップでのトリミングが小さい画面では広すぎる、または狭すぎると感じる場合は、別のモバイル比率が役立ちます。
スライドが短くシンプルなストーリーを伝える場合、自動再生が役立ちます。スライドに長めの本文が含まれる場合は、自動再生を遅くするかオフにして、訪問者が急かされることなく読めるようにしてください。ホバー時に一時停止はデスクトップにのみ適用されるため、モバイルのユーザーは引き続き遅延と手動コントロールに頼ることになります。
ナビゲーションとページネーションは、スライドショーが順序をどれだけ明確に伝えるかに影響します。スライドの見出しやアイコンがはっきりしている場合はナビゲーションだけで十分なことが多く、スライドの順序が重要な場合はページネーションのほうが便利です。
コントロール位置の設定は、デバイス間でインターフェースのバランスを取るのに役立ちます。デスクトップでは左または右に配置することでレイアウトの視覚的な重心が変わり、モバイルでは上または下に配置することで主に見やすさとタップのしやすさに影響します。
これらの設定は、スライドショーの上部にあるアイコン、見出し、補足テキストに使用されるセクションヘッダーの色を上書きします。カスタム背景の上にセクションを配置する場合や、周囲のページスタイルよりも強いコントラストが必要な場合に特に便利です。
色の上書きは控えめに使用してください。シンプルで高コントラストな組み合わせのほうが、特にスライド自体に画像や動画が含まれる場合、装飾的なテキストより読みやすいことがよくあります。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- スライド
各 Slide ブロックはシーケンスに1つのスライドを追加し、テキストまたはアイコンベースのナビゲーションに寄与します。スライドについて詳しく見ます。
各スライドは、1つの明確なポイントに使用してください。短い見出しが最適です。ナビゲーションインターフェースを見やすく保てるためです。
- 見出しを主な要点として使用します。
- コンテンツフィールドには、2つ目の見出しではなく、短い説明を追加します。
- アイコンは、訪問者がスライドをより素早く見分けるのに役立つ場合にのみ追加します。
スライドは、テキストのみ、画像ベース、または動画ベースにできます。画像と動画の両方が追加されている場合は、動画が優先され、そのスライドがアクティブになったときに再生されます。
非アクティブ時のオーバーレイ設定は、プレビューが表示されているときに隣接するスライドからの気を散らす要素を減らすのに役立ちます。隣接するスライドがアクティブなスライドよりも目立ちすぎる場合はオーバーレイを強め、セクションが暗くなりすぎる場合は弱めてください。
ブロックの表示設定
Section titled “ブロックの表示設定”個々のスライドをデスクトップまたはモバイルで非表示にできます。これは、スライドが小さい画面では詳細すぎる場合や、スライド自体を削除せずにモバイルでの流れを短くしたい場合に便利です。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定では、キャプション、見出し、補足テキスト、任意のボタンを使ってスライドショーを導入できます。スライドショーの内容を説明し、訪問者に次の行動を示すのに適した場所です。
ボタンは、商品や関連ページを表示するなど、1つのフォローアップアクションとして使うのが最適です。モバイルでのボタン位置や全幅表示は、アクションをタップしやすく保ちたい場合に役立ちます。
余白設定は、セクションの上下の余白を制御します。特にページに他のメディア重視のセクションがある場合に、スライドショーを周囲のコンテンツから分けるのに使用します。
余白を狭くすると、セクションが周囲のレイアウトとよりつながっているように感じられます。余白を広くすると、スライドショーの存在感とゆとりが増します。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、セクション全体の背後に色、グラデーション、画像、または動画を追加できます。これらの選択肢は、スライドショーをより没入感のあるものにできますが、可読性やレイアウトの奥行きの印象にも影響します。
ヘッダーが背景メディアの上にある場合は、オーバーレイが特に便利です。背景メディアとスライド内のメディアの両方を使用する場合は、セクションが混み合って見えないよう、どちらか一方の視覚的な主張を控えめにしてください。
区切り線設定
Section titled “区切り線設定”区切り線設定は、セクションの上部または下部に線を追加します。これは、同じような背景を持つセクションの間にスライドショーがある場合に、その境界を定義するのに役立ちます。
控えめな区切り線が通常は最適です。装飾ではなく、構造として使ってください。
表示設定は、セクション全体をデスクトップ、モバイル、またはその両方に表示するかどうかを制御します。これは、小さい画面では異なるページの流れにしたい場合に便利です。
一方のデバイスでセクションを非表示にする場合は、重要な詳細が失われないよう、同じ主要メッセージが別の場所にも表示されていることを確認してください。
幅設定は、セクション全体の幅と、その中のコンテンツの最大幅を制御します。このスライドショーでは、幅によってメディアのゆとりやナビゲーションの見やすさが変わります。
幅が狭いほうが、通常はテキスト中心のスライドに適しています。一方、幅が広いレイアウトでは画像や動画の印象が強まります。エディター上の表示だけでなく、可能であれば公開ページで変更を確認してください。エディターの枠表示によって、最終結果とは幅の感じ方が異なることがあるためです。
使用上の注意
Section titled “使用上の注意”- スライドは焦点を絞る。 各スライドには1つの主なアイデアを持たせ、見出し、アイコン、テキスト、メディアがすべて同じメッセージを支えるようにします。
- アニメーションは意図的に選ぶ。 より視覚的なカルーセル感を出したい場合はデフォルトスタイルを使い、1枚ずつに集中してもらいたい場合はフェードを使います。
- メディアの比率を揃える。 スライド間でアスペクト比を合わせると、通常はよりすっきりして落ち着いたレイアウトになります。
- 自動再生は控えめに使う。 スライドがすぐ理解でき、手動コントロールが明確な場合にのみオンにしてください。
- モバイルは慎重に確認する。 カスタムカラー、背景メディア、またはモバイル専用のアスペクト比を使用する場合は、必ず小さい画面でトリミング、コントロールの配置、テキストのコントラストを確認してください。
- 両方のビューポートレイアウトを確認する。 デスクトップとモバイルのコントロールによって、配置、表示、各スライドの表示量が変わることがあるため、公開前に両方のバージョンを確認してください。
- デフォルトは代替手段として扱う。 空白または透明の色は通常、周囲のスタイルを維持します。一方、明示的な色、グラデーション、またはデスクトップ用とモバイル用で別のメディアを選ぶと、スライドショー領域がより独立したものになります。