記事は書き上がったのに、画像の欄だけが空欄で残っている。ブログやオウンドメディアを運用していれば、月に何度も遭遇する場面ではないでしょうか。とりあえず素材サイトから風景写真を選んで埋める、という判断を何度か重ねたあとで、「そもそもこの画像は何のために置いているのか」という疑問に行き当たります。
アイキャッチという言葉が検索されたとき、答えがかみ合いにくい理由がひとつあります。この言葉が、Webの文脈とテレビ・アニメの文脈で、まったく別のものを指しているからです。
本記事では、数多くのSEO記事を制作してきた立場から、アイキャッチの意味を二つの文脈に分けて整理したうえで、サムネイルやOGPとの違い、成果につながる作り方、そして毎月続けるための運用の決め方まで解説します。
- アイキャッチの意味と、Webとテレビ・アニメでの使われ方の違い
- サムネイル・OGP画像・バナーとの区別のしかた
- クリック率だけを追うと逆効果になる理由
- 1200×630pxを基準にしたサイズ設計と、表示崩れを防ぐ構図
- 素材の権利確認と、月に何本も出し続けるための運用の決め方
アイキャッチとは、見る人の視線を最初に受け止める要素のこと
アイキャッチは、英語のeye-catching（人目を引く）に由来する言い方で、ポスターやWebページ、SNS投稿などで最初に視線を受け止める役割を担う要素を指します。写真でもイラストでも、大きく組まれた文字や色面でもかまいません。アイキャッチは物の名前ではなく、役割につけられた呼び名です。
同じ1枚の写真でも、記事の入口に置かれればアイキャッチと呼ばれ、本文の途中に置かれれば挿絵と呼ばれる。何が写っているかではなく、どこに置かれて何をしているかで名前が変わる、という点をまず押さえておくと、以降の用語整理がずいぶん楽になります。
Webのアイキャッチは、記事やページの入口に置く画像
WebでアイキャッチというときはWordPressの「アイキャッチ画像」に代表されるように、記事の先頭や記事一覧のカードに表示される画像を指すのが一般的です。ブログの管理画面では設定欄そのものがアイキャッチと名づけられているため、Web運用に関わる人にとってはこちらが第一の語義でしょう。
役割は大きく三つ。記事一覧の中で見分けをつけること、本文を読む前に内容の見当をつけてもらうこと、そしてSNSに共有されたときに投稿カードの絵柄になることです。三つ目は見落とされやすい割に、拡散の入口を左右します。
テレビやアニメのアイキャッチは、CMとの境目に入る短い映像
一方で、テレビ番組やアニメの文脈でのアイキャッチは、本編とCMの境目に差し込まれる数秒の映像やロゴを指します。キャラクターの静止画にタイトルロゴを重ねたものが典型で、ラジオでは同じ役割を音だけで担うジングルが使われてきました。
「アニメのアイキャッチを最近見かけない」という声があるのは、おそらく視聴環境の変化が関係しています。配信サービスでの視聴では途中にCMが入らないため、境目そのものが発生しません。区切る対象がなければ、区切るための演出も必然性を失います。
二つに共通しているのは「注意の切り替え」
まったく別物に見える二つの用法ですが、機能は重なっています。どちらも、見ている人の注意が別のものへ移る境目に置かれているのです。テレビなら本編からCMへ、Webなら記事一覧からその記事へ。境目に置いて、注意の向きを切り替える。それがアイキャッチという言葉が引き受けてきた仕事だと考えると、両方の意味が一本の線でつながります。
以降は、Web運用でのアイキャッチに絞って掘り下げます。
関連記事：SEO記事の書き方完全ガイド｜上位表示を実現する18のテクニックと対策
アイキャッチとサムネイル・OGP画像・バナーの違い
現場でいちばん混乱が起きるのが、サムネイルやOGP画像との呼び分けです。混乱の原因ははっきりしていて、アイキャッチだけが「役割」の呼び名で、他の三つは「表示形式」や「仕様」の呼び名だからです。同じ1枚の画像が、置かれる場所によってアイキャッチにもサムネイルにもOGP画像にもなります。
| 何を指しているか | 主に表示される場所 | |
|---|---|---|
| アイキャッチ | 視線を受け止めるという役割そのもの | 記事の冒頭、記事一覧、広告紙面 |
| サムネイル | 縮小表示された画像という状態 | 一覧画面、動画プレイヤー |
| OGP画像 | SNS共有時に出す画像の指定仕様 | X、Facebook、LINEの投稿カード |
| バナー | クリックさせて別ページへ送る枠 | サイト内の広告枠、メール |
実務での使い分けは、社内で通じればそれでよい
厳密な線引きにこだわる必要はありません。「アイキャッチ画像を1200×630pxで作って、OGPにも同じものを使う」という一文が社内で通じるなら、運用上はそれで十分です。ただし外部のデザイナーや制作会社に依頼する場面では、話が変わります。「サムネイルを作ってください」とだけ伝えると、記事一覧用の小さな画像だけを想定されることがあるためです。
依頼のときは、用途と表示場所をセットで伝えると行き違いが減ります。記事冒頭に出すのか、一覧のカードに出すのか、SNSに共有されたときの絵柄も兼ねるのか。ここまで言語化しておけば、サイズも構図も自動的に決まっていきます。
関連記事：SEOのリライトとは？効果が出る記事の選び方と進め方
アイキャッチが成果に関わる仕組み
「良いアイキャッチとは何か」を考える前に、確認しておきたい前提があります。読者はアイキャッチを1枚だけで見ていません。記事一覧、関連記事の枠、SNSのタイムライン。表示される場所はどれも、他の記事と横並びになる画面です。
つまりアイキャッチは、単体の完成度ではなく隣に並んだものとの差で評価されています。1枚だけ画面に映して「よくできている」と判断しても、実際の表示環境では他の10枚に埋もれていることがある。制作物のチェックを原寸の1枚だけで行うと、この落とし穴にはまります。
確認は、実際の記事一覧ページに並べた状態で行ってください。ブラウザの表示倍率を50パーセント程度まで下げると、スマートフォンでの見え方に近づきます。この状態で自分の記事がどれか一目で分かるなら、役割は果たせています。
クリック率だけを追いかけると、かえって成果が落ちる
視線を集めること自体は、それほど難しくありません。強い色、大きな数字、驚きのある写真を使えば、一覧の中で目立たせることはできます。問題は、その先です。
中身と釣り合わない画像でクリックを集めても、読者は数秒で戻ります。検索から来た読者が期待した内容と違えば、そのまま検索結果へ引き返す。回遊も問い合わせも起きないまま、表示回数だけが増えていきます。記事一覧のクリック率だけを見ていると、この構造は数字に表れません。
そこで実務では、クリック率と一緒にクリック後の滞在時間や読了率を確認します。画像を差し替えたあとにクリック率が上がり、滞在時間が下がったなら、その画像は内容から離れたということ。逆に両方が上がったなら、画像が記事の中身をより正確に伝えられるようになったと判断できます。
Web担当者写真を明るいものに変えたらクリック率は上がったのですが、問い合わせは増えませんでした。
Writers-hub編集部
クリックの数ではなく、来た人の中身が変わっていないか確認してみてください。画像だけを目立たせると、記事のテーマに関心がない人まで入ってきます。母数が増えても、検討している人の数が増えていなければ、問い合わせは動きません。
画像の役割は、通りすがりを増やすことではなく、その記事を必要としている人に見つけてもらうことにあります。目立たせる方向にだけ調整を続けると、この目的から静かに外れていきます。
画像を差し替えてもクリックの先が変わらないなら、原因は記事側にあるかもしれません
アイキャッチが拾えるのは、タイトルと本文が読者の検索意図に合っている記事だけです。Writers-hubでは、検索意図の分解から本文の構成、公開後の見直しまでを一本の流れで担当しています。画像より先に直すべき箇所がある場合は、そこから提案します。
関連記事：Webページのタイトルはどこにある？表示場所と確認方法、サイト名との違い
効果的なアイキャッチの作り方
デザインの技術より先に決めることがあります。何を伝える1枚にするかです。ここが決まっていない状態でツールを開くと、素材選びから始まり、いつまでも決まりません。
アイキャッチは記事の要約です。本文を読み終えた人が持ち帰る結論を、まず1文にしてください。「アイキャッチは一覧で見分けがつくかで決まる」といった短い文で構いません。この1文が、画像に載せる内容の判断基準になります。
同じテーマでも、初めて触れる人向けなのか、すでに運用している人向けなのかで最適な絵柄は変わります。前者なら全体像を示す図、後者なら具体的な画面や数値のほうが手が止まります。
一覧の中で認識される時間は一瞬です。要素を詰め込むほど、何も伝わらなくなります。画像に入れる要素は1つに絞ります。人物か、図解か、短い文字か。どれかを主役にして、残りは背景に回してください。
表示場所によって答えが変わります。記事一覧のようにタイトルが画像の下に必ず並ぶ場所では、画像内の文字は重複になりがちです。逆にSNSではタイトルが小さく表示されるため、画像内の文字が読まれる比率が上がります。
単体で見て判断しない、という原則をここでもう一度使います。実際の一覧に置き、縮小した状態で見分けがつくかを確かめてから公開してください。
文字を入れる判断は、タイトルの変更しやすさにも関わる
画像内に記事タイトルをそのまま焼き込むと、見た目の情報量は増えます。ただし公開後にタイトルを調整したくなったとき、画像も作り直しになります。SEOの運用では、検索順位や表示回数を見てタイトルを見直す場面が定期的に訪れるもの。画像内の文字は、タイトルそのものではなく、内容を示す短い語句にとどめておくと、あとの修正が軽くなります。
サイズと表示崩れを防ぐ設計
サイズで迷ったら、横1200×縦630px（比率およそ1.91対1）を基準にしてください。Open Graph protocolに沿ってSNSの投稿カードを表示する際に広く使われている比率で、多くのCMSテーマもこの前後を想定しています。
比率が問題になるのは、表示場所ごとに切り取られる範囲が違うためです。記事一覧では正方形に近い形に、SNSでは横長に、テーマによっては上下だけを詰めた帯状に切られる。同じ画像が、場所ごとに違う形で出ていきます。
四隅に重要な要素を置かない。文字も人物の顔も、中央寄りにまとめてください。上下左右それぞれ1割程度を「切られても構わない余白」として空けておくと、どの表示場所でも破綻しません。
もうひとつ、ファイルの重さも確認したい項目です。アイキャッチは記事内で最初に読み込まれる画像になりやすく、ページの表示速度に直接影響します。写真ならWebP形式で200KB前後、図解のように色数が少ないものならさらに軽く収まるはず。1MBを超える画像をそのまま置いているなら、圧縮するだけで表示速度が変わります。
素材選びと権利の確認で気をつけること
画像は、文章よりも権利の問題が起きやすい領域です。出所の確認を省いた1枚が、あとから公開停止や謝罪につながる例は珍しくありません。次の使い方は避けてください。
- 画像検索で見つけた画像を保存して、そのまま記事に使う
- 素材サイトの利用規約を読まずにダウンロードして商用ページに載せる
- 他社のロゴや商品パッケージを、装飾のつもりで並べる
- 街中で撮影した写真に写り込んだ通行人の顔を、加工せずに載せる
- 生成AIで作った画像を、学習元や利用条件を確認しないまま広告に転用する
素材サイトを使う場合でも、規約は媒体ごとに異なります。商用利用が可能でも、クレジット表記が必要だったり、加工や再配布が制限されていたりすることがあるためです。無料か有料かではなく、規約の中身で判断してください。
社内で運用を続けるなら、使った素材のURLと取得日を記事ごとに残しておくと安全です。担当者が代わったあとに「この画像はどこから来たのか」を確認する手間がなくなります。
毎月続けるための、作り方の決め方
ここまでの内容は、1本の記事なら実行できます。難しくなるのは、月に5本、10本と積み上がってからです。画像の作業が記事公開のボトルネックになり、記事は書けているのに公開できない状態が生まれます。
進め方は大きく三つに分かれます。
| 毎回ゼロから作る | テンプレートを決めて自作 | 記事とまとめて外部に任せる | |
|---|---|---|---|
| 1本あたりの作業時間 | × 長い | ○ 短い | ◎ ほぼかからない |
| 見た目の統一 | × 担当者ごとにぶれる | ◎ 揃う | ◎ 揃う |
| 記事内容との一致 | ○ 書いた本人なら合う | △ 型に寄せると弱まる | ◎ 本文と同時に設計できる |
| 月10本を続けられるか | × 途中で止まりやすい | ○ 続けやすい | ◎ 本数に左右されない |
| 費用 | ◎ 社内工数のみ | ◎ 社内工数のみ | △ 制作費がかかる |
多くの運用では、まずテンプレート化から入るのが現実的でしょう。背景の配色、文字の位置、ロゴの入る場所を先に固定し、記事ごとに変えるのは主役の要素だけにします。ここまで決めておけば、1枚あたりの作業は数分で終わります。
テンプレートは、記事カテゴリごとに色を変えるやり方が扱いやすい傾向にあります。一覧を見たときにカテゴリが色で伝わり、しかも判断する項目が「どの色を使うか」だけに減るためです。担当者が複数いる運用ほど効果が出ます。
本数が増えて社内で回らなくなったときは、記事本文と画像をまとめて外部に出す選択肢も出てきます。本文を書いた人が画像の内容も設計できると、中身と絵柄のずれが起きにくいという利点があるためです。
記事は書けているのに、画像の工程で公開が止まっていませんか
Writers-hubでは、キーワード設計から本文、アイキャッチを含む図版の指定までを同じチームで担当しています。テンプレートの設計だけをお手伝いする形でも、月次の本数をまるごとお任せいただく形でも対応できます。今の運用のどこで詰まっているかを伺うところから始めます。
アイキャッチについてよくある質問
指しているものが違います。アイキャッチは「視線を受け止める役割」の呼び名で、サムネイルは「縮小表示された画像」という状態の呼び名です。記事一覧に小さく表示されているアイキャッチは、同時にサムネイルでもあります。
記事一覧やSNSへの共有がある媒体なら、設定を勧めます。未設定のままだと一覧で空白や既定画像が並び、記事の見分けがつきません。ただし社内向けの資料ページなど、一覧表示もSNS共有もない用途では優先度は下がります。
表示場所によります。記事一覧のようにタイトルが画像のすぐ下に出る場所では重複しがちです。SNSではタイトルが小さく出るため、画像内の文字が読まれる比率が上がります。入れる場合も、タイトル全文ではなく短い語句にとどめると、あとで直しやすくなります。
配信サービスでの視聴が増え、本編の途中にCMが入らなくなったことが関係していると考えられます。アイキャッチはCMと本編の境目を示す演出でしたから、境目そのものがない環境では役割が薄れます。地上波で放送される作品では現在も使われています。
まとめ
アイキャッチは、テレビ・アニメでは本編とCMの境目に入る短い映像を、Webでは記事の入口に置く画像を指します。呼び名が同じなのは、どちらも読者の注意が切り替わる位置に置かれているためです。
Web運用で押さえるべき点を整理すると、次のようになります。読者は一覧やタイムラインで他の記事と並べて見ているため、単体の完成度ではなく見分けのつきやすさで判断されること。クリック率だけを追うと中身から離れ、滞在時間が下がること。サイズは1200×630pxを基準に、重要な要素は中央寄りへまとめること。素材は無料か有料かではなく規約の中身で選ぶこと。そして月に何本も出すなら、テンプレートを先に決めておくこと。
もうひとつ、記事制作の現場で繰り返し確認していることを付け加えます。タイトルと画像は一組で設計します。別々の工程として扱うと、片方が伝えている内容をもう片方が薄めてしまう。同じ結論を、言葉と絵の二通りで見せているのだと考えると、迷ったときの判断が速くなります。
合同会社Writers-hubでは、検索キーワードの設計から記事本文、アイキャッチを含む図版の指定までを一貫して担当しています。画像だけが課題なのか、記事の中身から見直すべきかを含めて、現状を伺ったうえで提案します。
どこから直せばよいか決めきれないときは、記事1本を持ち込んでください
公開済みの記事を1本題材にして、タイトル、本文の構成、アイキャッチのどこに手を入れると変化が出そうかをお伝えします。相談だけで終わっていただいて構いません。
