\フォロワー増やしたい人必見/

ブログ

ブログに吹き出しを簡単に作る2つの方法【読みやすい記事を作るにはコレ】

2020年10月6日

ブログに吹き出しが入ってることありますよね?
かんすけ
アフィラ
この会話もそうだよな~
ん~難しそうだから入れるの諦めます!
かんすけ
アフィラ
喝ぁーっ!吹き出しは簡単に作れるんだぞ!
  • 吹き出しを作る方法を知りたい
  • 吹き出しを入れるメリットを知りたい
  • 吹き出しを入れる注意点を知りたい

こんな悩みを解決します。

 

本記事では「ブログに吹き出しを簡単に作る方法」を紹介。

読み終えれば、会話形式を記事に盛り込み、素敵なブログを作ることができますよ。

 

執筆者紹介

アフィラ(@afilasite)

5年目ブロガーの私が、ブログに吹き出しを作る2つの方法について書いていきますね!

 

アフィラ
ブログに載せるフリー素材を知りたい人は別で記事を書いてるぞ!

ブログの装飾画像を探している方は、[おすすめのブログ用フリー素材]で解説しているのでそちらを先にどうぞ!

 

ブログに吹き出しを作る2つの方法【読みやすい記事を作るにはコレ】

ブログに吹き出しを作る2つの方法【読みやすい記事を作るにはコレ】

ブログに吹き出しってどうやって作るんですか?
かんすけ
アフィラ
方法はいろいろあるぞ

ブログで吹き出しを入れている人を見たことはありませんか?

実は吹き出しは、写真や文字色の装飾と同様、ブログが一気に見やすくなる効果があります!

ということで本記事では、WordPressブログで吹き出しを作る方法を紹介していきますね。

  1. WordPressプラグイン
  2. WordPressテーマの搭載機能

cssコードを使う方法もありますが、長期的にはプラグインやテーマを使うのが簡単でおすすめ!

それではひとつずつ解説していきますね。

 

WordPressプラグインでブログの吹き出しを作る

プラグインってなんか怖くて入れられません
かんすけ
アフィラ
使っているWordPressテーマとの相性が合えば基本は大丈夫!

ブログの吹き出しは、WordPressのプラグインで簡単に入れられます。

テーマを変更してもプラグインを使っていれば、レイアウト崩れなどの問題が起こりづらいのが利点!

以上2つのWordPressプラグインをご紹介します。

簡単に吹き出しを入れる選択肢として、一番取り入れやすいです!

 

ブログ吹き出しプラグイン①Word Balloon

ブログ吹き出しプラグイン①Word Balloon

≫WordPressプラグイン:Word Balloon

Word Balloonというプラグインを見つけました!
かんすけ
アフィラ
WordPressのクラシックエディタで使えるプラグインだな

ブログに吹き出しを入れるプラグイン1つ目は「Word Balloon」です。

WordPressでは現在ブロックエディタ(Gutenberg)が標準エディタとなっていますが、このプラグインはクラシックエディタでも利用可能。

 

ブログ吹き出しプラグイン①Word Balloon

プラグインを入れるには、ダッシュボード左端のプラグイン⇒新規追加をクリック。

 

ブログ吹き出しプラグイン①Word Balloon

検索窓に「Word Balloon」と入力して、今すぐインストール⇒有効化をクリック。

 

ブログ吹き出しプラグイン①Word Balloon

すると、投稿画面に吹き出しのマークが出現します。

 

例えば左の吹き出しをクリックすると、吹き出しの挿入画面になります。

 

ブログ吹き出しプラグイン①Word Balloon

「セリフを入力」の部分に文字を入れると自動で吹き出しが作成されますよ!

無料版ではアバター画像を3つ登録可能。

 

有料版はアバター登録数無制限で、吹き出しやアイコンの色をカスタマイズできます。

 

ブログ吹き出しプラグイン②LIQUID SPEECH BALLOON

ブログ吹き出しプラグイン②LIQUID SPEECH BALLOON

≫WordPressプラグイン:LIQUID SPEECH BALLOON

LIQUID SPEECH BALLOONっていうプラグインも見つけました!
かんすけ
アフィラ
ブロックエディタで使いやすいプラグインだな

ブログに吹き出しを入れるプラグイン2つ目は、「LIQUID SPEECH BALLOONです。

 

Word Balloonと比べると、ブロックエディタ(Gutenberg)で使いやすいプラグインです。

使い慣れたエディタが

クラシックエディタなら、Word Balloon

ブロックエディタなら、LIQUID SPEECH BALLOON

このように使い分けるといいでしょう。

 

プラグインを追加し有効化すると、投稿画面に「フキダシ」ボタンが現れます。

 

