こんにちは、
氷河期世代クリエイターのYOHEIです。
今回の記事では、このブログで使用している手描きイラストのアイキャッチ・サムネの作り方を紹介したいと思います。
ブログのアイキャッチやサムネを用意するときに、フリー素材だと思ったイメージのものがなかったり、写真を撮影する場合は被写体がないといったことがあると思います。
そんなとき、さっと手描きでアイキャッチやサムネを作成できると良いですよね。
「でも難しいんじゃないの？」って思われている方いますよね。
実は、手描きイラストのアイキャッチ作成ってそんなに難しくないのです。
イラストを描くのは得手不得手があるかもしれませんが、上手く描けないとダメということはありません。自分では下手と思っていても、他の人からすればそれは個性になるのです。
また、使用するアプリもスマホの無料アプリ等で作成するのでお金もかかりません。
なので、絵が苦手と思ってやっていなかったり、イラスト作成アプリはお金がかかると思って自作イラストアイキャッチを作らなかった方は、もったいないと思います。
自分でイラストアイキャッチを作れるようになると、ブログサイト作成スキルの幅も広がります。
この機会にチャレンジしてみてはいかがでしょうか？
では、この記事のアイキャッチを実際に作りながら作成方法を紹介していきます。
（・o・）/
もくじ
1. ブログの手描きアイキャッチ画像作り方！まず用意するもの
2. イラストを描く
3. 手描きイラストをデータ化
4. 無料イラスト作成アプリ「アイビスペイントX」
5. イラストに着色してアイキャッチ画像を完成させる
6. まとめ：ブログの手描きアイキャッチ画像の作り方についておさらいしましょう！
1. ブログの手描きアイキャッチ画像作り方！まず用意するもの
まず、イラストを描くために必要なものを用意します。絵を描ければ何でも良いですが、このブログのアイキャッチを描くときに使用しているものを紹介します。
１.2B以上の濃いめの鉛筆（ロケット鉛筆でもOK）
このブログのアイキャッチは鉛筆で描いています。なぜ鉛筆かというと、入手しやすい画材ということと、描き直しができるからです。もちろんボールペンなどでもOKです。
2.コピー用紙
紙も描ければ何でもOKです。基本的に罫線や模様がない白い紙が後の工程で処理しやすくおすすめです。
3.消しゴム
描き直さないで絵を仕上げるなら、用意しなくてもOKです。
以上があれば、絵は描けます。
2. イラストを描く
では、さっそく絵を描きましょう！その前に、描くときに押さえておきたいポイントです。
●描く内容
何を描けば良いかというと何でもOKですが、記事の内容にマッチした絵を描くことをおすすめします。絵が記事にマッチしていると、内容が読者の頭にすっと入ってきやすいです。そして下手と思っても、とにかく描くことが大事です。
●描くサイズ
描くサイズも自由ですが、このブログで使用してるアイキャッチ画像の大きさで仕上げる場合だと、大きく描いてA5サイズ（210mm × 148mm）の用紙内ぐらいで十分です。また慣れないうちは、小さく描く方が上手く描けます。そして時間もかかりにくいです。
以上を押さえておけば、このブログのアイキャッチレベルは問題ないです。
ポイント：絵の印象を強める方法
このサイトで描いているイラストには、どんな絵にも「目」を描いています。なぜかというと、目を描き加えるだけでキャラクターとなり個性がでるのと、人は本能的に顔を認識しようとするので、なんでもないモチーフでも印象を強めることができるのです。なので、アイキャッチとしての効果も高まります。もちろん好みもありますが、一つの方法として参考にしてみてください。
3. 手描きイラストをデータ化
次の工程は、描いた絵をデジタルデータ化します。方法は簡単です。
スマホのカメラで撮影するだけ！
最近のスマホカメラは、高画質で手ぶれ補正も効いているので問題ないです。
撮影のポイントは、明るい部屋で極力接写して撮ることです。
参考までにiPhone Xで撮ったものがこちらです。
もちろん、コピー機のスキャナー等で取り込んでもOKです。ただ、時間をかけずにアイキャッチを作成するなら、スマホで撮影が早くて楽です。
データ化の仕上げに、取り込んだ絵のコントラストを上げてゴミなどを目立たなくします。鉛筆画の縁が濃くなり、紙色がより白くなるイメージに調整します。
調整するアプリは、iPhoneだと写真アプリにコントラスト等の編集機能が付いていますが、他のアプリで調整してもOKです。着色時に使用するアプリ「アイビスペイントX」でも画像読み込み時に調整できます。
【コントラスト調整】
↓
【シャドウ調整】
↓
【ハイライト調整】
↓
【露出調整】
の順で調整していますが、やり方は一例です。
撮影したままの暗くて少しぼやけた感じが解消されたと思います。
イラストのデータ化はこれで完了です。
4. 無料イラスト作成アプリ「アイビスペイントX」
では、データ化したイラストにアプリ上で色をつけていきます。
着色するアプリも基本的に何を使用してもOKです。このブログのイラストを作るときは、いつも有料のAdobe Photoshopを使用していますが、今回はお金をかけなくてもできるよう、無料のスマホアプリ「アイビスペイントX」を使って解説します。
簡単に「アイビスペイントX」とはどんなアプリかというと、
・無料
・シリーズ6,000万ダウンロードの大人気本格お絵かきアプリ
・豊富なブラシ・フォント・素材が使える
・レイヤーをはじめ多数の編集機能がある
といった評判の良い高性能アプリで、クオリティーの高い作品が作れます。
さっそく、スマホにインストールしましょう。
ポイント：有料ソフトは、やっぱり良い
どのソフト・アプリも作り方の大きな考え方は同じですが、各ソフト・アプリの操作方法や作業画面が異なります。ある程度ためしたら、長く使うソフトを決めて使い方を覚える方が良いと思います。
使いやすさや機能を考えると、有料のAdobe Photoshopがおすすめです。プロも使用するソフトですが、単体プランだと月額1,680円（税別）で使えます。ちなみに、アイビスペイントで作成したデータを読み込んで編集もできます。
5. イラストに着色してアイキャッチ画像を完成させる
では、着色作業していきましょう。
インストールした「アイビスペイントX」起動します。
マイギャラリーをタッチ。
画面下の操作パネル「+」をタッチ。
サイズを入力します。このブログのアイキャッチのサイズは幅1200×高さ808ピクセルなので、それをカスタムサイズとして入力します。
次に前項でデータ化したイラストを読み込みます。
操作パネルの「レイヤー」をタッチ。次に「カメラ」をタッチ。スマホのフォトライブラリーから先程撮影したイラスト原画を選択し、読み込みます。
イラストデータが読み込めたら、画像の大きさを作成フレームのサイズに合わせてトリミングします。この場合だと縮小します。
完了のチェックを入れると「線画抽出」をするか聞いてきます。
前項でイラスト原画のコントラストを調整していない場合は、ここで調整します。
するとレイヤー２として読み込まれています。
この時点で、レイヤーウインドウには、もともとある白紙の「レイヤー1」と今読み込んだイラスト原画の「レイヤー2」と背景がピンクの「選択レイヤー」の3つがある状態になります。背景がピンクの「選択レイヤー」は、ブラシや消しゴムで選択範囲を作るための特殊なレイヤーです。初めのうちは使用しないと思いますが、操作に慣れてきたら試してみましょう。
次に、読み込んだイラスト原画のレイヤー2の上に着色するレイヤーを作ります。
もともとあるレイヤー1をイラスト原画のレイヤー2の上にスワイプし、重なり順を変更します。
もしくは、操作パネルの「+」をタッチしてレイヤーを追加します。その場合はイラスト原画のレイヤー2の上にレイヤーが追加されます。
※レイヤーの後ろの数字は重なり順によって自動で変わります。
※レイヤー名は「…」その他ボタンから変更できます。
ここでは、もともとあるレイヤー1をイラスト原画のレイヤー2の上に移動させました。移動ができたら下矢印をタッチし、レイヤーウインドウを格納します。
ポイント：レイヤーとは
レイヤーとは層の意味で、層ごとに色分けして着色していきます。アニメで使われる透明なセル（透明なフィルム）のようなイメージです。なので修正や調整をしやすくするために、イラスト原画とは別のレイヤーに着色します。
では、今作ったレイヤーにエンピツの色を塗ります。
メイン画面下の操作パネル中央の「カラー」をタッチ。カラーウインドウが表示されるので、色を指定します。
ちなみに、外側の円が色の色相（色味）で、中央の円で明度（明るさ）を調整できます。指定がてきたら、下矢印をタッチしてカラーウインドウを格納。
メイン画面下の操作パネルの「ブラシ」をタッチし、ブラシの形状を選びます。
エアブラシ（標準）を選択。さらに右の「＞」を押し、パターン不透明度を調整します。少し濃くしました。
次にメイン操作パネルの上のスライダーで、太さと不透明度（濃さ）を調整します。ここの不透明度（濃さ）の調整は、先程のパターン不透明度で調整した不透明度（濃さ）を最大数値とし、その設定値に対しての不透明度の調整となります。
設定が完了したら下矢印をタッチしてブラシウインドウを格納します。
では、追加したレイヤー3が選択されていることを確認し（選択されていると水色になります）、イラストのエンピツ部分に色を塗ります。イラストの線をはみ出ても良いので塗ります。
ちなみに、画面をピンチするとズームできます。画面左上の戻る「←」ボタンか、画面を二本指でタップすると1作業「取り消し」できます。また「→」ボタンか、画面を3本指でタップすると「やり直し」になります。
当然、線が塗りつぶされて隠れたりしている箇所があると思います。
そこで、レイヤーウインドウを表示させて、このエンピツの着色レイヤーの合成モードを変更します。
合成モードとは、下のレイヤーに描かれた内容に対しての重ね方のことです。
現状、レイヤーの合成モードは「普通」になっています。これを「乗算」に変えます。すると、塗りつぶされて見えなくなっていた絵の線が見えるようになります。
この「乗算」とは、下にあるレイヤーの色（ここではイラストの線画）と、設定中のレイヤーの色を掛け合わせて合成処理します。なので合成後は、元の色より暗い（濃い）色になります。
合成方法は他にも色々あるので、試してみてください。参考までに合成モードについて説明しているサイトです。
メイン画面にもどり、はみ出した箇所を消します。
操作パネルの「消しゴムとペンの切り替え」→「消しゴム」ツールを選択。ブラシと同様に、消しゴムのブラシ形状を選びます。
あとは同じようにして着色作業をしてイラストを完成させます。ここではさらに目と背景に色を着色しました。
完成したら、操作パネル右端の「←」をタッチ。その中の「マイギャラリーに戻る」をタッチしマイギャラリーに戻ります。
マイギャラリー操作パネルの「共有ボタン」をタッチして「画像（JPEG）」等の保存形式を選び、PCやスマホ内の写真アプリなど任意の場所に保存します。
ちなみにマイギャラリー操作パネルの「i」ボタンから作品ファイル名を変更できます。
以上で手描きイラストアイキャッチ完成です！
6. まとめ：ブログの手描きアイキャッチ画像の作り方についておさらいしましょう！
今回はアイビスペイントを使った、ブログの手描きアイキャッチ画像の作り方について紹介させていただきました。
本記事の内容を要約しておきます。
今回の解説は以上です。難しかったでしょうか？
駆け足で解説しましたが、何回か作ると慣れると思いますので、
スキルの幅を広げたいと思われた方は、この記事を参考に挑戦してみてください！
ではでは。
（・o・）/
アイビスペイントの詳しい使い方は、こちらのサイトで紹介されています。
おすすめ画像編集アプリ
《人気関連記事》初心者できた!ワードプレスブログ始め方Step1【すぐ開設！準備編】
《人気関連記事》初心者できた!ワードプレスブログ始め方Step6【カスタマイズ編1 トップバナー・プロフィールカード作成】