※この記事にはアフィリエイト広告が含まれています。
ブログではキャラクターが吹き出しで会話をしている様子がよく見られます。
誰でも１度は見ているよね。
ブログで定番の表現技法です。誰でも簡単に再現できますよ。
ブログに会話形式の吹き出しを入れる方法
アイコン付きの吹き出しを使うメリット
吹き出しを使うのが効果的な場面
アイコン画像の調達方法
ネットで「ブログ 吹き出し」と検索をすると「ブログ 吹き出し うざい」という検索候補が現れますが、特に気にする必要はありません。
なぜなら、そのワードで検索している人たちは、吹き出しがなくても文章をすらすらと読み進められるからです。
あるいは、吹き出しの使い方が下手な記事や読者目線を考慮していない記事に触れ過ぎて、一種の偏見を患っているのかもしれません。
吹き出しを入れる理由の１つは文章を読みやすくする工夫であり、優しさです。
読者が読みやすいと感じるブログを作りたい。
そのような読者目線に立てる人は報われて欲しいと願っています。
ぜひとも会話形式の吹き出しを導入して、読みやすいブログを作ってみてください。
ボクがみなさんの代わりに質問します。
期待に沿った回答ができるように頑張ります。
- アイコン付きの吹き出しを使うメリット
- ブログにアイコン付き吹き出しを入れる方法
- アイコン画像（素材）はどのように調達するのか？
- 一番のおすすめは絵描きのプロにつくってもらうこと！
- アイコン付き吹き出しを使うのが効果的な場面は？
- 吹き出しは会話形式にして使おう！
- まとめ
アイコン付きの吹き出しを使うメリット
そもそもの疑問なんだけど、
アイコン付きの吹き出しを使うと何か良いことでもあるの？
たくさんのメリットがありますよ。
よろしければ１つずつ説明していきます。
流し読みする人の目に留まりやすい！
WEB検索でブログに訪れたユーザーは、目次だけを読んだり、流し読みをしたりで、求めている情報を効率的に探し回ります。
そのようなユーザーたちに答えを知らせるコツとして、見出しを読んだだけでも記事の内容が分かるようにすると良いと言われています。
そして、アイコン付きの吹き出しは流し読み対策に使えます。
たしかに画面をスクロールしていても目に留まりやすいね！
文章だけよりも読みやすい！
世の中には文章だけで構成されているものは読まない活字嫌いさんが結構多く存在しています。
その点、アイコン付きの吹き出しはL●NEのような雰囲気があるため、普段から文章を読まないような人でも馴染みやすいです。
漫画のようにテンポよく読めますし、見た目にも楽しいですよ！
口語が使えるので分かりやすく説明できる！
ブログの書き方は人それぞれですが、全国の顔も名前も知らない人たちに読まれる以上、誰に読まれても問題のないような丁寧な言葉遣いで書くことが多いかと思います。
しかし、本当は丁寧な言葉遣いよりも砕けた言葉遣いの方が内容を伝えやすいです。
アイコン付きの吹き出しでは伝えたいことをキャラクターが代弁してくれるため、砕けた言葉遣い（口語）を使っても問題なく受け入れてもらえます。
丁寧な言葉遣いもいいけど、口語の方がすんなりと入ってくるよ。
実際、このように口語で喋らせてみても不快な印象はないと思います。
自然と頭に入ってくるような文章を作るには重要なテクニックです。
会話形式（Q＆A形式）で読みやすさ抜群！
どうして会話形式にすると文章が読みやすくなるの？
疑問と回答をハッキリと示せるから！ ですよ。
では、これが会話形式ではなくなるとどのような雰囲気になるのでしょうか？
会話なしバージョンをご用意しましたのでご覧ください。
どうして会話形式にすると文章が読みやすくなるんだろう…？
わかったぞ！ 疑問と回答をハッキリと示せるからだ！
このように、会話なしの場合は自問自答の様相を呈します。
会話形式と会話なしバージョン、どちらの方が内容を理解しやすかったですか？
おそらくは前者の会話形式だったと思います。
【Question】読者のが思い浮かべるであろう疑問を想定して発言する。
【Answer】読者の疑問を解決するための回答を発言する。
アイコンごとに質問者と回答者に分けることで、Q＆Aの形式に落とし込みましょう。
そうすることで、あなたのブログも一気に読みやすくなるはずです。
ブログにアイコン付き吹き出しを入れる方法
メリットをお伝えしましたが、どうでしたか？
話を聴いていたら実際に使ってみたくなったよ！
でも、どうしたら使えるのかが分からないんだ。
それなら簡単ですよ。以下のコードをコピペすればＯＫです！
CSS・HTMLコードをコピペすればOK！
私のブログで使っているアイコン付き吹き出しのサンプルコードを公開します。
このコードをコピーして自分のブログに貼り付ければ、それだけで簡単に再現可能です。
まずはCSSコードから。
CSSコードはブログ内の該当箇所（デザインCSSなど）に貼り付けてください。
CSSコード
まずは左側からのアイコン付き吹き出しだね！
/* アイコン付き吹き出し（左側） */
.talk10 {
margin-bottom: 10px;
}
.talk10 figure img {
width: 100%;
height: 100%;
border: 2px solid #9ce191; /* 円の線の太さと色の設定 */
border-radius: 50%;
margin: 0;
}
p.talk10-text {
margin: 0 0 8px;
}
p.talk10-text:last-child {
margin-bottom: 0px;
}
.talk10:after,.talk:before {
clear: both;
content: "";
display: block;
}
.talk10-img {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 70px;
height: 70px;
}
.talk10-txt {
color: #444; /* 吹き出し内テキストの色 */
position: relative;
margin-left: 100px;
padding: 0.6em 0.8em 1em 0.8em;
border: 3px solid #9ce191; /* 吹き出し線の太さと色の設定 */
background-color: #fff; /* 吹き出しの背景色 */
border-radius: 5px; /* 吹き出しの角の丸み */
}
.talk10-txt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #9ce191; /* 吹き出しの三角形の設定（色以外の変更は非推奨） */
top: 24px;
left: -20px;
}
.talk10-txt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 24px;
left: -16px;
}
こちらは右側からのアイコン付き吹き出しです。
/* アイコン付き吹き出し（右側） */
.talk11 {
margin-bottom: 10px;
}
.talk11 figure img {
width: 100%;
height: 100%;
border: 2px solid #88bece; /* 円の線の太さと色の設定 */
border-radius: 50%;
margin: 0;
}
p.talk11-text {
margin: 0 0 8px;
}
p.talk11-text:last-child {
margin-bottom: 0px;
}
.talk11:after,.talk:before {
clear: both;
content: "";
display: block;
}
.talk11-img {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 70px;
height: 70px;
}
.talk11-txt {
position: relative;
margin-right: 100px;
padding: 0.6em 0.8em 1em 0.8em;
border: 3px solid #88bece; /* 吹き出し線の太さと色の設定 */
background-color: #fff; /* 吹き出しの背景色 */
border-radius: 5px; /* 吹き出しの角の丸み */
}
.talk11-txt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #88bece; /* 吹き出しの三角形の設定（色以外の変更は非推奨） */
top: 24px;
right: -23px;
}
.talk11-txt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 24px;
right: -19px;
}
上記CSSコードを貼り付けることでデザイン情報が保存されます。
これでブログ内にアイコン付き吹き出しを表示できるようになりました。
表示したい箇所に下記HTMLコードを挿入してください。
HTMLコード
左側アイコン付き吹き出しを表示するHTMLコード
<div class="talk10"><figure class="talk10-img"><img src="ここに画像のURL" alt="吹き出し左側用のアイコン" /></figure><div class="talk10-txt"><p class="talk10-text">ここに喋らせたいテキスト</p></div></div>
右側アイコン付き吹き出しを表示するHTMLコード
<div class="talk11"><figure class="talk11-img"><img src="ここに画像のURL" alt="吹き出し右側用のアイコン" /></figure><div class="talk11-txt"><p class="talk11-text">ここに喋らせたいテキスト</p></div></div>
ここに画像のURLの部分には、使いたいアイコンのアドレスを貼り付けてください。
例えば、はてなブログの場合は『はてなフォトライフ』にアップロードした画像から使いたいものを選んでクリックします。
画像の上で右クリックをして『画像アドレスをコピー』を選んだ後、記事のHTML編集画面でここに画像のURLの部分を上書きをしてください。
画像アドレスの例→ https://◯◯◯◯◯◯.png
この手順をなぞるだけで、あなたのブログでもアイコン付きの吹き出しが使えるようになりますよ。
アイコン画像（素材）はどのように調達するのか？
ありがとう！ これでボクも今日からアイコン付きの吹き出しが使えるよ！
だけど、肝心のアイコン画像がないんだ…。
そうですね…アイコン画像を調達する方法は何通りかあります。
いくつか紹介しますので、お好みの方法で調達してみてください。
自分でイラストを描く
アイコン画像を調達する方法の１つは自分で描いたイラストを使うことです。
ボクもそうして生まれたんだ。恥ずかしながら大した画力じゃないけどね。
自分でイラストを描く方法は、
- 自分でイラストを描ける人
- 描いたイラストを公開することに躊躇しない人
このような方々に向いている方法です。
お金がかからず、著作権が自分にあるため安全です。
他のブログでは見られない特異性にもなりますので、下手でも上手でもイラストを描けるようであればやってみると良いでしょう。
フリー画像・無料素材サイトを利用する
アイコン画像を調達する方法の２つ目はフリー画像を使うことです。
フリー画像を使う方法は、
- 自分ではイラストが描けない
- アイコンにお金をかけたくない
このような方々に向いている方法です。
どちらかと言えば消極的な要因、消去法で採用されるものですね。
ちなみにフリー画像を使うには問題点もあるため、吹き出しのアイコンに使っている人は少ないです。
フリー画像を使うときの問題点としては、
- 他サイトとの差別化ができない
- イラストに記事やサイトの印象が喰われる
などの問題点があります。
つまり…どういうこと？
例えば、この吹き出しについてどのような感想を抱きますか？
『いらすとや』の絵だ！ ……あ、そういうこと？
はい、そうなんです。
書いてある内容や記事の印象が『いらすとや』に乗っ取られるのです。
記事の印象を乗っ取るのは他の無料素材であっても同じことです。
ただ、『いらすとや』は特に独特なタッチが印象に強い無料素材なので、記事を喰いにかかる素材の筆頭格と言えます。
※上記意見は嘘ではありませんが、使わせていただいているのに勝手な言い種をしてしまい申し訳ございません！ 日頃からお世話になっています！（媚びを売る）
フリー画像を使うには相応のデメリットもあることを理解しておきましょう。
フリー素材配布サイトからアイコンを調達したいという方は、
以下の記事の『イラスト素材を配布しているサイト』を参考にしてみてください。
フリー画像を使う際の注意点（商用利用、クレジット表記、改変可否、著作権など）についても分かりやすく紹介・解説をしています。
一番のおすすめは絵描きのプロにつくってもらうこと！
うーん。自分で描くのもフリー画像を使うのもイマイチかな～。
それなら
え…でも、ボクの知り合いにイラストレーターさんなんていないよ。
別に知り合いでなくてもいいんですよ。
今の時代、ただの一般人がプロに依頼するのも簡単ですから。
ブログやSNSで活動している人の中には、クオリティの高いオリジナルアイコンを使っている人も多いです。
彼らが利用しているサービスの１つに『ココナラ』というサイトがあります。
最近はTVCMも流していますので、聞き覚えがあるかもしれませんね。
私もそこで、プロの方に描いてもらって生まれました。
依頼してつくってもらったアイコンには権利侵害の心配がありません。
また、見栄えのする魅力的なイラストを描いてもらえます。
お金を出してもいいなら、プロに描いていただくのが最もおすすめできる方法です。
ココナラに依頼する時の様子、依頼にかかる費用、注意したいこと、依頼の仕方など、初めて依頼する時に考えるべき事柄をすべてまとめてあります。
アイコン付き吹き出しを使うのが効果的な場面は？
アイコンが用意できたから吹き出しを使ってみたいんだけど、どんな時に使うのがいいのかな？
吹き出しを使う場面ですか……ネコさんは説明書を読む派ですか？
ほとんど読まないかな。言葉が難しかったり、文章が長かったりするせいで、どこを読めばいいのかが分かりにくいんだもん。
そういった分かりにくい場面で使うのが効果的なんですよ。
あっ！ なるほどね！
他にも『次の話に展開する』場面や、『話を切り替える』場面でも有効です。
- 説明をする場面
- 丁寧な言葉にすると難しくなってしまう場面
- 文章が多かったり長かったりする場面
- 話の導入の場面
- 次の話に展開したり、切り替えたりする場面
また、あまり吹き出しを多用しすぎるのも良くありません。
この記事では実例を見せるためにできるだけ吹き出しを多用していますが、やりすぎると『くどい』と思われてしまいます。
全体のバランスを見て、適量だと思う分だけを挿入しましょう。
吹き出しは会話形式にして使おう！
吹き出しは会話形式で挿入するのが最も良い使い方です。
たしか…疑問と回答をしっかりと提示できるから理解しやすくなるんだったね。
はい。それに加えて砕けた言葉遣いでの表現が可能です。
吹き出しを使う際は会話形式にするのが
回答者となる自分のアイコンのほかに、質問者となるもう１つのアイコンを用意しましょう。
そして二体のキャラを会話させることにより、疑問と回答を浮き彫りにする【Q＆A】の形に落とし込みましょう。
吹き出しは基本的に【Q＆A】の２つを合わせてワンセット！
吹き出しは左右交互に配置しよう！
また、吹き出しの向きは左右交互に配置するのが良いです。
どうして左右交互にした方が良いの？
この記事を読んでいるうちに、質問は左から、回答は右からというイメージが無意識に刻まれて読みやすくなっているはずなんです。そこで吹き出しの向きが片側だけになってしまうと読みづらいと思いませんか？
見てみないことには何とも言えないなぁ。
ほら、こんな感じになりますよ。色やアイコンが違うので多少は見分けやすいですが、位置も違った方が良くないですか？
…たしかに、それぞれ別の位置から喋ってた方が分かりやすそうだね。
アイコン画像はキャラ２体分を用意した方が良いと言いましたが、吹き出しについても同じことが言えます。
最低限、左側から吹き出しているコードと、右側から吹き出しているコードを色違いで２種類用意して使うことをおすすめします。
吹き出しは画面いっぱいにして使おう！
このページをパソコンで閲覧している場合、吹き出しの表示幅が長いと感じられているかもしれません。
L●NEだと全体幅の２／３ぐらいしか使ってないもんね。
ご存知のとおり、現代のネットユーザーの多くはスマートフォンを使っています。
スマートフォンでWEBページを閲覧する場合、パソコンで見た場合よりも画面の幅が狭くなります。
そのため、文章が少しでも長くなると吹き出しが縦長になってしまいます。
上の画像は、当ブログで使っているアイコン付き吹き出しをスマートフォンで閲覧したときの見た目です。
たったの１０文字で改行されています。
吹き出しの表示幅をここから２／３ぐらいに減らした場合は約６文字での改行となり、もっと縦長になってしまいます。
見た目のバランスが悪くなることは想像に難くありません。
アイコン付きの吹き出しは画面幅いっぱいに使うことをおすすめします。
当記事で紹介したサンプルコードは幅を広くしていますのでご安心ください。
吹き出しの文章はできるだけ短くしよう！
吹き出しに使う文章はできるだけ短くすることが大切です。
前述したスマートフォンでの表示が縦長になる問題を緩和することができますし、パソコンでの閲覧においても一行で表示された方が見た目が美しいです。
もちろん、無理に縮めて分かりにくくなってしまったら元も子もありません。
できるだけ、短文にする。
そのような意識を持っていただけるだけで十分です。
まとめ
アイコン付きの吹き出しを挿入することで、文章は抜群に読みやすくなります。
読みやすい記事が書きたい。
分かりやすい記事が書きたい。
高品質な記事に仕上げたい。
このような向上心がある方は、ぜひアイコン付きの吹き出しを導入してみてください！
