SWELLのふきだしブロックの使い方|会話形式で読みやすい記事を作るコツ

SWELL ふきだしブロックの使い方と会話形式で読みやすい記事の作り方

こんにちは "osaboo"osabooです。"@osaboo_Bot"

ふきだしブロックを使えば、会話形式で読みやすく、やさしく伝わる記事が作れるようになります。

Question

会話形式って逆に読みにくくならない?
ふきだしの使いどころがよくわからない…

SWELLの「ふきだしブロックってどう使うの?」「会話形式の記事ってどうやって作るの?」

そんな疑問を持っていませんか?

ふきだしブロックは、文章をやさしく・わかりやすく伝えるのにとても便利な機能です。

うまく使えば、読者の理解度や滞在時間もグッと伸びます。

この記事では、SWELLのふきだしブロックの使い方を初心者向けにわかりやすく解説しながら、読みやすい記事を作るコツまでご紹介します。

こんな人におすすめ
  • SWELLのふきだしブロックの使い方を知りたい
  • 会話形式の記事を書いてみたい
  • 読みやすくやさしい文章にしたい
  • 記事の滞在時間や読みやすさを改善したい
この記事でわかること
  • SWELLのふきだしブロックの基本的な使い方
  • ふきだしセットの作成方法と活用手順
  • 読みやすい会話形式の記事を作るコツ
  • ふきだしを使った効果的な活用方法

「これなら続けられそう」と思えるテーマを選ぶのが、実は一番重要です。

目次 "Contents"

SWELLのふきだしブロックとは?

ふきだしブロックとは、会話形式で文章を表示できる機能です。

たとえば以下のように使えます。

文章だけ(読みにくい)

「なるほど、簡単ですね」

「そう、ここがポイントです」

ふきだし(会話形式で読みやすい)

Question

なるほど、簡単ですね

osaboo

そう、ここがポイントです

このようにふきだしを使って“会話形式”にすることで、次のメリットがあります。

  • 読みやすくなる
  • 感情が伝わりやすい
  • 難しい内容でも理解しやすくなる

特に初心者向けの記事では、ふきだしを使うだけで一気に読みやすさが向上します。

ふきだしセットの作成方法

毎回設定するのが面倒な場合は、「ふきだしセット」を作成しておくのがおすすめです。

あらかじめ人物アイコンや色を登録しておけば、ワンクリックで呼び出せるようになります。

また、ふきだしブロックでは「画像」や「表示スタイル」も設定可能です。
ここで設定した内容は、ふきだしブロック追加時のデフォルトとして反映されるため、毎回の調整を省いて効率よくカスタマイズできます。

設定できる項目は以下のとおりです。実際の画面とあわせて確認していきましょう。

SWELL ふきだしブロックの設定箇所を表示した投稿(エディター)画面のプレビュー

ふきだしセットとは?

ふきだしセットとは、あらかじめ「アイコン・名前・デザイン」を登録しておける機能です。

通常、ふきだしブロックを使うたびに毎回アイコンや色を設定する必要がありますが、ふきだしセットを作っておけばワンクリックで呼び出せるようになります。

たとえば「解説役」と「質問役」の2パターンを登録しておけば、会話形式の記事もスムーズに作成できます。

作業効率が上がるだけでなく、記事全体のデザインに統一感が出るのも大きなメリットです。

ふきだしセット作成手順

ふきだしセットを追加してオリジナルのふきだしブロックを作ります。

WordPress管理画面からの作業になります。

ふきだしセット一覧を表示

Menu『WordPress管理>ダッシュボード>ふきだし』をクリックします。

以下の「ふきだしセット一覧」の画面が表示されます。

『新規ふきだし追加』をクリックします。

SWELL ふきだしセット一覧画面(WordPress管理画面)

この画面で設定できる内容を簡単に解説します。ふきだしを追加した後の編集等に役立ちます。

ふきだしセット一覧でできること
  • ショートコードを表示する
  • このセットを複製する
  • このセットを削除する
  • 次に移動(ふきだし領域をマウスオーバー ➡︎ アイコン表示)
SWELL ふきだしセット一覧画面の詳細設定箇所を示した画像

ふきだしセットを新規登録

以下の画面が表示されたら、ふきだしセットを登録していきましょう。

SWELL ふきだしセットを新規登録(WordPress管理画面)

新規登録手順詳細は以下の通りです。

ふきだしセット新規登録手順
  • ふきだし用の画像を選択
  • デフォルトスタイルの設定
  • ふきだしセットのタイトルを入力
  • 登録
SWELL ふきだしセットの新規登録手順を示した詳細図(WordPress管理画面)

『ふきだしセットの一覧に戻る』をクリックして完了です。

エディター設定でふきだしカラーを変更する方法

エディター上でふきだしの色を設定できます。
背景色や枠線の色を変更することで、会話の役割や重要度をわかりやすく表現できます。

ここでは、投稿(エディター)上でふきだしのカラーを変更できる基本設定を行います。

エディター設定での変更は、すべてのふきだしブロックに反映されます。統一感のあるデザインにしたい場合に便利です。

