【2022年11月30日更新】文章をより読みやすくなるよう改善しました。
こんにちは、T部長です!
数多くのブログで使われている「吹き出し」。
「自分のブログでも吹き出しを使ってみたい」と思っている人は多いのではないでしょうか。
そこで、この記事ではブログに吹き出しを挿入する方法やメリット・デメリット、注意点を解説します!
T部長
この記事は次のような人におすすめ!
- ブログで吹き出しを使いたい人
- 吹き出しの作り方を知りたい人
- 吹き出しの使いどころを知りたい人
吹き出しは、ブログを読みやすくする工夫の1つです。
この記事を読んで吹き出しの作り方を知り、読者にとって読みやすいブログをつくっていきましょう!
それではどうぞ!
目次
ブログの吹き出しとは
吹き出しとは、ブログの装飾の一つです。
吹き出しを使うと、実際に人やキャラクターが「喋っている風」「会話している風」に見せられます。
以下が当ブログの吹き出しです。
T部長
吹き出しは、多くのブログで取り入れられている表現方法です。
使えるようになると、ブログでの表現の幅が広がります!
吹き出しを使う3つのメリット
ブログで吹き出しを使うと、以下3つのメリットが得られます。
これらメリットを踏まえ、自身のブログで吹き出しを使うかどうか判断してください!
1.「リアルさ」を強調できる
先述のとおり、吹き出しは「人やキャラクターが話しているように見せられる」装飾です。
「著者本人が実際に話している感」を強調できるため、メッセージに説得力を持たせられます。
2.表現方法のバリエーションが増える
装飾のない記事は単調で、最後まで読み通す負担が大きいです。
吹き出しを使うことで表現のバリエーションが増え、記事の読みやすさが高まります。具体的には、吹き出しの利用には以下のような効果があります。
- 文章にテンポが生まれて読みやすくなる
- 重要な点を吹き出しにすることで、飛ばし読みでも記事のポイントを理解できる
- 補足的なメッセージを自然に配置できる
吹き出しで文章の単調さをやわらげ、スラスラと読める記事を目指しましょう!
3.メリハリをつけられる
吹き出しは「ビジュアル要素」の1つです。
‟文章疲れ”を防ぐ効果が期待できるため、「読者が記事から離脱する割合 = 離脱率」の低下に貢献するかもしれません。
基本的に文章ばかりが続く記事は疲れやすく、かつ読みにくいです。
「文章ばかりで読む気が失せた……」と、ページを閉じたり別の記事へ離脱したりした経験がある人も多いのではないでしょうか?
たとえば「文章だけの見出し」と「吹き出しを織り交ぜた見出し」で見比べてみます。
![画像:吹き出しの効果](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/04/speech-bubble-01.png)
ビジュアル要素の吹き出しは、読者にとって「箸休め」にもなります。
記事にメリハリをつけられるため、最後まで記事を読んでくれる読者を増やせる可能性があります!
ブログで吹き出しを使う際の注意点3つ
ブログで吹き出しを使う場合は、以下3つの点に気をつけましょう。
それでは、解説していきます。
1.「使い方・使う場面」を選ぶ
吹き出しは、「使い方・使う場面」が重要になる表現方法です。
使い方や場面を間違えると、前述のメリットが得られないだけでなく、読者に嫌悪感を抱かれるかもしれません。
そのため、吹き出しは最適なシチュエーションでのみ使うよう心掛けましょう!
吹き出しは、実際に人が介在しているように見せられる表現方法です。
だからこそ、吹き出しは以下のような場面での使用が適しています。
![画像:吹き出しが最適な場面](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/04/speech-bubble-02.png)
上記のシチュエーションで吹き出しを活用すれば「リアルさ」を強調でき、意見に説得力を持たせられます。
それだけでなく、嫌悪感を抱かれるおそれもないはずです。
2.吹き出しを多用しない
吹き出しが多用されている記事は、視点が左右に揺さぶられて疲れてしまいます。
逆に読みにくくなってしまうため、吹き出しの連続使用は避けるようにしましょう。
以下の画像を見ると、わかりやすいと思います。
![画像:吹き出しを多用した場合](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_39.png)
画像のとおり、吹き出しが連続すると読みにくくなります。
これは、会話形式でも同様です。
会話形式の場合、吹き出しの使用は多くても「2往復」までに留めましょう。
※インタビュー形式のコンテンツは除きます
3.テキストは短めにする
吹き出し内のテキストは、簡潔にまとめるよう心掛けてください。
テキストが長いと、非常に読みにくくなってしまいます。
とくにスマホ画面で見るとわかりやすいです。
![画像:テキストを長くした場合](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_40.png)
基本的に吹き出し内のテキストは、「2文」までに抑えるのがおすすめです。
WordPressブログでの吹き出しの作り方!
WordPressのブログに吹き出しを設ける方法は、基本的に以下の2つです。
それぞれ紹介します。
ステップ0:アイコンの準備
どちらの方法で作成する場合も、まずは吹き出しに使うアイコンを準備しましょう。
アイコンとは、ブログや運営者の特徴を表した画像のこと。
当ブログの吹き出しだと、この部分がアイコンです。
![画像:アイコンについて](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_04.png)
基本的にアイコンの作り方には、以下の2通りがあります。
- 自作する方法
- 「ココナラ」などで外注する方法
具体的な作り方に関しては、以下の記事でスクショとともに解説しています。
ぜひあわせてごらんください!
![](https://www.xserver.ne.jp/blog/wp-content/uploads/2021/10/necessity-of-icon-eyecatch-520x300.png)
WordPressのテーマを活用する方法
1つ目は、WordPressのテーマで吹き出しを作る方法です。
今回は、無料のWordPressテーマ「Cocoon(コクーン)」で吹き出しを作る方法を紹介します。
※テーマのインストール方法に関しては、こちらでご確認ください。
まずは、事前に準備しておいたアイコンをWordPressのメディアにアップロードしましょう。
![「メディア」をクリック](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/11/rewrite-speech-bubble-05.png)
メディアを選択後、新規追加をクリックしてアイコンのファイルをドラッグ、もしくはファイルから選択でアップロードしてください。
![「新規追加」をクリック](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/11/rewrite-speech-bubble-06.png)
![ファイルを選択](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/11/rewrite-speech-bubble-01.png)
![](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/11/rewrite-speech-bubble-02.png)
「投稿」ページにて新規追加をクリックしましょう。
![画像:WordPressのテーマで作る方法5](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_09.png)
「新規投稿」のページに遷移します。
![画像:WordPressのテーマで作る方法6](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_10.png)
続いて、左上にある+をクリックしてください。
![画像:WordPressのテーマで作る方法7](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_11.png)
「検索窓」が立ち上がるので、こちらに「吹き出し」と入力しましょう。
![画像:WordPressのテーマで作る方法8](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_12.png)
結果に表示された吹き出しをクリックしてください。
![画像:WordPressのテーマで作る方法9](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_13.png)
記事のエリアに吹き出しが現れたらOKです。
![吹き出し追加](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/11/rewrite-speech-bubble-03.png)
続いて、アイコンを設定しましょう。
画像を選択をクリックしてください。
![アイコンをクリック](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/11/rewrite-speech-bubble-04.png)
先ほどアップロードしたアイコンが表示されるので、そちらを選択しましょう。
![画像:WordPressのテーマで作る方法12](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_16.png)
以下のようにアイコンが挿入できたらOKです。
![画像:WordPressのテーマで作る方法13](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_17.png)
あとは、「コンテンツを入力…」に好きなテキストを入力してください。
プレビューを確認して、問題がなければ完成です。
![画像:WordPressのテーマで作る方法14](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_18.png)
WordPressのプラグインを活用する方法
2つ目は、WordPressのプラグインを活用して吹き出しを作る方法です。
この記事では「LIQUID SPEECH BALLOON」を使用した吹き出しの作成方法を解説します。
まずは「LIQUID SPEECH BALLOON」をWordPressにインストールします。
ダッシュボードからプラグインをクリックしてください。
![画像:WordPressのプラグインで作る方法1](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_23.png)
プラグインのページにアクセスしたら新規追加をクリックしましょう。
![画像:WordPressのプラグインで作る方法2](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_24-1024x279.png)
右側にある検索窓に「LIQUID SPEECH BALLOON」と入力したのち、今すぐインストールをクリックしてください。
![画像:WordPressのプラグインで作る方法3](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_25.png)
インストールが完了したら、有効化しましょう。
![画像:WordPressのプラグインで作る方法4](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_26.png)
プラグインの一覧に「LIQUID SPEECH BALLOON」が表示されていたら、インストールは完了です。
![画像:WordPressのプラグインで作る方法5](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_27.png)
まずはテーマのときと同じく、「投稿」より「新規追加」をクリックして、新しい投稿を作成しましょう。
続けて、左上にある+をクリックしてください。
![画像:WordPressのプラグインで作る方法6](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_28.png)
少しスクロールすると「Speech Balloon」という項目があるので、選択しましょう。
![画像:WordPressのプラグインで作る方法7](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_29.png)
記事のエリアに吹き出しが追加できたらOKです。
![画像:WordPressのプラグインで作る方法8](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_30.png)
続いては、アイコンの設定です。
ブロックを選択した状態で右上の歯車をクリックしてください。
![画像:WordPressのプラグインで作る方法9](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_31.png)
設定画面をスクロールすると「Avatar and name settings(アバターと名前の設定)」の項目があります。
こちらをクリックしてください。
![画像:WordPressのプラグインで作る方法10](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_32-1024x250.png)
以下のような吹き出しの設定ページに変わります。
![画像:WordPressのプラグインで作る方法11](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_33.png)
こちらで吹き出しの「名前」「画像URL」を入力しましょう。
「画像URL」は「メディアライブラリ」から「添付ファイルの詳細」で確認できます。
![画像:WordPressのプラグインで作る方法12](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_34.png)
![画像:WordPressのプラグインで作る方法13](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_35-1024x366.png)
入力が完了したら追加ののちに変更を保存を押してください。
![画像:WordPressのプラグインで作る方法14](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_36.png)
新規投稿ページに戻って、以下のように「アイコン」と「名前」が表示されていたらOKです。
![画像:WordPressのプラグインで作る方法15](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_37.png)
最後にテキストを追加しましょう。
![画像:WordPressのプラグインで作る方法16](https://www.xserver.ne.jp/blog/wp-content/uploads/2022/03/speech-bubble_38.png)
以上で完成です!
ちなみに、先のテーマほどではありませんが、「LIQUID SPEECH BALLOON」でも吹き出しをカスタマイズできます。
カスタマイズできる項目は、以下の4種類です。
- Direction(吹き出しの位置):左もしくは右に設定可能
- Design(吹き出しのデザイン):「影付き」「線なし」など6種類から選択可能
- Size(吹き出しのサイズ):「Default(標準)」「Small(小)」「Large(大)」から選択可能
- Options(オプション):アイコンの位置などを設定可能
まとめ
以上、ブログに吹き出しを挿入する方法や具体的な使い方の解説でした!
それでは、今回の内容をおさらいします。
- 吹き出しを使うと「リアルさ」を強調できる
- 「主観や主張を伝えたいとき」など、吹き出しは最適な場面でのみ使うように心掛けよう!
- 吹き出しは多用しないように気をつけよう
- 吹き出しの作成方法は「テーマを活用する方法」と「プラグインを活用する方法」の2種類ある
吹き出しを上手く活用して、より読みやすいブログを目指してください!
最後までお読みいただき、ありがとうございました!
ブログの始め方を知りたい!実際に始めたい方へ
国内シェアNo.1レンタルサーバー「エックスサーバー」では2024年8月6日(火)17時まで、サーバーが実質半額で利用できる『半額キャッシュバックキャンペーン』を開催中です!
今なら実質月額495円~とお得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にWordPressブログをご検討ください!
当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!
WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!
ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!
![](https://www.xserver.ne.jp/blog/wp-content/uploads/2020/05/start-guide-for-blog-beginners2-940x494-1-520x300.jpg)
また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!
![](https://www.xserver.ne.jp/blog/wp-content/uploads/2020/12/xserver-wordpress-quickstart_eyecatch-520x300.png)
ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!