吹き出しCSSを使うシーン

吹き出しの効果や使い方を説明します。
吹き出しの効果
- ポイントを一言で伝えられる
- 読者の目に留まる
- 分かりやすい印象を与える
どんなときに使う?
- ユーザーの口コミを表現
- キャラクター同士の対話
- ブログ筆者がポイントを伝える
サイトの世界観を作る(おすすめ)
対話形式の吹き出しを使ってオリジナルキャラクターを登場させると、先生、生徒役の対話が実現できます。

先生、おはようございます!

よしおくん、来るの遅いですよ。今何時だと思っているんだい。
先生、生徒役の対話は 先生=筆者 生徒=読者 というターゲットイメージをそのまま映し出したものですので「初心者向けコンテンツ」に有効です。
キャラクターアイコンの制作費用は1,000〜5,000円程度。この予算でサイトの世界観が創れて全ページに活用できるので非常に対費用効果が高い手法です。
おすすめアイコンは、擬人化・被り物・ミニキャラ・デフォルメ。
可愛らしいアイコンでサイトの親しみやすさをアップしましょう。
▼ おすすめ擬人化アイコン
▼ 被り物アイコン
▼ おすすめミニキャラアイコン
吹き出しが標準装備されているWordPressテーマ
最近では、WordPressテーマに標準装備されていることが多く吹き出しCSSを準備する必要がなくなりました。
Cocoon(無料テーマ)

当サイトはCocoonを使用しています。
吹き出し管理画面も用意されているのでいくつもオリジナル吹き出しを作成できて便利です。他テーマでは画像を準備してショートコードを新たに作る必要があるのでCocoonは一手間なくなった印象です。
公式サイト https://wp-cocoon.com/
SANGO(有料テーマ)
引用 https://saruwakakun.com/sango/shortcode-list#9
JIN(有料テーマ)
引用 https://jin-theme.com/manual/atlas-editor03/
吹き出しの効果的な使い方
余白を空ける
吹き出しを使うおすすめな方法は、【余白を空ける】ことです。

吹き出しを上手に使うには上下の余白を空けましょう。
吹き出しの上下の余白が詰まっていると読み飛ばしたり窮屈な印象を受けます。
上の例では余白を無くしています。では今度は余白を空けてみましょう。

余白を空けた場合はこちらです。
いかがでしょうか。吹き出しの周りがスッキリして見やすくなっていませんか?
ちょっとした気遣いで読者の方のストレスをなくすことができるので、吹き出し以外でも余白を空ける癖をつけてみましょう。

▼ キャラクターアイコン作成の体験談

コメント