ウェブ制作

運用ノウハウ

アイキャッチ画像とは?推奨サイズと作成方法について

記事を投稿する際に設定するアイキャッチ画像とは?推奨サイズと作成方法について

「アイキャッチ画像」は、WordPressで投稿や固定ページの記事を投稿するときに登録を推奨されています。
登録をしていないと一覧で表示される際にタイトルと概要だけになり、記事の内容を視覚的に瞬時に読者伝えることができません。
そのため、読者の目をひきつけ興味を持ってもらる画像を設定すれば、記事を読んでくれる確率が高くなります。

でも、アイキャッチ画像って、「どんなサイズの」「どんな画像」を「どのファイル形式」で登録するのがいいのでしょうか?
読者に伝わるアイキャッチ画像作成のコツや使う画像の選び方をご紹介していきます。

WordPressのアイキャッチ画像とは

アイキャッチ画像とは、「Eye Catch」と字のごとく「読者の目(Eye)」を「ひきつける(Catch)」ための画像のことで、記事の要約として登録されます。
表示される場所はWordPressのテーマによって異なりますが、新着記事一覧・人気記事一覧などのサムネイルとして表示されたり、各記事ページの冒頭(記事タイトルの下)に大きく表示されます。また、SNSでシェアしたときのOGP画像として表示されます。

OGP画像とは

OGPとは、「Open Graph Protocol(オープン・グラフ・プロトコル)」の略で、OGPには、SNSで記事がシェアされた場合に表示される「URL」「サイトのタイトル」「画像」「サイトの説明文」などの情報が含まれます。
多くのWordPressテーマでは、アイキャッチ画像として登録した画像が、この「OGP画像」として利用されます。

アイキャッチ画像の目的

アイキャッチ画像の目的は、単に見栄えを良くするためだけではありません。
アイキャッチ画像はユーザーの興味を引き付ける役割を持っているため、どのようなアイキャッチ画像を登録するかによって、記事のクリック率やサイト内の回遊率、直帰率などが変わってきます。

記事のクリック率の増加

印象的でわかりやすいアイキャッチ画像が設定されていると、興味を惹かれたユーザーが記事に流入してくる確率が上がります。
より多くのユーザーに記事を読んでもらえる確率が上がりますし、逆に言うと、どんなに良い記事を書いていてもアイキャッチ画像が不適切だと、本来流入してきたはずのユーザーを取り逃がしてしまう可能性さえあります。

また、昨今は有益な記事がFacebookやTwitterなどのSNSを通じシェアされる機会が増えています。
SNSで記事リンクをシェアした際に記事タイトルや画像が表示される仕組みをOGPと呼びますが、SNSにおいてはアイキャッチ画像を縮小したものが表示されます。
SNSでは、文字数が制限されていることもあり、通常以上に画像による印象付けと興味の惹きつけが重要になります。
こうした観点からも、昨今は今まで以上にアイキャッチの重要性が高まっていると言えます。

サイト内回遊率の向上

また、アイキャッチがきちんと設定されていることで、サイト内の回遊率が増加する可能性が上がります。
例えば、あるユーザーが記事を読み終えた後に、おすすめの記事一覧のアイキャッチ画像を見て、興味を持って別の記事も読んでくれれば、それだけでサイト内の回遊率が上がります。
タイトルや記事概要などで興味を惹く工夫をするのはもちろん、アイキャッチ画像でパッと内容をわかりやすくすることで興味を持たせることも重要です。

また、これは正確にはアイキャッチ画像の話としてはずれますが、サイト内を見たり、気になる記事を読んだりすう中で、以下の画像の部分(サムネイル)を見て興味を惹かれるユーザーも多いです。

記事からの直帰率の低下

記事における直帰率が高い理由には、ユーザーニーズと記事の内容が乖離していることが挙げられます。
記事内容そのものがユーザーニーズを満たしていないものになってしまっているか、タイトルやディスクリプション、アイキャッチによって誤った認識を与えて、想定していないユーザーを流入させてしまっている可能性が考えられます。

前者の場合、ユーザーニーズを満たす内容に記事全体のリライトを行うことが改善方法の1つとなるでしょう。
一方、後者の場合は、タイトル、ディスクリプション、アイキャッチなどを記事内容に合う、かつ想定しているユーザーにマッチするものに変更することで改善することができるでしょう。

