アイキャッチ画像

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

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

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

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

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

アイキャッチ画像とは

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

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

  • ブログ記事にあった写真を選ぶようにする
  • 記事の内容がより伝わる画像を
  • 写真は画素数が高く色鮮やかなものを使う
  • フリー素材を使う
  • 最適なアイキャッチのサイズを作る
  • 文字を目立たせる工夫をする

の5つとなります。

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

無料ソフト

Canva

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

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

GIMP

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

Inkscape

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

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

有料ソフト

  • Affinity Photo
  • Affinity Designer
  • Photoshop Elements

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

当ブログでも、過去には『Photoshop』『illustrator』(いずれもCC版)を使用していました。現在は、『Affinity Designer』を使用しています。

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

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

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

ブログ記事にあった写真を選ぶようにする

アイキャッチ画像は、必ずブログ記事の内容と合った画像を使うようにしましょう。

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

記事の内容がより伝わる画像を

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

アイキャッチ画像

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

写真は画素数が高く色鮮やかなものを使う

アイキャッチ画像がクリックされるためには、高画質な画像を使いましょう。

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

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

フリー素材を使う

無料のフリー素材を使ってアイキャッチ画像を作っている方もいますが、フリー素材を使う場合は以下のポイントを押さえておきましょう。

  • 極力クオリティーの高い写真を選ぶ
  • 商用利用が可能かどうか

ぱくたそ(https://www.pakutaso.com/)

風景や人物など、様々なジャンルの画像を無料で使えるフリー素材のサイトとして有名です。会員登録なしで多数のフリー素材を入手できます。

写真AC(https://www.photo-ac.com/)

こちらは会員登録が必要ですが、多くの風景や人物などの画像が無料でダウンロードができます。

注意点

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

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

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

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

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

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

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

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

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

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

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

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

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

例:スーパームーン/マイクロムーンのそれぞれの意味について解説!」記事のアイキャッチ画像

アイキャッチ画像

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

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

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

アイキャッチ画像

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

ぼかしを入れる

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

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

文字に縁取りを入れる

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

アイキャッチ画像

文字の背面に色を入れる

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

アイキャッチ画像

グレー背景(帯)に文字

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

アイキャッチ画像

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

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

白背景に黒文字

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

アイキャッチ画像

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

枠線(ボックス)

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

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

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

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

文字の下に白い線

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

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

帯に文字

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

アイキャッチ画像

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

背景を敷いて文字

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

アイキャッチ画像

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

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

例:無料ブログと有料ブログ(WordPress)のメリット・デメリットを比較!【初心者向け】」記事のアイキャッチ画像

アイキャッチ画像

デカ文字

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

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

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

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

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

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

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

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

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

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

手順

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

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

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

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

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

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

4.文字を入れます。

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

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

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

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

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

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

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

6.必要に応じて、画像圧縮ツールを使って画像サイズを減らします。

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

画像圧縮ツールは色々ありますが、私は「Squoosh」というサイトで画像のサイズを減らしているよ。

完成!

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

元のデータを保存する場合は、「別名で保存」するか、上書き保存をしてね!

まとめ

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

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

スポンサーリンク