ユーザーエクスペリエンス設定

注目のリンク

1. ユーザーエクスペリエンス設定に関するCompany XYZドキュメント
2. テーマエディターに関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

これらのグローバル設定を使用して、テーマ全体で一貫したショッピング操作を実現します。カートに関するフィードバックの表示方法、商品画像の確認方法、リンク付きカードやバナーの認識方法、スクロール中のナビゲーション、ページ間の移動方法に影響します。

カートと商品ギャラリーの動作

購入フローに最適なカート追加スタイルを選択します。

1. カートにリダイレクトを選択すると、商品を追加した後、お客様がすぐにカートを確認できるよう、カートに直接移動します。
2. ミニカートを表示を選択すると、現在のページに留まったまま、オーバーレイで追加を確認できます。これがデフォルトで、閲覧を続けられます。
3. アイコンのみ更新を選択すると、カートビューを開かずにカートインジケーターだけを更新し、操作を最小限に抑えます。

お客様が商品画像をライトボックスで開けるようにするかどうかを選択します。ギャラリーズームは、素材、細部、商品のバリエーションをより詳しく確認する必要がある場合に便利です。よりシンプルな画像表示にしたい場合は、無効にしてください。

アイコンのみのカートスタイルを使用する場合は、カートインジケーターが見つけやすい状態になっていることを確認してください。ページを離れずに商品が追加されたことをお客様が確認できる必要があります。

オーバーレイとホバーフィードバック

オーバーレイのぼかし効果を有効にすると、対応するオーバーレイの背後にあるコンテンツを柔らかくし、現在の操作に注意を向けることができます。よりシャープな見た目にしたい場合や、背景コンテンツをより見やすくしたい場合は、無効にしてください。

カードの拡大縮小と画像フィルターは、テーマ全体のカードやリンク付きバナーにホバーフィードバックを追加します。どちらもデフォルトで有効になっています。リンク付きコンテンツを見つけやすくするために使用できますが、カードに詳細な画像やテキストの多いレイアウトを使用する場合は、効果を控えめにしてください。

ヘッダーの動作

お客様がスクロールしている間のヘッダーの動作を管理します。

1. 固定を選択すると、ナビゲーション、検索、カートのコントロールが画面上部に表示されたままになります。
2. スクロール時に非表示を選択すると、お客様が下にスクロールしたときにヘッダーが縮小し、上にスクロールすると再び表示されます。これがデフォルトの動作です。
3. オフを選択すると、ヘッダーは各ページ上部の通常の位置に固定されます。

固定ヘッダーを使用すると、重要なコントロールにすばやくアクセスできます。非表示になるヘッダーを使用するとコンテンツの表示領域が広がるため、特に小さな画面で便利です。

ページ遷移

フェード遷移を使用すると、ページ間の視覚的な変化を和らげることができます。すぐにナビゲーションのフィードバックを表示したい場合や、よりシンプルな閲覧体験を優先する場合は、遷移をオフにしてください。

ヒント

強いページ遷移を目立つホバー効果やオーバーレイと組み合わせることは避けてください。競合する動きを抑えることで、お客様が商品や購入操作に集中しやすくなります。

使用上の注意

1. カートのフィードバックをテストします。 商品ページと商品一覧カードから商品を追加し、お客様に明確な確認が表示されることを確認します。
2. 商品の確認をサポートします。 拡大画像による商品確認がお客様の購入判断に役立つ場合は、ギャラリーズームを有効にします。
3. リンク付きコンテンツを予測しやすくします。 商品カードとプロモーションバナーでホバー効果を一貫して使用します。
4. モバイルでのスクロールを確認します。 小さな画面で選択したヘッダーの動作をプレビューし、コンテンツの表示領域とナビゲーションおよびカートコントロールへのアクセスのバランスを調整します。
5. 動きを意図的に使用します。 より落ち着いた閲覧体験になるよう、遷移、ホバーフィードバック、オーバーレイ効果を控えめに組み合わせます。