商品写真と説明を交互に縦に並べていくと、記事はどんどん長くなります。色違いを3つ紹介するだけで、読者は何度もスクロールを行き来することになります。
結論から言うと、2つのものは2カラム、3つの選択肢は3カラムで横に並べると、ひと目で比べられる記事になります。ただし横並びは1記事に2〜3か所までにとどめ、公開前には必ずスマートフォンで見え方を確認します。
Shopify標準のエディターには、写真と文章を横に並べるボタンはありません。Smart Agent Blogなら、挿入メニューの「2カラム」「3カラム」で枠を追加し、中に画像や文章、商品カードを入れられます。この記事では、架空の器のストアの記事例を使って、使いどころと入れ方を説明します。
- 2カラムと3カラムの使い分け（画像＋説明、比較、色違い）
- 横並びを入れすぎないための目安
- 架空のストアの記事例で見る完成イメージ
- Smart Agent Blogで2カラム・3カラムを入れる手順と、スマートフォンでの確認方法
写真と説明を縦に並べるだけの記事で起きること
写真と説明を上から順に並べる書き方は、1つの商品を紹介するなら問題ありません。困るのは、複数のものを比べてほしい記事です。
- 比べにくい：Sサイズの説明を読んでからLサイズまでスクロールすると、最初の内容を忘れてしまいます。
- どの写真の説明かわかりにくい：写真と文章が離れると、読者は対応を探しながら読むことになります。
- 記事が長くなる：色違いを3つ並べるだけで、スマートフォンでは何画面分もスクロールが必要です。
さらに、比べたあとの行き先がないことも少なくありません。Smart Agent Blogのご提案のために、2026年8〜9月に日本のShopifyストアのブログを確認した記録では、記録した88記事のうち66記事（75%）に本文から商品ページへのリンクがありませんでした。4記事に3記事は、本文から商品ページへ進めなかったことになります。横に並べて比べやすくし、その先に商品への案内を置くと、読者は迷わず選べます。
2カラムと3カラムの使い分け
横に並べる数は、「何と何を比べるか」で決めます。
2カラム：画像＋説明、2つの比較
2カラムは、次の2つの使い方が基本です。
- 画像＋説明：左に商品写真、右に特徴の箇条書きを置きます。写真と説明が隣り合うので、「どの写真の話か」が迷わず伝わります。
- 2つの比較：SサイズとLサイズ、定番品と限定品、使用前と使用後など、2つのものを同じ形式で並べます。
1列あたりの文章は3〜4行までが目安です。それ以上になるなら、横に並べずに本文で説明したほうが読みやすくなります。
3カラム：色違い・3つの選択肢
3カラムは、同じ商品の色違い・柄違いや、3つのプラン・セットを見せるのに向いています。各列に「画像・名前・ひと言」の3点だけを入れ、1列あたりの文章は1〜2行に抑えます。3カラムは1列の幅が狭くなるため、長い文章を入れると縦に細長くなってしまいます。
横並びに向かない内容
- 長い説明や手順：番号付きリストで縦に書いたほうが、順番が伝わります。
- 細かい数値の比較：サイズや容量をいくつも比べるなら、表のほうが読みやすくなります。
記事例：架空の器のストアのマグカップ記事
架空の器のストア「SOMA CERAMICS」の、定番マグの選び方の記事で見てみます（架空の例です）。
- 2カラム（画像＋説明）：左に写真、右に容量・対応・重さの箇条書き。写真を見ながら特徴を読めます。
- 2カラム（比較）：SとLを同じ形式で並べ、サイズと向いている使い方を1行ずつ書いています。
- 3カラム（色違い）：3色を「画像・色名・ひと言」だけで並べています。文章を短くしているので、3列でも詰まって見えません。
横並びは3か所だけで、それぞれの前に見出しを置いています。最後に商品カードを置き、選んだ読者がそのまま商品ページへ進めるようにしています。商品カードの入れ方はShopifyブログに商品情報を表示するには？をご覧ください。
横に並べすぎないための目安
横並びは、使うほど効果が薄れます。次の目安を守ると、記事全体がすっきりします。
列ごとに「画像→見出し→説明」の順番と分量をそろえるのがコツです。左の列だけ説明が長いと、比べるための横並びがかえって読みにくくなります。
Shopify標準エディターでできること
Shopifyの管理画面の「コンテンツ」→「ブログ記事」で使うリッチテキストエディターには、表、画像、動画、リンクなどのボタンがありますが、写真と文章を横に並べるカラムのボタンはありません。
標準エディターで比較を見せるなら、次のような方法になります。
- 画像と説明を縦に並べ、見出しで区切る
- 数値の比較は表にまとめる（標準エディターでも表は作れます）
- HTML表示に切り替えて、横並びのレイアウトを自分でHTMLとCSSで組む
最後の方法は、HTMLとCSSの知識に加えて、スマートフォンでどう見せるかも自分で考える必要があります。
Smart Agent Blogで2カラム・3カラムを入れる方法
Smart Agent Blogでは、2カラム・3カラムは挿入メニューから追加できるブロックです。流れは次の4段階です。
挿入メニューの「2カラム」「3カラム」を押す
- 2カラムの枠：点線で区切られた2つの列が追加されます。この例では、左の列に商品カード、右の列に吹き出しとコールアウトを入れています。
- 「2カラム」「3カラム」ボタン：並べたい位置にカーソルを置き、挿入メニューの「2カラム」または「3カラム」を押します。行の先頭で半角の「/」を入力し、一覧から選んでも追加できます。
各列に中身を入れる
列の中には、文章のほか、画像や商品カードなどのブロックを入れられます。画像は、本文にドラッグしたり貼り付けたりすると、Shopifyに自動でアップロードされます。
- 「画像＋説明」なら、左の列に画像、右の列に見出しと箇条書き
- 比較なら、2つの列に同じ順番で画像・名前・説明
- 色違いなら、3つの列に画像・色名・ひと言
商品を並べて案内したい場合は、列ごとに「商品を挿入」で商品カードを入れる方法もあります。並べる順番を変えたいときは、ブロックの左側に出るつまみをドラッグして移動します。
保存して、プレビューとスマートフォンで確かめる
Smart Agent Blogの記事編集画面には自動保存がありません。「保存する」を押し、「非公開」のまま画面上部の「プレビュー」を押すと、選んだテーマのテーマエディターで記事の表示を確認できます。
横並びは、画面の幅によって見え方が大きく変わる部分です。スマートフォンでの見え方はテーマによっても変わるため、プレビューで確認したうえで、公開後にも手元のスマートフォンで記事ページを開いて確かめてください。手順はプレビューして公開するをご覧ください。
公開前にスマートフォンで確認すること
パソコンできれいに並んでいても、スマートフォンでは印象が変わることがあります。公開前に次の項目を確認します。
とくに3カラムは、1列の幅が狭くなりやすいため注意が必要です。文字が詰まって見えるなら、説明を1行に削るか、2カラムに変えることを検討してください。テーマを変更したときも、横並びを使った記事は見え方を確かめ直します。
よくある質問
2カラムに商品カードを並べてもいいですか？
並べられます。2つの商品を比べる記事なら、列ごとに「商品を挿入」で商品カードを入れると、比べたあとにそのまま商品ページへ進めます。3つ以上の関連商品をまとめて見せたい場合は、「コレクションを挿入」も便利です。コレクションのブロックでは、パソコンとスマートフォンでの列数などを編集できます。
表と2カラム・3カラムは、どう使い分けますか？
写真で違いを見せたいときは2カラム・3カラム、数値や仕様を細かく比べたいときは表が向いています。たとえば色違いは3カラム、サイズごとの寸法は表、という使い分けです。
スマートフォンでも横に並んだまま表示されますか？
見え方はテーマによって変わることがあります。公開前にプレビューで確認し、公開後も実際のスマートフォンで記事ページを開いて確かめてください。どちらの見え方になっても読めるように、各列の文章は短くし、比べるポイントは本文でも一言添えておくと安心です。
まとめ
- 2つのものは2カラム（画像＋説明、比較）、3つの選択肢は3カラム（色違いなど）
- 横並びは1記事に2〜3か所まで。列ごとに順番と分量をそろえる
- 長い説明や細かい数値の比較は、番号付きリストや表のほうが読みやすい
- 公開前にプレビューで確認し、公開後もスマートフォンで見え方を確かめる
まずは、色違いやサイズ違いがある商品の記事を1本選び、比べてほしい部分を横並びにしてみてください。同じシリーズのスタッフのひと言を吹き出しに、大切な注意事項を読み飛ばされないために、Shopifyブログに動画を入れたいなら、長い記事にはShopifyブログに目次をつける3つの方法もあわせてどうぞ。記事全体の組み立てから見直すなら、Shopifyブログ記事の書き方が参考になります。