ブログやホームページでよく見かける「アイキャッチ画像」。

投稿記事の冒頭や一覧ページに表示されていて、見た目のアクセントとして設定している人も多いのではないでしょうか。

でも、ただのおしゃれ要素と思っていたらもったいない！

アイキャッチ画像には、しっかりと役割があります。

人の第一印象が見た目で決まるのと同じように、Webサイトに訪れたユーザーの印象も、ほとんどが視覚情報で決まります。

（メラビアンの法則…！）

特に、ブログ一覧ページやニュース系サイトでは、タイトルと並んでアイキャッチ画像が強く目に入ります。

文字情報よりも先に視覚情報が飛び込んでくるので、「なんとなくクリックしたくなる」「読みたくなる」という興味の引き金になります。

同じWordPressでも、どういう目的のサイトかによって、アイキャッチ画像の「効き目」は少し変わってきます。

例えば、ブログやメディア系サイトでは、記事一覧ページで並ぶ画像の印象がクリック率を左右します。

興味を引く写真やデザインになっているか、内容が伝わるかどうかが非常に大切です。

一方で、ポートフォリオサイトや会社のホームページでは、ブランディング要素としての意味が強くなります。

安っぽく見える画像や、サイズがバラバラなものが並んでしまうと、全体のクオリティが下がって見えてしまいます。

もうひとつ見落とされがちなポイントが、OGP（Open Graph Protocol）画像との関係です。

アイキャッチ画像は、TwitterやFacebookなどSNSでシェアされたときのサムネイル画像としても使われます。

つまり、記事の外側でも「看板」として機能しているということです。

このとき、画像のサイズや比率が適切でないと、意図しないトリミングが発生したり、変に表示されてしまったりすることがあります。

クリック率を落とさないためにも、見た目の整った画像をきちんと設定しておく必要があります。

クライアント案件と違って、自分のブログやホームページを運用していると、「とりあえず」で済ませてしまいがちなのが画像サイズの設定です。

でも実は、ここにこだわるかどうかでサイト全体の印象が大きく変わってきます。

画像サイズが統一されていると、一覧ページもスッキリ見えて、サイト全体の設計がきちんとしているように感じられます。

見る側の安心感にもつながります。

せっかく記事やコンテンツにこだわっているなら、アイキャッチ画像にも気を配って損はありません。

むしろ、見た目の統一感こそが“伝わるコンテンツ”をつくる第一歩かもしれません。

WordPressのアイキャッチ画像って、いざ設定しようとすると「結局、どのサイズが正解なの？」と迷ってしまうことがありませんか？

特に、自動でトリミングされて変なところが切れてしまったり、スマホで見たときに妙にズレていたり…。

そんな悩みを解消するために、まずは「これを基準にすれば間違いない」というサイズと比率をご紹介します。

WordPressのアイキャッチ画像としておすすめしたいのが、横1200px × 縦630pxのサイズです。

このサイズは、ブログ記事・固定ページ問わず多くのテーマで表示が安定しやすく、SNSでのシェア（OGP）にも適した比率です。

実際、X（旧Twitter）やFacebookの推奨OGP画像もこのサイズに準拠しており、シェア時に意図せずトリミングされるリスクを減らせます。

この1200×630というサイズが支持されている理由は、大きく3つあります。

①レスポンシブ対応に強い

スマホ・タブレット・PCと表示領域が変わっても、このサイズなら極端に崩れたりぼやけたりしにくいです。

画像の表示方法（カバー・コンテイン）に左右されるとはいえ、縦横比が安定しているため、表示崩れの心配が少ないのが特徴です。

②OGP（SNS）で綺麗に見える

SNSにURLを貼ったとき、自動で画像が表示される「OGP画像」。

これもこのサイズならほぼ間違いなくキレイに表示されます。

クリック率にも関わる重要ポイントです。

③画質と軽さのバランスがちょうど良い

横幅が1200pxあれば、Retinaディスプレイ（高解像度）でも十分きれいに見えます。

一方で、容量も大きくなりすぎず、ページの表示速度を妨げにくいのも魅力です。

1200×630というサイズは、16:9に非常に近い比率です（実際は約1.9:1）。

この16:9という比率は、WebだけでなくテレビやYouTubeのサムネイルにも使われている、いわば“映える比率の定番”。

縦が短すぎると情報が伝わりづらく、逆に長すぎると上下が切れてしまいがちです。

16:9ならその心配もなく、多くのデバイスでバランスよく見せられます。

例えば横800px × 縦600pxのような、比率が違う画像を使った場合どうなるか。

・一覧表示で上下がカットされてしまう

・トップページでは綺麗でも、個別記事ページで引き伸ばされてボケる

・SNSでのシェア時にトリミングされ、伝えたい部分が切れてしまう

特に、画像が自動的に「中央寄せトリミング」されるテーマでは、中心以外の情報はバッサリ切られることも。

「サイズなんて後で変えればいいか」と思っていると、記事が増えたあとに修正作業が大変になりますので、お気をつけください。

今はスマホでサイトを見る人のほうが多く、しかもiPhoneなどの高解像度ディスプレイでは、粗い画像はすぐに目立ってしまいます。

