プロダクトスライダー：ブラウジング、アクセシビリティ、データ抽出

プロダクトスライダーは、プロダクトカードを水平方向にスクロール可能な行として配置し、そのセットをページのメインカタログにすることなく、関連する小さなセットを表示するために使用します。これは、ショッパーが定義された購入パス（互換性のあるアクセサリーの検索や比較可能な代替品の確認など）を継続できるようにし、すべてのアイテムのID、順序、情報を人と機械の両方に対して保持する必要があります。

この要素が重要な理由

スライダーは、関連性が生じたタイミングで少数の選択肢を表示することで、注意を管理します。商品ページでは、メインアイテムを理解した購入者が互換性のあるアクセサリーを歓迎する場合があります。その時点で完全なグリッドを表示すると、主要な購入と競合しますが、コンパクトな1行は元の意思決定を維持しながら探索を可能にします。

この利点には心理的な代償が伴います。可視範囲の端を超えたものは見落とされやすくなります。最初のカードは7番目のカードよりも多くの露出を受け、最後のカードが切り取られて表示されると、デザインが継続を示さない限りエラーのように見える可能性があります。したがって、スライダーには意図的に順序付けられた補助的なセットを含める必要があります。読者が価格、安全性、互換性、または範囲そのものを理解するために必要な選択肢を隠してはいけません。

機械による抽出可能性とは、検索エンジン、アシスタント、フィード、コンテンツツールがすべての商品を特定し、そのフィールドを紐付けたままにできる能力です。人はスワイプして6番目のカードを表示できますが、クローラーはそのインタラクションを実行しないことがあります。後続のスライドがJavaScriptの後にのみ到着する場合、display:noneを使用する場合、または単に背景画像として存在する場合、システムは不完全なコレクションしか認識しません。すべてのカードをセマンティックなソース順でレンダリングすることで、機械はショッパーがアクセスできるのと同じ名前、URL、位置、価格、通貨、在庫状況を取得できます。

優先順位については要素作成ルール に従います。つまり、外観を選択する前に、ブロックの目的に基づいて分類します。その役割が補助的な商品ルートを表示することであれば、この要素が適用されます。その役割が完全な結果を表示することや、横並びの評価を可能にすることであれば、適切なグリッドまたは型付きテーブルが優先されます。

使用すべき場合

以下の条件がすべて満たされる場合にプロダクトスライダーを使用します：

• セットがページのメインタスクに対して補助的であること。
• 商品が1つの明確な関係（互換性のあるアクセサリー、同じカテゴリの代替品、最近表示したアイテム、編集上のショートリストなど）を共有していること。
• 4～8枚の簡潔なカードで、隠れたカタログを作成せずに有用な幅を提供できること。
• 順序が関連性、互換性、編集上のランク、新しさ、またはその他の可視的なルールによって説明可能であること。
• 各商品がコンパクトなカードとして理解可能であり、詳細情報への正規のリンク先があること。

スライダーは、垂直方向のスペースが限られており、読者がすべての選択肢を同時に見る必要がない場合にグリッドよりも優れています。商品詳細ページでコンテキストを維持し、モバイルで短い推奨セットをまとめて表示し、8つの完全な説明を記事フローに配置せずに次のルートを公開できます。

セットが目的そのものである場合はグリッドを使用します。検索結果、商品カテゴリ、フィルタリングされたコレクション、または完全にスキャンする必要があるコレクションには、可視のカウント、並べ替え、フィルター、ページネーション、安定したURLが必要です。読者が複数の選択肢で同じ仕様を評価する必要がある場合は比較表 を使用します。アイテムが個別の購入可能な商品ではなく、1つの対象のビューである場合は画像ギャラリー を使用します。

よくあるニアミスには、2つのアイテムの行を無理やりカルーセルコントロールにしたケース、30商品のカテゴリをレールに詰め込んだケース、商品ではなくプロモーションを含むヒーローバナーカルーセル、弱い推奨を画面下に隠すために使用されるスライダーが含まれます。「最近見た商品」も条件付きのニアミスです。これは、訪問者に実際の履歴がある場合、見出しがそれらのアイテムが表示される理由を説明している場合、空の状態がアクティビティを偽造しない場合にのみ有用です。

配置場所

配置は、読者がちょうど形成した質問に答えるべきです。互換性のあるアクセサリーは、互換性と付属品情報の後に配置し、代替品は主要商品の制限事項または決定サマリーの後に配置し、関連商品はカテゴリのメインリストの前ではなく後に配置します。編集コンテンツでは、レールを基準とエビデンスの後に配置し、読者がなぜ商品が対象となるのかを理解する前に配置しないでください。

