Lightningで最適なアイキャッチ画像サイズとは？｜5つのチェックリス

この記事ではLightningで最適なアイキャッチ画像サイズや調整方法まで解説します。

ざっくり言うと「用途ごとに2〜3パターンのサイズを決めてしまえば、Lightningまわりのアイキャッチの悩みはかなり減る」というのが私の結論です。

Lightningのアイキャッチサイズの結論から先に知りたい人へ

まずは結論：迷ったらこのアイキャッチサイズでOK

実務では、用途ごとに3パターンくらいサイズを決めてしまうととても楽です。私がよく使っている目安はこんな感じです。

用途	おすすめ比率	作成サイズの目安	ポイント
投稿一覧のカード表示用	16:9前後（横長）	1200×675前後	一覧でのトリミングや高さのバラつきが出にくい
記事ページの大きめアイキャッチ	16:9前後（横長）	1200×675〜1600×900前後	PCでもスマホでも見やすく、ヘッダー的にも使いやすい
OGPやSNSシェア用	16:9前後（横長）	1200×630〜1200×675前後	SNSでの表示に合わせやすく、SEO的にも扱いやすい

ざっくりまとめると「横長の16:9前後で、横幅1200ピクセル前後」を基準にしておけば、大きな失敗はしにくいです。ここから先は、なぜこのサイズが扱いやすいのか、Lightning特有の崩れポイントとあわせて解説していきます。

Lightningテーマでアイキャッチサイズが崩れる理由

Lightningは表示場所ごとにアイキャッチの見え方が違う

同じアイキャッチ画像でも、Lightningでは表示される場所によって見え方が変わります。たとえば、次のようなパターンがあります。

それぞれで、使われているスペースや縦横比、カードのデザインが少しずつ違います。そのため、ある場所ではちょうど良く見えても、別の場所では上下が切れてしまったり、逆に余白だらけになったりしがちです。

「同じ画像なのにページによって印象が違うな」と感じたことがあるなら、この表示場所ごとの違いが影響している可能性が高いです。

元画像の比率がバラバラだとLightning側で調整しきれない

もう一つの典型的な理由が「元の画像の比率がバラバラになっていること」です。

• ある記事はほぼ正方形に近いアイキャッチ
• 別の記事は細長い横長の写真をそのまま使用
• 縦長の写真をトリミングせずにそのままアイキャッチにしている

このような状態だと、テーマ側が自動でトリミングしても、一覧の高さが揃わなかったり、どこかで極端な切れ方をしてしまいます。

「テーマに任せればなんとかなるはず」と思いたくなりますが、実際には画像側の工夫もかなり重要です。少なくとも、

• アイキャッチ画像はできるだけ同じ比率（16:9前後）でそろえる
• トリミングされてもいいように、人物や文字は中央寄りに置く

この2つを意識しておくだけでも、Lightningでの見え方がグッと安定します。

用途別に見るLightningアイキャッチ画像のサイズ目安

投稿一覧カードで崩れにくいアイキャッチサイズ

まず気になるのが、投稿一覧に並ぶカードのアイキャッチですよね。ここがガタガタだと、それだけでサイト全体がちょっと素人っぽく見えてしまいます。

投稿一覧で崩れにくいサイズ感は、次のようなイメージです。

用途	推奨比率	サイズの目安例	コメント
通常のブログ記事一覧カード	16:9	1200×675 / 1000×563前後	縦方向のトリミングが少なく、カードの高さも揃えやすい
写真メインで見せたい一覧	16:9〜2:1	1400×700前後	写真を大きく見せたいポートフォリオ系サイトに向いている
テキスト多めのサムネイル	16:9	1200×675前後	文字がつぶれないよう、フォントサイズはやや大きめに

テキストを載せた「サムネイル画像っぽいアイキャッチ」にしたい場合も、基本は16:9の横長を守っておくと安心です。特に、

• 重要な文字を上下ギリギリに置かない
• 写真や人物の顔は中央寄りに持ってくる

このあたりを意識すると、Lightning側で多少トリミングされても、「なんか変…」という見え方になりにくくなります。

