吹き出しを使って記事を読みやすくするプラグイン「Word Balloon」を徹底解説!

こんな悩みはありませんか?

  • 単調にならないように、記事にアクセントを付けたい!
  • 離脱率が高いので、記事の書き方を変えたい!
  • 説明をわかりやすくしたい!

人に読んでもらう文章は、丁寧な言葉で分かりやすく書きたいですよね!インターネットビジネスラボの記事を書く時には、常に「わかりやすい言葉」「間違いのない言葉」「違和感のない言葉」を心がけています。

でも、文章に気を使いすぎると、説明が回りくどくなっちゃう!

そう思っている方がいれば、その気持ち、痛いほどわかります。言葉に気を付ければ気を付けるほど、回りくどくなり、説明したい内容から遠ざかることもしばしばあります。

丁寧な文章よりも、ややくだけたの表現のほうが読者に伝わりやすい場合もあります。

 

そんな時は、文中にこんな感じの吹き出しを使うのも効果的です。

「ツッコミ」「合いの手」などの適切な内容の吹き出しは、記事がぐっと面白くなるし、詳しい説明に加えてあなたの主観的なコメントができたり、会話風の記事が書けたりと、表現の幅も広がります。

今回は、吹き出しをWordPressで使えるようにするプラグイン「Word Balloon」の導入方法や使い方、メリットについて徹底解説します!

もくじ

1. 吹き出しの使い方

Googleの検索エンジンで上位に表示されるためには、読者にとって有益な情報を発信することが良いとされています。

有益な情報を書こうとすると記事が長くなってしまいますが、長い記事は最後まで読んでもらう工夫がないと、ユーザーは記事を読むのを途中でやめてしまいwebサイトから離脱してしまいます。

吹き出しを使うと単調な文章にインパクトを与えたり、ユーザーの共感を得られたりとさまざまな効果が期待できます。

1-1. 吹き出しのメリット

吹き出しの効果として、サイト全体の印象をやわらげて、見やすくする効果があります。特に、難しい内容を取り扱っている記事や長い文章は、どうしてもユーザーに読みづらさを感じさせてしまいます。

そんな時に吹き出しを適切に使用することで、単調な文章にインパクト抑揚をつけたり、難しい雰囲気をやわらげたりすることができます。

その他にも、下記のようなメリットが挙げられます。

  • アバター(キャラクター)がしゃべることで、情報を一方的に与えている印象を軽減できる
  • ツッコミや、合いの手を入れ、記事を面白くできる
  • 記事の目的や内容を自分の言葉で説明できるので、より分かりやすくなる

1-2. 吹き出しを効果的に使うには

吹き出しのメリットを最大限生かすために、吹き出しは効果的に使用しましょう。具体的な方法は下記の通りです。

1-2-1. よくある質問に答えるのに効果的

吹き出しは会話のような展開で記事が書けるので、質問者と回答者のアバター設定をしておけば、一般的な疑問やよくある質問に答える際に便利です。

ここに注意!

吹き出しの文章が長くなると逆に読みづらいので、コメントのように簡潔に書くことが大切です。

1-2-2. 感情を伝えるのに効果的

吹き出しは、文章では表現しにくい「怒り」「悲しみ」「喜び」などの表現を表すのに適しています。

文章の行間に吹き出しを使用すれば、あなたがどんな気持ちでその文章を書いているのかを表現できます。

ここがポイント!

使えるアイコンや吹き出しのデザインなど、使用可能なものはプラグインやテーマによって違うので、自分の使いたいイメージのものがあるかどうかを導入する前に確認しましょう。

1-2-3. 記事の冒頭に効果的

読者に最後まで記事を読んでもらうには、どうすればいいの?

記事の導入部分では「このwebサイトを読めば、サイト読者が抱えている問題が解決ができる」ということを簡潔に伝えることがとても重要です。

サイト訪問者の判断は非常に早く、記事を読み進めてもらえるかどうかは導入部分で決まってしまいますので、導入部分に吹き出しを使って簡潔に表現することは、とても効果的です。

1-3.吹き出しをwebサイトに取り入れるには?

吹き出しをWordPressで使えるようにするには下記の3つの方法があります。

  1. J-Queryと呼ばれるJavaScriptライブラリをwebサイトに導入する方法
  2. 吹き出し機能のあるWordPressテーマを導入する方法
  3. 「Word Balloon」のようなWordPressプラグインを使う方法

2. 「Word Balloon」のメリット

「Word Balloon」はブロックエディタGutenbergに対応しており、日本語で書かれているため、非常に使いやすいです。また、デザインも非常に豊富なため、あなたの思い描くイメージに合った吹き出しが選べます。それ以外にも下記のようなメリットがあります。

  • 更新間隔が短く最新のWordPressアップデートにも対応しているので安心
  • アバターや吹き出しに動作や音などがつけられているのがユニーク

ここに注意!

吹き出しのアバターは3つまでしか設定できないので、多くのアバターを使いたい方には不十分です。

3. 「Word Balloon」の導入方法

「Word Balloon」はWordPress公式プラグインなので、「WordPress管理画面>プラグイン>新規追加」から簡単にインストールできます。

右側のキーワード検索テキストボックスで「 Word Balloon 」と検索すると1番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。

インストール済みプラグイン一覧に「Word Balloon」 が表示されていればインストール完了です。

4. 「Word Balloon」の設定方法・使い方

「Word Balloon」の無料版は3つのアバターを使って、違う立場からのコメントを行間に入れたり、特殊効果を使って感情を表したりできます。