見出し、関係性の説明、アイテム数、コントロール、カードは1つのリージョンにまとめてください。完全なコレクションが存在する場合は、見出しの横または行の後に「すべて表示」リンクを配置します。リンクはクロール可能な正規ページに誘導する必要があり、無制限のクライアントサイドレールを展開してはいけません。

スライダーを別のスライダー、自動回転バナー、価格表、またはページの主要な購入コントロールの隣に配置しないでください。隣接する水平ジェスチャーは曖昧さを生み出し、競合する価格はメインCTAがどのオファーを購入するのかを不明瞭にします。手順、警告、チェックアウト条件、または必要な法的開示を推奨で中断してはいけません。選択によって主要商品の価格、在庫状況、または構成が変わる場合、重要なバリエーションをスライダー内に配置しないでください。バリエーションは所有する商品のコントロールに属します。

小さな画面では、1枚の完全なカードと次のカードの意図的な垣間見え、または明示的な位置ラベル付きの1枚の完全なカードを許可します。リージョンは水平スクロールしても構いませんが、ドキュメント自体はスクロールしてはいけません。スライダーを通過する可視のパスを維持し、キーボードまたはタッチユーザーが繰り返しの水平ナビゲーションに閉じ込められないようにします。

構成要素

1. セクション見出し： 「互換性のあるアクセサリー」など、セットに名前を付けます。「こちらもおすすめ」のような一般的なものは避けます。
2. 関係性の説明： 商品が対象となる理由と、順序が編集上、行動上、または商業上のいずれであるかを説明します。
3. アイテム数： インタラクションの前に有限のサイズを明示します（例：「6商品」）。
4. ビューポート： 表示のみをクリップします。画面外のカードをドキュメントから削除しません。
5. プロダクトカード： 1つの商品の名前、リンク先、決定的な資格情報、現在の商業情報を1つの単位として保持します。
6. 継続キュー： 部分的な次のカード、位置テキスト、またはその両方を使用します。影のみでは見落とされやすすぎます。
7. 前へ/次へコントロール： 効果にちなんで命名されたボタンを使用し、端では無効状態を公開します。
8. 位置インジケーター： 「商品1～3/6」のような範囲を告知します。ラベルのない点の行は避けます。
9. すべて表示ルート： 完全なコレクションが存在する場合に正規のリンクを開きます。
10. フォーカス処理： すべてのコントロールとカードリンクで表示されたままになり、ビューポートによってクリップされません。

各カードはプロダクトカード の契約に従います。スライダーはコレクションの意味とナビゲーションを所有し、プロダクトの情報をローカルで再定義しません。

デザイン例

編集用ショートリスト： 明示された基準に基づいて選択された4～8個の商品に使用します。順序は、ページにそのランクのエビデンスが含まれている場合にのみランクを表すことができます。そうでない場合は「選択オプション」とラベル付けし、順位の主張は避けてください。

関連商品： 主要商品が説明された後、同じカテゴリまたは代替アイテムに使用します。パーソナライゼーションを暗示するのではなく、フォームファクターや価格帯などの共有プロパティを明示してください。

互換性のあるアクセサリー： すべてのアイテムが所有商品に対して検証済みの関係を持つ場合に使用します。互換性のあるモデルまたは範囲をカードテキストに繰り返し記載してください。近接性は互換性の保証ではありません。

行動履歴： 訪問者がその状態を作成した場合にのみ、最近表示したまたは保存したアイテムに使用します。基準をラベル付けし、新しさの順序を保持し、適切な場所で削除を提供し、パーソナライズされた履歴を共有キャッシュや構造化データに出力しないでください。

パラメータ

画像は条件付きです。テキスト優先のプロダクトカードは画像がなくても完全であり得るためです。使用する場合、そのファイルが存在し、寸法がスペースを確保し、代替テキストがその目的に一致する必要があります。1つのカードが価格または在庫状況を表示する場合、すべての同種カードが同等の現在フィールドまたは明示的なステータスを表示する必要があります。

構文とコード例

ポータブルMarkdownディレクティブ

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::

Hugoショートコードマッピング

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}

これは意図されたアダプター仕様であり、登録済みのショートコード呼び出しではありません。名前付きパラメーターのみを使用します。アダプターが存在するまで、サポートされていないショートコードを発明せずに、コレクションをセマンティックHTMLまたは非インタラクティブな行として実装してください。

WordPressブロック

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->

