成功
検索結果
検索結果のレイアウト、フィルター、並べ替え、カードを調整して、よりすばやく閲覧できるようにします。
このセクションでは、検索結果の表示方法と、お客様が結果を絞り込みやすくする方法を制御できます。スキャン速度の向上、見た目のすっきり感の向上、検索ページをストアの他の部分と一貫した印象にするのに最適です。
このセクションには、主要な設定グループの前に個別のスタンドアロン設定はありません。設定の多くは、以下のレイアウト、フィルター、共有表示コントロールで行います。セクションコントロールのより広い概要については、セクションとブロックに関するShopifyドキュメント を参照してください。
グリッドインターフェース設定
Section titled “グリッドインターフェース設定”これらの設定は、デスクトップとモバイルでのデフォルトの結果レイアウトを決定し、そのレイアウトをお客様自身が変更できるかどうかも制御します。バランスの取れたデフォルト表示にしつつ、グリッドの密度をある程度お客様に調整してほしい場合に便利です。
カタログに幅広い商品タイプや画像スタイルが含まれている場合は、グリッドサイズのインターフェースを有効にしてください。単一のレイアウト選択で、より固定的で案内された体験にしたい場合は、オフのままにします。
スティッキーなインターフェースでは、お客様が長い結果ページをスクロールしている間もコントロールが表示されたままになります。フィルタリングやレイアウト変更がしやすくなりますが、コントロールが窮屈に感じられないよう、モバイルでの見え方も確認する価値があります。
フィルター設定
Section titled “フィルター設定”これらの設定では、結果ページにフィルタリングと並べ替えのツールを追加します。お客様が幅広い検索語で探し、見つかった項目を絞り込んだり並べ替えたりする必要がある場合に最適です。設定の詳細については、セクションのカスタマイズに関するShopifyドキュメント を参照してください。
フィルターを有効にするには、ここで役立つようにする前に追加設定が必要です。その設定が完了したら、フィルターグループをデフォルトで開くかどうか、在庫あり商品の在庫状況フィルターを含めるかどうかを選択できます。
並べ替えは、特にお客様が結果の順序を変更したい大きなカタログでは、通常オンにしておく価値があります。エディタのプレビューで並べ替えが一貫していないように見える場合は、最終的な体験を判断する前に、ライブのストアフロント表示で確認してください。
関連するフィルター設定が完了してから、フィルターをオンにしてください。そうしないと、お客様に意味のある絞り込みを提供しないコントロールが表示される場合があります。
標準セクション設定
Section titled “標準セクション設定”共有のカード設定 を使用して、検索結果専用に通常のカード表示を上書きします。これは、検索ページで他の商品グリッドとは異なる画像サイズ、テキストの密度、ボタンの見せ方が必要な場合に便利です。
結果カードをよりコンパクトにして素早くスキャンしやすくしたり、判断に情報が必要な商品向けにより説明的にしたりできます。バナースタイルのカードでは縦方向のテキスト配置も追加でサポートされるため、テキストを画像の上に重ねたい場合は、そのスタイルを慎重にテストしてください。
余白設定 を使用して、結果エリアの上下の余白を制御します。検索ページは宣伝よりも実用性が重視されることが多いため、ここでは小さめの余白がうまく機能することがよくあります。
デスクトップとモバイルで余白を分けると、スペースを無駄にせず、ページを快適に保てます。結果にたどり着くまでが遅く感じる場合は、まず外側の余白を減らしてください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使用して、セクションの背後に色、グラデーション、画像、または動画を追加します。特に周囲のページレイアウトが視覚的に最小限の場合、結果ページによりブランドらしさを持たせるのに役立ちます。
結果が多いページでは、背景は控えめにしてください。強い画像、濃いオーバーレイ、動画はカードやコントロールと競合し、結果を見づらくすることがあります。
区切り線設定
Section titled “区切り線設定”区切り線設定 を使用して、セクションの上部または下部に線を配置します。これは、結果エリアを近くのコンテンツや強い背景を持つページから分ける簡単な方法です。
控えめな区切り線で十分なことが多いです。カスタムカラーを設定しない場合、セクションはより一貫した見た目のために、より広い境界線スタイルにフォールバックすることがあります。
幅設定 を使用して、セクションとそのコンテンツをどのくらい広く表示できるかを制御します。これは、カードの密度、読みやすさ、結果ページのゆとりのある印象に大きく影響します。
コンテンツ幅は読みやすさに関する主な設定であり、セクション幅は背景演出も使っている場合に特に重要です。エディタではレイアウト幅が実際より狭く見えることがあるため、幅の変更はライブのストアフロントで確認してください。
使用上の注意
Section titled “使用上の注意”- 密度をカタログに合わせる。 商品数が多い場合はより詰まったグリッドを使い、商品タイトル、抜粋、画像に重要な情報が含まれる場合はより余白を持たせてください。
- 意図を持ってフィルターを有効にする。 利用可能なフィルターオプションが、お客様の広い検索を本当に絞り込むのに役立つ場合にのみ、フィルタリングをオンにしてください。
- モバイルを慎重に確認する。 スティッキーなコントロール、開いたままのフィルター、密度の高いカードレイアウトは、小さな画面では窮屈に感じられることがあります。
- カードの上書きは戦略的に使う。 検索結果に他のグリッドとは異なる閲覧体験が必要な場合にのみ、ここでカードのスタイル、テキスト、ボタンの見せ方を変更してください。
- 素早くスキャンできることを優先する。 背景、余白、装飾的な演出は、結果とコントロールの分かりやすさよりも優先しないでください。
- 両方の結果状態を確認する。 検索ページは、お客様がクエリを入力する前と、結果が返された後で、見た目や動作が異なる場合があります。そのため、空の状態と入力後の状態を個別に確認してください。
- エディタとストアフロントの表示を比較する。 プレビューの挙動は早い段階でセクションを設定するのに役立ちますが、実際のコンテンツと結果が表示される場所で最終的な体験を必ず確認してください。
- 両方のビューポートでテストする。 デスクトップとモバイルでは、レイアウト、配置、表示、メディアの扱いが異なる場合があるため、両方の画面サイズでコントロールとカードが見やすいことを確認してください。