記事ページの大きめアイキャッチサイズ

次は、個別の記事ページの一番上に表示されるアイキャッチです。ここは読者が記事を開いた瞬間に目に入ってくる部分なので、印象がかなり大きく変わります。

大きすぎるとスクロールが面倒になり、小さすぎると寂しい印象になるので、バランスが大事です。目安は次のようなイメージです。

表示環境	横幅の目安	比率の目安	コメント
PCの本文エリア	1000〜1400前後	16:9	テーマのコンテンツ幅より少し大きめでもOK
タブレット	800〜1000前後	16:9	PC用と同じ画像を縮小して表示するイメージ
スマホ	600〜800前後	16:9	文字入り画像の場合はフォントを大きめにしておく

ここでもやはり「横幅1200ピクセル前後の16:9」が基準になります。記事ページのアイキャッチに文字をのせるときは、必ずスマホ表示で確認して、

• タイトルやリード文とかぶっていないか
• 小さすぎて読みづらい文字がないか

このあたりをチェックしておくと安心です。

OGPやSNSシェアを意識したLightningアイキャッチサイズ

Lightningでブログを運営していると、XやFacebookなどのSNSに自動で載るOGP画像も気になってきます。せっかくシェアされても、画像が中途半端に切れてしまうと、クリックされる確率も下がってしまいます。

SNSやOGPを意識したサイズの考え方は、次の表のようなイメージです。

用途	推奨比率	サイズの目安例	ポイント
OGP専用画像	16:9	1200×630〜1200×675前後	主要なSNSで無難に表示されやすい
ブログ用とOGPを共通にする画像	16:9	1200×675前後	一覧・記事ページ・OGPを1枚で兼用しやすい
サイト内だけで完結させる画像	16:9	1000×563〜1200×675前後	表示速度を重視するなら少し小さめでもOK

運用をシンプルにしたいなら、「ブログ内で使うアイキャッチ＝OGP画像」として共通のサイズにしてしまうのがおすすめです。Lightning側の設定でOGP画像をアイキャッチから拾うようにしておけば、基本的には1枚の画像を用意するだけで済みます。

LightningサイトのアイキャッチサイズとSEOの考え方

サイズが大きすぎると表示速度に響く

アイキャッチ画像は、ページ読み込みの中でも特にデータ量が大きくなりがちな要素です。写真素材をそのままアップロードしてしまうと、Lightningのような軽量テーマでも表示速度が落ちてしまうことがあります。

• 横幅2000ピクセル以上の巨大画像
• PNG形式で容量1MBを超える画像
• スマホで撮った写真を無加工でアップロードした画像

こういったものを連発すると、モバイルでの読み込みに時間がかかってしまい、離脱の原因にもなりかねません。

私が普段意識している目安は、

• 横幅は1200〜1600ピクセル程度まで
• 容量は1枚あたり100〜300KB程度
• 写真は基本JPEG、イラストや図解はWebPかJPEG

このくらいです。もちろんサイトのジャンルやデザインによって多少変わりますが、一般的なブログであれば、この範囲に収めておけば困る場面はほとんどないと感じています。

小さすぎるアイキャッチはクリック率も下げてしまう

一方で、画像を軽くしたいからといって、あまりにも小さなアイキャッチを使うのも考えものです。

• 一覧で画像が小さすぎて印象に残らない
• スマホ表示で文字がつぶれて読めない
• 小さい画像を無理やり引き伸ばしているせいでボケて見える

特にLightningのように、カード型のデザインでアイキャッチがしっかり表示されるテーマでは、画像のクオリティがそのままクリック率に直結しやすいです。

横幅600ピクセル程度の小さな画像をアップしているのに、テーマ側が大きく引き伸ばして表示している、という状態はできれば避けたいところです。

Lightningアイキャッチサイズを決めるときの3つの基準

ここまでの話をまとめると、Lightningでアイキャッチサイズを考えるときは、次の3つを基準にすると迷いづらくなります。

• 比率は16:9前後でできるだけ統一する
• 横幅は1200ピクセル前後を基本ラインにする
• 画像の容量は100〜300KB程度を目安に圧縮する