この章では「Word Balloon」の設定方法や使い方、注意点を徹底解説します!

4-1. 「Word Balloon」プラグインの設定方法

「Word Balloon」の設定はとてもシンプル!最大3つのアバターを登録するのがメインの作業です。

アバターの登録もとても簡単です。名前とメモを入力して、メディアから写真を選択すれば完了です。

登録されたアバターはリストで表示されますので、ショートコードで吹き出しを使う場合には、このリストのIDを確認します。

アバター登録以外は、初期設定のままでOK!

設定しようとすればメンバーごとに「Word Balloon」の設定や使用のアクセス権限を変更できます。

4-2. 「Word Balloon」の操作方法

「Word Balloon」の吹き出しは、

  • 文章をショートコードで囲む方法
  • Word Balloonブロックを操作する方法

2種類があります。

4-2-1. ショートコードでの操作方法

「Word Balloon」の基本のショートコードは下記の通りです。

[word_balloon]コメント...[/word_balloon]

このままだとアバター未設定の「ミステリーマン」のコメントになるので、オプションを追加して吹き出しを装飾します。

  • id=2 : 設定したアバタターをidで選択
  • position=”L” : ”L”と”R”でアバターの位置を左右いずれかで指定
  • size=”L” : アバターのサイズを”S”,”M”,”L”の3段階で指定
  • balloon=”talk” : 吹き出しタイプを指定
  • name_position=”under_avatar” : 名前を表示する場所を指定
  • name=”false” : ”true”と”false”で名前を表示するか指定
  • radius=”true” : ”true”と”false”でアバターを丸く切り抜くか指定
  • avatar_border=”false” : ”true”と”false”でアバターの境界に線を設定
  • avatar_shadow=”true” : ”true”と”false”でアバターの影つけを指定
  • balloon_shadow=”true” : ”true”と”false”で吹き出しの影を指定

基本のショートコードにオプションを組み合わせると下記のようになります。

[word_balloon id=2 position="R" size="L" balloon="talk" name_position="under_avatar" name="false" radius="true" avatar_border="false" avatar_shadow="true" balloon_shadow="true"]こんにちは[/word_balloon]

4-2-2. Word Balloonブロックからの操作方法

Word Balloonブロックを使えば、アバターや吹き出しのデザインをプレビューしながらの操作が可能です。

ブロックエディタからWord Balloonブロックを呼び出すには、「一般ブロック」か「よく使うブロック」の中から選択します。

Word Balloonブロックでは、右側のメニューからアバタ―の選択や吹き出しのデザインなどを詳しく設定できます。

Word Balloonブロックの右側メニューから設定できる項目は、下記のとおりです。

  1. 基本設定 : アバターや吹き出しのデザインを選択
  2. アバター : 切り抜きや大きさを変えることでアバターをアレンジ
  3. 吹き出し : 色や大きさ、デザインを変えることで吹き出しをアレンジ
  4. アイコン : アバタ―につける怒りマークなどのアイコン
  5. 効果 : アバターや吹き出しに動きを加える効果
  6. フィルター : アバタ―や吹き出しに視覚効果でアレンジ
  7. ステータス : サウンドや注釈で吹き出しをアレンジ
  8. 高度な設定 : 追加CSSを使ってデザイン

4-3. 「Word Balloon」の特殊効果がスゴイ

「Word Balloon」は標準で画面のスクロールにあわせてコメントをスライドさせる特殊効果がありますが、オプションからさまざまな特殊効果を指定できます。

「Word Balloonブロック右側メニュー > 効果」からアバター、アイコン、吹き出しにそれぞれ特殊効果を設定できます。

4-4. 「Word Balloon」の注意事項

「Word Balloon」や吹き出しの使い方で注意することは次の通りです。

4-4-1. 「Word Balloon」の面白すぎる特殊効果に注意

このプラグインは吹き出しやアバターに、動きやサウンドといった特殊効果をつけられます。

特殊効果によってはかなり激しい動きも用意されていますが、面白いからと言って多く使うと画面が見づらくなって記事からの離脱にもつながりかねません。

ここに注意!

特殊効果をつかうなら、1記事につき1か所程度にとどめましょう。

4-4-2. 吹き出しを使いすぎるのは、むしろ逆効果

吹き出しだけで構成されている記事をたまに見かけますが、吹き出しだけで記事を書いてしまうと要点が分かりにくくなりますのでやめましょう。

4-4-3. アバターの画像サイズに注意

あまり大きな画像を使うと記事の読み込みに時間がかかり、読者が記事から離脱してしまう原因になるので、適切なサイズの画像を使いましょう。

ここがポイント!

アバターに使用する画像サイズは512px以下が適切です。

4-4-4. アバターの画像の著作権に注意

「Word Balloon」の注意事項というよりは一般的な注意点ですが、アバター画像に使う写真やイラストには著作権に注意しましょう。

自分が書いたイラストや自分の写真をアバターに使うのは問題ありませんが、間違っても許可をとっていない他人やタレントの写真、漫画のイラストなどを使うのはやめましょう。

5. まとめ

吹き出しを使うことでアバターの会話が展開できたり、あなたの主観的な意見が書けたりするので文章が読みやすくなり、読者からの共感も得られやすくなります。

プラグイン「Word Balloon」を使えば、すぐにでも吹き出しを使った記事が書けますし、使いこめば特殊効果を使って、さまざまな感情を表現することも可能です。

繰り返しますが、使い過ぎは逆効果なので、そこだけ要注意です!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