SEOとアクセシビリティに役立つ画像ファイル名の付け方

画像ファイル名は重要だが、言われているほどではない

画像ファイル名は、過度に断定的な意見を集めがちなWeb上の小さな要素の一つです。完全に無視して IMG_7421.jpg のまま公開するチームもあります。一方で、すべての商品写真を小さなキーワード作文のようにしてしまうチームもあります。

有用な中間地点はシンプルです。画像を明確に説明し、人間がアセットを管理しやすくし、検索エンジンに少しだけ追加の文脈を与えるファイル名にすることです。弱いコンテンツ、欠けているaltテキスト、遅い画像、分かりにくいページを、ファイル名が救ってくれるとは期待しないでください。

Googleは、画像には短く説明的なファイル名を使うことを明示的に推奨しています。これは良い助言です。ただし、限定的な助言でもあります。ファイル名は多くの文脈手がかりの一つにすぎません。周囲のテキスト、ページタイトル、構造化データ、キャプション、altテキスト、リンク、画像品質、そしてその画像が実際にページにとって有用かどうかも関係します。

アクセシビリティも同様です。良いファイル名はaltテキストの代替にはなりません。しかし、何かがうまくいかなかったときの悪影響を減らせます。また、ファイルをダウンロード、保存、共有する編集者、開発者、ユーザーにとって扱いやすくなります。

短いルール

次の問いに答えるファイル名を使いましょう。

誰かがファイル名だけを見たとき、画像に何が含まれているか大まかに分かるか？

良い例：

• red-running-shoes-side-view.jpg
• checkout-error-message-mobile.png
• oak-dining-table-120cm-walnut.jpg
• team-planning-workshop-whiteboard.webp

悪い例：

• IMG_7421.jpg
• final-final-v3-new.jpg
• best-cheap-running-shoes-buy-online-discount-sale.jpg
• screenshot.png

目標は詩的な表現ではありません。役に立つ具体性です。

良い画像ファイル名がSEOにもたらすこと

良いファイル名は、特に画像検索の文脈で、検索エンジンが画像を理解する助けになります。ページのトピックやビジュアルの主題を補強できます。

ただし、基本要素に比べると弱いシグナルです。

• 画像が関連性のあるページに掲載されている。
• 周囲のコピーが画像を説明または補足している。
• 必要な場合に適切なaltテキストがある。
• 画像がクロール可能かつインデックス可能である。
• ファイルが不必要に大きくない。
• ページが安定して読み込まれる。

オーガニック検索のために画像を改善するなら、まずページの関連性と有用性から始めましょう。次にファイル名を整えます。その後、圧縮、形式、寸法、遅延読み込み、必要に応じて構造化データを確認します。命名の整理がより広い画像パフォーマンス改善につながるなら、2026年の画像形式のガイドも参考になります。

良い画像ファイル名がアクセシビリティにもたらすこと

厳密に言えば、ファイル名は画像アクセシビリティの主要な仕組みではありません。主要なのはaltテキストです。

画像が情報を伝える場合、alt 属性はテキストによる代替を提供すべきです。画像が装飾目的なら、alt 属性は通常空にします：alt=""。画像がリンクやボタンである場合、代替テキストは単なるピクセルの説明ではなく、操作や遷移先を説明すべきです。

この点は、2026年の画像altテキストの実践ガイドで詳しく扱いました。altテキストは、別個の編集作業として扱う価値があります。

では、なぜアクセシビリティの観点でファイル名を気にするのでしょうか。

それは、ファイル名が体験の周辺部分に現れることが多いからです。

• 一部の支援技術とブラウザーの組み合わせでは、altテキストがない場合にファイル名が表示されることがあります。
• ダウンロードされた画像は、Webページの外でも分かりやすい名前である必要があります。
• CMSのメディアライブラリは、名前が説明的だと監査しやすくなります。
• ファイル名が明確だと、編集者が誤った画像を添付する可能性が低くなります。
• 壊れた画像やデバッグ画面を解釈しやすくなります。

ファイル名だけで、アクセシブルでない画像がアクセシブルになるわけではありません。しかし悪いファイル名は、失敗をより分かりにくくします。

実用的な命名規則

既定のパターンとして、次を使います。

subject-detail-context.ext

