Webサイト、ブログ、SNSを見るとき、あなたは最初に何処に目が行きますか？

多くの人が文字情報よりも先にアイキャッチ画像を見て、興味のある記事や投稿であるかを判断しているといわれています。

今回の記事は、そんなアイキャッチ画像について、基礎知識、作り方、WordPressでの設定方法までを解説します。

アイキャッチ画像の基礎知識

まず、アイキャッチ画像とはそもそもどのようなものなのでしょうか。SNSで見栄えの良い画像サイズなど知っておいてほしい知識を紹介します。

アイキャッチ画像とは？

アイキャッチ画像とは、ブログやSNSなどにおいて、記事の冒頭や記事一覧に配置されるサムネイル画像です。また、SNSでの記事共有時にはシェア画像として使われます。

アイキャッチの名前の通り、ブログやSNSの各記事を見る際に最初にユーザの目に入り、興味を持たせる役割があります。

このほかYoutube等の動画における一覧に表示される画像もアイキャッチと呼ばれています。

つまりアイキャッチ画像は記事に対してユーザに興味を持ってもらい、実際に記事や投稿に目を通してもらうために大変重要なものです。

アイキャッチ画像の多くは、記事の内容と関連した画像、映えて目を引く画像、ユーザが心理的に中身が気になる画像などが設定されます。中には、当記事のように画像内にユーザの興味を引く文言を入れることも（タイトルの下に入っているのが、当記事のアイキャッチ画像です）。

Twitterで見栄えがいいアイキャッチ画像の推奨サイズ

Twitterではツイート記事を張り付けた際に「ツイッターカード」と呼ばれる画像やタイトルが表示されます。ツイッターカードに表示できる画像は「summary（通常）」と「summary_large_image（大きな画像）」の二つから選ぶことができます。

特に目立つのは「summary_large_image」です。

ツイッターカードのsummary_large_imageを他の記事で張り付けた場合、表示される画像の比率は1.91：1（横：縦）。1,200×630pxがこの比率となり、Twitter以外のSNS、ブログにも利用しやすいサイズです。もし、1.91：1という比率が難しい場合は、2：1の比率とするのがいいでしょう。この場合、横の端はトリミングされることを考慮して画像を作成してください。

WordPressとTwitterを連携させる！Twitterカードの設定方法

Facebookで見栄えがいいアイキャッチ画像の推奨サイズ

Facebookで表示される画像についても、その比率は1.91：1（横：縦）が推奨されます。

各種のSNSではOpen Graph Protocol（OGP）というページタイトル、URL、アイキャッチ画像、概要を適切に表示するための仕組みが導入されています。

このOGPの動作に準拠して画像はトリミング、端をカットされるのです。OGPに合わせた比率が1.91：1で、PCで表示される場合には1,200×630px、スマートフォンで表示される場合には476×246pxでこれはPC表示画像の縮小表示が利用されます。

成果が出るアイキャッチ画像の作り方

アイキャッチ画像は画像によるキャッチコピーともいえるものです。できる限りユーザの目を引き付けるためのアイキャッチ画像を作るヒントを紹介します。

美しく、シンプルな画像を使う

まずはアイキャッチ画像の元となる画像の選択。写真を使う場合は、美しく、シンプルなものが向いています。イラストから作る場合にも、美しく感じる色とイラストを使いましょう。

配色は少なく、でも文字を目立たせる

アイキャッチ画像内で多くの色を使い過ぎると、限られた画像サイズ内ではごちゃごちゃした印象となってしまいます。背景となる画像と同系色を使いながら、文字に枠をつける、背景色を一部変えるなど工夫してみてください。

パッと見で気持ちが引かれるタイトル、見出しを入れる

多くのユーザは多数の記事をサラッと流し読みしています。特にディスプレイの小さいスマホではよりこの傾向が顕著です。このため一目でしっかりと記事の内容に興味を持たせることがアイキャッチ画像には求められます。「結果が気になる問いの投げかけ」「意外な組み合わせのXXが○○してみた」など、工夫してみてください。

おすすめのデザインツールは「Canva（無料）」

アイキャッチ画像はadobeのPhotoShop、IllustraterやPowerPoint、Windowsのペイントなど各種の画像編集ツールで作成します。

