このページでできること
Canvaや画像AIで用意した画像を、CodexでHTML/CSSへ反映する前後の公開前チェックを整理できます。
Web公開前の確認表
| 項目 | 確認すること | 止める場面 |
|---|---|---|
| 画像404 | srcのURL、ファイル名、拡張子 | 公開で表示されない |
| alt | 画像の意味を短く説明 | 空欄や誤解を招く説明 |
| スマホ表示 | 横幅、切れ、重なり | 画面外にはみ出す |
| 公式誤認 | ロゴ、UI、ブランド表現 | 公式風に見える |
| 権利確認 | 人物、素材、商用利用 | 許諾が不明 |
Codexへ渡す前のチェック
- 公式ロゴや公式画像のように見せない
- 既存キャラクター風に寄せすぎない
- 人物画像や肖像権、本人同意を確認する
- 商用利用や素材ライセンスを確認する
- 生成画像を事実画像や公式発表画像のように見せない
- 会社情報や顧客情報を画像に入れない
- 公開前に人間が権利と誤認リスクを確認する
- 画像ファイル名と配置先を決めた
- altを用意した
- 公開前チェックとrollback方針を決めた
画像404が起きる典型パターン
公開後に画像だけ表示されないトラブルは、だいたい原因が数パターンに絞れます。焦って全部作り直す前に、まずここを順番に確認します。
- 大文字小文字の違い（サーバーはWindowsと違い区別することが多い）
- アップロード先のフォルダとHTMLのsrcパスがずれている
- 拡張子が実ファイルと表記で食い違う（.jpgのつもりが.jpeg等）
- 画像だけ別ドメイン/別サブディレクトリに置いてパスが相対参照で崩れる
- CDNやキャッシュが古い404状態を保持している
直った後も、スマホの実機かブラウザの開発者ツールで一度は目視確認してから公開判断をします。
altテキストの書き方
altは「画像が表示されなかった時に、代わりに読まれる文章」です。画像の説明としてではなく、その画像がそこにある理由を短く書くと、目的に合ったaltになります。
| 画像の役割 | altの書き方 | 例 |
|---|---|---|
| 内容を補足する図 | 図が伝えている内容を短く書く | 「作業前・作業後の表示の違いを並べた比較図」 |
| 操作手順のスクリーンショット | どの画面のどこを示しているか | 「設定画面の通知欄にある切り替えスイッチ」 |
| 装飾目的の画像 | alt=""（空）にする | 読み上げ時に不要な情報を増やさないため |
| リンクになっている画像 | リンク先が分かる書き方にする | 「トップページへ戻る」 |
よくある間違いは、ファイル名をそのまま入れる（alt="img_001.png"）ことと、キーワードを詰め込むことです。どちらも読み上げた時に意味をなさず、検索エンジンにも評価されません。声に出して読んで意味が通るかで判断すると、ちょうどよいaltになります。
画像の重さが読者に与える影響
表示されていれば問題ないと考えがちですが、ファイルサイズは読者の離脱に直結します。特にスマホからの訪問では影響が大きくなります。
| 状態 | 読者から見ると | 対応 |
|---|---|---|
| 撮影したままの大きな画像 | 読み込みを待つ間に離脱する | 掲載サイズに合わせて縮小してから使う |
| 1ページに大きな画像が複数 | ページ全体が重くなる | 本当に必要な画像だけに絞る |
| 表示サイズより大きい画像 | 見た目は同じだが無駄に重い | 実際に表示する大きさに合わせる |
よくあるのが3行目です。横800pxで表示する場所に、4000pxの画像をそのまま置いても、見た目は変わりません。変わるのは読み込み時間だけです。表示サイズに合わせて縮小するだけで、体感が大きく改善します。
公開後に画像を差し替える時
一度公開した画像を差し替える場合、いくつか注意点があります。
- 同じファイル名で上書きすると反映が遅れる：キャッシュが残り、古い画像が表示され続けることがあります。
- 別名にするとリンクの修正が必要：HTMLの記述も合わせて変更しないと、画像が消えます。
- 他のページでも使っていないか確認する：同じ画像を複数ページで使っている場合、すべてに影響します。
- 差し替え後は必ず実物を確認する：キャッシュを避けた状態で開き、新しい画像が出ているか見ます。
1番目は「差し替えたのに変わらない」の典型的な原因です。自分の画面で変わらなくても、他の人には新しい画像が見えている場合があります。シークレットウィンドウで開けば、実際の状態が分かります。
Search Consoleで後日見る語
codex ai image、codex 画像 html、codex 画像404、codex public check、codex canva を確認します。