例：

• espresso-machine-steam-wand-closeup.jpg
• pricing-table-enterprise-plan-desktop.png
• garden-chair-green-metal-front-view.webp
• password-reset-email-example.png

商品の場合は、少し構造化した次の形式がうまく機能することがよくあります。

brand-product-model-color-view.ext

例：

• acme-trail-jacket-blue-front.jpg
• northline-desk-lamp-brass-side.webp
• terra-ceramic-mug-white-top-view.jpg

編集用途の画像では：

topic-specific-scene.ext

例：

• remote-team-video-call-laptop.jpg
• city-bike-lane-rain-evening.jpg
• developer-debugging-http-headers-terminal.png

UIスクリーンショットでは：

feature-state-device.ext

例：

• checkout-validation-error-mobile.png
• account-settings-two-factor-enabled-desktop.png
• analytics-dashboard-empty-state-tablet.png

これは厳格な分類体系の話ではありません。曖昧さを取り除くためのものです。

ハイフン、小文字、平易な語を使う

公開されるWebアセットでは、次を推奨します。

• 小文字
• 単語間のハイフン
• スペースなし
• アンダースコアなし
• ハイフン以外の句読点なし
• システムが必要とする場合を除き、特殊文字なし

良い例：

blue-cotton-shirt-front.jpg

避ける例：

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

ハイフンは読みやすく、コピーしやすく、URL内の単語区切りとして広く理解されています。小文字にすることは、ローカル開発環境、Linuxサーバー、CDN、オブジェクトストレージ間で起こる厄介な大文字小文字の不一致バグも避けやすくします。

ファイル名は短く。ただし曖昧にしない

ファイル名は、画像を説明するのに十分な長さであり、読みやすさを保てる短さであるべきです。

拡張子の前は、通常3〜8語程度が使いやすい範囲です。

曖昧すぎる例：

shoes.jpg

より良い例：

red-running-shoes-side-view.jpg

長すぎる例：

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

より良い例：

red-marathon-running-shoes-side-view.jpg

そのフレーズが必死なマーケターの書いた検索クエリのように聞こえるなら、おそらく長すぎます。

画像ファイル名にキーワードを詰め込まない

ファイル名へのキーワード詰め込みは、たいていページ自体が役割を果たせていない兆候です。

悪い例：

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

これはユーザーにとって役立ちません。編集者にとっても役立ちません。真面目なアクセシビリティ実践でもありません。さらに、サイトの品質が低く見えます。

画像に写っているものの自然な名前を使いましょう。キーワードが画像を正確に説明しているなら使ってかまいません。そうでないなら入れないでください。

たとえば、画像が黒い革のソファの写真なら、black-leather-sofa-three-seat.jpg は問題ありません。best-modern-luxury-living-room-furniture-online.jpg はファイル名ではありません。助けを求める叫びです。

ファイル名を実際の画像に合わせる

当たり前に聞こえますが、画像ライブラリは時間とともにずれていきます。homepage-hero-new.jpg というファイルが、やがて別の商品、別の人物、またはまったく別のキャンペーンを表示することがあります。

これには二つの問題があります。

第一に、検索エンジンとユーザーが一貫しないシグナルを受け取ります。第二に、チームがメディアライブラリを信頼しなくなります。

画像の意味が変わるなら、公開前に名前を変更しましょう。CMSやCDNの都合でリネームが難しい場合は、内部では安定したアセットIDを使いながら、可能な範囲で説明的な公開ファイル名を生成することを検討してください。

良い内部ワークフローは次のようなものです。

1. 元のアセットをアップロードする。
2. プライバシー上必要であれば、不要なメタデータを削除する。
3. サイトで使う派生ファイルの名前を変更する。
4. 適切な寸法と形式で書き出す。
5. CMSでaltテキストとキャプションを追加する。

写真がユーザー、スタッフ、現場チームから提供されたものなら、ファイル名はプライバシー上の表面の一つにすぎないことを忘れないでください。EXIFデータには、タイムスタンプ、カメラの詳細、位置情報が含まれる場合があります。機密性の高い画像を公開する前に、写真をオンラインで共有する前にEXIFメタデータを削除する方法のガイドを参照してください。

ファイル名とaltテキストを分けて考える

