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

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

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

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

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

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

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

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

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

の7種類です。

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

1.ノーマルの顔

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

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

2.喜んでいる顔（喜）

喜んでいる表情です。

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

3.怒っている顔（怒）

怒っている表情です。

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

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

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

悲しんでいる表情です。

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

5.驚いている顔

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

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

6.困っている顔

困っている表情です。

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

7.疑問がある顔

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

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

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

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

の3点です。

可視性を良くする

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

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

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

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

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

視線をずらした

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

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

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

たかがアイコンですが、

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

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

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

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

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

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

wp-cocoon.com

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

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

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

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

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

TinyPNG – Compress WebP, PNG and JPEG images intelligently

tinypng.com

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

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

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

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

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

の3つです。

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

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

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

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

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

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

日付	お名前	ブログ名
12/1	ななし	氷河期ブログ
12/2	悠木まちゃ	エンタめぐり
12/3	エダユカ	イライブ
12/4	バブルス	STUDIOバブルス
12/5	サンダー	THUNDER BLOG
12/6	森野ましろ	モリノート
12/7	七実	ムッカラーナ通信
12/8	ルージュ	はじめの一歩
12/9	つっきー	与論島に移住したナビィさんちの日記
12/10	マリー	ゆとり主婦への道
12/11	さゆ	さゆ日和
12/12	猫猫/まおまお	Life in Taoyuan
12/13	しろ	Exciting Joboost
12/14	長澤奈生	mana-cool
12/15	藤野こと	こと流エクリチュール
12/16	ありぃさ	トモイクガイド
12/17	しまこねこ	これでいいのにゃ
12/18	しな	shinalog
12/19	こぶ太	こぶたまがじん!!
12/20	ゆめみ	Styluce（スタイルーチェ）
12/21	crina|緒方クリナ	coton*
12/22	櫻宮ヨウ	ネガティブうさぎの備忘録
12/23	じゅんじゅん	ジュン風満帆
12/24	つちまる	Enjoy!節約.com
12/25	佐々木ゴウ	ゴウ・ライティング(note)