すみません。他にもサイト作るかもしれないので、My備忘録・Myナレッジとして作っています。
やはり、サチコさん（Google Search Console）を見て検索もそうですが、クリックされていない事実。魅力ないのは勘弁やで、と、勘弁ながら少しでもクリックして欲しいわけです。ハイ。
そこには、アイキャッチ画像もこだわる必要があるとのことで備忘メモします。
アイキャッチ画像をSEO的に作る意味とは？
アイキャッチ画像は一見デザイン的な要素に見えますが、SEOにも間接的に貢献する重要な要素です。特に検索流入やSNS拡散を意識したブログ運営をするなら「どんな画像にするか」「文字をどう入れるか」も重要な戦略になります。
なぜSEOに関係するのか？
SEOで重要とされるのはあくまで、「ユーザーにとって価値があるページかどうか」であり、アイキャッチ画像は以下のとおり「ユーザーにとって価値がある」と判断される要素に貢献します。
クリック率（CTR）の向上 → 検索順位に影響
検索結果で表示されるタイトルと合わせて、SNSやブログ内で見られるアイキャッチ画像は「記事に興味を持たせる最初の接点」です。CTRが上がることでGoogleは「このページは有用」と判断し、検索順位が上がる可能性があります。
滞在時間や回遊率の向上
アイキャッチ画像と記事の内容の整合性が取れておりサイト全体の信頼度が上がれば、「ついで読み」や「関連記事への移動」も発生しやすくなります。結果、滞在時間が長くなり役立つサイトと評価されるので、SEOにプラスです。
SNSでのシェアによる被リンク獲得チャンス
SNSからのシェア数が多くなる可能性があります。そうするとナチュラルリンク（自然な被リンク）が得られる可能性も出てくるのでSEOにおいて非常に好影響が期待できます。
SEOを意識したアイキャッチ画像の作り方
では、具体的にどのようにアイキャッチ画像を作るのかですが、Canva（キャンバ）を利用します。
Canvaを利用する
Canvaの登録は済ませてあることを前提としています。方法はいくつかあるかと思いますが、
１．右上の＋から「アイキャッチ画像」または「はてなブログアイキャッチ画像」と検索
Swellのアイキャッチ画像の推奨は1,200×630pxとなっており、はてなブログアイキャッチ画像も同様の設定となっております。
２．テンプレートが出てきますので、イメージに近いものを選択します。
もし、テンプレートが出ない場合は、検索窓に【アイキャッチ画像】と入れてください。
３．自分好みに編集する
文字の内容やフォント、カラーを変更したり、デザインをマイナーチェンジして自分好みに編集してください。
画像に文字を入れることで内容が一目でわかり効果的
タイトルやキーワードを画像にも入れることで、ユーザーが記事のテーマを即座に理解できます。「見ただけで内容が伝わる画像」はSNSでの拡散にも有利です。
４．出来たら【共有】ボタン >>【ダウンロード】ボタンから保存します。
alt属性の適切な設定（HTML上の話）
画像に「alt属性（代替テキスト）」を設定することで、検索エンジンに画像の内容を伝えられます。アイキャッチ画像にも、キーワードを含めたaltテキストを入れておくとベターです。
Shutterstockを利用してもCanvaも使え
まぁ、Shutterstock（シャッターストック）でなくても、商標フリー画像を扱うサイトからお気に入りの画像を使いたいケースもあるかと思います。全然アリです。
ただ、画像の処理や文字を入れるに当たってもCanvaを使用することが望ましいと思っています。また、Canvaを通過すると何故か画像サイズが小さくなるのでその点でもおすすめです。
おすすめのCanvaフォント
- Noto Sans：言わずと知れた万能フォント。読みやすさと信頼感のバランスが抜群。
- 源瑛ゴシック：シンプルながら柔らかさも感じられる、癖のないデザインで汎用性◎。
- コーポレート・ロゴ：その名の通り、ロゴや見出しに最適な力強さと可読性を両立。
- モトヤアポロ：やや角ばったモダンな印象で、知的さや堅実さを演出したいときに。
- ぼくたちのゴシック2：手書き風の温かみと親しみやすさが魅力。初心者向けやエッセイ系にぴったり。
- はんなり明朝：古風で雅な雰囲気を持ちつつ、現代的な可愛らしさもある女性向けフォント。
- ほのか明朝：繊細で上品な明朝体。レビュー記事やストーリー系におすすめ。
- 筑紫A丸ゴシック：丸みのあるフォルムで優しさが際立つ。子育て、ライフスタイル系に相性抜群。
スモールビジネスデザイン研究所さんの記事を参考にしています。
アイキャッチ画像のおすすめサイズ、容量
Swellで推奨の1,200×630pxを前提としていますが、その他のおすすめサイズです。
おすすめサイズ
| 用途 | 推奨サイズ | 備考 |
|---|---|---|
| WordPressのアイキャッチ | 1200 × 630 px | SNS（特にFacebook・X）でシェアされたときに最適なOGPサイズ。Canvaの「Facebook投稿」サイズと同じ。 |
| ブログのヘッダー風に使う | 1600 × 900 px | 16:9比率で、多くのディスプレイに最適化。大きめに見せたいときに。 |
| サムネイル一覧（ブログ内） | 600 × 400 px | 軽量で記事一覧に並べる用として扱いやすいサイズ。 |
おすすめ容量
| 使用目的 | 目安容量 | 推奨形式 |
|---|---|---|
| 通常のアイキャッチ画像 | 150KB以下 | WebP、JPEG（JPG）が基本。写真や複雑な背景に最適。 |
| 背景がシンプル・イラスト系 | 100KB以下 | PNGでも可。特に透過処理が必要なときに。 |
| WebP対応サイト | 50～100KB | WebP形式にすると画質そのままで容量が大幅に軽くなります。 |
WebP（ウェッピー）
Googleが開発した次世代画像フォーマットで、JPEGやPNGの代替として近年よく使われるようになってきた画像形式です。JPEGの軽さ、PNGの透明対応、アニメーション（GIF的な動き）も対応するいいとこどりの画像フォーマットです。
まじか、そんなに容量考えてなかったわ。やり直しかな。
【便利！】文字を目立たせる方法！
いろいろなサイトもYOUTUBEもみて研究しました。そして、最終的に3つの方法に落ち着きました。
もちろん、複合技として活用する場合もあります。
１．余白を使う or 白透明画像を一枚かませる
下記のような一番オーソドックスなパターンですね。
文字の下に白背景を用意する場合は、透明度60%位がおすすめです。
下記は透明度60%の2枚重ねを少しずらして活用しており、これもおすすめのテクニックですね。
２．黒背景をかぶせる
これも割と使われている方法ですね。黒背景の透過度30%を画像と文字の間に挟むことで少し文字が見えやすくなります。
とくに、白文字、白抜き文字の時にはその効果が高くなります。
３．重ね文字＋エフェクト（一番のおすすめ！）
改めて何かしらしないと画像の上の文字は見えにくいです。
これを文字を工夫することで見えるようにすることが出来ます。
まず初めに、文字を2つ複製して用意します。
それぞれにエフェクトを活用するのですが、上の文字をエフェクトの袋文字を活用して変更します。
その際の太さを100位で設定してください。
次に下の文字ですが、同様にエフェクト効果>>袋文字を活用するわけですが、太さを200として、袋文字効果のカラーを白で設定してください。
その後に、上の文字が、下の文字の上に来るように重ねると、下記のようになります。
これを、もとの画像の上に貼りつけると、画像の上からでも、何か背景に差し込まなくても視認性が確保されます。
YOUTUBEあい先生のCanvaレッスンというチャンネルで知りました！
まと
アイキャッチ画像は、見た目の魅力だけでなく、「検索で見つけてもらいやすくする」「ユーザーの行動を促す」など、SEOにとっても大切な役割を果たします。
ただのおしゃれ要素ではなく、ブログの成果を高めるための施策の一部と捉えて、ぜひ戦略的に作っていきたいですね。
コメント