本文は仕上がっているのに、アイキャッチ画像が決まらないまま公開日を1日ずらした。記事制作の現場では珍しくない詰まり方です。
アイキャッチ画像は、記事の中身を開く前に予告する1枚を指します。ただ、その1枚は記事の冒頭に置かれて終わりではありません。記事一覧では小さく縮められ、SNSにシェアされればリンクカードの中で左右を切り落とされます。同じ画像が、違うサイズと違う文脈で何度も表示される。この前提を抜きに「かっこいい1枚」を目指すと、一覧では文字が読めず、SNSでは端の情報が欠ける、という結果になりがちです。
本記事では、数多くのSEO記事を制作してきた弊社が制作現場で使っている考え方をもとに、アイキャッチ画像の役割とサムネイルとの違い、サイズの決め方、作り方の手順、WordPressでの設定と表示されないときの対処、そして記事を出し続けるための運用のつくり方までを順に解説します。
- アイキャッチ画像とサムネイルは、呼び分けの基準が「役割」ではなく「表示される場所」にあること
- 1200×630pxを起点にしつつ、正方形に切られる前提で中央に情報を寄せるサイズ設計
- 記事の理解からCMSへの登録まで、アイキャッチ画像を7つに分けた作り方の手順
- WordPressで設定欄が表示されないときに確認する3か所
- 毎月記事を出し続けるために、テンプレートと命名規則を先に決める運用のかたち
アイキャッチ画像とは、記事を開く前に中身を予告する1枚
アイキャッチ画像とは、記事やページの内容を1枚で示すために添える代表画像のことです。英語のeye-catch（目を引く）から生まれた和製英語で、Webの文脈では「記事に紐づけて登録する代表画像」とほぼ同じ意味で使われています。WordPressの管理画面では「アイキャッチ画像」と表示されますが、英語版の表記はFeatured Image（注目の画像）で、機能としては投稿1件につき1枚の画像を紐づける仕組みにあたります。
ここで押さえておきたいのは、アイキャッチ画像は記事の飾りではなく、記事のメタ情報のひとつだという捉え方です。タイトルやディスクリプションと同じく、記事の中身を外側へ伝えるために登録する情報にあたります。飾りだと考えると1枚ずつ凝りたくなりますが、メタ情報だと考えれば、揃っていることのほうが先に来る。この認識の差が、後述する運用の続きやすさをかなり左右します。
サムネイルとの違いは、呼び分けの基準が「場所」にあること
「アイキャッチ」と「サムネイル」は、実務ではほとんどの場面で同じ画像を指しています。違いは画像そのものにあるのではなく、どこに表示されているかにあります。
アイキャッチ画像は、記事に紐づけて登録した代表画像そのものを指す呼び方です。対してサムネイルは、その画像が記事一覧や関連記事の枠内で縮小表示された状態を指します。つまり1枚の画像がアイキャッチ画像であり、同時にサムネイルでもある。別々の画像を用意しなければならない、という話ではありません。
WordPressの内部でも呼び方は揺れています。アイキャッチ画像をテンプレートに出力する関数名はthe_post_thumbnail（投稿のサムネイル）で、画面上の表示名と内部の名称が一致していません。用語として厳密に区別されてこなかったのは、そもそも指しているものが同じだからでしょう。
区別が必要になるのはYouTubeのサムネイルです。こちらは動画一覧の中で他の動画と直接並び、クリックの奪い合いが起きる場所に置かれます。文字を大きく入れ、表情の写真を載せる作り方が定着しているのは、その競争環境に最適化された結果です。ブログのアイキャッチ画像に同じ作法をそのまま持ち込むと、メディア全体の印象が過剰になることがあるため、参考にするなら「並んだときの見え方を考える」という考え方の部分だけを借りるのが無難です。
1枚の画像が、3つの場所へ配られる
アイキャッチ画像を登録すると、多くのテーマやCMSでは同じ1枚が少なくとも3か所へ自動的に配られます。
1か所目は記事の冒頭で、タイトル直下や本文の上に大きく表示される場所。2か所目は記事一覧やカテゴリページ、関連記事の枠で、ここでは縮小され、テーマによっては正方形に切り抜かれます。3か所目がOGP画像です。X（旧Twitter）やFacebook、Slackなどにリンクが貼られたとき、リンクカードとして表示される画像がこれにあたります。
3か所それぞれで表示サイズも比率も変わるという事実が、アイキャッチ画像の設計をややこしくしている原因です。設計の単位は「1枚の絵」ではなく、「どこを切られても意味が残る1枚」だと考えたほうが実態に合っています。
関連記事：SEO記事の書き方完全ガイド｜上位表示を実現する18のテクニックと対策
アイキャッチ画像に期待できること、期待できないこと
アイキャッチ画像の話をすると、決まって「SEOに効果があるのか」という論点になります。ここは分けて考えたほうが、労力の配分を間違えません。
差が出るのは、記事が並んで比べられる画面
アイキャッチ画像が読者の判断に関わるのは、複数の記事が同じ画面に並び、どれを開くか選ばれる瞬間です。具体的には、サイト内の記事一覧、カテゴリページ、記事下の関連記事、そしてSNSのタイムライン。いずれも読者は本文を読まずに、タイトルと画像だけで開くかどうかを決めています。
逆に言えば、Google検索の結果一覧では、アイキャッチ画像の出番はかなり限定的です。パソコンの検索結果に記事のアイキャッチ画像が並ぶことは基本的にありませんし、スマートフォンでもサムネイルが表示されるかどうかはGoogle側の判断に委ねられています。「検索順位を上げるためにアイキャッチを作り込む」という発想は、前提が半分ずれている、と言えるでしょう。
検索順位そのものを押し上げる要素ではない
経営者アイキャッチ画像を作り込めばSEOに強くなる、と社内で言われたのですが、そういうものなのでしょうか。
Writers-hub編集部
画像の見栄えが順位を直接動かすことはありません。ただ、無関係でもないんです。ファイル容量が大きいと表示速度が落ちますし、altテキストは画像検索や読み上げの手がかりになります。順位への関わり方は「見た目」ではなく「重さと説明文」の側にある、と整理したほうが実態に近いですね。
つまり、アイキャッチ画像がSEOに関与する経路は間接的なものに限られます。ページの表示速度、画像の代替テキスト、そして記事一覧からの回遊が増えることによる滞在時間の変化。どれも「絵の完成度」ではなく「ファイルの扱い方」と「読者の動き方」の話です。
Googleは画像を扱う際のベストプラクティスとして、内容を説明する代替テキストの記述と、圧縮によるファイルサイズの削減を挙げています。凝ったデザインより先に、この2つを満たすほうが確実です。
この順序を取り違えると、労力の使いどころを間違えます。デザインの完成度を上げる前に、まず容量と代替テキストを整える。前者は好みが分かれる領域ですが、後者は基準がはっきりしていて、やれば必ず改善する部分だからです。
アイキャッチ画像の投資対効果が高いのは、記事本数が増えて一覧ページに10本、20本と並び始めてからです。記事が数本しかない段階で1枚に何時間もかけるより、テンプレートを1つ決めて全記事の見た目を揃えるほうが、後から効いてきます。
関連記事：SEOのリライトとは？効果が出る記事の選び方と進め方
アイキャッチ画像のサイズは1200×630pxを起点に決める
サイズで迷ったら、まず1200×630pxで作る。これが現時点でもっとも扱いやすい選択です。理由を分解しておきます。
1200×630pxが基準として広く使われている理由
1200×630pxは、比率にすると約1.91対1です。この比率は、SNSにリンクを貼ったときに表示されるリンクカードの標準的な形にあたります。OGP（Open Graph Protocol）はリンク先のタイトルや画像をSNS側へ伝える仕様で、og:imageとして指定した画像が横長のカードに展開されるとき、この比率が前提になっています。
横幅を1200pxにしておく理由は別にあります。近年のディスプレイは同じ表示面積に対して2倍の密度でピクセルを持つものが主流で、横幅600pxで作った画像はそのままだと輪郭がぼやけます。表示したい幅の2倍で作る、という考え方で1200pxを取っておくと、拡大表示されても粗が出にくくなります。
一覧では正方形に切られる前提で、中央に情報を寄せる
ここからが実務で差が出る部分です。1200×630pxで作った画像は、そのままの形で表示されるとは限りません。
表示される場所 | よくある形 | 設計上の注意 |
|---|---|---|
記事冒頭 | 元の横長のまま | ほぼ全面が見えるため制約は少ない |
記事一覧・関連記事 | 正方形や4対3に切り抜き | 左右が大きく落ちる。端の文字は消える |
SNSのリンクカード | 1.91対1に近い横長 | 上下がわずかに切られることがある |
スマートフォンの一覧 | 小さな正方形 | 文字が10文字を超えると読めなくなる |
3つの切り取られ方に共通して残るのは、画像の中央です。だからロゴやタイトル文字を四隅に置く構成は、一覧に出た瞬間に情報が欠けます。文字とロゴは中央から左右に150pxほど余白を残した範囲、上下も同様に内側へ寄せておくと、どの場所でも意味が保たれます。
容量は表示速度に直結する
見落とされやすいのがファイル容量です。アイキャッチ画像は記事一覧では十数枚がまとめて読み込まれるため、1枚あたりの重さがそのままページの重さに積み上がります。
弊社では、アイキャッチ画像は1枚あたり200KB以下、記事冒頭の大きな画像でも300KBを超えないところを目安にしています。形式はWebPが扱いやすく、写真中心ならJPEG、図解や文字中心ならPNGという使い分けでも実用上は足ります。書き出したあとに圧縮ツールを1回通すだけで、見た目をほとんど落とさずに半分近くまで軽くなることも珍しくありません。
関連記事：Webライティングのタイトルの付け方｜クリックされる型と決め方
アイキャッチ画像の作り方を7つの手順に分ける
作り方をデザインの話から始めると、たいてい行き詰まります。手を動かす前に決めることのほうが多いためです。実際の制作は次の順で進めます。
アイキャッチ画像に載せるべきは、記事のテーマではなく記事の結論です。「アイキャッチ画像について」ではなく「サイズは1200×630pxから決める」のほうが、開く理由になります。本文を書いた人が1文で言えないなら、まだ画像を作る段階ではありません。
同じ記事でも、SNSからの流入が中心なのか、サイト内の回遊が中心なのかで最適な作りは変わります。SNS経由なら文字を大きく、サイト内の一覧が中心ならメディア全体の統一感を優先する、という判断になります。
記事タイトルをそのまま貼ると、たいてい文字が小さくなりすぎます。載せるのは13文字前後まで。タイトルの中核だけを抜き出し、助詞や修飾を削ります。数字が入っているなら数字を残すと視認性が上がります。
写真、イラスト、図形のいずれかを選びます。判断基準は好みではなく、記事の内容と直接つながるかどうか。テーマと無関係な風景写真は、記事の中身を予告する役割を果たしません。
背景、文字位置、フォント、色をあらかじめ決めたテンプレートに、言葉と素材を入れ替えて当てはめます。1枚目だけは時間をかけてテンプレートを作り、2枚目以降は差し替えるだけの状態にしておきます。
作成画面の表示倍率を25パーセント前後まで落とし、文字が判別できるかを見ます。ここで読めない画像は、記事一覧でもスマートフォンでも読めません。
最後に必ず本物の画面で確認します。記事一覧、記事冒頭、そしてSNSにシェアしたときのプレビュー。テーマ側の切り抜き設定は、実際に登録しないとわからないことがあります。
素材選びで止まらないための決め方
7手順のうち、もっとも時間を吸い取られるのが素材選びです。素材サイトを開いて眺め始めると、いくらでも時間が過ぎていきます。
止まらないための方法はひとつで、探し始める前に検索語を2語まで決めておくこと。記事のテーマから連想した具体名詞を1語、伝えたい状態を表す語を1語。たとえば「アイキャッチ画像」の記事なら「デザイン 作業」といった組み合わせです。決めた2語で出てきた候補の中から選び切る、と先に決めておくと、選定は数分で終わります。
Canvaのように無料で使えるデザインツールにはテンプレートが揃っており、素材の検索から書き出しまでを1つの画面で完結できます。テンプレートをそのまま使うと他サイトと似た見た目になりやすいため、色とフォントだけは自社のものに置き換えておくと安全です。
素材を扱ううえで、デザインより先に確認しておくべきことがあります。
素材の利用条件は、サイトごとに違います。商用利用が可能でもクレジット表記が必要なもの、加工が禁止されているもの、人物写真で肖像権の確認が必要なものがあります。使う素材サイトを2つか3つに絞り、そのサイトの規約を一度読んでおくと、記事ごとに確認する手間がなくなります。AI生成画像を使う場合も、生成サービスの利用規約で商用利用の範囲を確認しておくのが安全です。
クリックされる画像と、スルーされる画像の差
同じテーマ、同じ品質の写真を使っても、開かれる画像と素通りされる画像に分かれます。差が出る箇所はある程度決まっています。
まず、読者は画像を「読んで」いません。一覧をスクロールしながら、0.5秒に満たない時間で見ているだけです。その時間内に伝わる情報量には限りがあり、要素を増やすほど何も伝わらなくなります。
- タイトルを全文載せていて、縮小すると文字が潰れる
- 写真の上に直接白文字を置き、背景が明るい部分で文字が消える
- 四隅にロゴとカテゴリ名と日付を配置し、一覧では全部切れている
- 記事の内容と関係のない風景写真やビジネス素材を使っている
- 記事ごとにフォントも色も違い、一覧に並ぶとまとまりがない
- ファイル容量が1MBを超え、一覧ページの読み込みが目に見えて遅い
裏返すと、押さえるべき点は多くありません。文字は13文字前後まで、色は3色まで、要素は3つまで。この範囲に収めるだけで、縮小されたときの読みやすさは目に見えて変わります。写真の上に文字を置くなら、写真全体を暗くする層を1枚挟むか、文字の背後に単色の帯を敷く。どちらも作業としては数秒で、効果は確実です。
文字を入れるか、入れないか
アイキャッチ画像に文字を入れるべきかどうかは、意見が分かれるところです。どちらが正しいという話ではなく、運用の前提で選ぶべき論点だと考えています。
- 一覧やSNSで内容が一目で伝わり、クリックの理由になる
- タイトルが長い記事でも、画像側で要点を短く言い直せる
- 記事ごとの違いがはっきりし、一覧で見分けがつく
- タイトルを変更したとき、画像も作り直さないと食い違う
- 縮小表示で文字が潰れると、かえって雑な印象を与える
- 1枚ごとに文字組みの調整が必要で、制作時間が伸びる
実務でよく起きるのが、リライトでタイトルを変えたのに画像の文字が古いまま残る、という食い違いです。記事数が増えるほど、この不整合は見つけにくくなります。定期的にリライトする運用ならば文字を入れない構成、公開したら基本的に触らない記事が中心なら文字を入れる構成、という分け方が現実的でしょう。
画像で止まるのは、記事制作の工程が分かれていないからかもしれません
本文は書けるのに画像で公開が止まる、という詰まり方は、執筆と画像制作が同じ人の同じ日の作業になっていることが原因です。弊社では構成・執筆・画像・入稿を分けた工程で記事制作を支援しています。どこを外に出すと止まらなくなるか、現状の進め方をうかがったうえでご提案します。
WordPressでアイキャッチ画像を設定する
WordPressでは、投稿ごとにアイキャッチ画像を紐づける機能が標準で用意されています。手順そのものは短いものです。
管理画面から対象の投稿を開きます。新規記事でも既存記事でも操作は同じです。
ブロックエディタでは、画面右の設定パネルにある「投稿」タブの中に「アイキャッチ画像」の欄があります。パネルが閉じている場合は、右上の歯車アイコンで開きます。クラシックエディタの場合は、右側のサイドバー下部に同名のボックスが表示されます。
「アイキャッチ画像を設定」を選ぶとメディアライブラリが開きます。既にアップロード済みの画像を選ぶか、新しい画像をドラッグしてアップロードします。
画像を選んだ状態で、右側の「代替テキスト」欄に画像の内容を短く記述します。空欄のまま進めがちな項目ですが、画像検索と読み上げの両方で使われるため、記事タイトルの流用ではなく画像そのものの説明を入れます。
設定後にプレビューまたは公開を行い、記事冒頭と記事一覧の両方で意図どおりに表示されているかを見ます。
操作としては以上で、慣れれば1分もかかりません。詰まるとすればアップロードの手前ではなく、そもそも設定欄が見当たらない場面です。
設定欄が表示されないときに確認する3か所
「アイキャッチ画像の項目が見当たらない」という相談は、原因がだいたい3つに絞れます。
1つ目は、エディタ側でパネルが非表示になっているケース。ブロックエディタの右上メニューから「設定」を開き、表示項目の中でアイキャッチ画像がオフになっていないかを確認します。まずここを疑うのが早道です。
2つ目は、テーマがアイキャッチ画像に対応していないケース。テーマのfunctions.phpにadd_theme_support（'post-thumbnails'）の記述がないと、機能そのものが有効になりません。自作テーマや古いテーマで起きます。
3つ目は、カスタム投稿タイプが対応していないケース。register_post_typeでsupportsにthumbnailが含まれていないと、その投稿タイプだけ欄が出ません。通常の投稿では出るのに特定の投稿タイプでは出ない、という症状ならここです。
いずれもテーマ側の設定に踏み込むため、テーマファイルを直接編集する場合は子テーマで行うか、事前にバックアップを取ってから作業してください。
テーマによって表示のされ方が変わる
同じ画像を登録しても、表示のされ方はテーマ次第です。記事一覧で正方形に切るテーマもあれば、16対9で切るテーマ、元の比率を保つテーマもあります。
自作テーマや調整が可能な環境であれば、テンプレート側で出力サイズを指定できます。the_post_thumbnail関数に'large'や'medium'といったサイズ名を渡すと、メディア設定で定義されたサイズが使われます。独自のサイズが必要な場合はadd_image_sizeで登録したうえで呼び出す形になりますが、後から追加したサイズは既存画像には適用されないため、過去画像のサムネイル再生成が別途必要になる点は覚えておいてください。
記事を出し続けるなら、アイキャッチは仕組みで回す
ここまでは1枚の作り方の話でした。ただ、記事を月に何本も出す体制では、論点が「どう作るか」から「どう止めずに回すか」へ移ります。
テンプレートはカテゴリ単位でつくる
記事ごとにデザインを考える運用は、まず続きません。かといって全記事を1つのテンプレートで統一すると、一覧に並んだときの見分けがつかなくなる。
現実的なのはカテゴリ単位でテンプレートを分けるやり方です。カテゴリごとに背景色とアイコンの系統だけを変え、文字組みとロゴ位置は全カテゴリで共通にする。一覧での識別性とメディアとしての統一感が両立し、テンプレートの管理数もカテゴリ数に収まります。8カテゴリあるメディアなら8種類。記事が100本になっても増えません。
テンプレートの数が固定されると、担当者が変わったときの引き継ぎも短くなります。伝えるべきものが「センス」ではなく「どのカテゴリのテンプレートを開き、どこを差し替えるか」に変わるためです。
命名規則と代替テキストのルールを先に決める
画像ファイルが増えると、メディアライブラリの中で目当ての画像が探せなくなります。スクリーンショットをそのままアップロードして、名前が英数字の羅列のまま溜まっていく状態はよく見かけます。
対策はファイル名の規則を1つ決めるだけです。記事のスラッグと用途をつないだ形、たとえばeyecatch-image-ogp.webpのようにしておけば、後から差し替えるときに探す時間がかかりません。代替テキストも同様で、「画像に何が写っているかを20文字前後で書く」という基準を運用ルールに書いておくと、担当者が変わっても記述の粒度が揃います。
自作、ストック素材、外注をどう使い分けるか
制作方法の選択は、記事本数と更新頻度で決まります。
| 自分で1枚ずつ作る | テンプレート＋ストック素材 | 制作会社に任せる | |
|---|---|---|---|
| 1枚あたりの所要時間 | 30分から1時間 | 10分から20分 | 依頼と確認で5分程度 |
| 立ち上げに必要な作業 | ツールの習熟 | テンプレート設計 | 方針のすり合わせ |
| 見た目の統一 | △ 担当者の腕に左右される | ○ テンプレートで揃う | ◎ 設計段階で担保される |
| 記事本数が増えたとき | × 作業量が線形に増える | ○ ある程度は吸収できる | ◎ 本数が増えても工程は同じ |
| 向いているケース | 月1本から2本 | 月3本から8本 | 月8本以上、または更新が止まりがち |
月に数本のうちは自作で十分に回ります。判断が必要になるのは、記事本数が増えて画像制作が公開のボトルネックになったときです。執筆と画像制作が同じ担当者の作業になっていると、どちらかが遅れるだけで公開が止まる。工程を分けることが、そのまま更新頻度の安定につながります。
弊社が記事制作を請ける場合も、アイキャッチ画像は執筆とは別の工程として扱い、テンプレートの設計を最初にまとめて行ってから量産に入る進め方をとっています。1本目の設計に時間をかけるほど、2本目以降の制作時間は短くなるためです。
毎月の記事更新が、画像の工程で止まっていませんか
テンプレートの設計、素材選定の基準づくり、命名規則の整備までを含めて、記事制作の工程を組み直すご支援をしています。まずは現在の更新本数と、どこで止まりやすいかをお聞かせください。今の体制のまま出せる本数と、工程を分けた場合の見通しをお伝えします。
アイキャッチ画像についてよくある質問
機能としては任意です。ただし未設定のまま公開すると、記事一覧では画像枠が空欄になるか、テーマ既定の代替画像が表示されます。SNSにシェアされた際もリンクカードに画像が出ず、テキストだけの目立たない表示になります。全記事に設定しておくのが基本と考えてください。
作れます。CanvaやAdobe Expressにはスマートフォン向けのアプリがあり、テンプレートを選んで文字を差し替えるところまで完結します。ただし細かい文字組みの調整はパソコンのほうが速いため、テンプレートの初回設計だけはパソコンで行い、以降の差し替えをスマートフォンで、という分担が現実的でしょう。
使えますが、役割が違うため別に用意することをおすすめします。アイキャッチ画像は記事の全体像を1枚で示すもの、記事内の画像は特定の説明を補うものです。同じ画像が冒頭と本文中に2回出ると、読者にとっては同じ情報を2度見せられる形になります。
容量を抑えたいならWebPが第一候補です。写真中心の画像ならJPEG、文字や図形が多い画像ならPNGでも実用上は問題ありません。判断に迷う場合は、書き出したあとに容量を確認し、200KBを超えるようなら形式を変えるか圧縮する、という手順で足ります。
全記事を一度に作り直す必要はありません。優先すべきは、アクセスが多い記事とSNSでシェアされやすい記事です。アクセス解析で上位に入る記事から順に差し替えていけば、かけた時間に対する変化を確認しながら進められます。
まとめ
アイキャッチ画像は、記事に紐づけて登録する代表画像であり、記事冒頭・記事一覧・SNSのリンクカードという3か所へ同じ1枚が配られます。サムネイルとの違いは画像そのものではなく、縮小表示された状態を指すかどうかという呼び分けの問題でした。
サイズは1200×630pxを起点にし、正方形に切られる前提で文字とロゴを中央へ寄せる。載せる言葉は13文字前後まで、色は3色まで、要素は3つまで。容量は1枚200KBを目安に圧縮する。この4点を守るだけで、どの画面に出ても読める画像になります。
そして記事を出し続けるなら、1枚ずつの完成度より、カテゴリ単位のテンプレートと命名規則を先に決めることのほうが結果に効いてきます。画像が原因で公開が遅れる状態は、デザインの問題ではなく工程の問題だからです。
合同会社Writers-hubでは、SEO記事の構成・執筆から画像・入稿までを工程として分け、更新が止まらない制作体制づくりを支援しています。記事の本数を増やしたいが手が回らない、という段階にある方は、現状の進め方をお聞かせください。
記事の本数を増やしたい段階なら、工程の切り分けから始められます
今の更新本数と、社内で回している工程をうかがったうえで、どこを外に出すと止まらなくなるかを整理してお伝えします。ご相談だけでも構いません。
※ 画像の代替テキストとファイルサイズに関する記述は、Google検索セントラルの画像SEOに関するドキュメントを参照しています。