この3つを押さえておけば、

• 投稿一覧での見栄え
• 記事ページでの読みやすさ
• 表示速度とSEOのバランス

このあたりが大きく崩れることはほとんどありません。細かい調整は、サイトのデザインやコンテンツを見ながら少しずつ詰めていけばOKです。

Lightningでアイキャッチサイズを決める実務的な手順

まずは用途ごとのテンプレサイズを決める

最初にやっておきたいのが、「用途ごとに使うアイキャッチのテンプレサイズを決めてしまうこと」です。毎回サイズを変えていると、一覧もバラバラになりやすいですし、作業のたびに悩むことになります。

用途	比率	サイズ例	備考
ブログ記事共通のアイキャッチ	16:9	1200×675	一覧・記事ページ・OGPを1枚で兼用させる用
特集記事や目立たせたい記事	16:9	1600×900	トップページの大きめブロックなどに使う想定
バナー風のお知らせ画像	16:9	1200×675	キャンペーン告知など、文字多めのデザインに向いている

Canvaやその他のデザインツールで、これらのサイズを「カスタムサイズ」として登録しておくと、毎回迷わずサクッと作れるようになります。「うちのサイトの標準アイキャッチはこれ」と決めてあげるイメージです。

デザインツールで安全マージンを意識して作る

Lightningに限らずですが、アイキャッチを作るときは「どこまでが安全に見える範囲か」を意識しておくと失敗が減ります。

• 上下左右に少し余白を残しておく
• 重要な文字やロゴは中央寄りに配置する
• 顔や商品など主役になる部分もできるだけ中央に寄せる

こうしておくと、Lightning側で多少トリミングされても、見せたい部分はしっかり残ります。特に文字入りのアイキャッチでは、

• 上下の端ギリギリにテキストを置かない
• スマホでも読めるようにフォントサイズを少し大きめにする

このあたりを意識しておくと、あとから「スマホだと読めない…」といった事態を防ぎやすくなります。

既存記事のLightningアイキャッチサイズを見直すときの流れ

すでに記事がたくさんある人は、「過去の記事のアイキャッチもLightningに合わせて整えたい」と感じることもあると思います。一気に全部やるのは大変なので、現実的には次のような流れがおすすめです。

ステップ	作業内容	ポイント
1	理想のテンプレサイズをまず決める	16:9のサイズを2〜3パターンに絞っておく
2	アクセスの多い記事から順に作り直す	全記事一気にやろうとせず、優先度の高い記事から
3	一覧ページやスマホ表示で見え方を確認する	トリミングのされ方や文字の読みやすさをチェック
4	余裕があればその他の記事も少しずつ差し替える	重要度の低い記事は必要になるまでそのままでもOK

私もいつも、アクセス上位の記事から10本ずつくらいのペースで見直していくことが多いです。全部を完璧にしようとするとしんどくなってしまうので、「よく読まれている記事から整えていく」という感覚で進めると続けやすいと感じています。

Lightningでアイキャッチサイズを調整する3ステップ

ステップ1：WordPressのメディア設定を確認する

まずはWordPress管理画面の「設定」→「メディア」を開いて、

• サムネイルのサイズ
• 中サイズ
• 大サイズ

この3つの数値を確認します。ここが極端に小さかったり、縦横のバランスがおかしくなっていると、生成されるサムネイルにも影響が出ます。

目安としては、

• サムネイル：幅・高さとも300〜400前後
• 中サイズ：幅600〜800前後
• 大サイズ：幅1200〜1600前後

このくらいに収まっていれば、Lightningでの表示とも大きく相性を外すことは少ないはずです。

ステップ2：実際の表示を見ながら微調整する

次に、自分のサイトを実際に開いて、PCとスマホの両方で次のようなページをチェックします。

• ブログの投稿一覧ページ
• 代表的な記事ページ（いくつか）
• 固定ページのヘッダーなどアイキャッチを使っている場所

そのうえで、

• 一覧のカードで上下が大きく切れていないか
• アイキャッチが小さすぎて物足りなくないか
• スマホで見たときだけ文字が切れていないか

