プロダクトカード：ソース管理されたコマースブロック

プロダクトカードは、商品の言及を完全でアクション可能なコマースユニットに変換します。すなわち、商品画像、正式名称、現在の価格、および購入プロセスを進めるリンクまたはボタンであるコールトゥアクション（CTA）です。その最も重要なルールは読者には見えません。つまり、ライターは在庫管理単位（SKU）（販売可能な商品またはバリエーションのカタログ識別子）によってカードを配置し、商品ソースが値を提供します。

この例は、作成されたオファーではなく、関係性をレンダリングしています。本番環境では、SKU以降のすべての表示値は承認された商品ソースから取得されます。カタログの更新により、そのSKUを参照するすべてのカードが自動的に変更され、ライターが古い記事を探して編集する必要はありません。

この要素が重要な理由

商品を評価する読者は、「それは何か？どんな見た目か？いくらかかるのか？次に何ができるのか？」 という4つの質問に素早く答える必要があります。散文の中に埋もれた商品名では、読者がこれらの答えをページ全体から再構築する必要があります。範囲を区切ったカードはその労力を減らしつつ、商業的な割り込みを推奨に見合ったものに抑えます。

また、カードは一貫性を通じて信頼を確立します。記事が「USD 149」と記載しているのに商品ページが「USD 169」と表示している場合、その不一致は小さな編集上の欠陥ではありません。読者に推奨、プロモーション、およびチェックアウトを疑問視させます。ソース管理されたカードは、記事が独立した価格データベースになるのを防ぎます。また、カタログの変更に応じて、在庫状況、バリアント識別、および遷移先の変更も反映できます。

機械による抽出可能性とは、クローラー、ショッピングエージェント、フィード、またはコンテンツ移行ツールが、どの画像、名称、価格、在庫状況、アクションがどの商品に属するかを保持できることを意味します。近接性だけでは弱いものです。視覚的に整列した列に3つの画像が3つの価格の上に配置されていても、機械はそれらを誤って関連付ける可能性があります。1つのカードは、SKUでキー付けされた単一の商品エンティティを公開し、その情報を1つのセマンティックコンテナ内に、その遷移先を明確にリンクして配置する必要があります。

この要素は、単なるスタイル付きアフィリエイトリンクではありません。要素作成ルール が優先されます。つまり、目的に応じてコンポーネントを選択します。ブロックが購入可能な1つの商品を、その識別情報、価格、アクションとともに提示する場合、デザイナーが画像、見出し、ボタンで模倣できたとしても、プロダクトカードを使用します。型付けされたコンポーネントは、ソースバインディング、検証、アクセシビリティ動作、および構造化データフックを提供し、これらはルーズなマークアップでは保証できません。

いつ使用するか

読者が特定の商品を評価するのに十分なコンテキストを持ち、直接的な商品アクションが有用な場合にプロダクトカードを使用します。一般的なケースとしては、バイイングガイドの推奨アイテム、カテゴリー紹介内の商品、商品ページ上のアクセサリー、または比較基準が説明された後の各最終候補オプションがあります。

商品は、承認されたソース内の1つの有効なSKUで識別可能でなければなりません。名称が独立して価格設定された複数のバリエーションを持つファミリーを指す場合、記事の推奨を特定のバリエーションに解決するか、CTAでバリエーションを選択するよう促す商品ファミリー処理を使用します。最も安いバリエーションをあたかもすべての構成の価格であるかのように黙示的に表示してはいけません。

目的が明確になれば、類似のケースは容易に見分けられます。

• 例として商品名を挙げるだけの文には、その時点で価格とアクションが読者の助けにならない限り、カードは必要ありません。
• 異なる請求条件を持つプランのコレクションには、プロダクトカードの行ではなく価格表が必要です。
• ランキングリストには、各アイテムの周りに編集上の推論が必要です。カードは、選定基準、エビデンス、トレードオフ、または各商品が誰に適しているかの説明に取って代わることはできません。
• 資格条件、期限、クーポン条件のあるプロモーションには、専用のオファー処理が必要です。カードはソース管理されたアクティブ価格を表示できますが、ミニ規約ページを含めてはいけません。
• 仕様の比較は、比較表または仕様表に属します。すべての比較セルに完全なカードを繰り返すと、視覚的なノイズが生じ、関係性が弱まります。
• SKUとカタログレコードのないサービスは、価格とボタンがあるという理由だけでプロダクトカードにはなりません。

