アイキャッチ画像

これからブログやWebサイトを運営したい方や、ブログやWebサイトを初めた初心者が悩ませるのが「アイキャッチ画像」の作り方。

ブログの記事の下書きができたのに、「アイキャッチ画像をどのように作ったらいいか分からない・・・」と悩むかもしれませんね。

今回は、「アイキャッチ画像の簡単な作り方」を、初心者でもわかりやすく解説していきます。

プロフィール用アイコン
みきてぃ東西線

当ブログのアイキャッチは全て自分で作っているよ。

※2021年4月22日追記:内容の一部を加筆・修正しました。

アイキャッチ画像とは

ブログのトップページに入れて読者の興味を惹いたり、記事の概要を表したりする画像のことを指します。

まず、初心者がアイキャッチ画像を作る際のポイントとしては、

  • 記事の内容に合った画像を使う
  • 高画質でキレイな画像を使う
  • 最適なアイキャッチのサイズを作る
  • 文字を目立たせる工夫をする

の4つとなります。

アイキャッチ画像を作るデザインソフト・ツール

アイキャッチ画像を作る上で必要なソフトやツールを紹介します。

無料ソフト

Canva

ソフトをインストールする必要はありません(Web上で使えます)。操作方法も簡単です。

『Illustrator』のほうが自由度やクリエイティブ度は高いですが、ブログのアイキャッチ制作だけならCanvaで十分です。

GIMP

当ブログでも現在使用している、無料ペイント系ソフトです。『Photoshop』には負けないほどの高機能の画像加工をすることができます。もちろん、psd形式のファイルを開くことができます。

Inkscape

これも無料で使えるドロー系ソフトです。『illustrator』とほぼ同じ操作感で、イラストなどを作成することができます。

ai形式ファイルも使えますが、イラレで「PDF互換ファイルを作成」をチェックせず保存したai形式ファイルは、『Inkscape』で開くことができないので注意しましょう。

有料ソフト

  • Affinity Photo
  • Affinity Designer
  • Photoshop Elements

上記の有料ソフトはいずれも1回買い切りのソフトですので、コストを抑えて使用できます。

当ブログでは『Affinity Photo』『Affinity Designer』を使用しています。

アイキャッチ画像を作る際のポイント

プロフィール用アイコン
みきてぃ東西線

次に、「アイキャッチ画像を作る際のポイント」を解説していくよ。

記事の内容に合った画像を使う

アイキャッチ画像は、それぞれブログ記事の入り口を表します。

よって、記事の内容を伝わりやすくするためには、「その記事の内容に合った画像」を使うことが大切です。

例:カフェをテーマにした記事・・・コーヒーの画像をアイキャッチ画像にする

例:【駅から気軽にハイキング!】鉄道遺産「アプトの道(碓氷峠)」」記事のアイキャッチ画像

アイキャッチ画像

上記記事は、アプトの道で有名なめがね橋をアイキャッチ画像にし、アプトの道の魅力をシンプルに伝わるように工夫しました。

高画質でキレイな画像を使う

画像の大きさが小さすぎると、ぼやけたアイキャッチ画像になってしまいます。

なるべく、高画質な画像を使いましょう。

プロフィール用アイコン
みきてぃ東西線

当ブログの写真はすべて一眼レフカメラで撮影しているよ。

フリー素材を使う

口コミ用キャラクターアイコン

今すぐパパっとアイキャッチ画像を作りたい!

という場合は、無料のフリー素材を使ってアイキャッチ画像を作ることもできます。

フリー素材を使う場合は、以下のポイントを押さえておきましょう。

  • 極力クオリティーの高い写真を選ぶ
  • 画像加工・商用利用可能のもの

主なフリー素材サイト

注意点

フリー素材を利用する場合、サイトごとに利用規約が異なる場合がありますので、必ず利用規約をよく読んでから利用しましょう。

詳しくは、「知らないと大変!フリー素材使用時の注意点まとめ【初心者向け】」の記事にて解説しています。

プロフィール用アイコン
みきてぃ東西線

「フリー素材って何?」という方は、以下の記事を読んでね!

最適なアイキャッチのサイズを作る

アイキャッチの画像が小さすぎると、拡大された画像がぼやけて見えてしまったり、アイキャッチ画像が正常に表示されなかったりしてしまう可能性があります。

WordPressにおける最適なアイキャッチ画像のサイズは、テーマによって異なりますので、お使いのテーマのアイキャッチサイズを調べてから作るようにしましょう。

また、今後テーマを変更したり、他のブログサービスに引っ越したりする予定がある場合は、大きめのアイキャッチ画像を作った方がキレイにできます。

プロフィール用アイコン
みきてぃ東西線

ちなみに、私のブログではMacのRetinaディスプレイに対応できるように、あえて1520×856サイズで作っているよ(一部記事では800×451サイズのアイキャッチとなります)。

文字を目立たせる工夫をする

アイキャッチ画像に文字を入れる場合、以下のポイントを押さえておきましょう。

背景を少し暗くして文字を目立たせる

例:2021年のスーパームーンはいつ見られるの?」記事のアイキャッチ画像

アイキャッチ画像

上の画像は、濃い青を背景としてベースにし、文字は白くして目立たせるように工夫しました。

クリックしたくなるようなキャッチコピーを入れる

例:自作ドライブレコーダーステッカー「あおり運転の抑制、防止に!」」記事のアイキャッチ画像

アイキャッチ画像

上の画像は、自作ステッカーのイラストとともに、「自作ステッカー、作ってみた。」というキャッチコピーを入れ、自分でドラレコのステッカーを作ったというアピールを入れています。

ぼかしを入れる

アイキャッチ画像の作り方 「ぼかしを入れる」

上のサンプル画像では、パソコンの画像にぼかしを入れています。

