メインコンテンツまでスキップ

Shopifyブログで吹き出しを使う|スタッフのひと言で親しみを出す

読了目安 14分Smart Agent Blog 編集部
スタッフのひと言を吹き出しに。架空のアパレルストアの記事例で、サイズ表の下などにスタッフの吹き出しを置いた完成イメージ

商品の説明は正しく書けているのに、読んでいて「お店の人の顔」が見えない。ブログ記事がカタログのようになってしまうのは、店頭なら自然に添えている「ひと言」が抜けているからです。

結論から言うと、スタッフのひと言は吹き出しにすると、本文と区別されて目に留まり、記事全体が親しみやすくなります。ただし使うのは「補足」「接客で伝えている一言」「よくある勘違い」の3つの場面に絞り、見出し1つにつき1個までが目安です。

Shopify標準のエディターには吹き出しの機能がありませんが、Smart Agent Blogなら挿入メニューから吹き出しを追加し、画像を左右どちらに置くかも切り替えられます。この記事では、架空のアパレルストアの記事例を使って、使いどころと入れ方を説明します。

この記事でわかること
  • 吹き出しが向いている3つの場面と、本文に書くべきこととの分け方
  • 吹き出しを使いすぎないための目安
  • 架空のストアの記事例で見る完成イメージ
  • Smart Agent Blogで吹き出しを入れ、画像の左右を切り替える手順(画面つき)

説明だけの記事が読み進めてもらえない理由​

Smart Agent Blogのご提案のために、2026年8〜9月に日本のShopifyストアのブログを確認した記録では、記録した78記事のうち27記事(約35%)に見出しが1つもありませんでした。3記事に1記事は見出しがない状態です。区切りのない文章が続く記事は、内容がよくても途中で読むのをやめられがちです。

読み進めてもらえない理由は、区切りの少なさだけではありません。

  • 誰が書いているかが見えない:仕様と説明だけが並ぶと、ほかのお店の記事との違いが伝わりません。
  • 大事なひと言が埋もれる:「迷ったらこちら」のようなアドバイスも、本文の中にあると読み飛ばされます。
  • リズムがない:同じ調子の段落が続くと、スマートフォンでは特に長く感じられます。

見出しで話題を区切り、ところどころにスタッフの吹き出しを置くと、記事にリズムが生まれ、お店の人の声が伝わるようになります。

吹き出しの3つの使いどころ​

吹き出しは、どこにでも置けば効果が上がるものではありません。次の3つの場面に絞ると、ひと言がきちんと届きます。

吹き出しの3つの使いどころ。1補足、2接客で伝えている一言、3よくある勘違い。それぞれに例文がある

補足:本文の説明にひと言添える​

サイズ表や仕様の直後に、「迷ったら肩幅で選んでください」「身幅はゆったりめです」のような補足を置きます。本文は事実を正確に、吹き出しは判断のヒントを、と役割を分けるのがコツです。

接客で伝えている一言​

店頭や問い合わせの返信で、実際にお客様に伝えていることを吹き出しにします。「最初の1回はほかの衣類と分けて洗ってください」のように、スタッフが毎回言っている言葉は、そのまま記事の価値になります。問い合わせで何度も聞かれることがあれば、それが吹き出しの候補です。

よくある勘違いをやわらかく正す​

「アイロンが必須と思われがちですが…」のように、お客様が誤解しやすい点を話し言葉で正します。本文で「〜ではありません」と書くと強く聞こえる内容も、吹き出しにすると角が立ちません。

吹き出しにする文、本文に書く文​

吹き出しに向くのは、「人の声として伝えたいこと」です。一方、記事の中心になる情報は本文に書きます。

吹き出しに向く文と本文に書く文の比較。吹き出しはスタッフの感想、接客のアドバイス、誤解を正すひと言、2〜3行の内容。本文は仕様・サイズ・価格、手順、配送・返品などの条件、長い説明や比較

とくに注意したいのは、仕様や条件を吹き出しだけに書かないことです。価格やサイズ、配送・返品の条件は、読み飛ばされても困らないように本文や表に書き、見落とされたくない条件はコールアウトで囲みます。コールアウトの使い方は大切な注意事項を読み飛ばされないために|囲み枠の使い方で紹介しています。

記事例:架空のアパレルストアのリネンシャツ記事​

架空のアパレルストア「NUNO & THREAD」のリネンシャツの記事で、3つの使いどころを見てみます(架空の例です)。

架空のストアの記事例。リネンシャツのサイズ選びとお手入れの記事で、1サイズ表の下の補足の吹き出し、2お手入れの見出しの下の接客の一言の吹き出し(画像が右側)、3よくある勘違いを正す吹き出しに番号が付いている
架空のストアの記事例。番号は下の説明に対応しています
  1. 補足:サイズ表の直後に、選び方のヒントを置いています。数値は表に、判断のヒントは吹き出しに、と分けています。
  2. 接客で伝えている一言:お手入れの説明のあとに、店頭で毎回伝えている言葉を置いています。別のスタッフの言葉なので、画像を右側にして区別しています。
  3. よくある勘違い:誤解されやすい点を、話し言葉でやわらかく正しています。

吹き出しは見出し1つにつき1個までに抑え、最後は商品カードで商品ページへ案内しています。商品カードの入れ方はShopifyブログに商品情報を表示するには?をご覧ください。

ストアでの表示例​

Smart Agent Blogで作った記事の、実際のストアでの表示例です。前後の文章と区別され、話し言葉のひと言が目に留まります。

Smart Agent Blogで作った記事のストア表示。見出しと本文の下に、丸い画像と枠で囲まれた文章が並ぶ吹き出しが表示され、紫の枠で示されている
ストア表側の表示例(スマートフォン幅)