WordPress管理画面からの作業になります。

Menu『WordPress管理>ダッシュボード>SWELL設定>エディター設定』をクリックします。

エディター設定が表示されたら、『ふきだし』タブをクリックします。

SWELL エディター設定画面(WordPress管理画面)

エディター設定では、カラーセットの背景とボーダーの色が設定できます。

SWELL エディター設定画面の詳細を示した図(WordPress管理画面)

設定を変更したら、最後に「変更を保存」をクリックして完了です。

ふきだしカラーが反映される場所です。投稿(エディター)画面からワンタッチで変更できます。

SWELL ふきだしカラーの反映箇所(投稿エディター画面)

ふきだしブロックの使い方【3ステップ】

作業は投稿画面(エディター)で行います。

ふきだしブロックの追加手順【初心者向け】

STEP
ブロックを追加する

投稿(エディター)画面で『+(ブロックインサーター)』をクリックします。

  • +(ブロックインサーター)
WordPressエディター画面でブロック挿入ツールを切り替えている様子
STEP
ブロックタブから「ふきだし」を選択する

ブロック挿入ツールが『x』切り替わり 以下の画面が表示されます。

SWELLブロックから『ふきだし』を選択して投稿(エディター)画面に追加します。

SWELL ブロックタブから「ふきだし」を選択している画面
STEP
ふきだしブロックの追加完了

投稿(エディター)画面に『ふきだし』ブロックが表示されます。

詳細設定(ふきだしセット・カラー設定・ふきだし設定)が未設定の状態で追加されます。

挿入直後では、以下のように表示されます。

ふきだしセットをクリックするだけで、ワンタッチで追加できます。

SWELL ふきだしブロックを追加した状態の投稿エディター画面

ふきだしブロックの設定方法(記事ごとに変更できる項目)

ふきだしブロックを追加すると、以下のように表示されます。
専用のツールバーが表示され、青枠で囲まれている部分がブロックの編集エリアです。

この画面が表示されていれば、正常に追加できています。

SWELL ふきだしブロック追加後のツールバーを示した画面

設定メニューは、投稿(エディター)画面の右側にある「設定 > ブロック」タブから確認できます。

表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。

投稿(エディター)画面右側の設定アイコンをクリックしてブロックタブを表示する手順画面
yajirusi-sita-80x40
SWELL ふきだしブロックを追加した投稿エディター画面の設定メニュー

詳細設定項目

SWELL ふきだしブロックのエディター設定画面(ふきだしセット)
ふきだし
ふきだしセット

登録したふきだしセットを選択

  • サンプル
    • 2種類の吹き出しセットから選択できます。

ふきだしセットを新規登録」参照

SWELL ふきだしブロックのエディター設定画面(カラー設定)
カラー設定
  • SWELLエディター設定のふきだしカラーから選択
SWELL ふきだしブロックのエディター設定画面(ふきだし設定)
ふきだし設定
  • ふきだしの形
    • 発言 / 心の声
  • ふきだしの向き
    • 左 / 右
  • ふきだしの線
    • なし / あり
  • アイコンの丸枠
    • 枠なし / 枠あり
  • スマホでのテキストとアイコンの並び
    • 横並び / 縦並び
  • アイコンの下に表示する名前
    • 任意で設定可能
  • アイコン画像
    • 任意で設定可能
SWELL ふきだしブロックのエディター設定画面(デバイス制御・余白・高度な設定)
デバイス制御
  • 表示するデバイスサイズ
    • SP / PC / クリア(選択 / 切替)
ブロック下の余白量
  • ドロップダウンメニューから選択
高度な設定

ふきだしブロックのカスタマイズ表示イメージ

ふきだしのカスタマイズは自由度が高く、すべてを紹介しきることはできませんが、主に以下のような設定が可能です。

また、SWELLのエディター設定で背景色やボーダーの色を変更すれば、よりカラフルにカスタマイズできます。

ふきだしの向き:左

ふきだしの向き:右

osaboo

カラー設定:グレー

osaboo

ふきだしの形:発言

osaboo

カラー設定:グリーン

osaboo

ふきだしの形:心の声

osaboo

カラー設定:ブルー

osaboo

吹き出しの線:なし

osaboo

カラー設定:レッド

osaboo

アイコンの丸枠:なし

osaboo

カラー設定:イエロー

osaboo

スマホでのテキストとアイコンの並び:縦並び

読みやすいふきだしの使い方のコツ

ふきだしは、うまく使えば記事の読みやすさを大きく向上させる便利な機能ですが、使い方を間違えると逆に読みにくくなることもあります。

ここでは、読みやすい記事にするための“ふきだしの使い方のコツ”を具体的に解説します。

使いすぎない(最重要)

ふきだしは目立つ分、使いすぎると画面がごちゃつき、かえって読みにくくなります。

特に、すべての文章をふきだしにしてしまうと、強調したいポイントが埋もれてしまいます。

目安としては「要点だけに使う」のがベストです。

会話は短く・テンポよく

ふきだし内の文章は、できるだけ短くまとめましょう。