画像のサイズを大きめで用意すること（例：実際に表示されるサイズの2倍）で、くっきりした見た目をキープできます。

ただし、サイズが大きくなる分ファイル容量も増えるので、後述の「容量の目安」を守るのがポイントです。

ファイル形式は基本的にJPEG（.jpg）推奨です。

写真やバナーのような画像に適していて、軽量かつ画質も十分。

PNGは透過処理が必要なロゴやアイコンなどには便利ですが、ファイルサイズが大きくなりやすいのでアイキャッチ画像にはあまり向きません。

容量としては、100KB〜300KB以内を目安にすると、画質と軽さのバランスがとれます。

それ以上になると、ページの表示速度に影響が出る場合もあるので注意が必要です。

WordPressでアイキャッチ画像を設定したのに、「あれ、なんか変？」と感じたことはありませんか？

同じ画像を使っているのに、テーマを変更しただけで表示サイズがズレたり、端が切れてしまったり…。

これ、実はWordPressの“あるある”です。

原因はずばり、「テーマごとにアイキャッチ画像の扱い方が違う」から。

カスタマイズの自由度が高い分、気をつけないとデザインが崩れる落とし穴があるんです。

WordPressのテーマには、それぞれ設計者のデザイン意図があります。

一覧ページのレイアウト、アイキャッチ画像の表示位置、読み込み速度への配慮などがテーマごとに異なるため、画像サイズの取り扱いもバラバラなんです。

例えば、同じ横1200pxの画像を使っても、

・そのままのサイズで表示されるテーマ

・トリミングして正方形で表示するテーマ

・カルーセル表示用に独自のリサイズをかけるテーマ

…というように、まったく異なる挙動になることがあります。

■Cocoon

無料で高機能なブログ向けテーマ。アイキャッチの設定箇所が多く、記事一覧と記事詳細で画像サイズが変わる点に注意。

画像の中心を基準にトリミングされることが多いため、左右や上下の端に文字を置くと切れる可能性あり。

■SWELL

デザイン性が高く、画像の見せ方にもこだわった有料テーマ。

一覧ページでの画像サイズは比較的安定しており、16:9比率を保つ構造。

ただし、推奨サイズより小さい画像を使うと引き伸ばされてぼやけることも。

■Lightning

ビジネス系サイト向けに使われることが多いテーマ。

画像の表示サイズは比較的大きめで、ヘッダーやスライダーにアイキャッチを流用するケースも多い。

そのため、画像のクオリティや縦横比を意識しておかないと、画面全体がチープに見える恐れあり。

特にややこしいのが、記事一覧ページと個別記事ページで画像の見え方が違うテーマです。

例えばCocoonでは、一覧では自動トリミングされてコンパクトに表示されるのに、個別記事ではオリジナルサイズのまま表示されることがあります。

それによって、一覧では切れていないのに、記事を開いたら変に横に引き伸ばされていた…なんてケースも。

多くのテーマでは、「中心を基準にトリミング」するというルールがあるのですが、これが画像の内容によっては大問題になります。

人物写真であれば顔が中央にあるのでまだいいのですが、テキストを含む画像だと、左右端の文字が切れて読めないなんてことも珍しくありません。

見せたい情報が画像の端に寄っている場合は、余白を広めに取ってデザインするのが安全です。

「画像サイズを自分で指定すればいいのでは？」と思った方もいるかもしれません。

確かに、WordPressのfunctions.phpファイルを使えば、add_image_size()という関数でサイズを自由に追加できます。

ですが、初心者にはあまりおすすめできません。

間違えると、テーマが壊れたり表示がバグったりするリスクがありますし、更新のたびに変更が消えてしまう可能性もあるからです。

どうしてもサイズを細かく管理したい場合は、子テーマを用意して管理する方法が安心です。

テーマを変更したあと、「画像の表示がおかしくなった」と感じることがあります。

これは、過去にアップした画像が新しいテーマのサイズ仕様に合っていないために起こるものです。

そんなときは、「Regenerate Thumbnails」というプラグインが便利です。

既にアップロード済みの画像を、現在のテーマに合わせて自動で再生成してくれます。

使い方は簡単で、プラグインをインストールして「ツール」→「Regenerate Thumbnails」を実行するだけ。

画像が多いと少し時間はかかりますが、手動でやり直すよりずっと楽です。

テーマによってアイキャッチ画像の表示ルールが異なるのは面倒にも感じますが、テーマの個性を活かす設計でもあります。

だからこそ、見せたい情報がきちんと伝わるように画像を調整することが大切です。

WordPressのアイキャッチ画像って、見た目の華やかさだけじゃなく、サイズや比率まで考えると意外と奥深いですよね。

特にテーマごとに表示仕様が違うというのは、知っているかどうかで結果が全然変わってきます。

同じ画像でも、切れ方や見え方が違うので、これはもう、デザインの土台設計といえるかもしれません。

サイズの基準、比率の統一、テーマのクセを理解して使いこなせば、見た目も伝わり方も、ぐっと整います。

もし、「画像設定に自信がない」「デザイン崩れを避けたい」という場面があれば、お気軽にご相談ください。

細部まで気を配った設計ができれば、あなたのサイトをより“伝わるデザイン”に仕上げられますよ。