# スティッキーバー要素 ## 概要 **スティッキーバー**は、顧客がスクロールする際にストアの画面に固定される、特殊な商品表示要素です。商品詳細、バリエーションオプション、および簡単なチェックアウト機能を表示し、常にアクセス可能な状態に保つのに最適です。この要素は、購入プロセスの摩擦を減らしてコンバージョンを増やしたい商品ページに最適です。さらに、スティッキーバー上の他のコンポーネントをドラッグ＆ドロップで置き換えることで、さまざまな用途に対応できます。 スティッキーバーには通常、次のものが表示されます： * 商品画像（サムネイル） * 商品タイトル * 価格と割引前価格 * バリエーションスウォッチ（色、サイズなど） * 数量セレクター * 「カートに追加」ボタン ## ユースケース * **商品ページ**: 顧客が商品説明やレビューをスクロールしている間、主要な商品情報を常に表示します * **アクセス数の多い商品**: 購入オプションを常にアクセス可能にすることで、コンバージョン率を向上させます * **モバイル最適化**: コンテンツが「カートに追加」ボタンから遠くなることがあるモバイルでは特に価値があります * **多バリエーション商品**: 顧客がトップまでスクロールし直すことなくバリエーションを変更できるようにします ## ページにスティッキーバーを追加する方法 {% stepper %} {% step %} **ステップ1：ページエディタを開く** * PageFly > ページに移動します * 既存のページを編集するか、新しいページを作成します。 {% endstep %} {% step %} #### ステップ2：スティッキーバー要素を追加する * 左側の **要素パネル** で、**Shopify要素** → **商品** に移動します * **スティッキーバー** 要素を探します * それをページにドラッグ＆ドロップします {% endstep %} {% step %} **ステップ3：スティッキーバーをカスタマイズする（任意）** 追加後、内部のすべての要素をカスタマイズまたは置換できます： * 子要素（商品画像、タイトル、価格、ボタン）をクリックして選択します * **インスペクターパネル** でテキスト、色、間隔、スタイルを編集します * エディタでリアルタイムの変更を確認します {% endstep %} {% endstepper %} ## 設定オプション ### 位置（上部または下部） **機能**: スクロール中にスティッキーバーが画面の上部または下部に表示されるかを制御します。 **アクセス方法**: 1. エディタでスティッキーバーセクションを選択します 2. 右側の **インスペクターパネル** を開きます 3. **全般** タブで **位置** を見つけます **オプション**: * **下部**（デフォルト） — バーが画面の下部に固定されます * **上部** — バーが画面の上部に固定されます **使用する状況**: * **下部**: ほとんどのユースケースに最適です。自然なスクロールフローに従います * **上部**: 上部に固定ナビゲーションバーがあり、重なりを避けたい場合に便利です ### 表示設定 #### 常に表示 vs. スクロール時に表示 **機能**: スティッキーバーが表示されるタイミングを制御します。 **アクセス方法**: 1. スティッキーバーを選択します 2. **インスペクターパネル** で **表示タイミング** を見つけます **オプション**: **常に表示**（デフォルト） * スティッキーバーはページの読み込み直後から表示されます * 最大限の可視性とコンバージョン重視に最適です **セクションをスクロールしたときに表示** * スティッキーバーは、顧客が特定のセクションをスクロールして通過した後にのみ表示されます * ページ上部のヒーローセクションでの視覚的な乱雑さを避けるのに便利です * 選択された「トリガーセクション」がビューからスクロールアウトすると、スティッキーバーが表示されます * トリガーセクションがビューに戻ってくると、スティッキーバーは非表示になります **例**: 商品ページの上部に商品詳細セクションがあります。スティッキーバーを「セクションをスクロールしたときに表示」に設定し、商品詳細セクションをトリガーとして選択します。顧客が商品詳細を見ている間はスティッキーバーは非表示のままで、下にスクロールすると表示されます。 #### トリガーセクションを選択する（「セクションをスクロールしたときに表示」が選択されている場合） **機能**: どのセクションがスティッキーバーを表示させるトリガーとなるかを指定します。 **アクセス方法**: 1. **表示タイミング** ドロップダウンから **「スクロール時に表示」** を選択します 2. **セクションを選択** というラベルの新しいドロップダウンが表示されます 3. クリックして利用可能なセクションのリストを開きます **トリガーセクションの選択方法**: * ドロップダウンには、スティッキーバー*を除く*ページ上のすべてのセクションがリストされます * トリガーポイントとして使用したいセクションを選択します * 顧客がこのセクションをスクロールして通過すると、スティッキーバーが表示されるようになります {% hint style="warning" %} **重要**: トリガー機能は、公開されたライブページでのみ機能します。エディタでは、プレビュー目的でスティッキーバーの表示が異なる場合があります。 {% endhint %} ### 詳細設定（その他の設定） **その他の設定** ボタンをクリックして、追加の設定オプションにアクセスします #### 上部/下部のオフセット **機能**: 画面の端とスティッキーバーの間にスペースを追加します。 **使用方法**: * **上部** の位置の場合：画面の上部からの距離を調整します * **下部** の位置の場合：画面の下部からの距離を調整します **範囲**: 0〜200ピクセル **デフォルト**: 0px **例**: サイトに高さ50pxの固定ヘッダーがある場合、**上部位置** を使用する際には **上部オフセット** を50pxに設定して重なりを防ぎます。 **調整方法**: 1. **その他の設定** をクリックします 2. **上部オフセット** または **下部オフセット** のスライダーを見つけます 3. スライダーをドラッグするか、手動で値を入力します #### Z-Index **機能**: ページ上の他の固定要素に対するスティッキーバーの重ね順を制御します。 **範囲**: 1〜9,999 **デフォルト**: 100 **調整する状況**: * スティッキーバーが他の固定要素（スティッキーヘッダーなど）の後ろに表示される場合は、Z-Indexを増やします * 一般的な値: * **100**（デフォルト）：ほとんどのサイトで機能します * **200以上**：他に固定オーバーレイがある場合 * **999**：複数の固定要素で慎重な重ね順の調整が必要な場合 **例**: ストアにZ-Index 50の固定ナビゲーションヘッダーがあるとします。スティッキーバーのデフォルトZ-Index（100）は自動的にそれより高いため、上に表示されます。 ## スティッキーバーのコンテンツをカスタマイズする スティッキーバーには、個別にカスタマイズできるいくつかの下位要素が含まれています： ### 商品画像 * 商品のサムネイルを表示します * **カスタマイズオプション**: サイズ、角の丸み（border-radius）、間隔 * **デスクトップビュー**: 左側に表示されます（レイアウトが許す場合） * **モバイルビュー**: スペースの制約により非表示になることが多いです ### 商品タイトル * 商品名を表示します * **カスタマイズ**: フォントサイズ、色、切り捨て（テキストの折り返しを防ぐ） * デフォルトのテンプレートでは、長いタイトルは省略記号（...）で切り捨てられます ### 価格表示 * 現在の販売価格と、オプションで割引前価格を表示します * **カスタマイズ**: フォーマット、色、位置 * 割引前価格は通常、取り消し線付きで表示されます ### バリエーションスウォッチ * 商品にバリエーションがある場合、色/サイズのオプションを表示します * **カスタマイズ**: スウォッチのサイズ、間隔、形状（四角/丸） * 顧客はスウォッチをクリックして、スクロールせずにバリエーションを変更できます ### 数量セレクター * 顧客が追加するアイテムの数を調整できます * **カスタマイズ**: ボタンのスタイル、入力フィールドの幅 * * および - ボタンが含まれます ### カートに追加ボタン * 主要なコールトゥアクション * **カスタマイズ**: テキスト、色、サイズ、パディング * このボタンをクリックすると、選択した数量とバリエーションがカートに追加されます ## デスクトップとモバイルでの挙動 ### デスクトップ表示 * スティッキーバーは通常、商品画像、タイトル、価格、アクションを一行で表示します * すべての要素が表示され、アクセス可能です * ワイドスクリーンのレイアウトに最適です ### モバイル表示 * レイアウトは小さな画面に合わせて調整されることがよくあります * **商品画像**: スペースを節約するために通常は非表示になります * **商品詳細とアクション**: 縦に積まれるか、レスポンシブなフレックスレイアウトで表示されます * **幅**: 適切なパディングで画面全体の幅に広がります * 「カートに追加」ボタンは、タップしやすくするために全幅に広がることがよくあります **レスポンシブデザイン**: デバイス固有のスタイリングを使用して、モバイルとデスクトップでスティッキーバーを異なるようにカスタマイズできます。インスペクターパネルの **レスポンシブデザイン** セクションを参照してください。 ## ヒントとベストプラクティス 1. 重要なナビゲーションをブロックしない * サイトに固定ヘッダー（ロゴ、メニュー）がある場合、その直下にスティッキーバーを配置しないでください * **上部/下部オフセット** を使用して適切な間隔を保ちます 2. 簡潔に保つ * スティッキーバーは簡単な参照用であり、詳細情報用ではありません * 完全な説明やレビューは、顧客がメインの商品セクションまでスクロールして見れるようにします 3. トリガーセクションをテストする * 「セクションをスクロールしたときに表示」を使用している場合、公開されたライブページでテストしてトリガーが正しく機能することを確認してください * トリガー機能はエディタでは正確にプレビューされません 4. モバイルファーストのアプローチ * モバイルの画面は小さいため、モバイルでは必須ではない要素（商品画像など）を非表示にすることを検討してください * 「カートに追加」ボタンがタッチスクリーンで簡単にタップできる十分な大きさであることを確認してください 5. 一貫したスタイリングを使用する * スティッキーバーのカラースキーム、フォント、間隔をメインの商品セクションと一致させます * これにより、一貫性のあるショッピング体験が生まれます 6. Z-Indexの競合を避ける * 複数の要素が重なって見える場合は、それらのZ-Index値を確認してください * Z-Index設定を使用して要素を正しく重ね合わせます 7. パフォーマンスを監視する * スティッキーバーはパッシブスクロールリスナーを使用しているため、ページのパフォーマンスに大きな影響を与えません * 低スペックのデバイスでテストして、スムーズなスクロールを確認してください ## よくある質問
Q: 1つのページで複数のスティッキーバーを使用できますか？ A: 技術的には可能ですが、推奨されません。複数のスティッキーバーは重なり合い、顧客を混乱させます。1ページにつき1つのスティッキーバーにしてください。
Q: トリガーセクションが機能しないのはなぜですか？ A: トリガー機能は、公開された/ライブのページでのみ機能し、エディタでは機能しません。ページを公開し、新しいブラウザタブでテストしてください。エディタでは、プレビュー目的でスティッキーバーが非表示の状態で表示されることがあります。
Q: モバイルで商品画像を非表示にできますか？ A: はい！デバイス固有のスタイリングを使用します。商品画像要素を選択し、**インスペクター** の **モバイル** スタイリングタブでモバイル画面用に非表示にします。
Q: スティッキーバーはサイトを遅くしますか？ A: いいえ、スティッキーバーは効率的なスクロールリスナーを使用しており、パフォーマンスに大きなオーバーヘッドを追加しません。高速なレンダリングに最適化されています。
Q: 「常に表示」と「セクションをスクロールしたときに表示」の違いは何ですか？ A: - **常に表示**: ページの読み込み時からスティッキーバーが表示されます - **スクロール時に表示**: 顧客がトリガーセクションをスクロールして通過した後にのみスティッキーバーが表示されます（ヒーロー画像の後ろに隠すのに便利です）
Q: スティッキーバーの位置を下部から上部に変更できますか？ A: はい！スティッキーバーを選択し、**インスペクター** を開いて、**位置** の設定を「下部」から「上部」に変更します。オフセットは自動的に調整されます。
Q: テキストの色やボタンのスタイルをカスタマイズできますか？ A: もちろんです。スティッキーバー内のすべての要素はカスタマイズ可能です： 1. 要素（タイトル、ボタンなど）をクリックして選択します 2. **インスペクターパネル** を使用して色、フォント、サイズを変更します 3. **スタイリング** タブを使用して、高度なCSSのようなカスタマイズを行います
Q: スティッキーバーはモバイルで機能しますか？ A: はい、完全にレスポンシブです。ただし、モバイルデバイスではスペースの制約により、一部の要素（商品画像など）がデフォルトで非表示になる場合があります。モバイルで表示する要素はカスタマイズできます。
Q: チェックアウトページではスティッキーバーはどうなりますか？ A: スティッキーバーは通常、商品ページでのみ使用されます。他のページタイプに追加した場合でも同様に機能しますが、必要ないかもしれません。