記事内に商品プロモーションが含まれる場合があります
今回は、アイキャッチ画像の作り方を解説します。デザインのコツもまとめているので、ブログやWebメディアを運営している方はぜひ参考にしてみてください。
制作手順の画像は、2017〜2018年の公開記事に掲載していたパソコン版の画面例です。現在はメニューの位置、テンプレートや素材、利用条件が異なる場合があります。
1. アイキャッチ画像のデザインツールは？
アイキャッチ画像を作るためのツールはたくさんあります。
Photoshop
Photoshop（フォトショップ）を使えば写真をアーティスティックに加工したり、手描きのイラストを取り入れたりなどと、多様な表現ができます。また、ブログのアイキャッチ画像は基本的にイラストや写真をレイアウトするだけで十分かと思います。有料契約を検討する場合は、作りたい画像に必要な機能を確認しましょう。
Illustrator
この記事の公開当時、当サイトのアイキャッチ画像制作に使っていたのはIllustrator（イラストレーター）です。著者は、アイキャッチ画像を作るようなレイアウト作業に向いていると感じていました。現在も有料のプランで提供されています。契約条件は公式の案内で確認してください。
Canva
個人的にいちばんおすすめなのがCanvaです。無料の素材やフォントを選んで、アイキャッチ画像を作れます。一部の素材・機能・書き出し設定は有料のため、使う項目の条件を確認してください。ソフトをインストールする必要もありません（Web上で使えます）。操作方法も簡単です。
Canvaとは？
Canvaとは？無料で使える？できることを解説Canvaに登録をしよう
Canvaを使う方は、会員登録をして基本的な使い方もざっくりと押さえておきましょう。こちらの記事を参考にして頂ければと思います。
Canvaの超初心者向け操作ガイド！基本を完全解説2. アイキャッチ画像のデザインのコツ
作り方を解説する前に作るときの「コツ」や「心構え」をまとめておきます。
2-1. 美しい写真を使う
アイキャッチ画像に写真を用いる場合には、写真の質にこだわりましょう。
インパクトが無く、何を表しているのか分かりづらい写真は使わないようにしましょう。
写真はできる限り、美しいものを選びます。これだけで印象はガラッと変わります。
写真はどこで探す？
美しい写真を探すならUnsplashも候補です。Unsplash Licenseの対象となる無料の写真は、ライセンス条件の範囲で商用利用できます。写真に写る人物やブランドなどについては別の許可が必要な場合があるため、写真と用途に応じて条件を確認してください。有料のUnsplash+素材とは利用条件が異なります。
2-2. シンプルな写真の方が文字をのせやすい
明るい部分と暗い部分の差が激しい、複雑な写真を使うと文字をのせたときに見にくくなります。
色の変化が激しいため、文字をのせても一部が見えづらくなってしまいます。
シンプルな写真を選んだ方が文字はのせやすく、見た目もスッキリします。文字をどこに入れられるかを、考えた上で写真を選びましょう。
2-3. 文字を目立たせる工夫をする
それでも、複雑な写真を使いたいときには一工夫を加えましょう。
背景写真を暗くする
この例では、背景の写真を暗くすることで白文字を強調しています。また、太字にすると埋もれにくくなります。
文字を縁取り
文字の縁取りをするのも写真を埋もれさせないための1つの手段です。ただし縁取りをすると「シンプルさ」や「スマートさ」は失われるので注意しましょう。
文字の背後を塗りつぶす
文字の背後に色をつけるのも良いでしょう。ポイントは、写真の色味に近い色で塗ることです（馴染みやすくなります）。ただし、写真が大きく隠れてしまうので写真を活かしたいときにはあまりおすすめできません。
2-4. おしゃれなアイコンを使ってみる
制作時間1分のアイキャッチ画像です。背景に色を塗って、文字とアイコンをのせただけです。きれいなアイコンを使うと、それだけで良い感じになるんですよね。
なお、この例のアイコンはフリー素材サイトの「FLAT ICON DESIGN」のものを使いました。素材を利用するときは、配布元の利用条件を確認してください。
レイアウトに気をつける
なお、レイアウトのバランスが悪いと、いくら良いアイコンを使っても台無しになってしまうので注意しましょう。
きれいに整えて並べるのが大切です。また、文字やアイコンなどのパーツどうしの間にはある程度スキマを開けるようにしましょう。
2-5. おしゃれなイラスト素材を使ってみる
おしゃれなイラストをのせるのも良いかと思います。こちらは並べただけですが、良い素材を使うとそれなりに良く見えるものです。
もはやイラストだけで、文字を入れなくても良いかもしれませんね。どちらにせよ、アイキャッチ画像はタイトルと一緒に表示されるわけなので。
物足りない場合には、イラストの背後にちょっと色を変えた円をのせるのも簡単にできる1つの表現かと思います。
2-6. 色の使い方に気をつける
文字色や背景色の選び方を間違えると、どれだけ良い素材とレイアウトであっても台無しになってしまいます。
違和感のない色の選び方をしましょう。イラストの一部に色を合わせると、よく馴染んだりします。
原色を使いこなすのは難しい
なお、原色に近い色（絵の具の「青」とか「赤」みたいな色）を使うのはなかなか難易度が高かったりします。慣れないうちは、控えめな色を選ぶのが良いでしょう。
色を使いすぎない
たくさんの種類の色を使うと統一感のない印象となってしまいます。使用する色数は多くなりすぎないようにしましょう。
2-7. 文字をデザイン要素として使ってみる
写真・アイコン・イラストなどを使わなくても、文字だけでインパクトのあるアイキャッチ画像を作ることもできます。
例えば手書きフォントを大きく使うとインパクトのあるデザインになります。英語だとフォント種類がたくさんあって楽だったりします。
日本語だと渋いフォントを使うと、日本語の醍醐味を活かしつつ、インパクトを出すことができます（「修造」に使っているのは青柳隷書しもというフリーフォントです）。利用時は配布元の使用方法も確認してください。
なお、手書きにする文字は長くしすぎないようにしましょう。一部の言葉をどかんと見せる…というイメージです。
2-8. 画像のサイズに気をつける
FacebookやTwitterで記事がシェアされるときに、アイキャッチ画像の一部がサイズ調整のために自動で切り抜かれる（トリミング）ことがあります。このように文字やイラストの一部が切れてしまったりするわけですね。
また、正方形に自動でトリミングされて表示されることもあります。ブログ内の関連記事なんかでも自動で正方形に調整される…ということはよくあるかと思います。
できれば、長方形・正方形どちらに自動トリミングされても、大切なパーツが切れてしまわないようにレイアウトしましょう。
おすすめは、画像サイズを横長の長方形にすること。また、正方形におさまるようにアイコンや文字を配置することです。
上と下ギリギリには見せたいものを配置しないようにしましょう。
公開当時の表示確認例
下の図は、公開当時に使っていたアイキャッチ画像チェッカーの画面例です。実際の表示や切り取り方は、SNSやブログの掲載面によって変わります。
重要な文字や図を端に置かず、公開時に各掲載面のプレビューで表示を確認してください。
3. ブログ向けアイキャッチ画像の作り方例（Canva）
それでは、ここからCanvaを使ったアイキャッチ画像の作り方例を解説していきます。とくにCanvaでしか出来ないような特別な操作はしないので、他のツールでも同じように作成できるかと思います。
手順1：テンプレートを選ぶ
以下は公開当時のテンプレート一覧の画面例です。現在は日本語のテンプレート一覧からも探せます。ここからアイキャッチ画像作成に使えそうなテンプレートを探していきましょう。
公開当時は下のウサギがかわいいテンプレートを使いました。色合いも目に優しくて良い感じ。図では［Edit this template］をクリックして編集を始めています。現在は一覧からプレビューを開き、テンプレートを編集するボタンを選びます。同じテンプレートが見つからない場合は、好みのテンプレートで試してみてください。
編集画面が開きました。ここから、フォントや色合いを変えたり、アイコンなどを挿入していきましょう。
手順2：テキストを変える
まずはテキストを変えましょう。変えたい文をダブルクリックします。
編集モードになるので、好きな文章を入力します。
この作例では、日本語を入力すると、ものすごく味気ない文字になってしまいました。
テキスト編集モードの際に表示される上部バーで、文字のもろもろの設定ができます。
図は当時、右側に「文字もじモジ」と表示される日本語フォントから「Rounded M+ Heavy」を選んだ例です。現在はフォントの一覧で言語や価格のフィルターも使い、日本語に対応するフォントを探せます。
さきほどと比べるとグッとそれらしいテキストになりました。かわいさを出したいときには、太めのフォントが合いますね。フォント選びはとても大事。
同じ要領で下のテキストも変えます。フォントはさきほどと同じ。色は背景色に近づけ、サイズを少し大きめにしました。
手順3：不要なテキストを消す
このあたりの小さめのテキストは、このままだとSNSでシェアされたときにはみ出てしまいそうですし、消してしまいましょう。クリックして…
図では右上のゴミ箱マークをクリックして、選択したテキストを削除しています。現在は選択後に表示される削除の操作や、WindowsのBackspace・MacのDeleteキーも使えます。
すっきりとしました。ただちょっと物足りないので、吹き出しを挿入して、このリスちゃんに喋らせてみましょう。
手順4：吹き出しを挿入してみる
今回は、吹き出し素材サイト「吹き出しデザイン」から使えそうな吹き出し画像を探すことにします。配布元の利用条件を確認し、背景が透明なPNG形式でダウンロードしましょう。
図では編集画面の左側の①［アップロード］から②［画像をアップロード］をクリックし、画像を選んでいます。現在は「アップロード」からファイルのアップロードを選びます。
一覧に追加されるので、③挿入したい画像をクリックします。
吹き出しを背後に持ってくる
吹き出しが前面にデカデカと配置されて文字が後ろに隠れてしまいました。図では［配置］［背面に移動］を繰り返して、吹き出しを背後へ移しています。現在も「配置」から一つ背面へ移動する操作や最背面へ移動する操作を選び、文字との重なりを調整できます。
余分な塗りを消す
リスや文字の背後の吹き出しが配置されたものの、背景色とかぶって目立ちません。そこで薄い塗りを消してしまいましょう。
背景の塗りが消えて良い感じになりました。
レイアウトを整えます。これで完成でも良いのですが、何となく「なぜただのリスが喋ってるの？」という感じなので、「リスがアイキャッチ画像を作った感」を出してみましょう。
手順5：ブラシのアイコンを追加
この作例では、さきほども紹介したFLAT ICON DESIGNのブラシのアイコンを使いました。現在はリンクが素材一覧へ移る場合があるため、用途に合う素材を選び、配布元の利用条件に従って背景が透明なPNG形式をダウンロードしてください。
さきほどと同じ手順でCanvaに画像を挿入し、リスの手のあたりに配置してみます。ちょっと手のあたりに持ってる感がありませんが、まぁ良しとします。きっとそこまで細かいところは見ないでしょう。
手順6：完成した画像をダウンロード
アイキャッチ画像が出来上がったらダウンロードします。図は当時、画面上部の①［ダウンロード］を選び、②ファイルの種類をPNGにして③［ダウンロード］をクリックした例です。現在は「共有」からダウンロードを開き、ファイルの種類やページを選んで保存します。有料素材を含む場合や一部の書き出し設定には、対応プランやライセンスが必要です。
ファイル形式について
今回の例のように文字や図形が中心の画像や、透明な背景が必要な画像ではPNGが候補になります。写真が中心の画像ではJPEGの方が小さい容量にまとまりやすいため、書き出した画像の見た目と容量を比べて選びましょう。
PNGで保存するときのテクニック
書き出したPNGのサイズが小さい場合は、まずデザインのサイズや、現在のプランで使える書き出し設定を確認してください。公開当時は、一旦PDFで保存して、PDFtoPNGでPNG画像に変換する方法も使っていました。出力される寸法や画質はPDFと変換設定によって変わるため、変換後の画像を確認しましょう。このサービスではPDFをアップロードして変換します。
4. アイキャッチ画像の表示をチェック
ここでは、公開当時にアイキャッチ画像サイズチェッカーで表示を確認した例を残しています。現在の表示はSNSやブログの掲載面によって異なるため、公開時のプレビューで文字や図の切れ方を確認してください。
こちらは公開当時のTwitter表示を確認した例です。吹き出しの上側が切れていますが、著者はこの作例では許容範囲と判断しました。
中途半端に切れてしまうようであれば、Canvaに戻って画像を再調整しましょう。
5. ブログ記事を重くしないために画像を圧縮しよう
PNG画像は、圧縮するとファイルのサイズを小さくできる場合があります。CompressPNGは無料・登録不要で圧縮を試せます。圧縮後は元の画像と見た目や容量を比べ、文字や色が見づらくなっていないか確認してください。
最後に
というわけでアイキャッチ画像の完成です。作り方は人それぞれかと思いますが、少しでも参考になれば幸いです。