ブログで絵やアイコンを描く&使う時の上手く見せるコツ教えます!

ブログ アイコン 使い方 ブログ

絵がうまくなりたい人向け!今だけお得なイラスト講座限定情報

1️⃣イラスト・マンガ総合講座
大手専門校ノウハウでイラスト上達!無料の資料請求だけ描き方ガイドブックもらえる
👉公式サイト:https://human-yakan.com/

 

2️⃣ATAM ACADEMY
絵がうまくなりたい小学生~高校生限定の人気在宅講座!今なら無料体験実施中
👉公式サイト:https://atam-academy.com/

 

どうも、アートディレクターのハシケン(@conteanime)です。

 

ハシケン
最近はブログでオリジナルのキャラクターを使ったり、このフキダシのようにアイコン画像を会話に利用する人が増えてますよね。

 

記事がちょっとわかりにくい内容でも絵やキャラクターがあることでスムーズに理解してもらえる効果があるので、当サイトでもブログの絵の利用は積極的に推奨してます。

 

ということで今回は絵やキャラをブログに使う時により良く見せるコツを絵のプロの目線でまとめてみます。

 

 

動画でもっとわかりやすい!
ハシケン
YouTubeでも似た内容が見れるので好きな方でどうぞ!

ブログでアイコンや絵を使うとき気をつけたいこと

絵を描く時 ポイント

 

はじめに、使う前に気にしておきたいことをあげます。

 

☑ ビジネス向けならフリー素材は極力ひかえたい

 

趣味などのブログ運営ならいいですが、ブログ経由で集客したいと考えているならある程度の自己投資は欠かせません。

 

フリー素材は使い勝手は良いですが、独自性がなくあちこちで見かけるため人によっては安っぽい印象を持たれかねません。

 

ハシケン
そうしたイメージを持たれてもかまわないブログと、逆によくないものがあるはずです。あなたの運営するブログがどちらか考えた上で、使用する素材の方向性を選ぶようにしましょう!

 

☑ 版権物は使わない

 

趣味でもビジネスブログでも、好きだからって著作権を有する画像をアイコンにしたり添付するのはやめましょう。

 

ブログはどこで誰が見てるかわかりません、誰かが版元に通報して揉めるなんてことも最悪ありえます。

 

知的財産の存在を無視していては、ブログの文面にも説得力が出てこない場合があります。無駄にあなたの価値を下げるだけにもなるので、今もし使用していたらすぐにでも外しましょう。

 

ハシケン
版権ものを勝手に使うくらいなら、フリー素材の方がはるかにいいです。

 

☑ サイト内で用いるキャラの名前や設定を複雑にしない

 

コンテアニ夫
こんな感じで、ブログ内の会話アイコンは名前も一緒に表示できるやつが多いよな!

 

ややこしい設定にしたせいで読み手の目を止めてしまったり、確認しようと前に戻ったりさせるとストレスになってやがては離脱あるのみです。

 

まずは最低限の必要な情報だけにして、余計なものは削ぎ落としてしまうのが絵やキャラを使う際の基本です。

 

☑ 顔の印象を重視する

 

hashiken
このようにアイコン画像には通常カラダは含まれません、多くの場合顔だけだったりバストアップ(胸から上)になるでしょう。

 

そのためにも、顔だけでちゃんと他のアイコンと違いが出せるデザインであることが必要になります。

 

アイコンイラスト デザイン

 

絵柄によっても読み手に与える印象が全く変わってきます。アイコンは顔が命と考えて、自作したりプロに頼むなどして用意する時にはぬかりなくやりましょう。

 

☑ 一見さん相手にも分かる内容を心がける

 

ブログは、基本的に検索からサイトに辿り着いた一見さんが見るものだと考えましょう。

 

ハシケン
ちなみに当サイトは、毎日75%が新しい読み手の方です。

 

記事の内容はあくまでも初見の人を対象に書く必要があります。シリーズ物をやりたい場合は、途中からでも読みやすい構成にしておかないとすぐ離脱されます。

 

変に内輪ネタだったり疎外感を感じさせるのもNGです。キャラの設定に関して過剰に作り込みすぎると、興味のない読み手には【無駄な情報】と感じさせてしまうことに繋がります。

 

ハシケン
絵やアイコンを用意したせいで、逆に損してしまうようなことだけは避けましょう。

 

会話内容を画像にしない

 

画像 セリフ

 

wordpressのテーマによる機能やプラグインなら良いですが、例えば漫画ソフトなどによる吹き出し画像で会話シーンを構成していくとその部分はGoogleからは文字でなくあくまでも画像として認識されます。

 

吹き出し画像にどれだけテキスト情報を詰め込んでも、画像としてしか認識されないのでSEO的にも不利になります。

 

どうしても必要な際は同ページの下部にまとめ的に文字情報を入れるといいかもしれません。

 

☑ ブログの雰囲気・自分のブランドに合わせた使用を

 

まとめになりますが、あなたのブログの雰囲気と絵やアイコンが合っているのかが最も重要です。内容とイメージにそぐわないのにキャラがダラダラ会話してもマイナスにしかなりません。

 

  • みやすさ
  • わかりやすさ
  • 差別化
  • ブランディング

 

ハシケン
あなた自身への意識とともに、読み手にとってのメリットを判断基準に考えていくといいですね。

 

オリジナルアイコン素材の作り方

画像素材 作り方

 