このように、アイキャッチ画像はユーザーの興味を惹き、コラムやブログにおけるサイト内の回遊率や直帰率を左右する重要な要素となっているのです。

アイキャッチ画像を作成するときのおすすめサイズ

横1200ピクセル×縦630ピクセルのサイズで作るのがおすすめです。
比率は「1:1.91(縦:横)」となります。比率を守っていればサイズが変わっても表示は可能ですが、小さいサイズだとボヤけた表示になってしまうことがあるので、横1200ピクセル×縦630ピクセルで制作すると良いでしょう。拡張子はpng、もしくはwebpがおすすめです。

アイキャッチ画像の適切なサイズと比率の理由

画像が小さいと引用された際の画質が悪くなったり、逆に大きすぎると表示速度が遅くなってしまいます。
また、SNSなどで引用する場合はアイキャッチ画像が切り抜かれて表示されます。
SNSを中心に考えるのであれば、メインSNSのサイズに合わせてアイキャッチ画像を作成するのも構いませんが、より多く引用してもうことを想定するのであれば、多くの媒体で利用できる汎用性の高いサイズで作成することをおすすめします。

  • 画像のサイズと画質のバランス
  • 多くのWordPressのテーマで適用されいてる
  • TwitterやFacebookで記事を引用した場合に、画像の上下左右が比較的カットされにくいサイズだから

    アイキャッチ画像の作成方法

    アイキャッチ画像は、記事ごとに画像サイズが異なると統一感がなくなるため、アイキャッチ画像のサイズはあらかじめ決めておくことをおすすめします。

    中心の正方形エリアへ情報を集める

    記事一覧などのサムネイルに使用される場合、画像の中心から正方形にカットされることが多いため、重要な要素を画像の中央に配置する必要があります。

    注意するポイントとして、「大切なものは中心のエリアへ配置する」という点があります。

    OGP画像は正方形に切り抜かれて表示されることもある

    OGP画像は、同じSNSの中でも、表示される場所や端末の種類によって、正方形に切り抜かれたように表示されることがあります。下記はFacebookにおいてコメントへURLが貼られたときの例です。
    そのため、切れてしまうと困る情報・目立たせたい情報は、中心を起点とする正方形の中に収めるのがコツです。

    アイキャッチに使える画像をダウンロードできるサイト

    Pixtabay

    https://pixabay.com/ja/

    PIXTA

    https://pixta.jp/

    アイキャッチのシェアイメージを確認するには?

    Facebookのアイキャッチ画像確認方法

    【公式】シェアデバッガー

    https://developers.facebook.com/tools/debug/sharing/

    Facebookアカウントでのログインが必要です。
    記事のURLなどを入力して、デバッグボタンをクリックすると、Facebookでシェアした場合のイメージが表示されます。
    画像のほか、OGP情報がきちんと出力されているかも確認ができます。

    OGP画像シミュレータ

    http://ogimage.tsmallfield.com/

    制作したアイキャッチ画像を、ドラッグ&ドロップすることで、横長イメージ・正方形イメージの両方を確認することができます。

    Twitterのアイキャッチ画像確認方法

    【公式】Card validator

    https://cards-dev.twitter.com/validator

    Twitterアカウントでのログインが必要です。

    WordPressのアイキャッチ画像の設定に便利なプラグイン3選

    記事のURLなどを入力して、「Preview card」をクリックすると、Twitterでシェアした場合のイメージが表示されます。
    最後に、WordPressでアイキャッチ画像を設定するときに便利なプラグインを紹介します。

    いずれもアイキャッチ画像を設定する手間を省き、作業時間を短縮したり設定漏れを防止したりする機能を持つプラグインです。

    ここで紹介するプラグインは下記の3つです。

  • Easy Featured Images
  • Auto Featured Image(Auto Post Thumbnail)
  • Require Featured Image

  • 著者情報

    オーパスプラン編集部

    オーパスプラン編集メンバーが不定期で更新します。 ホームページ制作やウェブマーケティング、ウェブデザインに関する最新ニュースからノウハウまで、様々な情報を紹介していきます!

    ホームページ制作で悩んだら、

    まずはご相談を!

    ご相談・お見積り 資料ダウンロード