情報の言及を収益化するためだけにカードを追加してはいけません。読者がなぜその商品が適切かを説明するニーズ、基準、または推奨に遭遇していない場合、カードは邪魔に感じられ、機械は有用なコンテキストのないエンティティを受け取ることになります。

配置場所

配置は、商品をそれを選定した推論に結びつけるために存在します。商品を特定し、その適合性を説明する段落、小見出し、または評決の直後にカードを配置します。読者はアクションの前に理由を、エビデンスの前にセールスコントロールを目にするべきではありません。

セクションに商品と非商品の解決策の両方が含まれる場合、商品は家庭療法、DIY方法、およびその他の代替案よりも前に配置します。この順序により、コマースアイテムを1つの予測可能なグループにまとめ、カタログデータに明確な境界を与え、家庭の方法が別のSKUであるかのように見えるのを防ぎます。評価基準を紹介し、関連するプロダクトカードを表示し、その後で明確にラベル付けされた代替案セクションを開きます。

正確な配置ルール：

カードをページの直接回答の前、段落内、主張とそのエビデンスの間、または番号付き指示の内側に配置してはいけません。競合する価格、同じ遷移先への2つ目のCTA、カウントダウンタイマー、エビデンスなしでその正確なSKUを支持するように見えるお客様の声、または家庭療法ボックスの隣に配置してはいけません。同じSKUの隣接する重複カードは避け、後続の参照は代わりに正規の配置にリンクします。

構造

構造には4つの必須の可視領域と1つのソースキーがあります。

1. 商品画像: 参照されたSKUの主要カタログ画像。ソース管理された代替テキストにより、商品と関連する可視バリアントを識別します。
2. 商品名: 正規の顧客向け名称。正規の商品遷移先にリンクされるか、ペアで表示されます。
3. 価格: 現在の金額とISO通貨コード、または「価格不明」などの真実のソース状態。セール価格は通常価格との関係性を保持します。
4. CTA: 「North Ridgeブーツを見る」「North Ridgeブーツをカートに追加」などの具体的なアクション。その商品とチャネルに許可されたアクションから選択されます。
5. SKU: 安定したルックアップキー。視覚的には控えめに表示されるか、買い物客から隠されても構いませんが、コンポーネントデータと診断情報に存在する必要があります。

在庫状況は視覚的には条件付きですが、ソースデータでは必須です。「在庫切れ」「予約注文」など、CTAでできることを変える意味のある状態を表示します。バッジ、評価、配送情報、バリアントはオプションの拡張機能です。これらは必須の4領域を圧迫したり、検証不可能な主張として作成されたりしてはいけません。

デザイン例

すべてのバリアントは同じソース契約を使用します。バリアントはレイアウトと強調を変更しますが、商品情報の所有権は変更しません。

標準縦型カード: 1～4つの商品のデフォルト。記事のカラムで機能し、狭い画面でも予測可能に積み重なります。

コンパクト横型カード: 画像認識が重要だが縦方向のスペースが限られている長いリストで使用します。CSSで端に配置されている場合でも、CTAは読み取り順序で価格の後に続きます。

おすすめ推奨: 編集上の推論が明確な適合性を特定した場合に1回使用します。「濡れたトレイルに最適」は、ソース管理された商品名の外部にある作成コンテキストです。「総合最優秀」には、明示された基準とエビデンスが必要です。

利用不可状態: 一時的な利用不可が読者にとって有用な場合は識別情報を保持しますが、購入アクションをソース承認された次のステップに置き換えます。製造中止になった商品は通常、空のカードとして宣伝するのではなく、編集上で置き換えるべきです。

パラメータ

インターフェースは、著者に意図的にほとんど制御を与えていません。作成入力を制限することで、コピーがカタログを上書きするのを防ぎます。以下の「ソース」は、レンダラーが各値を取得する場所を示しています。

本文は空で、オプションの最初の見出し（「濡れたトレイルに最適」など）を除いては、編集上のコンテキストになります。2つ目の名前、手書きの価格、代替画像URL、在庫状況の主張、または遷移先を含めてはいけません。ソースレコードが不完全な場合は、ソースを修正するか、公開をブロックします。