右のカラムで吹き出しのデザインやサイズを変更できます。

 

また右のカラム下部からは吹き出しの背景色、文字色も簡単に変更可能。

 

アバターを設定したい場合は、設定⇒LIQUID SPEECH BALLOONから、名前と画像を登録すると便利に使えます。

感覚的に使えるので、ブロックエディタを使っている方にはおすすめのプラグインです。

 

WordPressテーマの搭載機能でブログの吹き出しを作る

WordPressテーマの搭載機能でブログの吹き出しを作る

吹き出しが作れるWordPressテーマはありますか?
かんすけ
アフィラ
いろいろあるから2つ紹介するぞ

吹き出し機能がついているブログテーマなら、プラグインなしでも簡単に入れられます。

ここでは無料と有料のテーマを1つずつ紹介します。

どんなテーマを使うか迷ったときには、吹き出し機能がついているものを候補に入れるといいでしょう。

関連:【2020年最新】最短最速で稼ぐおすすめWordPressテーマ3選

 

無料テーマ:Cocoon

≫WordPressテーマ:Cocoon

Cocoonは無料で使えるWordPressテーマですよね
かんすけ
アフィラ
無料なのに吹き出し機能が搭載されているんだ!

Cocoonは吹き出しを入れることが出来る、WordPressブログの無料テーマ。

 

 

吹き出し挿入の仕方は、Cocoon公式に説明があります。

プラグイン追加の必要なく、無料で吹き出しを入れられるのがCocoonの利点です。

 

有料テーマ:JIN

≫WordPressテーマ:JIN

JINというテーマはどんなものなんですか?
かんすけ
アフィラ
有料テーマの中で初心者におすすめできるテーマだ

JINは有料ですが初心者に使いやすく、ブログに吹き出しも入れやすいテーマ。

 

吹き出し挿入の仕方は、JIN公式で詳しく説明されています。

 

その他、吹き出し機能を実装している有料テーマは、SANGO・賢威7・アフィンガー5(追加プラグイン)など。

[WordPressテーマ費用]の記事で有料テーマをまとめているので、こちらも参考にしてくださいね。

 

ブログに吹き出しを入れるメリット5つ

吹き出しを入れるとどんな効果がありますか?
かんすけ
アフィラ
装飾としてブログを見やすく彩ることができるぞ

ブログに吹き出しを入れることで、次の5つのメリットがあります。

装飾として吹き出しをうまく取り入れると、読みやすいブログになりますよ!

 

メリット①文字を羅列するよりも華やかな記事になる

吹き出しに入れなくても文字だけでいいですよね?
かんすけ
アフィラ
文字を吹き出しに変えるだけで華やかになるぞ!

ブログの装飾として吹き出しを活用すると、華やかな記事をつくれます。

実際、私も上のように吹き出しを使ってますが、文字ばかりの文章よりは読みやすくなっているかと。

 

キャラアイコンなどを使って、ブログ記事全体を読みやすくしていくといいですよ!

 

メリット②自分の気持ちを込めて記事を書ける

吹き出しに何を書けばいいでしょう?
かんすけ
アフィラ
自分の気持ちを乗せて書けばいいぞ!

ブログの吹き出しは、自分の発言として画像を入れて使えます。

吹き出しに自分の言葉を入れられるので、伝えたい思いを乗せることが可能。

 

アフィラ
ブログ初心者にわかりやすく情報を伝えたいんだ!

というような熱い思いも、より感情的に表現できるようになりますね。

 

メリット③堅い内容でも和らげることが出来る

どうしても堅い文章になっちゃうんです
かんすけ
アフィラ
そんなときは吹き出しだ!

ブログに吹き出しを入れることで、印象を柔らかく変えることができます。

堅い記事は読みづらくて離脱率が高くなってしまう…。

 

そんな時、キャラクターの吹き出しなどを使うと、読み手にも受け入れられやすい文章になりますね。

 

メリット④会話形式なら楽しく読める

会話形式のメリットってなんですか?
かんすけ
アフィラ
テンポよく文章を進めることが出来ること

ブログに吹き出しが会話形式になっていると、テンポが軽快になります。

人物を複数登場させられるので、簡単な会話形式にすると読み進めやすくなるのが利点。

 

最近だとビジネス書で「マンガでわかる〇〇シリーズ」が流行っていますが、ブログ記事も同じ。

文章だけでなく、装飾・画像・吹き出しでわかりやすく伝えるコンテンツが求められるようになってきていますよ!

 

メリット⑤読者の気持ちを代弁できる

吹き出しでどんなことを書けばいいですか?
かんすけ
アフィラ
悩んでいる読者になりきって書くといいぞ