例

良い例：互換性が明確である

Arc 14 向け検証済みアクセサリー — 4商品
Arc ノートパソコンスタンド — USD 69 — 在庫あり。 13～16インチのノートパソコンに対応。Arc 14の全ポートにアクセス可能。
Dock 7 ハブ — USD 89 — 在庫あり。 Arc 14のUSB-C充電仕様と100Wパススルーに対応。
Quiet キーセット — USD 74 — 在庫わずか。 Bluetoothで接続。Arc 14のポートを占有するレシーバーは不要。
Task Light Mini — USD 45 — 在庫あり。 専用のUSB-C電源を使用。ノートパソコンから電源を消費しない。

これは、関係性が名前付きで検証されており、各カードが明確な互換性ステートメントを提供し、商用フィールドが並行しており、有限の数が表示されているため成功しています。3つしかビューポートに収まらない場合でも、4つすべてのアイテムがソース順に存在できます。

悪い例：根拠のない隠れた推奨

こちらもおすすめ
ベストセラー — $69 — 今すぐ購入
トレンド — $89 — 今すぐ購入
[2回目のスワイプ後にさらに3枚のカードが読み込まれる。]

これは、見出しが関係性を説明しておらず、「ベストセラー」と「トレンド」に定義されたソースや期間がなく、通貨が推測されており、繰り返しの「今すぐ購入」ラベルがコンテキストなしで商品のIDを失っているため失敗しています。さらに深刻なことに、3つの商品はインタラクションがなければ存在しないため、キーボードユーザー、クローラー、または失敗したスクリプトは異なるセットを受け取ります。

スキーママークアップとアクセシビリティ

編集用プロダクトスライダーは、そのメンバーシップと順序に意味がある場合、ItemListを提供できます。表示されている各商品エンティティに対して1つのListItemを使用し、position、正規URL、および商品参照を含めます。位置はDOMと視覚的な順序に一致する必要があります。パーソナライズされた最近見た履歴は、セットが安定したページコンテンツではないため、公開ItemListとしてマークしないでください。

各カードは、表示されているページが同じ情報をサポートしている場合にのみ、ProductおよびOfferデータを提供できます。名前とリンク先だけでは、価格、評価、ブランド、在庫状況、レビューデータを発明する正当な理由にはなりません。表示フィールドと構造化データは同じ承認済み商品ソースから生成し、同期を維持できない揮発性のプロパティは省略してください。特別なカルーセルスキーマタイプはありません。

名前付きの<section>またはrole="region"は、見出しがすでに十分なランドマークセマンティクスを提供していない場合にのみ使用してください。コレクションを<ul>、<ol>、または同等のリストとして表現し、各カードを1つのリストアイテムにします。画面外のカードはDOMとアクセシビリティツリーに保持してください。水平方向のクリッピングはプレゼンテーションですが、display:none、aria-hidden="true"、inert、またはクライアントのみの仮想化はコンテンツを利用不可にします。

前へ/次へにはネイティブボタンを使用してください。名前は「前の商品」「次の商品」とし、端では正確に無効にし、移動後もフォーカスを保持します。移動後はフォーカスを新しく公開されたカードに移動せず、「商品4～6/8」をポライトステータスリージョンで告知します。矢印キーは拡張機能として使用できますが、Tabキーは通常通りコントロールとリンクに到達できる必要があります。スワイプはサポートされていても構いませんが、唯一の入力としてはなりません。

自動進行は行わないでください。動きの軽減設定を尊重し、即時または抑制されたスクロールを使用します。カードリンクには、商品名を含む明確なアクセシブル名が必要です。画像とタイトルの両方が同じURLにリンクする場合は、重複するフォーカスターゲットを防いでください。200%ズームでは、カードは1枚表示のビューポートになる場合がありますが、テキスト、コントロール、フォーカスリングは完全に表示され、ページは水平方向にオーバーフローしてはいけません。

作成ルール

文章は、行を魅力的にする前に、メンバーシップを防御可能にする必要があります。

