吹き出し用のアイコンを7種類作成しました！喜怒哀楽といろんな顔

 自身のブログで使う、吹き出し用アイコンを作成しました！

吹き出しの横にある、顔のアイコンのことです。

これがあることで、ブログ内にリズムが生まれます。

文字だけよりちょっと読み進めやすくなりませんか。

しかし、「どんな表情が必要？」と検索してみましたが、意見はバラバラ…

ということで、ひとまず「喜怒哀楽」をもとに、7種作ってみました。

今後、この7種を使いつつ「もっとこんな表情が欲しいな」というのが見つかれば、プラスしていきたいと思います。

まずは、その7種について紹介するよ！

吹き出し用アイコン全7種

吹き出し用アイコンの表情を、「喜怒哀楽」をもとに作ってみました。

の7種類です。

「楽しんでいる顔（楽）」というのは、具体的にわからないし、使わないかなと思ったので作成しませんでした。

それでは、1つ1つご紹介していきます！

1.ノーマルの顔

特に感情をあらわにしていない、基本的な表情です。

なにかしら吹き出しを利用するときは、一番、出番が多そうな顔です。

2.喜んでいる顔（喜）

喜んでいる表情です。

キラキラもつけて、さらに感情を強化。

3.怒っている顔（怒）

怒っている表情です。

右上に怒りのマークも入れました。

ブログ内で怒ることってなさそうですが…

4.悲しんでいる顔（哀）

悲しんでいる表情です。

失敗してしまったとき、つらい出来事があったときなどに使えそうです。

5.驚いている顔

驚いている、びっくりした表情です。

ポイントや、知らなかった出来事などに使えそうです。

6.困っている顔

困っている表情です。

やらかしてしまったときなどに使えそうです。

7.疑問がある顔

疑問がある、理解できなかったときの表情です。

内容が理解できないとき、「どうゆうこと？」というセリフとともにつかえそうです。

吹き出し用アイコンを作るとき気をつけたこと3点

吹き出し用アイコンを作るときに、気をつけたのは

の3点です。

どうしてこの3点だったのか、次でご説明するよ！

可視性を良くする

こんなふうに、吹き出し横のアイコンは、結構小さい！

絵に細かく描き込んでも、見えないし、わかりにくくなってしまいます。

また、表情を見せたいので、よけいな手足があるより、胸から上のイラストにしました。

わかりやすくするために、マークをつける

先に書いたように、アイコンは小さく表示されるので、わかりやすいほうがいいですよね。

そのために、マンガでも使われているような、表情をサポートするようなマークも一緒につけました。

例えば、怒っているなら「怒りのマーク」を。

しかも、顔の横に描くことで可視性を良くしたよ。

視線をずらした

正面を向いた顔が、よく使われているように思います。

しかし、顔、とりわけ目は強力なモチーフで、人はどうしても見てしまいます。

しかもじっと見られることに、強いストレスを感じます。

たかがアイコンですが、

たくさん並んでこちらをみているとなると、読むことにストレスを感じないかな…

と心配になり、視線をずらしてみました。

吹き出し用アイコンのサイズは300×300px

このブログのテーマには「cocoon」を使用させていただいています。

吹き出しは最初から実装されているので、簡単に表示できます。

「cocoon」での吹き出しの使い方は、こちら。

自作の吹き出しを作成して利用する方法

サイト訪問者にわかりやすく表示できる吹き出し機能の利用方法です。アイコンのセリフのように表示させることで、訪問者に分かりやすく説明できるかもしれません。

wp-cocoon.com

「cocoon」では、アイコンのサイズには160～200pxをおすすめされています。

しかし、劣化しにくいという理由で、少し大きめで作成することをおすすめします。

私は300×300pxで作ったよ！

先のアイコン1つ1つの説明でも使用していますが、画像が荒れることなく見ることができます。

しかも、スマホで簡単に表示されるために、軽くもしました。

こちらで画像を軽くできます。

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Free online image compressor for faster websites! Reduce the file size of your WEBP, JPEG, and PNG images with TinyPNG’s

tinypng.com

まとめ：吹き出し横には、7種類の顔で視線をずらしたアイコン

アイコンを作成するにあたっていろいろ調べてみましたが、必要な表情が何かについては、わかりませんでした。

そこで、「喜怒哀楽」をもとに

の7種を作ってみました。

また、作るときに気をつけたのは、

の3つです。

アップロードする原画サイズは300×300pxにしました。

画像が劣化しないように、少し大きめに作成することをおすすめします。

アイコンだけの利用でなく、画像としてこのブログに貼り付けても、鑑賞に堪えるサイズです。

ただし、そのままではなく、軽くしてやることもおススメします。

今後はこの7種のアイコンを使いつつ、必要な表情は何かについて検証していきたいと思います。

追記：この記事は、ライター組合1期生による「2019年に書いた渾身の1記事を見てくれ!! Advent Calendar 2019」に参加しています。