ホームページを作るとき、文章やデザインには気を配っていても、意外と後回しにされがちなのが「画像」です。
「きれいな画像を入れているのに、ページの表示が遅い」
「WordPressに画像をアップしたら、なぜか表示が崩れた」
「SEOに強くしたいけれど、画像まで何をすればいいのかわからない」
このようなお悩みは、Web担当者や小規模事業者の方にとって、かなり身近なものではないでしょうか。
画像SEOとは、単に画像を軽くすることではありません。
検索エンジンに画像の内容を正しく伝え、ユーザーにとって見やすく、ページの表示速度にも配慮するための画像まわりの整理です。
Googleも、画像の内容を理解するために、画像の周辺テキスト、ファイル名、タイトル、代替テキストなどを参考にすると説明しています。つまり画像は、ページの飾りではなく、検索エンジンに情報を伝える「小さな看板」のような存在です。(Google for Developers)
なぜ「画像SEO」が重要なのか？Googleが見ている3つのポイント
1.検索エンジンへの伝達：画像の意味を明確に
Googleは、画像そのものの中身を100%理解しているわけではありません。その代わりに、画像に添えられた名前や、画像の軽さ（読み込み速度）を評価の対象にしています。
例えば、お料理レシピのサイトで「肉じゃがの作り方」を説明しているのに、画像の名前が「IMG_1234.jpg」のままだと、Googleはそれが肉じゃがの写真だと確信が持てません。
■ 画像のファイル名には「マイルール」を持とう
Googleは、画像の内容を理解する手がかりとして、説明的なファイル名を推奨しています。Googleに「この画像は何の画像か」を教えるチャンスだからです。ただし、実務ではSEOだけでなく、管理のしやすさも重要です。
■ 「ページ名 ＋ 説明 ＋（種類）」をハイフンで繋ぐ
- 良い例:
home-service-support-icon.jpg - 悪い例:
image01.jpg
このようにしておくと、あとからWordPressのメディアライブラリで検索しやすくなります。
WordPressではファイル名で画像を探せるため、「あの画像どこだっけ？」という時間のロスを減らせます。
一方で、特定のページに結びつかない共通画像であれば、次のように shared を付けてもよいでしょう。
- shared-arrow-icon.svg
- shared-contact-banner.webp
画像名は、自分だけがわかる暗号ではなく、未来の自分や他の担当者も探せるラベルにしておくのが理想です。
《出典》Google 画像検索 SEO ベスト プラクティス
2.表示速度：画像を適切なサイズ・容量にする
画像SEOというと、先に「圧縮」が思い浮かべる方も多いかもしれません。もちろん画像を軽くすることは大切です。画像が重いとページの読み込みが遅くなり、ユーザーが離脱しやすくなります。
まとめると、画像SEOは「荷物を軽くして、宛名もきちんと書く」作業です。
軽いだけでは届き先がわかりにくく、宛名だけ丁寧でも荷物が重すぎると配達に時間がかかります。Uzumaki Houseでよく使用している圧縮におすすめなサービスは主に次の2つです。
■ どちらを使う？画像圧縮ツール「Squoosh」と「ShortPixel」
画像の見た目をきれいに保ったまま、データ容量だけを軽くする「圧縮」は必須作業です。
Squoosh（スクオッシュ）：Googleが開発した無料ツールです。
- 使い方: サイトに画像をドラッグ＆ドロップして、右下の保存ボタンを押すだけ。
- 活用シーン: ヒーロー画像（トップの大きな画像）や、精細な図解など、「1枚1枚、画質を吟味して極限まで軽くしたい時」に最適です。一括処理ができないので、気合を入れたい1枚に使います。
ShortPixel（ショートピクセル）：WordPressを使っているなら、プラグインで自動化できるので便利です。
- 使い方: プラグインを導入すれば、画像をアップロードするだけで自動で軽量な「WebP」形式などに変換してくれます。
- 活用シーン: 枚数が多いブログ記事など、1枚ずつ作業するのが面倒な場合に非常に強力な味方になります。
Squooshが「職人が1枚ずつ磨く道具」だとすれば、ShortPixelは「工場でまとめて整える仕組み」に近いです。重要な画像はSquooshで丁寧に。大量の画像はShortPixelで効率よく。このように使い分けると、現場ではかなり運用しやすくなります。
■ alt属性は「画像を見られない人への説明」として考える
alt属性とは、画像の代替テキストです。画像が表示されない場合や、スクリーンリーダーを使うユーザーに対して、画像の内容を伝える役割があります。
SEOを意識すると、ついキーワードを詰め込みたくなりますが、基本は「その画像が何を表しているか」を自然に書くことです。
- 悪い例：alt=”画像SEO 画像SEO対策 画像最適化 SEO”
- 良い例：alt=”画像SEOで重要なファイル名・alt属性・圧縮の関係を示した図”
alt属性は、検索エンジンのためだけのものではありません。
ユーザーのための説明であり、その結果として検索エンジンにも意味が伝わりやすくなる、と考えると自然です。また、私が意識しているのは「電話の向こうの人に、その画像のビジュアルが想像できるように言葉で伝える」ようにすることです。
3. 実装の安定性：SVG画像の実践テクニック
ロゴやアイコンなどには、SVGがよく使われます。SVGは拡大しても劣化しにくく、シンプルな図形やアイコンに向いています。ただし、SVGは便利な反面、書き出し方やサイズ指定によって、WordPressや実装環境で表示サイズがおかしくなることがあります。
■ 表示サイズを安定させるためにwidthとheightを指定する
SVGには必ず「幅（width）」と「高さ（height）」を指定しましょう。WordPressでサイズや viewBox の指定が不十分だと、表示サイズが極端に小さく見えたり、逆に大きく表示されたりすることがあります。
MDNでは、SVGの viewBox はSVGの表示領域に対応する座標や寸法を定義するものと説明されています。つまり、SVGにとって viewBox や width / height は、画像の「地図の縮尺」のようなものです。
SVG画像をテキストエディタ開き、「幅（width）」と「高さ（height）」を指定しましょう。
■ SVGのマージは「境界線あり・なし」を分けて考える
SVGを軽くするために、グラフィックソフトIllustratorやAffinity Designerなどで同色のパーツを結合（合体）することがあります。ただし、ここで注意したいのが「境界線」です。
境界線なしの同色オブジェクトは、基本的にマージしやすいです。一方で、境界線ありのパスを結合（合体）すると、マージ後は全体の輪郭にだけ境界線が付くことがあります。
つまり、複数のパーツそれぞれに線が付いていたものを合体すると、内部の線が消え、外側の輪郭だけが残る場合があります。また、輪郭線ありのものと、輪郭線なしのものを一緒にマージすると、意図せず全体に境界線が付くことがあります。
そのため、SVGを整理するときは、次のように分けて考えるのがおすすめです。
| 状態 | 対応 |
|---|---|
| 同色・境界線なし | マージしやすい |
| 境界線あり | そのままマージすると見た目が変わる可能性あり |
| 境界線あり＋なしが混在 | 一緒にマージしない方が安全 |
| どうしてもマージしたい | 境界線をアウトライン化してから検討 |
SVGは軽量化しすぎると、逆に見た目が崩れることがあります。「軽くすること」よりも、「見た目が変わらない範囲で整えること」を優先しましょう。
3. 実装の安定性：ラスター画像（jpg, png, webp）の基本方針
ここまではSVGを中心に説明しましたが、ホームページで多く使われるのは、jpg・png・webpなどのラスター画像です。写真やアイキャッチ、バナー画像では、SVGとは別の考え方で最適化する必要があります。
■リサイズ前提で考える
実装時、レイアウト調整により画像サイズを変更する可能性があります。そのため圧縮前の元データは必ずコピーをとって保存をしてください。再リサイズが生じた場合、必ず圧縮をします。
■画像の拡大は基本NG。小さな画像を無理に大きくしない
はじめの頃、やりがちな失敗のひとつが、小さな画像を無理に拡大して使うことです。
たとえば、横幅300pxの画像を、ホームページ上で1000pxに引き伸ばして表示すると、画像がぼやけたり、粗く見えたりします。これは、少ない情報量の画像を無理やり大きく見せている状態です。
画像は、基本的に「使う場所より少し大きめ」で用意し、そこから必要に応じて縮小するのが安全です。
反対に、小さい画像を大きくするのは、薄い布を無理に引き伸ばすようなもの。見た目の品質が落ちやすくなります。
Web制作では、表示サイズに近い画像を用意することが、ページの軽量化にもつながります。web.devでも、表示サイズに合った画像を使うことで、ページを速く、データ量を少なくできると説明されています。
まとめ：画像SEOは、見た目・速さ・意味を整える作業
画像SEOは、単なる画像圧縮ではありません。
画像を適切なサイズにすること。
ファイル名やalt属性で意味を伝えること。
SVGのサイズ指定やマージルールを整えて、表示崩れを防ぐこと。
そして、WordPressであとから管理しやすい状態にしておくこと。
まとめると、主に次の3つを意識します。
| 観点 | 内容 |
|---|---|
| 1. 表示速度 | 画像を適切なサイズ・容量にする |
| 2. 検索エンジンへの伝達 | ファイル名・alt属性・周辺テキストを整える |
| 3. 実装の安定性 | SVGやレスポンシブ表示で崩れにくくする |
これらを積み重ねることで、ホームページは少しずつ「伝わるサイト」に近づいていきます。
画像は、ページの中で静かに働く営業スタッフのような存在です。
重すぎれば動きが遅くなり、名前がわかりにくければ検索にも管理にも困ります。
だからこそ、画像にも役割を与え、整理してあげることが大切です。
まずは、今使っている画像のファイル名を見直すところからで大丈夫です。
次に、重い画像を圧縮し、重要な画像には適切なalt属性を入れていきましょう。
小さな改善でも、積み重ねればサイト全体の品質は確実に変わります。
あなたのホームページが、見た目にも検索にも強い、頼れるWeb資産に育っていくことを願っています。
Uzumaki Houseは、あなたのホームページをより必要な人に届けるためのご相談を承っております。お気軽にお問合せください。