文字に縁取りを入れる

例:我が家のエコバックをご紹介」記事のアイキャッチ画像

アイキャッチ画像

文字の背面に色を入れる

例:御朱印に関する基礎知識」記事のアイキャッチ画像

アイキャッチ画像

グレー背景(帯)に文字

例:【初心者必見】Windows10の初期設定と無線LANによるネット接続の方法」記事のアイキャッチ画像

アイキャッチ画像

上のアイキャッチ画像ではグレーの帯に白文字を入れました。

グレー背景(帯)に文字を入れる場合、濃い色は白文字、薄い色は黒文字で入れておくと見栄えが良くなります。

白背景に黒文字

例:おうち時間で新しいことを始めてみよう!」記事のアイキャッチ画像

アイキャッチ画像

白背景に黒文字の場合、文字が見やすいため、イラストと文字だけで作る場合は、背景をシンプルにしてもいいでしょう。

枠線(ボックス)

アイキャッチ画像の作り方 「枠線(ボックス)」

上の画像は、白の枠線の中に文字を入れたサンプル画像です。

アイキャッチ画像の作り方 「枠線(白塗りボックス)」

上のサンプル画像は、白いボックスの中に文字を入れてみました。

文字の下に白い線

アイキャッチ画像の作り方 「文字の下に白い線」

上のサンプル画像は、白文字の下に白い線を入れています。

帯に文字

例:ファビコンを無料で作る方法と設置方法を解説」記事のアイキャッチ画像

アイキャッチ画像

先ほどの「グレー背景(帯)に文字」のやり方と同様に、グレーの帯に透明度を上げ、そこに文字を入れてみました。

背景を敷いて文字

例:桜と菜の花を一緒に楽しめる!春の権現堂公園」記事のアイキャッチ画像

アイキャッチ画像

上の画像は、桜と早咲き型の菜の花を背景にして、文字を挿入しました。

ロゴや看板が写っている画像をそのまま使う

例:WordPressのテーマとは?無料/有料テーマの違いも解説」記事のアイキャッチ画像

アイキャッチ画像

上のアイキャッチ画像は、WordPressのロゴを使い、ロゴの下に文字を入れています。

※WordPressロゴは公式サイトからダウンロードできます

デカ文字

アイキャッチ画像の作り方 「デカ文字」

文字のサイズは大きい方が目立ちやすくなります。

ただし、あまり大きくし過ぎて、画像との配置バランスが崩れないように気を付けましょう。

文字数を増やさずシンプル

アイキャッチ画像の作り方 「文字数を増やさずシンプルにする」

文字数を増やさないで、分かりやすい文にしておくと、記事の内容が分かりやすくなります。

アイキャッチ画像を実際に作ってみる

プロフィール用アイコン
みきてぃ東西線

実際にアイキャッチ画像の作り方を解説していくよ!

ここでは、『Affinity Designer』を使って、アイキャッチ画像を作っていくよ。『GIMP2』や『Canva』などの他のソフトで作る場合は、手順が少し異なるので注意してね!

手順

下準備.アイキャッチに使うイラストを作ります。自分でイラストを作れる場合は、『Affinity Designer』『GIMP2』などのソフトを使って作成します。

1.ドローソフト(『Affinity Designer』など)や画像編集ソフト(『GIMP2』など)を起動します。

2.「ファイル」→「新規」をクリックし、サイズを指定して新規ファイルを作成します。

アイキャッチ画像の作り方・ファイルを新規作成

3.画像やイラストを配置していきます。

アイキャッチ画像の作り方・画像などを配置

4.文字を入れます。

アイキャッチ画像の作り方・文字を入れる

5.出来上がったら、画像としてエクスポート(書き出し保存)します。

アイキャッチ画像の作り方・画像書き出し
プロフィール用アイコン
みきてぃ東西線

カメラなどで撮った画像を使っている場合はJPG形式、イラストと文字だけで作ったアイキャッチ画像はPNG形式で保存してね!

プロフィール用アイコン
みきてぃ東西線

画像圧縮ソフトを使用する場合は、一旦PNG形式で保存してね。

アイキャッチ画像の作り方・画像書き出し時に、PNG形式で書きだす場合

6.アイキャッチ画像ができたら、TwitterやFacebookなどのSNSでブログ記事が拡散された場合に、どのようにアイキャッチ画像が表示されるかどうかも確認しておきましょう。

サルワカの「アイキャッチ画像サイズチェッカー」というツールでは、「画像を選択」をクリック→アイキャッチ画像を選択して「開く」をクリックすることで簡単にシミュレーションすることができます。

7.最後に、画像圧縮ツールを使って画像自体の容量を減らします。

プロフィール用アイコン
みきてぃ東西線

私は「Squoosh」というサイトで画像のサイズを減らしているよ。

完成!

アイキャッチ画像
プロフィール用アイコン
みきてぃ東西線

元のデータを保存する場合は「別名で保存」するか、上書き保存をすれば、次回作業時に手間がかからなくて済むよ!

アイキャッチ画像の修正

アイキャッチ画像が出来た後も終わりはありません。

自分が作ったアイキャッチ画像でも、数か月後には「おや?」と思うこともあります。

読者が記事を読みたくなる最高のアイキャッチ画像にするためには、適宜「アイキャッチ画像を修正する」ということも必要になります。

プロフィール用アイコン
みきてぃ東西線

アイキャッチ画像を修正する方法は以下の記事を読んでね!

まとめ

長文になりましたが、今回は「アイキャッチ画像の簡単な作り方」を解説しました。

写真やイラストを使ってわかりやすく表現し、文字や装飾に配色を工夫してアイキャッチ画像を作ってみましょう。少しでも参考になれば幸いです。m(_ _)m

スポンサーリンク