WordPressにおけるアイキャッチ画像は、ユーザーの目を惹きつけるための非常に重要な要素です。
アイキャッチ画像で興味を惹きつけます。
すると、ユーザーが記事を最期まで読んでくれる可能性が上がります。
そして、Googleから受けるSEO評価も向上します。
したがって、WordPressで記事を作ったらアイキャッチ画像は確実に設定しましょう。
WordPressを使い始めたばかりで、アイキャッチ画像について詳しくわからない。
本記事の内容
・WordPressのアイキャッチ画像の概要や作り方のポイント
・アイキャッチ画像の作成におすすめのツール４選
今回は、WordPressのアイキャッチ画像の概要や作り方のポイント、設定する手順について詳しく解説します。
WordPressのアイキャッチ画像とは
WordPressにおけるアイキャッチ（Eye Catch）画像とは、ウェブサイトやブログ記事にアクセスしたユーザーの目（興味）を惹きつけるための画像のことです。
YouTubeで例えるとサムネイル的な要素で、アイキャッチ画像の品質は記事にアクセスしてくれるかどうかに大きく関わってきます。
アイキャッチ画像は、主に記事一覧ページでタイトルと一緒に表示されたり、記事の冒頭で表示されたりすることがよくあります。
ブログやウェブサイトをよく閲覧される方であれば、実際にアイキャッチ画像を見たことがあるのではないでしょうか。
もしかしたら、アイキャッチ画像を見て「この記事面白そうだな！」「この記事だったら今の悩みを解決できるかも」という印象を抱いて、記事にアクセスしたことがある方もいるかもしれません。
このように、ユーザーの目を惹きつけるために欠かせないのが、アイキャッチ画像です。
では次の章で、WordPressのアイキャッチ画像がどのようなメリットをもたらすのか見ていきましょう。
WordPressでアイキャッチ画像を設定するメリット
WordPressでアイキャッチ画像を設定するメリットを2つまとめました。
・ユーザーの興味を惹きつける
・記事のデザイン性が向上する
それぞれのメリットを詳しく解説します。
ユーザーの興味を惹きつける
魅力的な画像をアイキャッチ画像として設定することで、ユーザーの興味を惹きつけることができます。
なぜなら、テキストよりも画像の方が視認性が高く、一瞬だけ目に映ったとしても直感的に情報が伝わりやすいからです。
パッと記事を見たとしても、「この記事ではこんな情報が書かれているんだな」というように、ユーザーの興味を惹きつけることができます。
例えば、女性のフィットネス関連の記事があると想定して、「アイキャッチ画像がない場合」と「女性が運動している画像がアイキャッチとして設定されている場合」では、どちらの方が興味を持ってくれるでしょうか。
おそらく後者の「女性が運動している画像がアイキャッチ画像として設定されている場合」だと思います。
このように視覚的情報で伝わりやすいアイキャッチ画像でユーザーの興味を惹きつけることは、ブログ記事の収益化のためにも重要です。
記事のデザイン性が向上する
テキスト情報だけだと、どうしてもシンプルで簡素的なデザインの記事になってしまいます。
テキストの装飾を行えば記事のデザイン性は多少上げられるものの、まだまだ質の高いデザインとは言えませんよね。
そこでおすすめなのがアイキャッチ画像の設定です。
記事の玄関の役割を担うアイキャッチ画像を設定することで、記事のデザイン性は一気に向上します。
WordPressで成果が出るアイキャッチ画像のポイント
成果が出るアイキャッチ画像の作り方について3つのポイントでまとめました。
・記事の内容とマッチしている画像を選ぶ
・キャッチなテキスト情報を設定する
・適切なサイズの画像で作る
それぞれ詳しく解説します。
記事の内容とマッチしている画像を選ぶ
記事の内容とマッチしているアイキャッチ画像を選びましょう。
記事の内容とマッチしていないと、ユーザーからは自分とは関係のない記事と判断されてしまい、ページの離脱につながってしまう恐れがあります。
例えば、グルメ系の記事にフィットネスの画像がアイキャッチとして設定されていたらどうでしょうか。
記事にアクセスしたらまずアイキャッチ画像が先に目に入るので、ユーザーからすると「間違えてフィットネスの記事にアクセスしたのかな？」と思われかねません。
その時点でユーザーに疑問を抱かせてしまえば、当然ページの離脱につながります。
ですので、アイキャッチ画像は記事の内容とマッチしたものを選ぶようにしましょう。
キャッチーなテキスト情報を設定する
ユーザーの目を惹きつけるようなテキスト情報を設定しましょう。
このようなテキスト情報は、俗に言うキャッチコピーと呼ばれ、ページを最後まで読んでもらうための重要な要素です。
おすすめ記事であれば、「2022年最新版〇〇おすすめ比較20選！」というようなテキスト情報をアイキャッチ画像の中に設定するのも良いでしょう。
一般的な記事であれば、「緊急」「新発売」などのキャッチーなテキスト情報も効果的です。
キャッチーなテキスト情報をアイキャッチ画像に含めて、ユーザーの目を惹きつけましょう。
適切なサイズの画像で作る
WordPressのアイキャッチ画像として適切なサイズで画像を作りましょう。
なぜなら、WordPressのアイキャッチ画像には推奨サイズがあるからです。
推奨されているサイズを守らないと、せっかく魅力的な画像なのに崩れて表示されたり、あまりにも大きすぎて表示処理が遅くなったりするなどのリスクがあります。
そのため、WordPressのアイキャッチ画像を作る際は、きちんと推奨サイズを守るようにしましょう。
推奨されているアイキャッチ画像のサイズは、横1200ピクセル×縦630ピクセル（比率：1:1.191）です。
ただし、アイキャッチ画像の推奨サイズはWordPressテーマによって異なる場合があります。
ご自身が使われているWordPressテーマのアイキャッチ画像の推奨サイズを確認してから、制作工程に移るようにしましょう。
WordPressでアイキャッチ画像を設定する方法
WordPressでアイキャッチ画像を設定する方法を解説します。
どのエディタを使っているかによって、アイキャッチ画像の設定手順は異なりますので注意しましょう。
・新エディタ（ブロックエディタ）で設定する方法
・旧エディタ（クラシックエディタ）で設定する方法
それぞれの手順を詳しく解説します。
新エディタ（ブロックエディタ）で設定する方法
新エディタのブロックエディタ（Gutenberg）で、アイキャッチ画像を設定する方法について解説します。
アイキャッチ画像を設定したい記事の編集画面を開き、テキスト編集エディターの右側に表示されているサイドメニューから「アイキャッチ画像」をクリックします。
アイキャッチ画像として設定したい画像をアップロードするか、メディアライブラリの中から該当する画像を選択します。
画像を選択して、右下にある「アイキャッチ画像を設定」というボタンをクリックしたらアイキャッチ画像の設定は完了です。
アイキャッチ画像の設定が終わったら、忘れず下書き保存するようにしましょう。
旧エディタ（クラシックエディタ）で設定する方法
旧エディタのクラシックエディタでアイキャッチ画像を設定する方法を解説します。
アイキャッチ画像を設定したい記事の編集画面を開き、テキスト編集エディターの右側に表示されているサイドメニューから「アイキャッチ画像を設定」というリンクをクリックします。
アイキャッチ画像として設定したい画像をアップロードするか、メディアライブラリの中から該当する画像を選択します。
画像を選択して、右下にある「アイキャッチ画像を設定」というボタンをクリックしたらアイキャッチ画像の設定は完了です。
新エディターGutenbergと同様に、アイキャッチ画像の設定が終わったら、忘れず下書き保存するようにしましょう。
WordPressでアイキャッチ画像の作成におすすめのツール４選
アイキャッチ画像の作成におすすめのツールを４つ紹介します。
・パワーポイント
・Canva
・Photoshop
・Illustrator
それぞれのツールの概要や特徴を詳しく解説します。
パワーポイントでWordPressのアイキャッチを作成
パワ－ポイントでの作り方
ここからは、パワ－ポイントでの私の作り方を説明します。
参考いただき、アレンジいただけたらと思います。
サイズですが、おすすめの「1.91 : 1」での作り方の説明をします。
まず、パワ－ポイントでの作業面を考えて、サイズが分かるマスタを作ります。
作りたいマスタの最終イメージは下記です。
・水色の長方形が「1.91 : 1」となります。
横軸はパワ－ポイントでスライドと同じ横幅サイズで、縦軸は比率をかけたサイズです。
この水色の面積が、アイキャッチにおいて、背景となるサイズです。
・オレンジの縦ラインは、正方形のサムネイルが表示される目安位置です。
STEP１ パワ－ポイントのマスタの作り方
下記、手順通りに進めます。
１）表示ボタンを押す
２）スライドマスターを押す
３）レイアウトの挿入をクリック
４）新レイアウト上にある不要なものをすべて削除
５）「挿入」⇒「図形」で四角形をクリック
６）パワ－ポイントのスライドの横幅と同じサイズで、長方形の横幅をつくる
パワ－ポイントのスライドのど真ん中に設置。好きな色に変更する。
７）横幅に対して、縦幅が、1.91 : 1になるように数値入力
パワ－ポイントの場合は、横幅33.87mm、縦幅17.78mmです。
８）青色の長方形をコピーする。
９０°回転させる
好きな色にする。透過性７０％くらいにする
ど真ん中に設置する
９）マスタを閉じる
１０）スライドを選択して、右クリック
１１）レイアウトを選択
１２）さっき作ったマスタを選択しクリック。⇒完了
STEP２ アイキャッチの作り方
ここからは、アイキャッチの作り方の例です。
ご参考ください。
１）背景画像を作る、もしくは、探してくる
下記画像は「Photo ACのウェブサイト」で探してきた無料イラストです。
マスタの幅に合わせて、トリミングを行いましょう。
(トリミングは画像を右クリックで項目がでます)
背景だけのアイキャッチで完成でも良いです。そこはお好みです。
補足すると、この写真の場合、メインはジャンプしている姿です。
サムネイルが正方形の場合、ジャンプ姿がオレンジの縦ラインに入るように位置調整とトリミングすることがポイントです。
２） 文字を入れる場合
カラフルな写真の場合は、透明な白ボックスが良く使われます。
パワ－ポイントの挿入の図形で、四角形を白透明(50~80%)にしてつくります。
パワ－ポイントの文字は、挿入のワードアートなどでデコります。
下記のようなイメージです。
これで完成です。
STEP3 画像圧縮しましょう
アイキャッチは、サイズが大きくなりやすいです。
サイトの表示が遅くなるので、PNG形式にして、さらに圧縮しましょう。
ちなみに、ジャンプしているアイキャッチは、圧縮なしだと「１２MB」ありました。
PNG形式に変換
パワ－ポイントの機能の「図として保存」では、PNGで保存してもファイルは重いです。
なので、PNGファイルに直接貼りつけします。
手順は下記となります。
まず、デスクトップに、PNGファイルを用意します。
１）デスクトップ右クリック → 新規作成
２）新しいビットマップ.bmpを作成
３）拡張子「bmpをpng」に名前変更する。警告でてもOKを押す。
⇒作成したPNGファイルを編集(E)で開く。
４）パワ－ポイントにあるアイキャッチ画像をPNGにコピー&ペースト
５）もしもPNGのバックグラウンドの方が大きい場合は、右下をつまんで同じサイズに調整しておく
⇒ファイル保存し完了 ★ここまでで、「１２MBが１MB」に小さくなりました。
CanvaでWordPressのアイキャッチを作成
Canvaは無料で利用できるグラフィックデザインツールです。
日本では2017年5月にリリースされ、現在は世界中で4000万人以上が愛用しています。
Canvaは豊富なテンプレートからデザインを選択できるのが特徴的なツールで、プロのデザイナーでなくともクオリティの高いアイキャッチ画像を制作できます。
またテンプレートだけではなく、テキストフォントや画像も多数用意されているので、自身のサイトコンセプトにあった素材を選ぶことができます。
有料プランもありますが、無料プランでも十分アイキャッチ画像制作ツールとして活用できます。
ブラウザ・アプリどちらでも使えるので、気になる方はぜひ使ってみてはいかがでしょうか。
PhotoshopでWordPressのアイキャッチを作成
Photoshopは、Adobe社が提供する画像編集ツールです。
画像編集ツールとしては最も有名で、世界中の多くのユーザーが愛用しています。
画像の中の不要な部分を切り抜いたり、被写体の細かな彩度を変更したりできるなど、他のデザインツールではできないことを可能にするのがPhotoshopの特徴です。
ツールは有料になりますが、WordPressのアイキャッチ画像を作成するなら持っておいて損はありません。一度使ってみて試してみると良いでしょう。
IllustratorでWordPressのアイキャッチを作成
Illustratorは、Photoshopと同様にAdobe社が提供するイラスト作成ツールです。
画像編集の機能では劣るものの、イラスト作成においては最高峰のツールで、イラストを生業とする多くのユーザーが愛用しています。
アイキャッチ画像の細かなイラストを作成したり、キャラクターを作成したりする際などに役立ちます。
画像編集ツールと比べると優先度は低いですが、高品質なアイキャッチ画像を作るためには欠かせないツールなので、ぜひ活用してみると良いでしょう。
まとめ．WordPressのアイキャッチの作成と設定方法【おすすめ４選】
今回は、WordPressにおけるアイキャッチ画像の概要や作り方のポイント、設定する手順について解説しました。
アイキャッチ画像はユーザーの目を惹きつけるために欠かせない要素です。
サイトのページ離脱率の減少や記事のデザイン性の向上につながります。
とはいえ、闇雲にアイキャッチ画像を設定すればいいというわけではありません。
アイキャッチ画像が記事の内容にマッチしているかつ、適切なサイズで作られていることによって、大きな効果をもたらします。
WordPressのアイキャッチ作成ツール【おすすめ４選】
パワーポイント
Canva
Photoshop
illustrator
本記事で解説した作り方や設定方法を参考にして、実際にアイキャッチ画像を設定してみてはいかがでしょうか。
ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、あるいはWordPressなどを使用する方法があります。
まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。
【はじめて】10分でできるWordPressブログの始め方を解説
今回は以上になります。