---
title: "WebP画像が表示されないときに共有前に確認するチェックリスト"
description: "WebP画像の表示トラブルを防ぎたいHTML共有担当者向けに、アップロード前に自己完結できる確認チェックリストをステップ順に提供します。見落としがちなファイル名の大文字問題も網羅しています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/webp-not-showing-checklist"
markdown: "https://giga-site.com/articles/webp-not-showing-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# WebP画像が表示されないときに共有前に確認するチェックリスト

WebP画像が表示されないまま相手に共有URLを送ると、修正とURL再発行の二度手間が発生します。このチェックリストはギガサイト便へアップロードする前に5分で完了できる確認項目を整理したもので、パス・ファイル名・ブラウザ互換性の3軸をカバーしています。

> Source HTML: https://giga-site.com/articles/webp-not-showing-checklist
> Article index: https://giga-site.com/articles/index.md

## よくある原因

チェックリストを使う前に原因の傾向を把握しておくと確認が速くなります。最も多いのはHTML内のsrc属性のパスと、実際にZIP内に配置したファイルのパスのずれです。特にAI生成HTMLはassets/img/やimages/といったフォルダを前提としたパスを出力しやすく、手動でZIPを作る際に該当フォルダごと漏れるケースが頻発します。

次いで多いのがファイル名の表記ゆれです。AIが出力したHTMLではbanner.webpと書いてあるのに、実際に用意したファイルがBanner.webpになっているケースがあります。Windowsのエクスプローラーではどちらも同じに見えるため見落としやすく、Linuxサーバーでは404エラーになります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

チェック1：ZIPを一度ローカルに展開し、index.htmlをブラウザで開いてWebP画像が表示されるか確認します。この段階で表示されなければアップロード前に修正できます。NetworkタブでHTTP 200以外のリクエストを洗い出すと効率的です。

チェック2：VS CodeなどのエディタでHTMLを開き、.webpで検索してすべての参照パスを書き出します。次にZIP内のフォルダツリーと照合し、各パスにファイルが存在するかを1件ずつ確認します。ZIP作成時にはフォルダをまるごと圧縮して中間ディレクトリが増えないよう注意してください。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手から「画像が見えない」と報告を受けたら、まずブラウザの種類とバージョンを教えてもらいます。Safari 13以前やIE11ではWebPが表示されないため、その場合は即座にJPEG/PNGへの差し替えが必要です。「Chromeでも見えない」なら原因はサーバー側にある可能性が高いです。

相手に「シークレットモードで同じURLを開いてください」と依頼すると、キャッシュや拡張機能の影響を排除できます。それでも表示されない場合は、相手のネットワーク環境（VPN・企業プロキシ・モバイル回線）を変えて試してもらい、環境依存かどうかを切り分けます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

このチェックリストをHTMLファイルと同梱してZIPに含めておくと、複数人で作業する場合でも担当者が変わるたびに手順を口頭で伝えなくて済みます。MarkdownやPDFで1ページにまとめてREADME.mdとしてZIPのルートに置くのが最もシンプルな運用です。

繰り返しWebP問題が起きるプロジェクトでは、AIへのプロンプトテンプレートに「WebP画像はすべてJPEGと併記すること。pictureタグを必ず使うこと」と固定文を入れることで、生成物のクオリティをアップロード前に底上げできます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### ローカルで表示されたのにギガサイト便では表示されないのはなぜですか？

ローカルではファイルシステムが大文字・小文字を区別しないため問題が出ませんが、ギガサイト便のLinuxサーバーでは区別されます。ファイル名の大文字・小文字をHTMLのパス記述と完全一致させてください。

### ZIPを圧縮するとき、フォルダごとまとめるのとファイルだけ選択するのはどちらが安全ですか？

フォルダごとまとめる方が安全です。ファイルだけを選択するとZIP内にフォルダ階層が再現されず、HTMLのパスと一致しなくなる場合があります。Mac標準のフォルダ右クリック圧縮なら構造を保ったまま作成できます。

### picture要素とimg要素でWebPを使う場合の書き方の違いは何ですか？

picture要素はsource要素でWebPを先に指定し、imgをJPEGのフォールバックとして記述します。img要素単体だとWebP非対応ブラウザで代替画像がなく壊れたアイコンが表示されるため、互換性が必要な場面ではpicture要素を使ってください。

## 関連記事

- [WebP画像が表示されないときの原因と直し方](https://giga-site.com/articles/webp-not-showing-fix/index.md)
- [WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/webp-not-showing-ai-prompt/index.md)
- [WebP画像が表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/webp-not-showing-request-message/index.md)
- [SVGが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/svg-not-showing-checklist/index.md)
- [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md)
- [SVGが表示されないときの原因と直し方](https://giga-site.com/articles/svg-not-showing-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "WebP画像が表示されないときに共有前に確認するチェックリスト",
  "description": "WebP画像の表示トラブルを防ぎたいHTML共有担当者向けに、アップロード前に自己完結できる確認チェックリストをステップ順に提供します。見落としがちなファイル名の大文字問題も網羅しています。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/webp-not-showing-checklist",
  "url": "https://giga-site.com/articles/webp-not-showing-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ローカルで表示されたのにギガサイト便では表示されないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ローカルではファイルシステムが大文字・小文字を区別しないため問題が出ませんが、ギガサイト便のLinuxサーバーでは区別されます。ファイル名の大文字・小文字をHTMLのパス記述と完全一致させてください。"
      }
    },
    {
      "@type": "Question",
      "name": "ZIPを圧縮するとき、フォルダごとまとめるのとファイルだけ選択するのはどちらが安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォルダごとまとめる方が安全です。ファイルだけを選択するとZIP内にフォルダ階層が再現されず、HTMLのパスと一致しなくなる場合があります。Mac標準のフォルダ右クリック圧縮なら構造を保ったまま作成できます。"
      }
    },
    {
      "@type": "Question",
      "name": "picture要素とimg要素でWebPを使う場合の書き方の違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "picture要素はsource要素でWebPを先に指定し、imgをJPEGのフォールバックとして記述します。img要素単体だとWebP非対応ブラウザで代替画像がなく壊れたアイコンが表示されるため、互換性が必要な場面ではpicture要素を使ってください。"
      }
    }
  ]
}
```