プロダクトカードの構文とコード例

3つの形式すべてが同じ作成指示を伝えます。このSKUで識別される商品をここに配置するということです。商品の現在の値を記事にシリアライズしません。

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

:::product-card{sku="TRAIL-BOOT-042" placement=featured}
### Best for wet trails
:::

Hugoショートコード

{{< product-card sku="TRAIL-BOOT-042" placement="featured" >}}
Best for wet trails
{{< /product-card >}}

Hugoの表記は、ターゲットアダプターの契約を文書化しています。商品値をショートコードパラメーターとして受け入れるのではなく、サイトの承認された商品データレイヤーを通じてSKUを解決する必要があります。

WordPress

[product_card sku="TRAIL-BOOT-042" placement="featured"]
Best for wet trails
[/product_card]

WordPressの実装では、同じ商品ソースに支えられた動的なサーバーレンダリングブロックまたは登録されたショートコードを使用する必要があります。商品名と価格の静的なコピーを投稿コンテンツに保存すると、契約に違反します。

良い例と悪い例

良い例：配置が推奨を伝え、ソースがオファーを伝える

急峻で濡れたルートでは、防水メンブレン、泥用に設計されたアウトソール、確実なヒール保持を優先します。North Ridgeモデルは、最も軽量なオプションではありませんが、これらの明示された基準を満たしています。

:::product-card{sku="TRAIL-BOOT-042" placement=featured}

これは機能します。なぜなら、散文が商品アクションの前に適合性とトレードオフを説明しているからです。ディレクティブは1つのSKUを識別するため、レンダラーは現在の画像、正式名称、市場価格、在庫状況、URLを1つの商品エンティティとして取得できます。

悪い例：商業的価値が記事にコピーされている

最高の防水ブーツ — North Ridge、たったの129ドル！ 画像: /uploads/north-ridge-final-v2.jpg 今すぐ購入

これは失敗します。価格、画像、名称の扱い、URLが手書きだからです。金額は古いか、間違った市場のものかもしれません。「たったの」は裏付けのない価値判断を追加しています。フラグメントURLは商品に到達できません。画像はカタログメタデータから切り離されています。SKU、在庫状況、通貨コード、機械的に安定したグループ化はありません。修正方法は、散文カードを完成させることではなく、ソースバインドされたディレクティブに置き換え、編集上の適合説明のみをその外部に残すことです。

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

解決されたカードは、ページ、商品、および可視情報がサイトのスキーマポリシーの対象となる場合、ProductおよびOfferの構造化データを提供できます。SKUはskuに、正式名称と画像はnameとimageに、実際のオファーはprice、priceCurrency、availability、urlにマッピングできます。サーバーは、同じ解決されたレコードから可視コンテンツと構造化出力の両方を生成する必要があり、それらが矛盾することはありません。

推測された価格でOfferを出力したり、利用不可能な金額にゼロを使用したり、CTAが「商品を見る」と表示しているからといって在庫ありとマークしたりしてはいけません。複数のカードが同じSKUを説明している場合、スキーマは矛盾する重複エンティティを作成すべきではありません。1つの安定した商品IDを通じて接続するか、重複排除します。

アクセシビリティは、ドキュメントの関係性から始まります。各カードをarticleまたは同等のラベル付きグループでラップし、商品名を論理的な見出しにし、CTAのアクセシブルな名前をその商品に関連付けます。6回繰り返される「商品を見る」はリンクリストでは曖昧ですが、「North Ridge防水ハイキングブーツを見る」は視覚的なコンテキストがなくても有用です。

代替テキストは、商品と意味のある可視バリアントを説明するべきであり、価格を繰り返したり「〜の画像」と書いたりするべきではありません。装飾的な二次画像には空の代替テキストを使用します。在庫状況、セール状態、または推奨を色、取り消し線、バッジの形状、アイコンのみで伝えてはいけません。キーボードフォーカスは読み取り順序に従う必要があり、カード全体が個別のボタンやバリアントコントロールも含む場合に1つの巨大なリンクになってはいけません。

作成ルール

カードは簡潔に保たれます。その役割は識別とアクションであり、説得ではないからです。各ルールは、ソースの整合性または読者の理解のいずれかを保護します。