• 具体的な見出しがルートを説明する。 3～10語を使用：「互換性のあるArc 14アクセサリー」または「USD 100未満の代替品」。「もっと見る」「トレンド」「こちらもおすすめ」だけに決して頼らないでください。
• 1文で選択を確立する。 8～30語で共有基準、対象読者、互換性、または履歴ソースを明記します。ランクや人気が順序を決定する場合は、指標、市場、期間を指定します。
• 有限のセットは検査可能に保つ。 通常は4～8商品、最大でも12商品とします。2～3枚のカードは静的な行を形成すべきであり、より大きな品揃えはグリッドと正規のコレクションルートが必要です。
• カード名はIDを保持する。 公式の商品名を1～8語で使用します。「ベストバリュー」「私たちの選ぶ一品」やキャンペーンスローガンに置き換えないでください。
• 資格情報は1つの決定質問に答える。 適合性、差別化能力、互換性、または制限について4～18語を使用します。「プレミアム品質」のような一般的な賞賛は避けてください。
• 並行した情報がスキャンをサポートする。 1つのカードが価格、通貨、在庫状況、評価、配送を表示する場合、同種のカードは同じソースと市場からの同等のフィールドまたは明示的な利用不可状態を表示します。
• 順序には説明可能な基盤が必要。 互換性順では最も強い一致を最初に配置できます。ランクには公開された基準が必要です。新しさは訪問者の履歴を反映します。有料配置は開示されなければならず、編集上の関連性を偽装してはいけません。
• アクションはコンテキストを保持する。 「Arcノートパソコンスタンドを表示」を使用し、「もっと詳しく」を5回使用しないでください。カードのCTAは、アクションが既知のバリエーションをバスケットに追加する場合を除き、その商品の正規の詳細ページを開きます。
• 揮発性の主張には所有権が必要。 価格、在庫、配送、割引、評価、人気は承認されたシステムから取得し、必要な鮮度動作を備えます。編集上の散文は矛盾する値をハードコードしてはいけません。

長いレビュー、比較マトリックス、バリエーションセレクター、数量コントロール、チェックアウト条件、証言、カウントダウンタイマー、ポップアップ、ビデオプレーヤー、必須の警告をスライド内に配置しないでください。アドオンを事前選択したり、ナビゲートするだけで商品をバスケットに追加したり、スポンサー付きの順序を隠したりしないでください。スライダーはルートをプレビューし、完全な決定はリンク先または隣接する主要コンポーネントが保持します。

使用する投稿タイプ

postTypesフロントマターのフィールドがこのテーブルを駆動します。含まれているということは、コンパクトな補助的な商品セットが指定されたページを改善する場合に、その要素が条件付きで使用可能であることを意味します。

QAチェックリスト

• セットはページのメインタスクに対して補助的であり、1つの明確な商品関係を持つ。
• グリッドや比較表の方が読者の実際のタスクに適していない。
• スライダーは通常4～8商品を含み、12を超えない。
• 見出し、選択基準、アイテム数、コントロール、位置ステータス、「すべて表示」ルートが該当する場合に表示されている。
• すべてのカードに安定した識別子、公式名、正規のリンク先、決定に関連する資格情報がある。
• 価格、通貨、在庫状況、評価、配送、プロモーションフィールドが並行しており、表示される場合はソースがある。
• 互換性、ランキング、人気、パーソナライゼーション、スポンサーシップの主張がその根拠を開示している。
• DOM順序、視覚的順序、告知された位置、キーボード順序、およびItemListの位置が一致する。
• すべての商品がサーバーサイドレンダリングされ、JavaScriptなしで使用可能。後続のスライドがインタラクションやクライアントリクエストに依存しない。
• 画面外のカードはアクセシビリティツリーに残り、非表示、inert、または背景画像のみで表現されていない。
• 前へ/次へボタンは明確な名前、正しい無効状態、可視のフォーカス、移動後の安定したフォーカスを持つ。
• タッチスワイプと矢印キーは拡張機能であり、標準ボタンとTabナビゲーションが完全なアクセスを提供する。
• 自動的な動き、フォーカス奪取、キーボードトラップ、ページレベルの水平オーバーフローがない。
• 位置の変更はテキストとして告知され、色、クリッピング、影、ドットだけが継続を伝えることはない。
• すべての画像パスは公開前に解決され、寸法はスペースを確保し、代替テキストはカードの目的を反映する。
• 200%ズームおよび狭い画面で、1枚のカード、そのテキスト、コントロール、フォーカスリングが完全に表示される。
• 構造化データは可視で現在の事実を繰り返し、パーソナライズされた履歴や発明された商業プロパティを省略する。
• 完全なコレクションには、読者がレールを超えてブラウズする必要が合理的にある場合、クロール可能な「すべて表示」URLがある。
• ポータブルMarkdown、Hugo、WordPressの表現は、同じ商品、順序、フィールド、フォールバックを保持する。

FAQ

アカデミーテンプレートは、[[faq]]フロントマターに保存された5つのレビュー済み質問をレンダリングします。