実際の見え方はテーマによって変わることがあります。公開前に必ずプレビューで確認してください。

Shopify標準エディターでできること​

Shopifyの管理画面の「コンテンツ」→「ブログ記事」で使うリッチテキストエディターには、太字や文字色、リスト、表、画像、動画、リンクなどのボタンがありますが、吹き出しを作るボタンはありません。

標準エディターでスタッフのひと言を目立たせるなら、次のような方法になります。

  • 太字や文字色で、ひと言を強調する
  • 「スタッフより:」と書き添えて、段落を分ける
  • HTML表示に切り替えて、吹き出しの形を自分でHTMLとCSSで作る

最後の方法はHTMLとCSSの知識が必要で、テーマによって見え方が変わるため、確認の手間がかかります。

Smart Agent Blogで吹き出しを入れる方法​

Smart Agent Blogでは、吹き出しは挿入メニューから追加できるブロックの1つです。流れは次の4段階です。

吹き出しを入れる流れ。1「吹き出し」を選ぶ、2ひと言を書く、3画像の左右を決める、4保存して確認

挿入メニューの「吹き出し」を選ぶ​

Smart Agent Blogの記事編集画面。1本文に追加された吹き出し(丸い画像と文章)、2右側の挿入メニューの「吹き出し」ボタンに印が付いている
番号は下の説明に対応しています
  1. 本文の吹き出し:画像と文章が横に並んだブロックです。この例のように、2カラムの中に置くこともできます。
  2. 「吹き出し」ボタン:吹き出しを入れたい行にカーソルを置き、挿入メニューの「吹き出し」を押します。行の先頭で半角の「/」に続けて「吹き出し」と入力し、一覧から選んでも追加できます。

文章は2〜3行を目安に、普段お客様に話すときの言葉で書きます。誰の言葉かは、吹き出しの前の文章や吹き出しの中で伝わるようにしておきます。

画像を左右どちらに置くか切り替える​

本文のブロックにマウスを重ねると、左側につまみが表示されます。

  • つまみを押すとメニューが開きます。吹き出しの場合は、ここで画像を左右どちらに置くかを切り替えられます。
  • つまみをドラッグすると、吹き出しを上下に移動できます。
  • メニューの「削除」で、吹き出しを消せます。

複数のスタッフが登場する記事では、「店長は左、スタッフは右」のように人ごとに左右をそろえると、会話のように読めます。移動したあとは、前後の文章が自然につながっているか確認してください。

見た目を変えたいときは「デザイン編集」​

挿入メニューの吹き出しには、鉛筆のアイコンが付いています。これが「デザイン編集」で、吹き出しの見た目をお店の雰囲気に合わせて変えられます。デザイン編集は有料プラン(ベーシック・プロ)の機能で、無料プランでは使おうとしたときに案内が表示されます。吹き出しを追加すること自体は、無料プランでもできます。

保存して、プレビューで確かめる​

Smart Agent Blogの記事編集画面には自動保存がありません。吹き出しを入れたら「保存する」を押し、「非公開」のまま「プレビュー」で表示を確かめます。スマートフォンで吹き出しの文章が長すぎないかも見ておきましょう。手順はプレビューして公開するをご覧ください。

吹き出しを使いすぎないための目安​

吹き出しは、少ないほどひと言が目立ちます。次の目安で数と中身を確認してください。

吹き出しを使いすぎないための目安。数は見出し1つにつき1個まで・1記事3〜5個程度、長さは2〜3行、中身は本文の繰り返しにしない・条件を吹き出しだけに書かない、見た目は同じ人を同じ側にそろえる

吹き出しが本文と同じことを繰り返しているなら、どちらかを削ります。吹き出しでしか言えない「人の声」だけを残すと、記事全体が引き締まります。

よくある質問​

吹き出しの画像は誰の写真にすればいいですか?​

記事にひと言を寄せたスタッフ本人の写真や、似顔絵のイラストなどが向いています。スタッフの写真を使う場合は、掲載について本人の了承を得てください。お店のロゴを使う方法もあります。

お客様の声を吹き出しにしてもいいですか?​

お客様の声を紹介するときは、「引用」のブロックも使えます。スタッフのひと言は吹き出し、お客様の声は引用、と使い分けると、誰の言葉かが伝わりやすくなります。いずれの場合も、実際にいただいた言葉を了承を得て使い、内容を書き換えないようにします。

無料プランでも吹き出しは使えますか?​

使えます。吹き出しの追加や画像の左右の切り替えは無料プランでもできます。見た目を変える「デザイン編集」は、ベーシック・プロの有料プランの機能です。詳しくは料金プランと利用上限をご覧ください。

まとめ​

  • 吹き出しは「補足」「接客で伝えている一言」「よくある勘違い」の3つの場面に絞る
  • 仕様や条件は本文や表に書き、吹き出しだけに書かない
  • 見出し1つにつき1個まで、1つの吹き出しは2〜3行が目安
  • Smart Agent Blogでは挿入メニューの「吹き出し」で追加し、つまみのメニューで画像の左右を切り替える

まずは、問い合わせでよく聞かれる質問を1つ選び、その答えをスタッフの吹き出しにして記事に添えてみてください。同じシリーズのShopifyブログに動画を入れたいならと写真と説明を横に並べる2カラム・3カラムの使いどころもあわせてどうぞ。記事全体の組み立てから見直すなら、Shopifyブログ記事の書き方が参考になります。

記事一覧に戻る →

Shopifyのブログ運用を、もっと効率的に。

企画・執筆・分析・リライトまで、ブログ運用をサポート。

ユーザーガイドを見るShopifyアプリストアへ ↗