Webサイト・ブログ

初心者でもできる!アイキャッチ画像の簡単な作り方

アイキャッチ画像

これからブログや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版)を使用しています。

スポンサーリンク

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

みきてぃ東西線

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

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

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

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

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

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

アイキャッチ画像

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

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

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

みきてぃ東西線

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

フリー素材を使う

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

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

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

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

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

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

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

アイキャッチ画像
知らないと大変!フリー素材使用時の注意点まとめ【初心者向け】フリー素材と聞くと、「無料で、自由に使える」というイメージが大きいですが、実は「フリー素材=自由に使える」ということではありません。この記事では、「フリー素材使用時の注意点」について解説していきます。...

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

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

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

例:スーパームーンとは?意味や月が大きく見える理由」記事のアイキャッチ画像

アイキャッチ画像

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

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

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

アイキャッチ画像

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

ぼかしを入れる

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

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

文字に縁取りを入れる

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

アイキャッチ画像

文字の背面に色を入れる

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

アイキャッチ画像

グレー背景(帯)に文字

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

アイキャッチ画像

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

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

白背景に黒文字

例:新型コロナで外出できない時に行いたい事。自宅待機中は何しよう?」記事のアイキャッチ画像

アイキャッチ画像

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

枠線(ボックス)

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

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

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

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

文字の下に白い線

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

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

帯に文字

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

アイキャッチ画像

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

背景を敷いて文字

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

アイキャッチ画像

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

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

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

アイキャッチ画像

デカ文字

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

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

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

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

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

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

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

みきてぃ東西線

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

みきてぃ東西線

今回は、『illustrator』を使って、アイキャッチ画像を作っていくよ。『GIMP2』『Canva』で作る場合は、手順が少し異なるので注意してね!

下準備

イラストを作ります。

自分でイラストを作れる場合は、『illustrator』『GIMP2』などのソフトを使ってイラストを作っていきましょう。

手順

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

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

アイキャッチ画像の作り方・ファイルを新規作成
みきてぃ東西線

WordPressでブログを運営している場合、テーマによって最適なアイキャッチのサイズが異なるよ。

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

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

4.文字を入れます。

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

5.出来上がったら、画像として書き出し保存をします。

アイキャッチ画像の作り方・画像書き出し
みきてぃ東西線

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

みきてぃ東西線

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

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

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

みきてぃ東西線

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

完成!

アイキャッチ画像
みきてぃ東西線

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

まとめ

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

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

アイキャッチ画像
アイキャッチ画像の修正方法を解説【誰でもわかる】ブログを長く運営していくと、必要に応じて記事のアイキャッチ画像を修正しなければなりません。といっても、「どうやってアイキャッチ画像を修正するの?」と悩む方も多いですよね。今回は、「記事のアイキャッチ画像の修正方法」について、分かりやすく解説していきます。...

ABOUT ME
みきてぃ東西線
20代大学卒業生です。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。
おすすめ記事