長文になると通常の文章よりも読みにくくなり、テンポも悪くなります。

  • 一言で伝える
  • 改行して見やすくする

この2つを意識するだけで、読みやすさが大きく変わります。

キャラクターは増やしすぎない

登場人物が多すぎると、誰が何を話しているのか分かりづらくなります。

基本は「2人まで」にすると、会話の流れがスムーズになります。

「解説役」と「質問役」の2パターンに分けると、初心者にも理解しやすい構成になります。

役割を明確にする

ふきだしごとに役割を決めておくと、読者が内容を直感的に理解しやすくなります。

  • 解説:重要なポイント
  • 質問:読者の疑問
  • 注意:ミスしやすい点

色やアイコンも役割ごとに統一すると、さらにわかりやすくなります。

重要な部分だけに使う

ふきだしは“強調”の役割も持っています。

そのため、すべての内容に使うのではなく、

  • 結論
  • 要点
  • 注意点

など、読者にしっかり伝えたい部分に絞って使うのが効果的です。

通常テキストとバランスよく使う

ふきだしだけで構成された記事は、単調になりやすく、逆に読みにくく感じることがあります。

通常の文章と組み合わせることで、リズムが生まれ、最後まで読みやすい記事になります。

「テキスト → ふきだし → テキスト」の流れを意識すると自然です。

スマホでの見やすさも意識する

多くの読者はスマホで記事を閲覧します。

ふきだしは画面幅を使うため、長文になると一気に読みにくくなります。

  • 1ふきだし=短く
  • 改行をしっかり入れる

この2点を意識するだけで、スマホでも快適に読めるようになります。

ふきだしは「使うだけ」で効果が出るわけではなく、“使い方”で読みやすさが大きく変わる機能です。
ポイントを押さえて活用すれば、読者にとって理解しやすく、最後まで読まれる記事に仕上がります。

ふきだしブロックの活用例

ふきだしブロックは、使い方次第でさまざまなシーンに活用できます。

ここでは、実際の記事でよく使われる代表的な活用例をご紹介します。

初心者向けの解説記事

難しい内容をそのまま説明すると、読者が途中で離脱してしまうことがあります。

そこで、ふきだしを使って会話形式にすると、

「なるほど、こういうことか!」
「ここがポイントなんですね」

といった流れが作れ、理解しやすくなります。

特にハウツー記事や設定解説との相性が抜群です。

会話形式のレビュー・体験談

商品レビューや体験談では、実際のやり取りのように見せることで臨場感が生まれます。

  • 良かった点
  • 気になった点
  • リアルな感想

これらをふきだしで表現することで、読者にとってイメージしやすくなります。

読者の疑問を代弁する

読者が感じる疑問を、あらかじめふきだしで表現するのも効果的です。

「これって本当に必要なの?」
「初心者でもできるの?」

こうした疑問を先回りして提示することで、読者の共感を得やすくなります。

注意喚起・重要ポイントの強調

見落としやすいポイントや注意点は、ふきだしを使って目立たせるのがおすすめです。

「ここは間違えやすいので注意してください」
「この設定は必ず確認しておきましょう」

通常テキストよりも強調されるため、重要な情報がしっかり伝わります。

まとめ・結論の強調

記事の要点や結論をふきだしで伝えると、印象に残りやすくなります。

「結論:ここだけ覚えておけばOKです」
「まずはこの設定から始めましょう」

読者に行動を促したいときにも効果的です。

ふきだしブロックは、ただの装飾ではなく「伝え方を変えるツール」です。

うまく活用すれば、読みやすさ・理解度・満足度すべてを高めることができます。

ふきだしブロックはSEOに影響ある?

結論から言うと、ふきだしブロック自体が検索順位に直接影響することはありません。

ただし、使い方次第でSEOに良い影響を与える重要な要素になります。

なぜ間接的にSEOに効果があるのか

ふきだしブロックを使うことで、記事の「読みやすさ」が向上します。

その結果、以下のようなユーザー行動の変化が期待できます。

  • 滞在時間が伸びる
  • 直帰率(離脱率)が下がる
  • 最後まで読まれやすくなる

これらは検索エンジンが評価する“ユーザー満足度”に関わる重要な指標です。

ふきだしを適切に使うことで「評価されやすい記事」につながります。

よくある質問(FAQ)

ふきだしは使いすぎても大丈夫?

使いすぎると逆に読みにくくなるので、要点だけに使うのがおすすめです。

スマホでも崩れませんか?

SWELLはレスポンシブ対応なので、基本的に問題ありません。

どんな記事に向いていますか?

初心者向け解説・レビュー記事・体験談などに特におすすめです。

正直、迷っている時間が一番もったいないです。

まとめSWELLのふきだしブロックの使い方|会話形式で読みやすい記事を作るコツ

SWELLのふきだしブロックを使えば、会話形式で読みやすい記事を作ることができます。

使い方はシンプルですが、ふきだしセットやデザイン設定を活用することで、効率よく統一感のある記事に仕上がります。

使いすぎには注意しつつ、要点だけに活用するのがポイントです。

まずは実際に使って、読みやすさの変化を体感してみましょう。

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"