成功
検索
ライブ結果、厳選された候補、オプションのバナーコンテンツを使って、ブランドに沿った検索体験を作成します。
このブロックは、オプションのライブ結果、厳選されたデフォルト候補、プロモーション用のバナーコンテンツを備えた検索フィールドを追加します。クエリを受け付けるだけでなく、商品、コレクション、または主要ページへ積極的に顧客を導きたい場合に使用してください。テーマでブロックがどのように機能するかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
主なテキスト設定は、検索体験の第一印象を形作ります。プレースホルダーで顧客に検索対象を伝え、ボタンラベルは短くして、さまざまなレイアウトに無理なく収まるようにしてください。
ほとんどの場合、シンプルな表現が最適です。わかりやすい案内文のほうが、ブランド調のフレーズよりも見つけやすく、フィールドがわかりにくくなるのを防げます。
予測検索設定
Section titled “予測検索設定”このグループは、顧客が入力中に表示されるライブ検索体験を制御します。また、空の状態を厳選されたデフォルトリンクで調整できるため、クエリが入力される前でもこのブロックを有用に保てます。
リアルタイムの予測検索を使用するには、Search & Discoveryアプリのインストールと設定が必要です。予測検索設定、Search & Discovery app、および正規の検索の提供元リファレンスを参照してください。
このグループの設定は、予測検索が有効な場合にのみ適用されます。ライブ結果が利用できない場合、これらのコントロールは期待どおりに検索体験を変更しません。
デフォルト結果メニューとセカンダリ結果メニューを使用して、空の検索状態を役立つ発見パネルに変えましょう。人気のコレクション、季節限定の導線、サポートページ、一般的なカテゴリなどは、長くて深く入れ子になったメニューよりもここで効果的です。
デフォルト結果のタイトルを空欄のままにすると、メニュー名が代わりに使用されます。検索パネルが意図した表示のままになるよう、メニューラベルをよく確認してください。
オプションのバナーと機能バーは、商品訴求と安心感を加えられますが、検索と競合するのではなく、検索を補完するものである必要があります。パネルが窮屈に感じられる場合は、結果の表示を減らす前に周囲のコンテンツを簡素化してください。
このグループは、オプションのバナー領域の背景を制御します。画像または動画を使用し、背景メディアがスペースにどのように収まるかを調整できます。
デスクトップのトリミングが小さい画面にうまく移行しない場合、モバイル専用の背景メディアが役立ちます。特に、アートワークの端の近くにテキスト、人物、商品が含まれる場合に重要です。
読みやすい前景コンテンツのための余白を残せるメディアを選んでください。見た目に強い素材でも、見出し、ボタン、補足コピーが見やすくなければ役立ちません。
動画設定のベストプラクティスについては、using videoを参照してください。
このグループでは、バナー背景の上にプロモーションコンテンツを重ねられます。アイコン、キャプション、見出し、サブ見出し、行動喚起を追加し、それらをバナー内で配置できます。
空欄のフィールドは非表示になるだけなので、この領域を最小限に保つことも、より充実したプロモーションメッセージを作成することもできます。ほとんどの場合、明確な見出し1つ、短い補足文1つ、アクション1つのほうが、内容を詰め込みすぎるより効果的です。
周囲のページ階層に合わせて、見出しタイプを選択してください。目的は、近くのコンテンツを圧倒せずに、バナーを構造的に見せることです。
ボタンを追加する場合は、文言を直接的でアクション重視にしてください。レイアウト、アイコン、スタイルの設定は見た目の調整に役立ちますが、バナーの挙動に最も大きく影響するのはリンクスタイルです。
アイコンを使用する場合は、絵文字または対応するアイコン名を入力できます。アイコンのガイダンスについては、iconsを参照してください。
バナー前景メディア
Section titled “バナー前景メディア”このグループを使用して、ロゴ、バッジ、商品切り抜き、キャンペーングラフィックなどの前景画像をバナーのテキストと並べて追加します。このメディアは、背景ではなく前景コンテンツと一緒に表示されます。
小さい画像幅はロゴや装飾的なアクセントに適しており、大きい幅は商品アートや大胆なプロモーションビジュアルに適しています。幅を 0 に設定すると、画像は利用可能なスペース全体に広がるため、小さい画面では結果を注意深く確認してください。
画像にリンクを追加する場合は、バナーメッセージと整合させてください。コンパクトなバナー内で遷移先が分かれると、ブロックの焦点がぼやけて感じられることがあります。
このグループでは、バナー領域に対するテーマ全体の色設定を上書きできます。検索バナーにより強いブランド表現が必要な場合や、背景メディアに追加のコントラストが必要な場合に使用してください。
ここでは、オーバーレイとテキストの色が通常最も重要なコントロールです。控えめなオーバーレイにより、画像や動画の見た目を保ちながら、見出し、コピー、アクションをはるかに読みやすくできます。
装飾的な色合わせよりも読みやすさを優先してください。バナーにテキストやアクションが含まれる場合は、デスクトップとモバイルの両方で明確に表示されることを確認してください。
これらのコントロールの詳細については、バナーカラー設定を参照してください。
標準ブロック設定
Section titled “標準ブロック設定”これらの共通設定は、このブロックでカードベースの結果をどのように表示するかを制御します。結果カードをストア全体の見た目に合わせたり、検索結果により明確なビジュアル表現を与えたりするために使用してください。
最も影響が大きいのは、カードスタイル、画像比率、各カードに表示するテキスト量です。顧客が複数の結果をすばやく閲覧する可能性が高い場合は、各結果が高くなりすぎるレイアウトよりも、見やすいカードを優先してください。
共有リファレンスについては、カード設定を参照してください。
これらの設定を使用して、デバイスサイズごとにブロックを表示または非表示にします。デスクトップとモバイルで異なる検索表示にしたい場合に特に便利です。
このブロックをいずれかのデバイスサイズで非表示にする場合は、そこに別のわかりやすい検索入口があることを確認してください。共有リファレンスについては、表示設定を参照してください。
エディター設定
Section titled “エディター設定”これらの設定は、エディター内でのブロックのラベル表示にのみ影響します。複数の Search ブロックを使用する場合や、キャンペーン固有のバージョンをより簡単に識別したい場合に、カスタムのエディタータイトルが役立ちます。
使用上の注意
Section titled “使用上の注意”- 2つの検索状態を想定する。 空の状態と入力済みクエリの状態はそれぞれ異なる目的に役立つため、どちらも意図を持って見せてください。
- 厳選されたデフォルトコンテンツで、初回閲覧を案内します。
- ライブ結果は、最も役立つ一致に絞ります。
- 両方の表示領域を確認する。 デスクトップとモバイルではレイアウト、配置、メディアの挙動が変わるため、公開前に両方のサイズを確認してください。
- バナーテキストが読みやすいことを確認します。
- メディアのトリミングがメッセージを支えていることを確認します。
- スタイル設定は意図的に行う。 空欄またはデフォルトスタイルの値は通常テーマのフォールバック表示を維持し、明示的な色、グラデーション、メディアの上書きはその領域をよりカスタムに見せます。
- メディアは慎重に使う。 画像と動画は、特にデスクトップ用とモバイル用の素材が異なる場合、トリミング、読み込み、フォールバック、可読性に影響することがあります。
- フォームのわかりやすさを支援する。 ラベル、案内文、成功メッセージやエラーメッセージは、顧客が混乱せずに検索できるよう、読みやすく保ってください。