吹き出しCSSの活用　〜サイトオリジナリティを高める〜

吹き出しCSSを使うシーン

がんちゃん

吹き出しの効果や使い方を説明します。

対話形式の吹き出しを使ってオリジナルキャラクターを登場させると、先生、生徒役の対話が実現できます。

よしお

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

ホー先生

よしおくん、来るの遅いですよ。今何時だと思っているんだい。

先生、生徒役の対話は　先生＝筆者　生徒＝読者　というターゲットイメージをそのまま映し出したものですので「初心者向けコンテンツ」に有効です。

キャラクターアイコンの制作費用は1,000〜5,000円程度。この予算でサイトの世界観が創れて全ページに活用できるので非常に対費用効果が高い手法です。

おすすめアイコンは、擬人化・被り物・ミニキャラ・デフォルメ。

可愛らしいアイコンでサイトの親しみやすさをアップしましょう。

▼ おすすめ擬人化アイコン

▼ 被り物アイコン

▼ おすすめミニキャラアイコン

最近では、WordPressテーマに標準装備されていることが多く吹き出しCSSを準備する必要がなくなりました。

がんちゃん

当サイトはCocoonを使用しています。

吹き出し管理画面も用意されているのでいくつもオリジナル吹き出しを作成できて便利です。他テーマでは画像を準備してショートコードを新たに作る必要があるのでCocoonは一手間なくなった印象です。

吹き出しを使うおすすめな方法は、【余白を空ける】ことです。

がんちゃん

吹き出しを上手に使うには上下の余白を空けましょう。

吹き出しの上下の余白が詰まっていると読み飛ばしたり窮屈な印象を受けます。

上の例では余白を無くしています。では今度は余白を空けてみましょう。

がんちゃん

余白を空けた場合はこちらです。

いかがでしょうか。吹き出しの周りがスッキリして見やすくなっていませんか？

ちょっとした気遣いで読者の方のストレスをなくすことができるので、吹き出し以外でも余白を空ける癖をつけてみましょう。

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