どうも、ライムスです。（プロフィールや実績はこちら）
ブログのアイキャッチ画像を作ろうと思っても、最初は「何の画像を入れればいいのか」「サイズはどれくらいがいいのか」と迷いやすいですよね。
記事の内容がひと目で伝わり、記事一覧やSNSでも見やすい画像を作れると、ブログ全体の印象も整いやすくなります。
特に迷いやすいのが、アイキャッチ画像とは何か、おすすめサイズはどれくらいか、どのように作るのか、WordPressではどこに設定するのか、といった部分です。
無料で作れる方法や、Canva・AIを使った作成方法を知りたい人も多いはずです。
この記事では、ブログのアイキャッチ画像の基本から、おすすめサイズ、具体的な作り方、CanvaやAIの使い方、WordPressでの設定方法まで順番に解説します。
あわせて、代替テキストとalt属性の違い、文字が読みにくい場合や画像が重い場合の対処法も紹介します。
ボクが実際にアイキャッチ画像の作成に使っている専用GPTも、今回無料でプレゼントします。
記事タイトルを入力するだけで画像を作れるように設定しているので、アイキャッチ画像の作成時間を短縮したい人は活用してみてください！
究極のGoogleアドセンスマスター講座
おすすめPOINT！
- 月収100万円稼ぐまでの道を学べる！
- ブログとYouTube両方学べる！
- ゲーム感覚で楽しく学べる！
表の世界ブログ稼ぎ方
裏の世界YouTube稼ぎ方
武器屋AI活用法
宝の地図お宝キーワード配信
ブログのアイキャッチ画像とは？全体の流れとおすすめサイズ
アイキャッチ画像を作る前に、まずは役割と作成の流れをつかんでおくと進めやすくなります。
先にサイズや作業順を決めておけば、画像を作ったあとに一から作り直す回数も減らせます。
ブログのアイキャッチ画像とは
アイキャッチ画像とは、記事の内容をひと目で伝えるための画像です。
トップページの記事一覧、関連記事、カテゴリーページ、SNSで記事が共有されたときなどに表示されます。
文章だけでは伝わりにくいテーマでも、画像にタイトルやモチーフを入れることで、どのような記事なのかを視覚的に伝えられます。
たとえば、SEO記事なら検索画面や虫眼鏡、アクセス解析の記事ならグラフや分析画面、WordPressの記事ならパソコンや管理画面を入れると、記事のテーマが伝わりやすくなります。
アイキャッチ画像は、記事を飾るためだけの画像ではありません。
記事内容を視覚的に要約し、読者に興味を持ってもらうためのパーツです。
まずは「この画像で何を一番伝えたいのか」を決めてから、作成を始めてみてください。
まず全体の流れを確認する
ブログのアイキャッチ画像は、記事タイトルを確認してから画像サイズと構成を決め、完成後に圧縮してWordPressへ設定する流れで作ります。
| 手順 | やること | 補足 |
|---|---|---|
| 1 | 記事タイトルを確認する | 画像で最も大きく見せる言葉を決める |
| 2 | 画像サイズを決める | 迷ったら1200×630pxを基準にする |
| 3 | 背景・色・モチーフを決める | 記事テーマに合う要素を選ぶ |
| 4 | タイトル文字を配置する | 主題を大きく、補足は小さく分ける |
| 5 | 画像を作成する | CanvaやAI画像生成を使う |
| 6 | 画像を圧縮する | ファイル容量を軽くする |
| 7 | WordPressに設定する | アイキャッチ画像と代替テキストを設定する |
| 8 | 表示を確認する | PC・スマホ・記事一覧で確認する |
最初から細かい装飾を考えるよりも、記事タイトル、サイズ、構成、画像作成、圧縮、WordPress設定という順番で進めるほうが迷いにくくなります。
特に最初に決めたいのが、記事タイトルの中でどの言葉を一番大きく見せるかです。
主題が決まれば、背景に入れるモチーフや文字の配置も考えやすくなります。
ブログのアイキャッチ画像サイズは1200×630pxが基本
ブログのアイキャッチ画像でサイズに迷ったら、1200×630px前後の横長画像を基準にすると使いやすくなります。
ボクも普段は、ブログやSNSで使いやすい1200×630相当の横長画像を基本にしています。
この比率で作っておけば、ブログのアイキャッチ画像として使いやすく、SNSで記事が共有されたときにも表示が崩れにくくなります。
ただし、WordPressテーマによって、推奨される画像サイズや表示比率は異なります。
記事一覧で横長のサムネイルを表示するテーマもあれば、正方形に近い形へ自動で切り抜くテーマもあります。
そのため、1200×630pxを基本にしながら、使用しているWordPressテーマでどのように表示されるかも確認しておきましょう。
画像サイズを決めるときは、縦横比だけでなく、スマートフォンで文字が読めるかも見てください。
大きな画像を作っても、タイトル文字が細かすぎると内容が伝わりません。
サイズを決めたら、次は文字やキャラクターをどこに配置するか考えていきましょう。
WordPressで表示崩れしにくくする考え方
WordPressでは、設定したアイキャッチ画像が記事ページだけでなく、トップページ、関連記事一覧、カテゴリーページなどでも使われます。
表示する場所によって画像の一部が切り抜かれる場合があるため、タイトル文字を画像の端ギリギリに置かず、顔やロゴなどの重要な要素を中央寄りに配置します。
背景と文字のコントラストもはっきりさせておくと、小さく表示されたときにも内容が伝わりやすくなります。
キャラクターを使う場合は、顔の上に文字や装飾が重ならないようにします。
ボクもオリジナルキャラクターを使うときは、キャラクターと文字を重ねないこと、顔を装飾で隠さないこと、画像の端に重要な文字を置きすぎないことをルールにしています。
ブログのアイキャッチ画像の作り方
アイキャッチ画像は、いきなり画像作成ツールを開くよりも、記事タイトルの見せ方や画像に入れる要素を先に決めたほうが作りやすくなります。
ここからは、準備するもの、画像に入れる情報、文字の配置、レイアウトの決め方という順番で見ていきます。
始める前に準備するもの
アイキャッチ画像を作る前に、記事タイトルと画像作成ツールを用意します。
背景に使いたい素材や色の方向性が決まっている場合は、その情報も先にまとめておくと作業が進みやすくなります。
オリジナルのロゴやキャラクターを使う場合は、画像ファイルも準備しておきましょう。
完成後の画像を軽くするために、iLoveIMGなどの圧縮ツールも使います。
記事タイトルは、画像へそのまますべて入れるとは限りません。
タイトルの中から、どの言葉を最も大きく見せるかを決めるために使います。
たとえば、「2026年最新版 ブログ初心者におすすめのWordPressテーマ5選」というタイトルなら、「WordPressテーマ」を最も大きく表示し、「2026年最新版」は小さなバッジにできます。
「初心者におすすめ」は補足として配置し、「5選」は色や大きさを変えることで目立たせられます。
ボクがAIでアイキャッチ画像を作るときも、最初に記事タイトルを入力し、そのタイトルから記事テーマを読み取らせています。
ブログ収益化の記事ならパソコン、記事画面、グラフ、コインなどを使い、SEO記事なら検索画面や虫眼鏡などを使います。
準備ができたら、記事内容を一番伝えやすい要素を選んでみてください。
画像に入れる要素を決める
アイキャッチ画像へ多くの情報を入れすぎると、何の記事なのか分かりにくくなります。
画像へ入れる内容は、最も伝えたい主題、補足として見せたい情報、背景や装飾として使う要素の3つに分けると考えやすくなります。
たとえば「ブログのアイキャッチ画像」に関する記事なら、主題は「アイキャッチ画像」です。
補足として「作り方」「サイズ」「Canva」「AI」などを入れ、背景や装飾にはパソコン、画像編集画面、カメラ、デザイン素材などを使えます。
ボクが専用GPTで作るときは、毎回同じ背景や装飾を使わせていません。
記事タイトル、文字数、記事ジャンルに合わせて、画像全体のデザインを判断させています。
毎回の画像を完全に同じ見た目にするのではなく、文字の見せ方やキャラクターの扱いに共通ルールを設けることで、ブログ全体の統一感を保ちやすくなります。
入れる情報を決めたら、次は読者がスマートフォンで見ても読める文字配置を考えましょう。
タイトル文字を読みやすく配置する
アイキャッチ画像で起こりやすい失敗の一つが、タイトル文字が読みにくくなることです。
特にスマートフォンでは、PCで見たときよりも画像が小さく表示されます。
長いタイトルを同じ大きさで1行に入れると、文字が小さくなりすぎます。
最も見せたい言葉を一番大きくし、補足部分は小さなサブタイトルやバッジに分けると読みやすくなります。
1行に文字を詰め込みすぎず、文字の周囲に余白を取り、背景と文字の色をはっきり分けることも欠かせません。
ボクもタイトルが長いときは、すべての文字を同じ大きさにはしていません。記事の主題を最も大きくし、補足部分は小さなサブタイトルやバッジとして分けています。
タイトルの意味を変えずに、情報の優先順位をつけるだけで、スマートフォンでも読みやすい画像になります。
また、記事タイトルに含まれていない数字や効果を、アイキャッチ画像だけに追加しないことも大切です。
たとえば、記事タイトルに「アクセス3倍」と書かれていないのに、画像内へ「アクセス3倍」と表示すると、記事内容と画像が一致しなくなります。
情報を追加して目立たせるのではなく、文字の大きさ、色、配置でメリハリをつけてみてください。
タイトルの長さに合わせてレイアウトを変える
アイキャッチ画像のレイアウトは、毎回同じ配置に固定する必要はありません。
ボクが専用GPTで画像を作るときも、記事タイトルの長さやキャラクターの有無に合わせて、レイアウトを変えています。
キャラクターを左側、タイトルを右側へ置くこともあれば、反対にキャラクターを右側、タイトルを左側へ置くこともあります。タイトルが短い場合は中央へ大きく配置し、左右へ小さな装飾を加える構図も使えます。
タイトルが長い場合は、キャラクターを端へ寄せ、文字を置く面積を広く取ります。
反対にタイトルが短ければ、中央に大きく表示することで、余白を活かした見やすいデザインにできます。
キャラクターと文字が重ならないこと、顔を装飾で隠さないこと、画像の端へ大事な文字を置きすぎないこともルールにしています。
毎回同じ構図を使うよりも、記事タイトルの文字数に合わせて配置を変えるほうが、文字を大きく見せやすくなります。
デザインを整える
アイキャッチ画像のデザインを整えるときは、派手さよりも、記事内容がすぐに伝わるかを優先します。
色数を増やしすぎると、タイトルよりも背景や装飾へ目が向いてしまいます。
メインカラーは1〜2色程度に絞り、必要に応じて補助色を加えるくらいにするとまとまりやすくなります。
フォントも何種類も使わず、主題と補足で太さや大きさを変える程度に抑えます。
装飾やモチーフは、記事テーマを補足するものだけを残し、タイトルを邪魔するものは減らしてください。
オリジナルキャラクターを使う場合は、ブログの世界観を崩さないことも欠かせません。
ボクの専用GPTでは、添付したキャラクター画像の種類、身体の形、シルエット、顔のパーツ、色、模様、服装、装飾品、手足の有無、身体の比率を変更しないように指定しています。
AIは、キャラクターへポーズを取らせようとして、元画像にはない手や足を追加する場合があります。
たとえば、Tシャツ自体がキャラクターになっている場合は、人間がTシャツを着ている姿へ変えるのではなく、Tシャツ型のキャラクターとして描く必要があります。
動きを付けるときも、新しい手足を作るのではなく、キャラクター全体を少し傾ける、表情を変える、配置や大きさを調整するなど、元の身体構造の範囲内で表現させています。
キャラクターを使う場合は、AIに変えてほしくない部分を先に決めておきましょう！
完成後に確認すること
画像が完成したら、そのままWordPressへアップロードせず、スマートフォンでもタイトル文字を読めるか確認します。
記事内容と画像の内容が合っているか、キャラクターやロゴが切れそうな位置にないか、タイトルにない数字や効果が追加されていないかも見てください。
さらに、文字と背景の色が近すぎないか、画像サイズが横長で整っているか、ファイル容量が重すぎないかも確認します。
完成直後は問題なく見えていても、記事一覧では小さく表示され、タイトルが読めなくなる場合があります。
実際のブログ幅やスマートフォン表示に近いサイズまで縮小して確認すると、読みづらさに気づきやすくなります。
問題がなければ、画像を保存して次の作業へ進みましょう。
Canva・AI・フリー素材を使った作成方法
ブログのアイキャッチ画像を作る方法には、Canva、AI画像生成、フリー素材を組み合わせる方法などがあります。
どの方法が合うかは、画像作成にかけられる時間や、自分で細かく調整したいかによって変わります。
Canvaでアイキャッチ画像を作る手順
Canvaは、ブログのアイキャッチ画像を無料で作り始めやすい画像作成ツールです。
一部の素材や機能は有料ですが、無料プランでも画像サイズの指定、文字入力、図形の配置、画像の保存といった基本的な操作ができます。
Canvaで作る流れは次のとおりです。
- Canvaで新しいデザインを作成する
- カスタムサイズで1200×630pxを指定する
- 背景色または背景素材を選ぶ
- 記事タイトルを入力する
- アイコンや図形を追加する
- 文字サイズと配置を調整する
- PNGまたはJPEGでダウンロードする
Canvaは、画像や文字をドラッグ操作で動かせるため、画像作成に慣れていない人でも使いやすいツールです。
テンプレートも用意されているので、白紙の状態からデザインを考えるのが難しい場合は、ブログやプレゼンテーション向けの横長テンプレートを土台にできます。
ただし、背景素材を探し、文字を配置し、フォントサイズや配色を調整する作業には時間がかかります。
毎週何本も記事を公開する人や、複数サイトを運営している人は、同じ作業を繰り返す負担が大きくなりやすいです。
まずはCanvaで1枚作り、どのくらいの文字サイズなら読みやすいのか確認してみてください。
ChatGPTの画像生成で作る手順
ブログのアイキャッチ画像は、ChatGPTの画像生成機能でも作れます。
特に、記事数が多い人や、毎回の細かい指示を省略したい人には、アイキャッチ画像作成に特化した専用GPTを作っておく方法が便利です。
通常のChatGPTでもアイキャッチ画像は作れますが、毎回「画像サイズを横長にする」「タイトル文字を大きくする」「重要な文字を画像の端へ置かない」「キャラクターの形を変えない」といった同じ指示を入力するのは手間がかかります。
そこで、ボクはアイキャッチ画像を作るためのルールを、最初から専用GPTのプロンプトへ登録しています。
専用GPTを使った作成手順は次のとおりです。
- アイキャッチ画像作成用の専用GPTを開く
- 「最初にここをクリックしてください。」の会話開始ボタンを押す
- GPTから表示される案内を確認する
- 記事タイトルを入力する
- 必要に応じてキャラクター画像を添付する
- GPTに画像を生成させる
- タイトルやキャラクターの形を確認する
- 必要な部分があれば修正を指示する
会話開始ボタンを押すと、GPTから次の案内が表示されます。
「記事タイトルを入力してください。使用したいキャラクターがいる場合は、キャラクター画像も一緒に添付してください。」
ユーザーが行うのは、基本的に記事タイトルを入力するだけです。
オリジナルキャラクターを使いたい場合は、記事タイトルと一緒にキャラクター画像を添付します。
たとえば、「ブログ初心者が月1万円を稼ぐまでにやること」というタイトルを入力すると、GPTが初心者向けの記事であることや、ブログ収益化がテーマであることを読み取ります。
そのうえで、パソコン、記事画面、グラフ、コインなどの要素を使い、記事内容がひと目で伝わる画像を作成します。
SEO記事では検索画面や虫眼鏡、アクセス解析の記事ではグラフや分析画面、WordPressの記事ではパソコンや管理画面、ブログ収益化の記事では記事画面やコインなどを使います。
専用GPTには、1200×630相当の横長画像を基本にすること、記事の主題を最も大きく表示すること、補足部分を小さなサブタイトルやバッジにすることなどを登録しています。
タイトルに含まれていない数字や効果を追加しないこと、キャラクターの形や色を変更しないこと、文字とキャラクターを重ねないことも重要なルールです。
専用GPTを一度作っておけば、毎回の作業は、記事タイトルの入力と必要に応じたキャラクター画像の添付が中心になります。
ライムスが使っているアイキャッチ画像作成GPTを無料プレゼント
ボクが普段使っているルールを登録しているため、毎回細かいプロンプトを入力する必要はありません。
基本的な使い方は、専用GPTを開き、記事タイトルを入力するだけです。
オリジナルキャラクターを使いたい場合は、記事タイトルと一緒にキャラクター画像を添付してください。
この専用GPTでは、ブログで使いやすい横長画像を基本に、記事タイトルから重要な言葉を判断します。
主題と補足の文字サイズを分け、記事ジャンルに合わせて背景や装飾を変えるようにしています。
さらに、タイトルにない数字や効果を追加しないこと、キャラクターの形や色を変更しないこと、文字とキャラクターが重ならないようにすることも登録しています。
デザインの知識がなくても、記事タイトルを入力するだけで、記事内容に合ったアイキャッチ画像を作りやすくなりますよ！
無料プレゼントの登録はこちらから進めてください。
フリー素材を使う場合の進め方
ブログのアイキャッチ画像は、フリー素材を使って無料で作ることもできます。
背景画像やアイコンを探し、Canvaなどの画像作成ツールで文字を重ねる方法です。
最初に、記事内容に合う画像やイラストを探します。素材を使う前に、商用利用の可否やクレジット表記の条件を確認してください。
使用する背景素材が決まったら、Canvaなどへ配置し、記事タイトルを重ねます。必要に応じてアイコンや図形を加え、文字が読みやすいように配色と余白を調整します。
無料素材を使う場合は、最初から複数の画像を組み合わせず、1枚の背景素材へタイトルを重ねる形から始めると作りやすくなります。
ただし、よく使われているフリー素材だけで作ると、ほかのブログと似た見た目になりやすい面もあります。
背景の色味を変える、タイトル文字の配置を統一する、ロゴやキャラクターを加えるなど、自分のブログらしさを少しずつ足してみてください。
CanvaとAIのどちらを選ぶか
CanvaとAIのどちらが向いているかは、作業時間や調整したい範囲によって変わります。
無料で作り始めたい人や、文字と画像の位置を自分で細かく調整したい人にはCanvaが向いています。
テンプレートを土台にしながら、背景素材、文字サイズ、配色を自分で決められます。
短時間で画像を作りたい人や、複数サイトを運営している人は、AI画像生成を使うと作業を効率化できます。
オリジナルキャラクターを使う場合も、専用GPTへ変更してほしくない箇所を登録しておけば、毎回同じ指示を入力する手間を減らせます。
ボク自身は、記事タイトルを入力するだけで画像の方向性が決まる専用GPTを便利だと感じています。
Canvaは細かい位置を自分で調整できますが、背景素材探し、文字配置、フォントサイズ、配色などを毎回決める必要があります。
専用GPTなら、それらの判断をAIへ任せられるため、記事数が多いブログほど作業時間を短縮できます。
画像作成を効率化できれば、その分の時間を記事本文の改善、キーワード選定、公開済み記事のリライトなどへ使えます。
アイキャッチ画像だけを早く作るのではなく、ブログ運営全体へ使える時間を増やせる点も、専用GPTを利用するメリットです。
自分で細かく調整したい場合はCanva、作成時間を短縮したい場合はAIを選ぶと進めやすくなります。
WordPressでアイキャッチ画像を設定する方法
画像が完成したら、WordPressでアイキャッチ画像として設定します。
画像をアップロードするだけでなく、代替テキスト、alt属性、画像サイズ、記事一覧での表示まで確認しておくと、適切な状態で公開できます。
アイキャッチ画像をアップロードする手順
WordPressでアイキャッチ画像を設定する流れは、テーマや編集画面が違っても大きくは変わりません。
- WordPressの投稿編集画面を開く
- 右側の投稿設定パネルを開く
- 「アイキャッチ画像」を探す
- 「アイキャッチ画像を設定」を選ぶ
- 作成した画像をアップロードする
- 画像を選択して設定を完了する
- プレビューで表示を確認する
ブロックエディタでは、投稿設定の中に「アイキャッチ画像」の項目が表示されることが多いです。
編集画面によっては、「投稿」「Featured Image」などの項目内に表示されます。
アイキャッチ画像を設定したら、記事ページだけでなく、トップページ、カテゴリーページ、関連記事欄でも表示を確認してください。
正しく表示されていれば、次はWordPressテーマと画像サイズの相性を確認しましょう。
WordPressテーマの推奨サイズを確認する
WordPressでは、使用しているテーマによって、アイキャッチ画像の表示比率や切り抜かれ方が異なります。
1200×630pxで作っても、テーマによっては上下や左右が少し切り取られる場合があります。
記事一覧でどのように表示されるか、個別記事ページで横幅いっぱいに表示されるか、スマートフォンでタイトル文字が読めるかを確認してください。
キャラクターやロゴが切れていないか、SNSで共有したときに画像が崩れていないかも見ておきたいポイントです。
WordPressのアイキャッチ画像サイズを調べる人が知りたいのは、画像の数字だけではありません。
実際にWordPressへ設定したときに、トップページや記事一覧で見やすく表示されるかが重要です。
テーマの推奨サイズが案内されている場合は、そのサイズを参考にしながら、実際の表示も確認してみてください。
代替テキストとは？alt属性との違い
WordPressへ画像をアップロードすると、「代替テキスト」という入力欄が表示されます。
代替テキストとalt属性は、まったく別のものではありません。
代替テキストは画像の内容を説明する文章で、alt属性はその文章をHTMLへ設定するための属性です。
HTMLでは、画像を次のような形で表示します。
|
1 2 |
<img src="blog-eyecatch.jpg" alt="ブログのアイキャッチ画像を作成しているイメージ"> |
この例では、altがalt属性であり、引用符の中に入っている「ブログのアイキャッチ画像を作成しているイメージ」が代替テキストです。
WordPressの「代替テキスト」欄へ文章を入力すると、画像をHTMLで出力するときのalt属性に、その内容が使われます。
つまり、WordPressを使っている場合は、通常、自分でHTMLのalt=""を書く必要はありません。メディアライブラリや画像設定にある「代替テキスト」の欄へ、画像の内容を入力すれば進められます。
alt属性が必要な理由
alt属性には、画像の代わりとなる情報を文章で伝える役割があります。
画像が読み込まれなかった場合や、画像を見られない環境では、alt属性に設定された代替テキストが画像の代わりになります。画面読み上げソフトを利用する人にも、画像が何を表しているのかを伝えやすくなります。
検索エンジンが画像内容を理解する手がかりにもなりますが、SEOを意識してキーワードを大量に並べるのではなく、画像の内容を文脈に合わせて説明することが基本です。
アイキャッチ画像に記事内容を表すイラストや図が入っている場合は、画像を見なくても何を表しているのか分かる文章を設定してみてください。
たとえば、パソコンの画面上でアイキャッチ画像を作成しているイラストなら、「ブログのアイキャッチ画像をパソコンで作成しているイメージ」と書けます。
画像リンクとして使っている場合は、画像の見た目だけでなく、リンク先の内容が分かる代替テキストが必要になることもあります。画像がどのような役割を持っているのかを見て、内容を決めてください。
WordPressで代替テキストを設定する手順
WordPressで代替テキストを設定する手順は次のとおりです。
- アイキャッチ画像をWordPressへアップロードする
- メディアライブラリで画像を選ぶ
- 「代替テキスト」の入力欄を探す
- 画像の内容を短い文章で入力する
- アイキャッチ画像として設定する
- 公開後のページでalt属性が反映されているか確認する
たとえば、「ブログのアイキャッチ画像の作り方」という記事で、パソコンと画像編集画面を描いた画像を使う場合は、次のように入力できます。
代替テキストの例
ブログのアイキャッチ画像をパソコンで作成しているイメージ
一方で、次のように検索キーワードだけを並べる文章は避けます。
悪い例
ブログ アイキャッチ画像 作り方 サイズ Canva AI WordPress
代替テキストは、SEOキーワードを詰め込むための場所ではありません。
画像が何を表しているのかを、短く具体的に伝えることがポイントです。
また、画像が装飾目的だけで、記事内容を理解するための情報を含んでいない場合は、空のalt属性を使う考え方もあります。
|
1 2 |
<img src="decoration.jpg" alt=""> |
すべての画像へ機械的に文章を入れるのではなく、画像が読者へどのような情報を伝えているかを基準に判断してください。
アイキャッチ画像のalt属性が反映されているか確認する
WordPressの代替テキスト欄へ入力しても、使用しているテーマやアイキャッチ画像の出力方法によって、公開ページでのHTMLが変わる場合があります。
そのため、設定後は公開ページでalt属性が入っているか確認しておくと確実です。
Google Chromeを使う場合は、公開した記事を開き、アイキャッチ画像の上で右クリックして「検証」を選びます。表示されたHTMLから<imgを探し、alt="○○"の内容を確認してください。
次のように表示されていれば、alt属性が設定されています。
|
1 2 |
<img src="blog-eyecatch.jpg" alt="ブログのアイキャッチ画像を作成しているイメージ"> |
代替テキスト欄へ入力した文章と、公開ページのalt属性が一致していれば設定は完了です。
アイキャッチ画像を設定したら、画像の見た目だけでなく、alt属性まで確認してみてください。
iLoveIMGで画像を圧縮する
アイキャッチ画像は、見た目だけでなく、ページの表示速度にも影響します。
AIで生成した画像や高解像度画像は、ファイル容量が大きくなりやすいため、そのままアップロードするとページの表示が遅くなる原因になります。
ボクは、完成したアイキャッチ画像をiLoveIMGで圧縮してからWordPressへアップロードしています。
操作はシンプルです。
- アイキャッチ画像を作成する
- iLoveIMGを開く
- 作成した画像をアップロードする
- 圧縮ボタンを押す
- 圧縮した画像を保存する
- WordPressへアップロードする
- 画質と表示を確認する
AIで生成した画像は容量が大きくなりやすいため、アイキャッチ画像が完成したら、とにかくiLoveIMGで圧縮してからブログへアップロードする流れを習慣にしています。
画像がきれいでも、容量が重すぎると、ブログ全体の使いやすさを下げてしまいます。
画像作成、圧縮、WordPressへのアップロードまでを一つの作業として決めておくと、圧縮を忘れにくくなります。
アイキャッチ画像が表示されない場合の対処法
WordPressでアイキャッチ画像を設定したのに、思ったように表示されない場合があります。
まずは、アイキャッチ画像として正しく設定されているかを確認してください。画像サイズが極端に小さくないか、テーマ側で推奨サイズが決まっていないかも見ておきます。
テーマ設定でアイキャッチ画像が非表示になっている場合もあるため、カスタマイズ画面や投稿設定も確認します。
設定を変更しても表示が変わらない場合は、ブラウザやWordPress側のキャッシュが残っている可能性があります。キャッシュを更新してから、もう一度ページを開いてみてください。
画像自体は正しいのに一部が切れて見える場合は、WordPressテーマ側のトリミングが原因になっている場合があります。
その場合は、重要な文字やキャラクターを中央寄りに配置した画像へ修正すると改善しやすくなります。
ブログのアイキャッチ画像でよくある失敗と対処法
アイキャッチ画像は、作成時に少し工夫するだけで、読みやすさや見た目が大きく変わります。
よくある失敗を先に知っておくと、画像を作り直す回数を減らせます。
文字が小さくて読めない
PCでは読めても、スマートフォンでは文字が小さくなり、読めない場合があります。
特に長い記事タイトルを、そのまま1行で画像へ入れると、文字サイズが小さくなりやすいです。
一番伝えたい言葉だけを大きくし、補足は2行目や小さなバッジへ分けます。細すぎるフォントを避け、背景と文字の色をはっきり分けることも欠かせません。
ボクも、記事の主題と補足を分ける形で作ることが多いです。
文字の優先順位をはっきりさせるだけで、スマートフォンでの読みやすさは大きく変わります。
まずは一番伝えたい言葉を決め、その言葉だけを大きく表示してみてください。
情報を盛り込みすぎて伝わらない
背景、アイコン、キャラクター、吹き出し、数字、説明文などをすべて入れると、何の記事なのか分かりにくくなります。
情報が多すぎるときは、記事内容と直接関係のない装飾や、タイトルと意味が重複している文章から減らしていきます。
小さくて読めない説明文や、色数を増やしているだけの図形、主役より目立っている背景素材も見直してみてください。
最初は、主題、補足、背景の3つを中心に作るとまとまりやすくなります。
画像を見た瞬間に記事内容が分かる状態を目指して、不要な要素を減らしてみてください。
タイトルにない情報を画像へ追加してしまう
アイキャッチ画像を目立たせようとして、記事タイトルにない数字や効果を追加してしまう場合があります。
たとえば、記事タイトルに入っていないのに「収益3倍」「最短1日」「成功率90％」などと表示すると、記事内容と画像の印象がずれてしまいます。
ボクもAIで画像を作るときは、タイトルに含まれていない数字、実績、効果を勝手に追加しないようにルール化しています。
画像へ入れる情報は、基本的に記事タイトルの範囲に収めます。
画像を目立たせたいときは、新しい情報を足すのではなく、文字の大きさ、色、配置で調整してみてください。
AIでキャラクターの形が変わる
AI画像生成では、添付したキャラクターの形が変わってしまう場合があります。
たとえば、元画像にはない手や足を追加したり、服装や色を変えたりすると、別のキャラクターに見えてしまいます。
キャラクター画像を使うときは、身体の形や比率、顔のパーツ、色、手足の有無、服装、装飾品を変更しないように指定します。
動きを出したい場合は、手足を新しく作らせるのではなく、キャラクター全体の傾き、表情、配置、大きさで変化を付けます。
AIへキャラクター画像を渡すときは、変えてほしくない部分を具体的に指定してみてください。
サイズや容量が合わない
画像サイズが合っていなかったり、ファイル容量が重すぎたりすると、WordPressで扱いにくくなります。
まずは横長サイズになっているか、推奨比率から大きく外れていないかを確認します。
圧縮後に文字がつぶれていないか、WordPressで表示が崩れていないかも見てください。
ボクは、専用GPTで画像を作成し、iLoveIMGで圧縮してから、WordPressへアップロードしています。
この流れをセットにしておくと、画像デザインだけでなく、ページの表示速度まで考えながら作業できます。
alt属性へキーワードを詰め込んでしまう
alt属性へSEOキーワードをできるだけ多く入れようとすると、不自然な代替テキストになってしまいます。
alt属性は、検索キーワードを並べる場所ではなく、画像が何を表しているのかを伝えるための項目です。
たとえば、「ブログ アイキャッチ画像 作り方 サイズ Canva AI WordPress」のように単語を並べるのではなく、「ブログのアイキャッチ画像をパソコンで作成しているイメージ」のように、画像内容を簡潔に書きます。
画像を見られない人にも内容が伝わるかを基準にすると、代替テキストを書きやすくなります。
画像内の文字をすべて書き写すのではなく、画像が表している内容を短い文章で入力してみてください。
ブログのアイキャッチ画像に関するまとめ
- ブログのアイキャッチ画像は、記事内容をひと目で伝えるための画像
- 画像サイズに迷ったら1200×630px前後の横長画像を基準にする
- 作業は、記事タイトル、サイズ、構成、画像作成、圧縮、WordPress設定の順で進める
- タイトル文字はすべてを同じ大きさにせず、主題と補足に分ける
- タイトルの長さやキャラクターの有無に合わせてレイアウトを変える
- Canvaは無料で始めやすく、細かい位置を自分で調整したい人に向いている
- ChatGPTで作る場合は、専用GPTへ画像作成ルールを登録すると作業を短縮できる
- WordPressでは、記事ページだけでなく記事一覧やスマートフォン表示も確認する
- 代替テキストは画像内容を説明する文章で、alt属性はその文章をHTMLへ設定するための属性
- alt属性へSEOキーワードを不自然に詰め込まない
- 画像はiLoveIMGなどで圧縮してからWordPressへアップロードする
ボクが現在おすすめする流れは、専用GPTへ記事タイトルを入力してアイキャッチ画像を作り、完成した画像をiLoveIMGで圧縮してからWordPressへ掲載する方法です。
専用GPTを一度作ってしまえば、毎回の作業は記事タイトルの入力と、必要に応じたキャラクター画像の添付が中心になります。
デザインの知識がなくても統一感のある画像を作りやすくなり、アイキャッチ画像の作成時間も短縮できます。
画像作成に使っていた時間を、記事本文の改善、キーワード選定、公開済み記事のリライトへ回せることも、専用GPTを使う大きなメリットです。
今回、ボクが実際に使用しているアイキャッチ画像作成用の専用GPTを無料でプレゼントしています。
まずは専用GPTへ記事タイトルを入力し、1200×630px相当の横長アイキャッチ画像を作ってみてください。
完成した画像を圧縮し、代替テキストを設定してWordPressへ掲載するところまで進めれば、基本的な流れは完了です。
究極のGoogleアドセンスマスター講座
『アドセンスクエスト』とは、「ブログアドセンス」と「YouTubeアドセンス」の”両方“で月収100万円を本気で目指す、究極のGoogleアドセンスマスター講座です。あなたも、楽しみながら、“本気で”アドセンスで稼いでみませんか？
【取得済みGoogle認定資格】等
- Google アナリティクス個人認定資格（GAIQ）
- Googleアナリティクス認定資格（GA4）
- Google 広告の測定認定資格
- Google アナリティクス初級
- Google アナリティクス上級
