アイキャッチ画像のサイズって、結局何ピクセルがいいの？

「WordPress（ワードプレス）Tips」は、株式会社コミュニティコムが運営する「 WordPressテーマ＆プラグイン販売 コミュニティコムショップ」が、 WordPressを快適に使うために知っておきたいノウハウやヒントを解説するシリーズです。

WordPressで投稿や固定ページの記事を投稿するときに、登録するのが良いとされる「アイキャッチ画像」。解説書にも「必ず入れましょう」と書いてあることも多いですよね。

でも、アイキャッチ画像って、「どんなサイズの」「どんな画像」を登録するのがいいのでしょうか？

作成のコツや使う画像の選び方を解説します。

アイキャッチ画像とは

アイキャッチ画像とは、記事の要約としてつけることができる画像です。
表示される場所は、使用しているWordPressのテーマによって異なりますが、主にサイト内の記事を一覧で表示するページや、SNSでシェアしたときのOGP画像として表示されます。

OGP画像とは

当サイトの記事を、Facebookにシェアしたときを例に説明します。

下記の記事URLを…

https://communitycom-shop.jp/blog/panel/

Facebookページでシェアすると、サムネイル・タイトル・文章・リンクがついた形でシェアされます。

このときに使われるのが、「OGP」の情報です。

OGPとは、「Open Graph Protocol（オープン・グラフ・プロトコル）」を略したもの。OGPには、SNSで記事がシェアされた場合に表示する、「URL」「サイトのタイトル」「画像」「サイトの説明文」などの情報が含まれています。

多くのWordPressテーマでは、アイキャッチ画像として登録した画像が、この「OGP画像」として利用されます。

アイキャッチ画像はホームページ内の一覧ほか、SNSでシェアしたときにも使われるということです。

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

ズバリ！結論から申し上げると、横1200ピクセル×縦630ピクセルのサイズで作るのがオススメです。
比率は「1：1.91（縦：横）」となります。比率を守っていればサイズが変わっても表示は可能ですが、小さいサイズだとボヤけた表示になってしまうことがあるので、横1200ピクセル×縦630ピクセルで制作すると良いでしょう。拡張子はpngがおすすめです。

コミュニティコムショップのアイキャッチ画像もこの大きさで作成しています。

大切なことは、中心の正方形エリアへ！

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

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

OGP画像は、同じSNSの中でも、表示される場所や端末の種類によって、正方形に切り抜かれたように表示されることがあります。下記はFacebookにおいてコメントへURLが貼られたときの例です。

そのため、切れてしまうと困る情報・目立たせたい情報は、中心を起点とする正方形の中に収めるのがコツです。

写真でのアイキャッチ画像例

正方形にトリミングされる、ということを踏まえた写真の選び方を見てみましょう。

ここに、猫の写真が2枚あります。どちらも可愛いですね。

しかし、これが正方形で切り抜き表示された場合は下記のようになります。

左側の写真は、横顔が切れてしまいました。かろうじて猫かどうかがわかるような気もしますが、好ましい状態ではありません。

右側の写真は、背景が切れてしまっていますが、被写体となる猫は正方形に収まっているので、主題が猫であることがきちんと伝わります。

アイキャッチ画像にふさわしい写真は、被写体が真ん中にあること。
選択肢がある場合は、意識して選んでみましょう。

タイトル画像でのアイキャッチ画像例

こちらの画像は、コミュニティコムショップ内にある「WordPress超入門」の記事用のアイキャッチ画像です。こちらも中心から正方形で切り抜かれても、イメージを保持できるようなレイアウトで制作しています。

また、アイキャッチ画像は小さく表示されることも多いので、何かしら「目立つモチーフ」「象徴となるモチーフ」を大きめに配置することもおすすめです。

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

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アカウントでのログインが必要です。
記事のURLなどを入力して、「Preview card」をクリックすると、Twitterでシェアした場合のイメージが表示されます。

アイキャッチ用の写真がない！という場合

アイキャッチ画像に登録するための写真や図は、なるべくご自身で撮影した写真やイラストを用意するのがベターです。が、なかなかそうはいかないもの。

その場合は、素材サイトを利用してみましょう。
詳しくは下記の記事に載っています。

ホームページに使ってOKなのはどんな画像？フリー素材の探し方・使い方のキホンを知ろう！

間違っても「Google検索で出てきた画像」や「他の人のブログからダウンロードやスクショした画像」を使わないように、注意してくださいね！

効果的なアイキャッチ画像を作って、読者を増やそう！

圧倒的な情報量に触れることが多くなった現代。
「文字を読まない人が増えた」と言われる中で、画像や写真は、とても目に留まりやすい、まさに「アイ キャッチ」するための効果的な表現手段です。

あなたの記事にふさわしいアイキャッチ画像を効果的に作って、たくさんの人の目にとまるよう工夫してみてくださいね！

株式会社コミュニティコムが運営するWordPress（ワードプレス）テーマ＆プラグイン販売 コミュニティコムショップでは、弁護士・法律事務所・士業向け WordPress テーマや、歯科医院・歯医者さん向け WordPress テーマなど、 業種・用途特化のWordPressテーマを販売しています。もちろん新エディター「Gutenberg（グーテンベルク）」対応です。
>> コミュニティコムショップのWordPressテーマ一覧

また、1ヶ月間無料の月額サポートプランでの継続的なサポートや、制作代行オプションもご提供しております。
>> コミュニティコムショップのオプション一覧