その中で弊社がおすすめするのは、無料で利用できるデザインツール「Canva」です。

SaaSですので、インターネット接続できる環境があれば利用可能。デザイナー向けに制作されたツールではないため、画像の編集に慣れていない方でもおしゃれな画像が作れるよう配慮されています。操作は大きく分けて以下の2ステップのみ。

1. テンプレートから画像を選択
2. タイトルなどの文章を入力

WordPressでアイキャッチ画像を設定する方法

WordPressから記事を投稿する際には、アイキャッチ画像は記事編集ページの右側メニューより設定します。右側メニューにアイキャッチ画像設定が出てこない場合は、画面右上の「・・・」からアイキャッチ画像をチェックすることでメニューに表示されるようになります。

アイキャッチ画像に関するよくある質問

ここからは、アイキャッチ画像についてよく受ける質問とその回答をご紹介しましょう。

Q1：アイキャッチ画像がFacebookでもTwitterでも表示されない

アイキャッチ画像がFacebookやTwitterで表示されない場合、使用しているテーマがFacebookやTwitterのOGPに対応しているか、あるいはOGPに対応するプラグインが有効になっているかご確認ください。

Q2：Facebookでシェアをしてもアイキャッチ画像が表示されない

Q1は問題ないにもかかわらず、Facebookで記事をシェアしたときにアイキャッチ画像および概要が表示されない場合、Facebookシェアデバッガーを使ってみてください。シェアするURLを入力して「デバッグ」ボタンを押してデバッグを実行します。「もう一度スクレイピング」で最新の表示を確認しましょう。場合によっては、「デバッグ」「もう一度スクレイピング」を複数回繰り返す必要があります。

Q3：アイキャッチ画像を変更したのにFacebookやTwitterでシェアすると古い画像になってしまう

アイキャッチ画像を古いものと入れ替えた場合、古いアイキャッチ画像が表示され続けることもあります。

Facebookの場合は、先に記載したFacebookシェアデバッガーを使って見ましょう。Twitterの場合はTwitter Developersで公開されている「Card validator – Twitter cards」で同様にOGP画像のリフレッシュが可能です。TwitterでOGP画像が差し替わらない時は、試してみてください。

Q4：アイキャッチ画像がFacebookやTwitterで見ると見切れている

アイキャッチ画像の端がFacebookやTwitterで見ると見切れてしまっている場合、アイキャッチに使用している画像の縦横比が、OGPによる比率変更によって端を切り取られていることが想定されます。

OGPによる画像末端の調整を考慮した比率、サイズでアイキャッチ画像を作成することで端が見切れることを回避できます。比率では1.91：1（横：縦）、画像サイズならば 1,910 x 1,000px、1,200px × 630pxというあたりが比率の条件を満たします。

上下左右とも少し見切れるかも知れないと考えて、アイキャッチ画像の端に余裕を持たせて画像を作ることも一つの対策です。

ブログとSNS投稿時のアイキャッチの分け方

ブログでの記事作成においてアイキャッチ画像を作り、利用することに慣れてくると、ブログのアイキャッチ画像と、SNS投稿時に表示されるアイキャッチ画像をを分けたくなってくることがあります。

記事の冒頭のアイキャッチ画像と他ブログ、SNSから参照されるアイキャッチ画像では意味が違ってくることもあり得るからです。そんな場合に、何か対策は可能なのでしょうか。

標準のWordPressでは分けられない

ブログの記事を標準のワードプレスで作っている場合、二つのアイキャッチ画像を分けることはできません。そもそも二つのアイキャッチ画像を分ける機能がないからです。各種のカスタマイズが必要になってきます。

New Standardなら標準で分けられる

弊社の提供する事業用WordPressテーマ「New Standard」なら、投稿の冒頭のアイキャッチ画像とSNSにシェアされる場合のアイキャッチ画像を別々に設定することが可能です。

標準機能として実装していますので、WordPressに関する専門的な知識がなくても使いこなせます。以下の記事でNewStandardのアイキャッチについてご紹介していますので、あわせてお読みください。

美しいアイキャッチ画像の選び方