アイキャッチ画像（サムネイル）は、訪れた人が一番はじめに目にするもので、できるだけ興味を引くものにしたいもの。
でも、アイキャッチは凝っていくとどこまでも上があるので、今回はアイキャッチ画像を簡単にイラストレーターでキレイに作る方法をご紹介します。
ちなみに完成するとこんな感じになります！
イラストレーターは少しとっつきにくい部分もあると思いますが、これを見ればだれでもできるようになるので安心してください。
それでは早速いきますよー！
イラストレーターで作るアイキャッチ画像のサイズを調べる
アイキャッチ画像を作る際に必要となるのが、サイズです。サイズといっても、知りたいのは比率
使っているWordPressのテーマによってアイキャッチ画像の比率は異なるので、テーマの公式HPやブログでお調べください。
ボクはWordPressの「JIN」というものを使っていて、JINで表示されているアイキャッチ画像は16:9で表示されています。16:9というのは画像の縦横比率のことです（16が横、9が縦です）。
16:9の代表的なサイズはこちら
- 1920×1080
- 1280×720
- 960×540
アイキャッチ画像は大きければ大きいほどキレイに見えますが、画像の容量も大きくなります。画像の容量が大きいとアイキャッチの読込み速度が遅くなって、ブログ全体の評価が下がりますのでできるだけ軽くしましょう。
画像の容量を軽くするには、アイキャッチの大きさを必要最低限にすればOKです。
JINであればPCで見られることも考えて、「1280×720」が最低限の大きさです。これより小さいと画像の粗い部分が見えて汚い印象を持たれてしまいます。
イラストレーターでアイキャッチ画像を作る方法
STEP1 調べたサイズを入力して画像を作れるようにする
イラストレーターを起動すると上記のウィンドウが表示され、作成する画像のサイズを聞かれますので、作りたい画像のサイズを入力して作成ボタンをクリックしてください。
- Webを選択する
- サイズを入力する（1280x720px）
- 作成ボタンをクリックする
そうるすとこのように白紙のキャンパスが作成されます。
※1280×720の文字は実際には表示されません
もし、間違えてサイズを入力してもあとで変更できます。
これで画像が作れるようになりました。
STEP2 背景となる画像を貼り付ける
背景となる画像を貼り付けます。このとき、黒い枠が1280×720の大きさなので、外側にある部分はアイキャッチから消えるので注意してください。
貼り付けた画像は1280×720より大きな画像なので、横幅1280pxに合わせて調節しましょう。このとき、画像の縦横比率を変えないようにするのがポイントです。
背景に使う画像は、おもにフリー素材をネットで探して使っています。
例えば、Unsplash
有料のものもあるようですが、ボクは使ったことがありません。他のものと差別化するならありだと思います。
一番の差別化は自分の顔が出ているアイキャッチではないかと、考えているのでボクはフリー素材を使っています。
STEP3 文字を浮かせるために枠を入れる
- 長方形ツールで枠を追加する
- 枠の中は「黒」または「白」で塗る
- 透明度を50%に変更する
枠は、「長方形ツール（M）」で入れます。大きさは自由ですが、あまり小さいと後で入れる文字が小さくなるので、ほどほどに大きく入れましょう。
枠を入れたら「黒」または「白」で枠の中を塗ります。その後、プロパティのところから「透明度」を50%ほどに落とします。
黒・白は背景画像に合わせて変えてください。白っぽい背景であれば黒、白っぽい背景であれば白がおすすめです。
透明度は好みで問題ありません。75%だと少し暗すぎるかなと思って、50%にしています。
STEP4 枠の上に文字を入れる
- 文字を入れる
- フォント・大きさを変更する
タイトルと合うように文字を入れましょう。ボクは上と下に分かれて文字を入れています。
上と下に分けなくても、1行の文字でも問題ありません。
また、上と下でフォントの大きさを変えています。
上：ヒラギノ角ゴシック W6 80pt
下：ヒラギノ角ゴシック W8 80pt
文字を太くすると視認性が高くなり、初めて見た人でも認識してもらいやすいです。
フォントは、お好きなもの・ブログに合ったものがおすすめ
ボクは「ヒラギノ」が好きで、角ばった文字が好きということもあり、「ヒラギノ角ゴシック」にしています。ゴシックだと角ばっていて認識しやすいというのも理由です。
これでアイキャッチは完成です。あとはファイルへの書き出しです。
STEP5 JPGファイルへの書き出し
- 左上のファイル
- 書き出し
- Web用に保存（従来）
左上の「ファイル」から「書き出し」の中にある「Web用に保存（従来）」をクリックしてください。
そうすると下記ウィンドウが表示されます。
今回はイラストレーターのCCでやっていますが、CSでも同じことができます。
※クリックすると大きくなります
- 画像の種類を「JPG」に変更
- 画質は「最高画質」「100」に変更
- 画像サイズは幅「1280」高さ「720」
- 「アートボードサイズでクリック」にチェックを入れる
- 「保存」ボタンをクリックして画像を保存する
画像サイズは一番はじめのサイズ指定が間違っていなければ変更する必要はありません。
「アートボードサイズ」にチェックを入れるのは、アートボード外になにか素材があった場合、画像に入ってしまうからです。
最後に、「保存」をクリックして任意の場所に画像を保存してください。
これでアイキャッチ画像は完成です。
ただ、このままでは容量が大きいので圧縮ツールを使って画像容量を落としたほうが、アイキャッチ画像の読み込みが早くなり、ブログの表示スピードもあがるのでぜひやってみてください。
アイキャッチ画像の容量を小さくする方法
ボクは、ブラウザ上で使える「Optimizilla」という圧縮ツールを使っています。
ネットさえ繋がっていれば、Windows/Macなど関係なく使用できる点、インストールしなくても良い点が気に入って使っています。
「Optimizilla」は、自動で画像を最小サイズ（容量）まで圧縮してくれるもので、圧縮する画像を指定するだけです。
「アップロード」ボタンから圧縮する画像を指定します
画像ファイルをドラッグ&ドロップしても認識されます
圧縮が終わると次のように表示されるので、「ダウンロード」ボタンから画像を任意の場所にダウンロードして終わりです。
400KBあった画像が、130KBに落ちるなど、自動で必要最低限まで圧縮してくれるのでぜひとも使ってみてください。