よくある間違いは、ファイル名とaltテキストに同じフレーズを使うことです。

それが許容される場合もあります。しかし多くの場合、それは手抜きです。

ファイル名：

red-running-shoes-side-view.jpg

商品ページでの良いaltテキスト：

Red running shoe shown from the side, with a white foam sole and black laces.

カラー選択サムネイルでの良いaltテキスト：

Red

画像が装飾目的の場合の良いaltテキスト：

alt=""

ファイル名はアセットを識別します。altテキストは文脈内でユーザーに役立ちます。両者は関連する役割ですが、同一の役割ではありません。

サイト種別ごとの画像命名

Ecommerce

商品タイプ、重要なバリエーション、表示方向を含めます。

例：

• linen-shirt-white-front.jpg
• linen-shirt-white-back.jpg
• linen-shirt-white-collar-detail.jpg

価格、プロモーション、一時的なキャンペーン文言を追加するのは避けましょう。それらは頻繁に変わります。

ブログと編集系サイト

記事タイトルではなく、場面や概念を説明します。

良い例：

designer-reviewing-mobile-layout.jpg

あまり有用でない例：

ultimate-guide-to-mobile-ux.jpg

画像は再利用されたり、トリミングされたり、配信されたりする可能性があります。場面にもとづく名前のほうが長持ちします。

SaaSとドキュメント

スクリーンショットは、機能、状態、プラットフォームで命名します。

例：

• billing-settings-payment-method-empty-state.png
• project-dashboard-filter-menu-open.png
• api-token-created-confirmation-modal.png

これにより、ドキュメント更新の負担が大幅に減ります。

ローカルビジネス

実際に見えていて関連性がある場合に、サービス、物、場所を使います。

例：

• bakery-window-display-sourdough-loaves.jpg
• dental-clinic-reception-area-berlin.jpg
• plumber-repairing-kitchen-sink.jpg

画像がそれを裏付けていないなら、すべてのファイルに都市名を入れないでください。レンチの写真は、意味のある形では wrench-london.jpg ではありません。

画像サイズとバージョンはどうするか

システムが必要としない限り、主要な説明的名前に寸法を入れるのは避けましょう。

より良いアセットファミリー：

• red-running-shoes-side-view.jpg
• red-running-shoes-side-view-800w.jpg
• red-running-shoes-side-view-1600w.jpg

ビルドシステムがレスポンシブ用の派生画像を自動生成するなら、幅やハッシュの追加はシステムに任せましょう。将来の発掘作業を楽しみたいのでない限り、何十ものファイル名を手作業で維持しないでください。

コンテンツハッシュはキャッシュ用途として問題ありません。

red-running-shoes-side-view.a8f31c.webp

説明的な部分は残っています。ハッシュは機械のために機能します。

公開前の簡単なチェックリスト

画像を公開する前に、次を確認しましょう。

• ファイル名は平易な言葉で画像を説明しているか？
• 小文字で、ハイフン区切りになっているか？
• キーワード詰め込みがないか？
• new、final、v2 のような一時的な語を避けているか？
• altテキストはページの文脈で意味をなしているか？
• ファイル形式とサイズは適切か？
• 必要な場合、機密性の高いメタデータは削除されているか？

これらに「はい」と答えられるなら、そのファイル名はおそらく十分です。装飾用の区切り画像に20分かけて名前を付ける必要はありません。一方で、DSC0038.jpg が恒久的な公開URLになるのを防ぐために20秒は使いましょう。

<!-- tool-cta:start -->

💡 お試しください: Case Converter を使ってファイル名を一括で lowercase-kebab-case に正規化し、プロジェクト全体で画像名の一貫性を保ちましょう。

<!-- tool-cta:end -->

静かな利点：より良いチーム

画像ファイル名のSEO価値は控えめです。運用上の価値のほうが大きいです。

良いファイル名は、メディアライブラリを検索しやすくします。重複アップロードを減らします。デザイナー、開発者、マーケター、サポートチームが、6つのプレビューを開かなくても同じアセットについて話せるようにします。監査も速くなります。

これこそが、画像命名を標準化する本当の理由です。明確さは検索エンジンにも役立ちますが、人にも役立ちます。そしてたいてい、最初に作業が破綻するのは人のところです。