---
title: "画像の向きが勝手に回るときに共有前に確認するチェックリスト"
description: "画像の向きが環境によってずれる問題を共有前に潰したい人向け。EXIFの確認方法からCSS対処・画像変換まで、公開前に済ませておくべき確認事項をステップ別にまとめたチェックリストです。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/image-orientation-rotated-checklist"
markdown: "https://giga-site.com/articles/image-orientation-rotated-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 画像の向きが勝手に回るときに共有前に確認するチェックリスト

スマホ撮影の写真をHTMLに貼り付けると、PC上では正しく見えているのに共有先では回転して見えることがあります。EXIFの解釈はブラウザとOSのバージョンによって異なるため、公開前にこのチェックリストで一通り確認すると、向き問題による差し戻しを防げます。

> Source HTML: https://giga-site.com/articles/image-orientation-rotated-checklist
> Article index: https://giga-site.com/articles/index.md

## よくある原因

チェックリストを始める前に知っておきたいのは、「自分のPCでは正しく見える」という事実が逆に落とし穴になることです。macOSのSafariや最新のChromeはEXIF Orientationを自動的に適用するため、撮影時に端末を傾けていても正しく表示されます。しかし古いChrome（80以前）やWindows EdgeはEXIFを無視するため、受信側でずれが発生します。

圧縮や変換処理を介した画像もリスク要因です。WebサイトのWordPressプラグインやSNSへの投稿ではEXIFが保持されますが、Googleスライドやメールへの添付を経由するとEXIFが落ちることがあります。HTMLに使う画像はなるべく変換処理を最小限にした原本に近いものを使うのが安全です。

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

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

チェック1：画像ファイルのEXIF Orientationを確認する。macOSは「プレビュー」→「ツール」→「インスペクタを表示」→「詳細」タブ。Windowsはエクスプローラーでファイルを右クリック→プロパティ→詳細。値が1以外ならブラウザ依存の問題が起きる可能性があります。

チェック2：HTMLのCSSに`img { image-orientation: from-image; }`が設定されているか確認する。設定されていなければ追加する。チェック3：Chromium系（Chrome/Edge最新版）とSafari最新版の両方で表示を確認する。チェック4：古いAndroidブラウザへの対応が必要な場合はexifr.jsを組み込み、JavaScriptで回転補正を行う。

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

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

共有先から「画像が回転している」と連絡が来たら、まず相手のOS・ブラウザを聞きます。「Windows 10 / Internet Explorer 11」のような古い組み合わせの場合、CSSのimage-orientationが効かないため、サーバー側で画像を変換する対処が必要です。

相手に確認してもらう手順として「画像を右クリックして「画像を別タブで開く」を選び、その状態でもずれているか」を試してもらうと、CSSの問題か画像データ自体の問題かを切り分けられます。別タブで正しく表示されていればCSS側の問題、別タブでもずれていれば画像のEXIFか向きを画像編集ソフトで修正する必要があります。

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

## 再発防止の運用

チーム内で画像の扱いルールを文書化します。「スマホ撮影画像は必ずAuto-Orient（EXIFに従って実際の回転を画素に焼き込む）処理を行ってから使う」「処理はImageMagick `mogrify -auto-orient` またはmacOSプレビューでの再書き出し」といった具体的な手順を共有しておくと誰でも対処できます。

AI生成HTMLを使っている場合は、画像挿入セクションのプロンプトに「画像はEXIF Orientationを考慮し、image-orientation: from-imageをCSSで設定すること。JavaScriptファイルアップロードを受け付ける場合はexifr.jsで回転を補正してからCanvasに描画すること」と加えておくと、生成コードに対策が含まれます。

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

## よくある質問

### PCで撮影した画像もEXIFの向き問題が起きますか？

通常のデジカメやWebカメラはPCに接続して使う際に向きが固定されているため、EXIF Orientationは1（正位置）になるケースが多いです。スマートフォンのカメラが特に問題になりやすいです。

### HTMLに画像をbase64で埋め込んだ場合も回転問題は起きますか？

はい。base64はデータの符号化形式であり、EXIFメタデータは保持されます。CSSのimage-orientationや、JavaScriptでのexifr.jsによる補正はbase64埋め込み画像にも同様に有効です。

### GIFやPNG画像でも向きが狂うことはありますか？

GIFとPNGにはEXIF Orientationの仕様がないため、向きが狂う問題は通常起きません。向きが固定されているフォーマットとして安全です。問題はJPEG（およびHEIC）で撮影されたスマホ写真が主な対象です。

## 関連記事

- [画像の向きが勝手に回るときの原因と直し方](https://giga-site.com/articles/image-orientation-rotated-fix/index.md)
- [画像の向きが勝手に回る問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/image-orientation-rotated-ai-prompt/index.md)
- [画像の向きが勝手に回るときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/image-orientation-rotated-request-message/index.md)
- [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md)
- [レスポンシブ画像が荒く見えるときに共有前に確認するチェックリスト](https://giga-site.com/articles/responsive-image-blurry-checklist/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "画像の向きが勝手に回るときに共有前に確認するチェックリスト",
  "description": "画像の向きが環境によってずれる問題を共有前に潰したい人向け。EXIFの確認方法からCSS対処・画像変換まで、公開前に済ませておくべき確認事項をステップ別にまとめたチェックリストです。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/image-orientation-rotated-checklist",
  "url": "https://giga-site.com/articles/image-orientation-rotated-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "PCで撮影した画像もEXIFの向き問題が起きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常のデジカメやWebカメラはPCに接続して使う際に向きが固定されているため、EXIF Orientationは1（正位置）になるケースが多いです。スマートフォンのカメラが特に問題になりやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "HTMLに画像をbase64で埋め込んだ場合も回転問題は起きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。base64はデータの符号化形式であり、EXIFメタデータは保持されます。CSSのimage-orientationや、JavaScriptでのexifr.jsによる補正はbase64埋め込み画像にも同様に有効です。"
      }
    },
    {
      "@type": "Question",
      "name": "GIFやPNG画像でも向きが狂うことはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GIFとPNGにはEXIF Orientationの仕様がないため、向きが狂う問題は通常起きません。向きが固定されているフォーマットとして安全です。問題はJPEG（およびHEIC）で撮影されたスマホ写真が主な対象です。"
      }
    }
  ]
}
```