ざっくりした説明になりますが、自作する際は基本的に以下のような手順で用意します。

 

  1. アイコンに必要なキャンバスサイズを決めて、ペイントソフトで絵を描く
  2. 表情パターンが必要ならそれも作成する
  3. 背景が色付き(白含む)ならJPG、背景を透明にしたいならPNGで画像を書き出す
  4. 必要そうなら左右反転したものも合わせて用意しておく
  5. 作成データと書き出しデータをそれぞれ保管しておく

 

同様の仕様で今後もアイコン素材を増やしていく場合、最初に作成した画像データ(PSDなど)が残ってると大きさを合わせられてスムーズです。

最初のデータはのちのち変えて使う状況もありえるので、制作中のデータはしっかり保存していきましょう。

 

ハシケン
データ名の最後に(170919)とか日付を入れるとわかりやすいですよ

 

絵の背景が色付き(白含む)か透明かは、ブログの背景壁紙とのマッチングでも変わります。雰囲気も大事ですが、アイコンとして使った時に見やすいか(認識しやすいか)を重視して考えましょう。

 

似顔絵画像 JPG PNG

 

ブログの会話アイコンでのやり取りは向き(顔・目線)を考えて使う

似顔絵 イラスト 

 

会話のやり取り次第でキャラが右に行ったり左に行ったりすることもあるでしょう、一方側だけというやり方も印象づけとしてありですがそうでない場合は反転バージョンも一式そろえておくと融通がききます。

 

右に配置したキャラは左に目線をやって、左に配置したキャラは右に目線を向かせます。そうすることで会話のやり取りもスムーズに見せられます。

 

コンテアニ夫
右に配置して、左に目線をむけるとこんな感じー
キャラデザ美
左に配置して、右に目線をやるとこんな感じか?

 

下のように右配置で右を向かせたりしてしまうとかなり不自然になるので、特別な意図がなければ控えましょう。

 

コンテアニ夫
逆にするとこんな感じ?
キャラデザ美
・・・これだとちょっと会話してる感じしないよねー;

 

また、キャラが真正面を向いて会話をすると読み手に対して直接話してるように受け取ってくれます。

 

コンテアニ夫
大事なメッセージは、狙ってやってみようぜ!

 

会話のやり取りが長く続く時などは表情パターンがいろいろあると漫画的に読めて読み手も没頭しやすくなります、場面ごとに必要な効果を考えて選びましょう。

 

★似顔絵を描くときは、似顔絵イラストをうまく描く13のコツと描き方をプロ目線で詳細解説!も参照してください。

 

絵の中でキャラを並べるときは、立ち位置を守れ!

キャラ 立ち位置

 

・・・この章はかなり専門的な漫画や映画の文法的な話になりますが、知ってるかどうかで仕上がりがかなり変わります。頭の片隅にでも置いておいてください。

 

漫画・映画における『イマジナリーライン』とは?

想定線(そうていせん)、またはイマジナリーライン とは、映画ビデオを撮影する場合の用語で、2人の対話者の間を結ぶ仮想の線、あるいは人物、車両等の進行方向に延ばした仮想の線をいう。

imaginary-line

原則的には、イマジナリーラインをまたいだカメラの移動は行わない。図1で例えると、人物甲と人物乙を結ぶ線(延長部分を含む)がイマジナリーラインである。Aのカメラ位置で撮影したカットを入れると、次にBのカメラ位置で乙を撮影することはあっても、Cでは撮影しない。右図の(A→B)は自然な感じがするのに対し、(A→C)では2人が向き合っている感じがしない。進行方向のイマジナリーラインを越えると、機関車の走行方向が逆になって見えるなどといった現象が起きてしまう。

wikiより引用

 

hashiken
詳細はここでは省きますが、絵や映像をわかりやすく見せるためのテクニックだと思っておいてください

 

イマジナリーライン 参考

 

上のように最初左側にAが右向きで立ち右側にBが左向きで立って会話していたのに、説明なしに逆になると読み手は違和感を覚えます。

 

二人のキャラだけのやり取りならそれほど大した混乱にもならないですが、キャラが増えれば増えるほど立ち位置によるストレスは大きくなっていくものです。

 

そうならないために漫画や映画ではイマジナリーラインをまたいで作画・描写をしないという基本ルールがあります。

 

もちろん作品によってはあえてやぶってる場合もあるので、基本的な話としてとらえてください。

 

読み手にストレスをかけないためには『左側にAが右向きで立ち、右側にBが左向きで立って会話』を一つのブログ記事内で踏襲して展開していけば問題ありません。

 

左右突然に入れ替わったりすることだけ避ければいいので、必要な際は意識してみて下さい。

 

★ブログに乗せる絵に関しては、ブログで絵やアイコンを描く&使う時の上手く見せるコツ教えます!も役立ちます。

 

まとめ

ブログ アイキャッチ イラスト

 

ブログの絵やアイコンの使い方にはルールが一切ありません、基本的に自由気ままで良いんですが何のためのアイコン・会話かということくらい意識して使ったほうがいいでしょう。

 

読み手の理解を助けるために用意するならよりよい形を模索していく必要があります。重要なのは『見やすくわかりやすい』ということで、それが情報量のしぼりこみやイマジナリーラインと言った配慮にも繋がっていきます。

 

hashiken
・・・といっても難しく考えすぎる必要はないので、そうした方が見やすいんだと言うことだけ頭の片隅に入れて楽しんでブログを運営していきましょう!