ブログに吹き出しを入れるとき、読み手のことを考えると効果的です。

どんな質問が来るかを想定して、読者の代弁者を登場させるといいでしょう。

 

例えば私のブログでは、かんすけ君がブログ初心者として質問をしてくれます。

僕もいい質問できるようにがんばってます!
かんすけ

あなたが誰に向けて書いているか(ペルソナ)をわかりやすくできますよ!

 

ブログに吹き出しを入れるときの4つの注意点

ブログに吹き出しを入れるときの4つの注意点

ブログに吹き出しを入れるときの注意点はありますか?
かんすけ
アフィラ
4つ紹介するぞ

メリットが多い吹き出しですが、便利な一方で正しく使わないとデメリットになります。

今回は吹き出しを使う際の4つの注意点を紹介します。

吹き出しを作るのに気を付けたい点を、ひとつひとつ解説していきますね。

 

注意点①吹き出しの中身を長文にしない

吹き出しに書きたい内容がたくさんあるのでいっぱい書いてみます。今日アフィラさんに質問したいことはブログについてです。ブログを始めるにあたってどんな準備をしようか迷っているんですが教えてもらえませんか?それから…
かんすけ
アフィラ
ちょっと!長すぎて読みづらい!

ブログに挿入する吹き出しの中身は簡潔にしましょう。

上の吹き出しのかんすけ君のように、何段にも改行されるような長文は不向き。

 

内容を簡潔に表す一行の吹き出しが基本です!

(※インタビュー記事は別)

 

注意点②吹き出しの数が多い

喋りたいことがたくさんあるんで吹き出したくさん使います!
かんすけ
アフィラ
多くしすぎると逆に読みづらいぞ

吹き出しが便利だからとあまりに多くすると、目線が左右に動いて読みづらくなります。

何ターンも続く長い会話を作成するのは、ブログには逆効果。

 

多くても2往復に収めるのが効果的だと考えています!

 

注意点③会話が成り立っていない

アフィラさん!今日は何を食べましたか?
かんすけ
アフィラ
ブログってめちゃくちゃ面白いんだよな~

吹き出しの中で会話が成り立っていないと、読者に違和感を与えます。

極端な例ですが、上の会話はご覧の通り崩壊していますね。

 

吹き出しの会話が成り立っているかを、投稿前にプレビューで確認するクセをつけましょう。

 

注意点④登場人物が多すぎる

僕はかんすけです。
かんすけ
アフィラ
私はアフィラだ。

ブログの吹き出しに色んな人物が出てくると、読み手が混乱する恐れがあります。

例えば4人以上登場人物がいると、ブログに初めて訪れた人は覚えきれずに読むのをやめてしまうかも。

 

多くても3人程度に留めるのが良いでしょう。

 

ブログに吹き出しを簡単に作る2つの方法まとめ

ブログに吹き出しを簡単に作る2つの方法まとめ

まずは自分のブログに合った吹き出しを作ります!
かんすけ
アフィラ
続けやすい方法を選ぶのが大事だ!

本記事では、ブログの吹き出しを簡単に作る方法を解説してきました。

重要なポイントをおさらいすると下記のとおりです。

ココがポイント

  1. ブログの吹き出しはプラグインやテーマで簡単に作れる
  2. ブログの吹き出しは装飾としてメリットを得られる
  3. 吹き出しを正しく使わないと読者が離れるので注意

 

ブログに吹き出しを入れるのは全然難しくないです。

少しのコツでブログを読みやすくできるので、すぐに取り入れてみましょう。

今すぐできる具体的TODO

具体的TODO

  • ブログに吹き出しを作るプラグイン・テーマをインストールする
  • 読者をイメージしたキャラクターを考える
  • 吹き出しに合った簡潔な一文を考える

キャラクターが話しているオリジナルアイコンを作ってみたい人は、[アイコン無料素材サイト]の記事にまとめてあります。

Twitterなどのアイコンにも応用できるので、読む価値ありですよ!

 

アフィラの小言

アフィラ
吹き出しが当たり前の時代がやってきた

ブログの吹き出しは、以前はあまり見かけないモノでした。

ここ2年ほどで、吹き出しを誰でも簡単に使えるようになり、どのブログにも吹き出しが出てくるのが辺当たり前になってきています!

 

ブログの読みやすさを追及する時代がやってきたので、吹き出しやその他のコツを使って、読者が読みやすいブログを作っていきましょう!

 

Twitterで使えるアイコン無料素材サイト55個【完全保存版】

ブログ書き方のコツ15個を5年目ブロガーが解説【執筆スピードUP】

-ブログ

© 2023 作業ロケット Powered by AFFINGER5