• 1つのSKUが混同された識別を防ぐ。各カードは正確に1つのSKUを解決します。あるバリアントの画像と別のバリアントの価格を組み合わせてはいけません。
• ソース所有権が古くなったコマース情報を防ぐ。ライターは配置と、オプションで2〜6語のコンテキストラベルを提供します。名前、画像パス、価格、通貨、在庫状況、URL、またはCTAをカードに入力することは決してありません。
• 編集上のコンテキストが適合性を説明する。おすすめラベルは、「小さなキッチンに最適」などの防御可能なユースケースを記載することができます。50文字以内に抑え、近くの散文で裏付けます。
• 現在の価格には完全なコンテキストが必要。レンダラーはISO通貨コードを表示し、商品ソースから通常価格とセール価格を処理します。別途検証された主張で裏付けられていない限り、「安い」「たったの」、または節約表現を決して追加してはいけません。
• 1つのアクションが曖昧さを減らす。在庫状況にマッピングされた1つのプライマリCTAを使用します。正規のカード内にニュースレター登録、クーポン入力、共有コントロール、または競合する小売業者リンクを追加してはいけません。
• コンパクトな境界が抽出を容易にする。可視カードには、1つの画像、1つの正式名称、1つの価格状態、重要な場合は1つの在庫状況状態、および1つのCTAが含まれます。長い説明、テスト結果、長所短所、法的条件は隣接する要素に残します。
• 商品は非商品に先行する。家庭療法やその他の非商品代替案がセクションを共有する場合、関連するプロダクトカードを最初に表示し、その後で別の代替案サブセクションを開始します。

トーンは事実に基づき落ち着いています。周囲の散文は推奨、比較、または警告を行うことがありますが、ソース管理されたフィールドは中立を保ちます。カード内にお客様の声、裏付けのない最上級表現、カウントダウン、隠されたアフィリエイト開示、処方箋、投薬指示、保証の解釈、または返品ポリシーの要約を決して配置してはいけません。それらの主張には、独自のエビデンス、所有権、および更新動作が必要です。

使用する投稿タイプ

postTypesフロントマター配列が正規の関係性です。以下の表は、リストされた各仕様におけるカードの役割を説明しています。

QAチェックリスト

• ブロックの目的は、優先順位ルールに基づいてプロダクトカードと一致していますか？
• ディレクティブには1つの有効なSKUと、作成された商品値が含まれていませんか？
• 解決されたSKUは、意図された市場と正確なバリアントを識別していますか？
• 画像、名称、価格、通貨、在庫状況、URL、CTAは承認されたソースから取得されていますか？
• 表示される価格は、レンダリング時に遷移先および構造化データと一致していますか？
• セール状態には、有効な通常価格との関係性とソース管理された有効期間が含まれていますか？
• 利用不可の商品は、適切な非購入アクションとともに真実にラベル付けされていますか？
• 近くの散文は、カードがアクションを求める前に、なぜその商品が適切かを説明していますか？
• 商品は家庭療法、DIY方法、および非商品代替案よりも前に配置されていますか？
• カードは、競合する価格、カウントダウン、お客様の声、重複CTAから分離されていますか？
• 商品名は、カードの明確な見出しまたはアクセシブルなラベルを作成していますか？
• CTAのアクセシブルな名前は、リンクがコンテキスト外で読み上げられたときにその商品を識別しますか？
• 代替テキストは、近くのコピーを重複させることなく、意味のある商品とバリアントを説明していますか？
• 推奨、価格、在庫状況、セール状態は、色だけでなくテキストでも表現されていますか？
• キーボードの順序は、画像、名称、価格、在庫状況、アクションの論理的な順序に従っていますか？
• スキーマは、推測されたり矛盾したりするオファー値なしで、対象となる解決済み商品に対してのみ出力されていますか？
• 欠落または製造中止のSKUは、ブランクや架空のカードをレンダリングするのではなく、カタログポリシーに従って安全に失敗しますか？
• ページは同じSKUの重複カードを避け、編集上の主張をソース管理フィールドの外部に保っていますか？

プロダクトカードは、読者と機械の両方が同じ商品、現在の商業状態、および次のアクションを識別できる場合にのみ準備完了です。著者が記事の散文内でこれらの情報のいずれかを維持しなければならない場合、ソース契約は破られています。