このチェックリストで確認すること
画像はローカルで見えても公開URLで切れることがあります。src、alt、表示サイズ、スマホ表示をまとめて確認します。
使うタイミング
ロゴ導線、キャラクター画像、アイキャッチ、ニュースカード、画像つきUIを変更したあとに使います。
チェック項目
| 項目 | なぜ必要か | 確認のやり方 |
|---|---|---|
| 使用中の画像URLが200 OK | ローカルでは相対パスで見えても、公開URLではパスの基準が変わって切れることがある | 公開URL側でページを開き、画像URLに直接アクセスして200を確認 |
| 画像404がない | 画像切れは見た目の信頼を大きく損ない、放置サイトの印象を与える | ブラウザの開発者ツールのNetworkタブで404が出ていないか見る |
| altが自然 | 画像が読めない環境・検索エンジンへの説明文になる。空や「image1」では役割を果たさない | altだけ読んで画像の内容が想像できる文になっているか確認 |
| スマホで横にはみ出していない | 幅指定のない大きな画像は、スマホで横スクロールを発生させる代表的原因 | 開発者ツールで390px幅にして横スクロールが出ないか確認 |
| 顔やロゴが大きく切れていない | トリミングやobject-fitの設定次第で、肝心の被写体が見切れることがある | 実際の表示サイズで、伝えたい部分が枠内に収まっているか目視 |
| ロゴリンク先が正しい | ヘッダーロゴのリンク切れ・別サイト行きは、テンプレ流用時にやりがち | ロゴをクリックして意図したトップページに戻るか確認 |
| キャラクター画像が表示される | 共通パーツの画像パスは、ページ階層が変わると壊れやすい | 階層の深いページでもキャラクター画像が出ているか確認 |
| 外部画像素材を勝手に追加していない | 権利確認していない素材の混入は、著作権とホットリンク両方の問題になる | 追加された画像の出どころ（自サイト内か）を差分で確認 |
画像チェックは「PCの見た目で1回」ではなく「公開URL×スマホ幅」の組み合わせで見るのが要点です。事故のほとんどはこの組み合わせでだけ発生します。
画像が表示されない時の切り分け
画像だけ表示されない場合、原因はほぼ決まっています。この順に確認すると早く見つかります。
| 順番 | 確認すること | よくある原因 |
|---|---|---|
| 1 | 画像のURLを直接開く | ここで404なら、配置かパスの問題と確定する |
| 2 | 大文字小文字を1文字ずつ照合 | サーバーは区別する。手元では動いていても本番で崩れる |
| 3 | 拡張子が実ファイルと一致するか | .jpgのつもりが.jpegになっている等 |
| 4 | 実際にアップロードされているか | アップロード漏れ。手元にはあるが本番にない |
| 5 | キャッシュを避けて開き直す | 直っているのに古い状態が表示されている |
1番目を最初にやる理由は、これだけで問題がHTML側か画像側かを切り分けられるからです。画像URLを直接開いて表示されるなら、原因はHTMLの記述にあります。開けないなら、画像そのものが正しい場所にありません。
表示以外に確認すること
画像は表示されていれば終わりではありません。公開前に見るべき点が他にもあります。
- ファイルサイズ：大きすぎると読み込みが遅くなり、表示される前に離脱されます。特にスマホ回線では影響が大きくなります。
- alt属性：画像が表示されない環境や読み上げで使われます。ファイル名をそのまま入れても意味をなしません。
- スマホでのはみ出し：横幅が画面を超えると、ページ全体が横スクロールする状態になります。
- 権利の確認：素材の商用利用可否、人物が写る場合の同意、ロゴや商標の写り込みを確認します。
- 写り込み：スクリーンショットの場合、タブ名やファイルパス、個人情報が入っていないか拡大して確認します。
最後の2つは、表示の問題と違って公開後に気づいても取り返しがつきにくい種類です。技術的な確認より優先して見てください。
よくあるミス
- 相対パスの階層を間違える
- 大文字小文字の違いで公開側だけ切れる
- 画像を大きくしすぎる
- altを空のままにする
Codexへ確認を頼む時の指示文
画像表示チェックをしてください。使用中画像のURL、alt、スマホ表示、横はみ出し、ロゴリンク、キャラクター画像、外部素材追加の有無を確認してください。停止条件
以下が出た場合は、作業を続けずに報告します。
- 基本画像が見つからない
- 画像404が大量にある
- CSS大改修が必要になりそう