よくある原因
「画像が回転している」という報告の原因は大きく2種類あります。①HTMLの実装でEXIF補正が行われていない(開発側の問題)、②特定のブラウザがimage-orientationをサポートしていない(閲覧環境の問題)。どちらかを特定しないまま「直します」と返答すると、対処が的外れになることがあります。
依頼文・報告文を書く際に確認しておきたいのは「誰の環境で・どの画像が・どの方向に回転しているか」の3点です。特に「どの方向に」は重要で、時計回り90度ならEXIF Orientation 6、反時計回り90度なら8、上下反転なら3といった値に対応するため、修正コードを書く際の根拠になります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
依頼文を送る前に、問題のHTMLを自分の複数の環境(Chrome最新・Safari最新・iOS Safari)で確認し、どの環境でも再現するか絞り込みます。最新ブラウザだけで正しく表示されて古いブラウザで回転する場合と、どのブラウザでも回転する場合では連絡の内容が変わります。
問題の画像ファイルを特定したら、そのEXIF Orientationの値をmacOSのプレビューやEXIF ViewerのWebサービスで確認します。Orientationが1(正位置)なのに回転して見える場合は、CSSやJavaScriptの描画処理のバグの可能性が高いです。Orientationが1以外なら、そのブラウザがEXIFを解釈していないことが原因です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
開発担当者へ送る依頼文には、再現に必要な情報をすべて含めます。テンプレート:「お世話になっております。共有URL([URL])の画像表示について確認をお願いします。以下の環境で画像が[方向]に90度回転して表示されます。環境:[OS・ブラウザ・バージョン]。問題の画像:[ファイル名または手順]。ご確認・修正をお願いいたします。」
相手が非エンジニアで状況を説明してくれている場合は、スクリーンショットを送ってもらうのが最速です。「画像が表示されている部分のスクリーンショットと、OSとブラウザの名前(Chromeなど)を教えてください」と一行伝えるだけで診断に必要な情報が揃います。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
画像の向き問題は公開後に発覚するより共有前のチェックで潰すほうが圧倒的に効率的です。共有前の確認手順として「ギガサイト便でURL発行 → iPhoneのSafariでそのURLを開き、スマホ撮影のJPEGを1枚アップロードして向きを確認」をルーティンにするだけで、ほとんどの向き問題を事前に発見できます。
チームで複数のHTMLを制作している場合は、「画像向き確認済み」フラグをタスク管理ツール(NotionやJiraのチェックボックスなど)に追加します。誰がどのHTMLの画像向きを確認したかが一目でわかるようにしておくと、差し替え後の再確認漏れも防げます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
画像の向き問題を報告するとき、EXIFという言葉を使わずに説明するにはどうすればよいですか?
「スマホで撮影した写真をHTMLで表示すると、撮影時の端末の向きと異なる角度で表示される問題」と説明します。「iPhoneで縦向きに撮ったのにWebページで横向きに表示される」のように具体的な例を添えるとさらにわかりやすいです。
修正依頼を出した後、何をもって問題が解決したと判断すればよいですか?
実際に問題が起きていた環境(OS・ブラウザ)と同じ条件でURLを開き、該当の画像が正しい向きで表示されることを確認します。可能であれば修正前に問題を報告してくれた人にも同じ手順で確認してもらいます。
ギガサイト便で差し替えた場合、相手に再確認を依頼するとき何を伝えればよいですか?
「先ほどの画像向き問題を修正しました。同じURL(またはURLが変わった場合は新しいURL)でもう一度確認いただけますか?キャッシュが残っている場合はブラウザでCtrl+Shift+Rを押してください」と伝えます。