といった点を確認していきます。

問題がありそうなときは、

• 元画像の比率を16:9寄りに作り直す
• 横幅が小さすぎる画像は、1200ピクセル前後で撮り直す・作り直す

といった対応をしてみてください。CSSが分かる人であれば、必要に応じて、

• サムネイルの表示高さを少し調整する
• カード内の余白や画像の表示領域を微調整する

といった細かいチューニングも可能です。

ステップ3：アイキャッチ運用ルールを決めてしまう

最後に、今後の記事作成のために「うちのサイトではアイキャッチをこう使う」という運用ルールをざっくり決めておくと、とても楽になります。たとえば、次のような感じです。

項目	ルール例
基本サイズ	横1200×縦675の16:9で統一する
例外的に使うサイズ	特集記事のみ横1600×縦900を使用
ファイル形式	写真はJPEG、図解やイラストはWebPかJPEG
文字入りアイキャッチのルール	タイトルの要約＋中央寄せにして、上下には十分な余白を取る

こうしたルールを一度決めてメモしておくと、あとから悩む時間がぐっと減ります。チームで運営している場合も、メンバー全員で共通認識を持ちやすくなるのでおすすめです。

よくある質問：Lightningアイキャッチサイズの疑問

Q1：Lightningならアイキャッチサイズは何パターン用意すべきですか？

A：私のおすすめは「2〜3パターン」に絞ることです。

たとえば、

• 通常の記事で使う共通サイズ（1200×675の16:9）
• 特集記事やLP風ページ用の大きめサイズ
• 必要ならOGP専用サイズを別に1つ

といった具合です。Lightningはカードのデザインがしっかりしている分、アイキャッチのサイズパターンを増やしすぎると、逆に一覧の見た目が揃いにくくなります。よほどこだわりたい事情がない限りは、少数精鋭のパターンで運用する方が管理しやすいかなと思います。

Q2：Lightningのアイキャッチ画像が上下で切れてしまいます

A：上下が大きく切れてしまうときは、

• 元画像の比率が16:9から大きく外れている
• 人の顔や文字をギリギリの位置に配置している

この2つが原因になっているケースが多いです。

Lightning側はカードのレイアウトを整えるために、ある程度トリミングしてくれますが、元の画像の比率がバラバラだと、どこかを切らざるを得ません。アイキャッチを作り直すときは、

• 画像の比率をできるだけ16:9にそろえる
• 主役になる要素は真ん中寄りに置く

この2点を意識してみてください。それだけでも、Lightningの投稿一覧での見え方はかなり安定してくるはずです。

Q3：Lightningでアイキャッチサイズを変えたら、古い画像も作り直さないとダメですか？

A：理想だけ言えばすべて揃えたいところですが、現実的には「アクセスの多い記事から少しずつ」で十分です。

新しく「うちのサイトの基本アイキャッチサイズ」を決めたら、

• 検索流入やSNSからよく読まれている記事
• トップページやカテゴリーの目立つところに表示される記事

こういった優先度の高い記事から順に差し替えていくのがおすすめです。全記事を一気に直そうとすると、作業量が膨大になって心が折れてしまいます。

私自身も、まずは上位10〜20記事くらいを整えて、そのあと時間のあるときに少しずつ着手するようにしています。Lightningのアイキャッチサイズは、完璧を目指すより「重要な部分から徐々に整える」くらいの気持ちで進める方が、長い目で見ると続きやすいと思います。

まとめ：Lightningアイキャッチサイズは迷わずパターン化しよう

この記事の内容を振り返ります

今すぐできる最初の一歩としては、「自分のサイトの基本アイキャッチサイズ」を1つ決めて、デザインツールにテンプレとして登録してみてください。そのうえで、Lightningの一覧ページと記事ページを実際に開いて、気になる記事からアイキャッチを差し替えていけば、少しずつサイト全体の統一感が出てきます。

コツコツ続けていけば、Lightningのアイキャッチサイズで迷う時間も減り、そのぶん記事の中身づくりに集中できるようになるはずです。