「AとB、どちらを買えばいいですか？」という質問に、ブログで答えられていますか。似た商品が並ぶストアでは、読者は違いが分からないまま商品ページを行き来し、決めきれずに離れてしまいます。
答え方の型は決まっています。比較の軸を3〜5個に絞って表にし、表の直後に「こんな人にはA」という結論を書き、そのすぐ下に商品カードを置く。これだけで、読者は自分に合う商品を選び、そのまま商品ページへ進めます。
表はShopify標準のエディターでも作れます。Smart Agent Blogを使うと、「表を作成」と「商品を挿入」を同じ画面で使い、結論と商品カードまでを1つの流れで組み立てられます。この記事では、架空のストアの記事例と実際の編集画面で、その手順を説明します。
- 比較の軸の決め方と、絞り込み方
- スマートフォンでも読みやすい比較表の作り方
- 表の直後に結論と商品カードを置く型（架空の記事例つき）
- Shopify標準のエディターでできることと、Smart Agent Blogでの手順
- 公開前に確認すること
違いが分からないと、読者は選べないまま離れる
似た商品が2つ以上あると、読者は商品ページを1つずつ開いて見比べます。重さはこちらのページ、お手入れはあちらのページと、情報が分かれているほど比べるのは大変です。途中で「あとで考えよう」とタブを閉じる人も出てきます。
ブログの記事は、この見比べる作業を代わりに引き受けられます。ところが、せっかく比較の記事を書いても、商品へ案内できていない例が多く見られます。
Smart Agent Blogのご提案のために、2026年8〜9月に日本のShopifyストアのブログを確認した記録では、本文からの商品リンクを記録した88記事のうち66記事（75%）に商品ページへのリンクがありませんでした。4記事に3記事は、本文から商品ページへ進めなかったことになります。また、記録した113記事のうち、商品名・画像・価格をまとめたカードを置いた記事は1件もありませんでした。
違いを説明したあとに商品への入口がないと、読者は結論を知っても、自分で商品を探し直さなければなりません。比較の記事は「違いを伝える」と「その商品へ案内する」を1つの流れにすることが大切です。
比較表のある記事を作る流れ
比較の記事は、次の5つの順で作ると迷いません。
表を作る作業より、その前の「何を比べるか」を決める作業のほうが大切です。順に見ていきます。
比較の軸は「買う前に迷う点」から決める
軸の候補を集める
比較の軸は、店側が伝えたい特徴ではなく、読者が買う前に迷う点から選びます。候補は次の場所にあります。
- お問い合わせやチャットで「どちらがいいですか？」と聞かれたときの理由
- 商品レビューに書かれている「思ったより重かった」などの感想
- 店頭や電話で、スタッフが違いを説明するときに必ず話すこと
- 返品や交換の理由で多いもの
たとえばフライパンなら、「重さ」「お手入れ」「得意な料理」「IH対応か」「価格」あたりが候補になります。
3〜5個に絞る
候補が10個出ても、表に入れるのは3〜5個にします。軸が多すぎると、どこを見て決めればいいのかがかえって分かりにくくなります。
絞るときは、「この軸で結論が変わるか」を基準にします。2つの商品で同じ内容になる軸（どちらもIH対応、など）は、表から外して本文に一文で書くほうがすっきりします。ただし、読者がよく気にする点なら、同じでも表に残しておくと安心材料になります。
比べる商品は2〜3点にする
1つの表で比べる商品は2〜3点が目安です。4点以上になる場合は、「軽さ重視の2点」「本格派の2点」のように、先にグループに分けてから、それぞれを表にします。
読みやすい比較表の作り方
表を作るときは、次の4つを守ると読みやすくなります。
- 商品を列、比較の軸を行に置く：比べる商品が2〜3点なら列は3〜4列に収まり、スマートフォンでも横に広がりすぎません。
- 単位と書き方をそろえる：「1.1kg」と「800g」が混ざると比べにくくなります。どちらも「約1.1kg」「約0.8kg」のようにそろえます。
- 記号だけにしない：「◎」「○」だけでは、何がどう良いのかが伝わりません。「強火の炒め物」「卵料理」のように、短い言葉で書きます。
- 優劣ではなく違いとして書く：比べる商品はどちらも自分の店の商品です。「良い／悪い」ではなく、「こういう使い方に向く」という書き方にします。
数値や仕様は、必ず商品ページの記載と照らし合わせます。表の中の文字は自動では更新されないため、仕様や価格を変えたときは記事も直す必要があります。
表の直後に「こんな人にはA」と商品カードを置く
表を見せただけで終わると、読者は「で、自分はどちら？」と迷ったままです。表の直後に、読者のタイプごとの結論を書き、そのすぐ下に商品カードを置きます。
次は、架空のキッチン用品店が作った記事の例です。
- 比較表：重さ、お手入れ、得意な料理、IH対応、価格の5つの軸で、2つのフライパンを並べています。見出しの直後に置き、記事のどこで比べているかがすぐ分かるようにします。
- 結論：「こんな人には鉄」「こんな人にはセラミックコート」と、読者のタイプごとに選び方を書きます。表の中の言葉を使って、どの軸で判断すればいいのかを示します。
- 商品カード：結論のすぐ下に、それぞれの商品カードを置きます。結論を読んだ流れのまま、画像と価格を確かめて商品ページへ進めます。
結論の書き方は、「強火の炒め物をよく作る」「軽さを重視したい」のように、読者が自分に当てはまるかを判断できる条件にします。「迷ったらこちら」と1つに決めてしまうのも有効ですが、その場合も理由を一文添えます。
記事の後半には、使い始めの注意やお手入れの方法を書くと、買ったあとの不安にも答えられます。サイズの違いが中心になる商品なら、サイズ選びで迷うお客様へ伝えたい測り方と選び方の型も組み合わせられます。
スマートフォンで見え方を確かめる
比較表は、パソコンで作るときれいに見えても、スマートフォンでは列が詰まって読みにくくなりがちです。スマートフォンで記事を読む人を想定して、公開前に必ずスマートフォンの幅で確認します。
左のように、商品を行に、軸を列に並べると、軸の数だけ列が増えます。右のように商品を列にすれば、軸が増えても縦に伸びるだけなので、上から順に読めます。
確認するときは、次の点を見ます。
- 表が画面の横幅からはみ出していないか
- セルの中の文字が1〜2文字ずつで折り返されていないか
- 表のすぐ下の結論と商品カードまで、スクロールしてすぐ届くか
表の見え方はテーマによって変わります。はみ出す場合は、列を減らす、セルの言葉を短くする、長い説明は表の外に出す、の順で直します。
Shopify標準のエディターでできること
Shopify標準のリッチテキストエディターでも、比較表は作れます。管理画面の「コンテンツ」→「ブログ記事」で記事を開き、エディターの「表を挿入」ボタンから表を入れます。表を入れたあとは、「上に行を挿入」「後ろに列を挿入」「行を削除」などで行と列を調整できます。
一方で、表の直後に置く商品への案内は、リンクで作ることになります。標準のエディターでは、文字を選んで商品ページのURLを入力すればリンクになりますが、商品名・画像・価格をまとめたカードのように見せる機能はありません。画像を並べて手作業でカード風に整えることはできますが、商品を入れ替えるたびに画像とリンクを差し替える手間がかかります。
Smart Agent Blogで比較表の記事を作る
Smart Agent Blogでは、比較表・結論・商品カードを、同じ編集画面の挿入メニューから入れられます。
「表を作成」で比較表を入れ、「商品を挿入」で商品カードを置く
- 表を作成：表を入れたい位置にカーソルを置き、右の挿入メニューから「表を作成」を選びます。本文で半角の「/」を入力し、一覧から選ぶこともできます。表ができたら、比べる商品と比較の軸を入力します。
- 商品を挿入：結論の文を書いたら、その下の行で「商品を挿入」を選びます。Shopifyの商品を選ぶ画面が開くので、紹介する商品を選ぶと、商品名・画像・価格が入った商品カードが本文に入ります。
商品を選ぶ画面では、下書き・非表示・アーカイブ済みの商品は選べません。在庫がない商品には「売り切れ」が付くので、比較している商品の一方が売り切れの場合は、本文の結論と食い違わないように書き方を調整します。
「2カラム」で結論と商品を横に並べる
結論を2つ並べたいときは、「2カラム」を使うと、左右の枠にそれぞれ文章や商品カードを入れられます。
- 2カラム：結論を置きたい位置で「2カラム」を選びます。
- 2カラムの枠：左右の枠に、それぞれの結論の文や商品カードを入れます。画面の例では、左に商品カード、右に吹き出しとコールアウトが入っています。
横並びは、スマートフォンでは幅が狭くなります。並び方はテーマや画面幅によって変わるため、次の手順のプレビューで確認します。結論の文が長い場合は、2カラムを使わずに上下に並べるほうが読みやすいこともあります。2カラム・3カラムの使いどころは、2カラム・3カラムの使いどころでも紹介しています。
非公開で保存し、プレビューで確かめる
- 「公開 / 非公開」で「非公開」を選び、「保存する」を押します。Smart Agent Blogの記事編集画面には自動保存がないため、作業の途中でもこまめに保存します。
- 保存すると画面上部に表示される「プレビュー」を押し、確認するテーマを選びます。テーマエディターが開くので、スマートフォンの幅に切り替えて、表と商品カードの見え方を確認します。
- 問題がなければ「公開」を選んで保存し、ストアの記事ページでもう一度確認します。
操作の詳細は、ユーザーガイドの記事に内容を追加するとプレビューして公開するをご覧ください。
2つの方法の比較
| Shopify標準のエディター | Smart Agent Blog | |
|---|---|---|
| 比較表 | 「表を挿入」で作れる | 「表を作成」で作れる |
| 商品への案内 | 商品ページのURLを入力してリンクにする | 「商品を挿入」で商品名・画像・価格のカードを置ける |
| 売り切れの表示 | 自分で確認して本文を直す | 在庫がない商品のカードに「売り切れ」が付く |
| 結論を横に並べる | HTMLを書くか、表で代用する | 「2カラム」「3カラム」で並べられる |
| 向いている場合 | 表だけを入れたい、商品への案内はリンクで十分 | 比較から商品ページへの流れまでを1つの画面で作りたい |
どちらを使う場合も、比較の軸を決めることと、表の直後に結論を書くことは同じです。まず型を決めてから、作業が楽になる道具を選ぶと失敗しません。
公開前に確認すること
比較表の記事を公開する前に、次の項目を確認します。
特に見落としやすいのが、表の中の数値と商品ページの記載のずれです。仕様を変えた商品や、価格を改定した商品がある場合は、記事の表も忘れずに直します。
よくある質問
4つ以上の商品を比べたいときは、どうすればいいですか？
1つの表に並べるのは2〜3点までにして、4点以上の場合は用途や価格帯でグループに分け、グループごとに表を作ります。多くの商品をまとめて見せたいときは、Smart Agent Blogの「コレクションを挿入」で関連商品を一覧にし、表では代表的な2〜3点だけを比べる方法もあります。
表に価格を入れても大丈夫ですか？
入れて構いませんが、表の中の文字は自動では変わりません。価格を改定したら、記事の表も直す必要があります。更新の手間を減らしたい場合は、表では「価格帯」程度にとどめ、正確な価格は商品カードで見せる方法があります。価格を変えたあとは、ストアの記事ページで商品カードの表示も確認してください。
すでに公開している記事にも、比較表を追加できますか？
できます。Smart Agent Blogの記事一覧から既存の記事を開き、比較表と商品カードを追加して保存します。なお、無料プランで作成できる記事は10件までです。Shopify管理画面で作った記事も、Smart Agent Blogで開いて保存すると、この件数に含まれるようになります。詳しくは料金プランと利用上限をご覧ください。
まとめ
- 比較の軸は、読者が買う前に迷う点から選び、3〜5個に絞る
- 表は商品を列、軸を行にして、単位と書き方をそろえる
- 表の直後に「こんな人にはA」の結論を書き、そのすぐ下に商品カードを置く
- 公開前に、スマートフォンの幅で表と商品カードの見え方を確かめる
比較表は、読者を購入まで案内する導線の一部です。記事全体から購入につなげる考え方は、Shopifyブログから購入につなげる導線設計にまとめています。
まずは、お問い合わせで「どちらがいいですか？」と聞かれることの多い2つの商品を選び、比較の軸を3つ書き出すところから始めてください。商品カードの置き方をさらに詳しく知りたい場合は、Shopifyブログに商品情報を表示するには？もあわせてご覧ください。