Sai.のマイペース4人暮らし

家族4人暮らし。子育て、イラストについて書いてます。

【表情違いあり】無料のイラスト素材でブログに吹き出しを作る

せっかく作ったブログの記事、文字ばかりでちょっと読みづらい…と思うことはありませんか?

そんな時は吹き出しを使ってみてはいかがですか?

読みやすく親しみやすい雰囲気になりますよ。

 

Sai.
こんな感じになります!
 

吹き出しは表情違いがあると、色んな場面で使えてオススメ。

気にいるものさえ見つかれば、無料のイラスト素材でも作れます。

今回の記事では、私がイラストACで公開している無料のイラスト素材で、ブログに吹き出しを作る方法をご紹介します。

f:id:sai_kurashi:20210125234212p:image

 

 

表情違いのイラスト素材を用意

まずは、吹き出しに使いたいイラスト素材を用意しましょう。

今回は、イラストACでダウンロードできるフリー素材(女性のイラスト)を使ってみます。

 

指差しポーズで笑う女性のイラスト

 

①笑った表情

びっくりした表情の女性イラスト

 

②びっくりした表情

 

疑問を感じる女性のイラスト

 

③はてな?の表情

 

落ち込む女性のイラスト

 

④悩む表情

 

吹き出しにする

完成した吹き出し

上記のイラスト素材を吹き出しにしたら、このようになります。

①笑った表情イラスト
 
笑顔女子
びっくり女子
②びっくりした表情イラスト
 
はてな?の表情イラスト
 
はてな女子
悩み女子
④悩む表情イラスト
 

 

ポイントでこのような表情違いの吹き出しが出てくると、読者の方も共感しやすくなるのではないでしょうか?

 

作り方法

このサイトははてなブログを使っているため、吹き出しにするCSSはこちらを使わせていただきました。

 

www.fuji-blo.com

 

ご紹介の方法だけで簡単にできるのですが、綺麗に吹き出しにはめ込むため、CSSを打ち込む前に、まずは下準備をしておきましょう。

 

イラストの下準備

画像加工は何を使っても良いのですが、いちばん簡単にできる方法として、iPhone標準搭載の「写真」アプリを使用した方法を載せてご説明します。

まずは正円の吹き出しに上手くはめ込むために、下準備としてイラストを正方形にトリミングします。

iPhoneの「写真」アプリトリミング画面

スクエアにトリミング

 

基本はこれだけで問題ないと思いますが、もし吹き出しにして見切れる部分があると気になりますよね。

例えばこれ。
右のハテナマークが見切れてる…
 
はてな女子

 

このような場合は、余分な部分を取り除きましょう。

「写真」アプリのマークアップ機能を使って、白で塗りつぶします。

iPhoneの写真アプリでイラストを加工している画像

マークアップ機能で塗りつぶす

 

右のはてなマークが消せたら、吹き出しで見切れる部分が無くなり綺麗になりました!

これでスッキリしたかな?
 
はてな女子

 

 

吹き出しでブログをもっと魅力的に

イラストの吹き出しをつけるだけで、記事が親しみやすい雰囲気になるので、ブログがもっと魅力的になるかも。

「まずは無料で簡単に吹き出しを作ってみたい」

という方はフリーのイラスト素材を探してみると良いのが見つかるかもしれませんよ。

 

「自分だけのオリジナルアイコンが欲しい!」という方はご自身で作るのもいいですよね。

\簡単にスマホでアイコンを作る方法/ 

illustration.sai-kurashi.com

  

上記の女性以外のイラストも投稿しています。

プロフィールページから是非ご覧ください。

 

ご利用の際は利用規約のご確認をお願いします。