2023.09.29自身のブログで使う、吹き出し用アイコンを作成しました!吹き出しの横にある、顔のアイコンのことです。これがあることで、ブログ内にリズムが生まれます。文字だけよりちょっと読み進めやすくなりませんか。「どんな表情が必要?」と検索してみましたが、意見はバラバラ...ということで、ひとまず「喜怒哀楽」をもとに、7種作ってみました。今後、この7種を使いつつ「もっとこんな表情が欲しいな」というのが見つかれば、プラスしていきたいと思います。吹き出し用アイコンの表情を、「喜怒哀楽」をもとに作ってみました。疑問がある顔の7種類です。「楽しんでいる顔(楽)」というのは、具体的にわからないし、使わないかなと思ったので作成しませんでした。感情をあらわにしていない、基本的な表情です。なにかしら吹き出しを利用するときは、一番、出番が多そうな顔です。2.喜んでいる顔(喜)喜んでいる表情です。つけて、さらに感情を強化。3.怒っている顔(怒)怒っている表情です。右上に怒りのマークも入れました。ブログ内で怒ることってなさそうですが...4.悲しんでいる顔(哀)悲しんでいる表情です。失敗してしまったとき、つらい出来事があったときなどに使えそうです。驚いている、びっくりした表情です。ポイントや、知らなかった出来事などに使えそうです。やらかしてしまったときなどに使えそうです。疑問がある、理解できなかったときの表情です。内容が理解できないとき、「どうゆうこと?」というセリフとともにつかえそうです。吹き出し用アイコンを作るときに、気をつけたのは可視性を良くするわかりやすく視線をずらすの3点です。してこの3点だったのか、次でご説明するよ!可視性を良くするこんなふうに、吹き出し横のアイコンは、結構小さい!絵に細かく描き込んでも、見えないし、わかりにくくなってしまいます。表情を見せたいので、よけいな手足があるより、胸から上のイラストにしました。わかりやすくするために、マークをつける先に書いたように、アイコンは小さく表示されるので、わかりやすいほうがいいですよね。そのために、マンガでも使われているような、表情をサポートするようなマークも一緒につけました。怒っているなら「怒りのマーク」を。顔の横に描くことで可視性を良くしたよ。視線をずらした正面を向いた顔が、よく使われているように思います。顔、とりわけ目は強力なモチーフで、人はどうしても見てしまいます。見られることに、強いストレスを感じます。たかがアイコンですが、たくさん並んでこちらをみているとなると、読むことにストレスを感じないかな...と心配になり、視線をずらしてみました。吹き出し用アイコンのサイズは300×300pxこのブログのテーマには「cocoon」を使用させていただいています。吹き出しは最初から実装されているので、簡単に表示できます。「cocoon」での吹き出しの使い方は、こちら。自作の吹き出しを作成して利用する方法wp-cocoon.com「cocoon」では、アイコンのサイズには160~200pxをおすすめされています。劣化しにくいという理由で、少し大きめで作成することをおすすめします。私は300×300pxで作ったよ!先のアイコン1つ1つの説明でも使用していますが、画像が荒れることなく見ることができます。スマホで簡単に表示されるために、軽くもしました。こちらで画像を軽くできます。intelligentlytinypng.comまとめ:吹き出し横には、7種類の顔で視線をずらしたアイコンアイコンを作成するにあたっていろいろ調べてみましたが、必要な表情が何かについては、わかりませんでした。疑問がある顔の7種を作ってみました。可視性を良くするわかりやすく視線をずらすの3つです。アップロードする原画サイズは300×300pxにしました。画像が劣化しないように、少し大きめに作成することをおすすめします。アイコンだけの利用でなく、画像としてこのブログに貼り付けても、鑑賞に堪えるサイズです。そのままではなく、軽くしてやることもおススメします。今後はこの7種のアイコンを使いつつ、必要な表情は何かについて検証していきたいと思います。2019」に参加しています。ゴウ・ライティング(note)BlogシェアするXエダユカをフォローしてね!エダユカ関連記事Blog【画像つき】Canvaにアカウントを登録する方法|パソコン版編デザインツール「Canva」の登録方法です。パソコン版を画像つきで説明しました!Canvaは、無料でアカウント登録でき、無料で利用できます!有料素材もありますが、わかりやすく表示されているので、安心して利用できます!!!Blog透過したプロフィールアイコン画像に背景をつける方法【Canvaを利用】プロフィールアイコン画像の背景が透過されていると、サイトによっては真っ黒に表示されてしまいます。Canvaを利用して、透過された背景に「1.色をつける方法」「2.写真を貼る方法」「3.模様を入れる方法」をご紹介します。defined.")}))})()。