---
title: "画像の向きが勝手に回るときの原因と直し方"
description: "スマホ撮影の画像がHTMLやWebページで回転してしまう問題を解決したい人向け。EXIFのOrientationタグが原因であることから、CSS・JavaScript・画像変換の3つの修正アプローチまでを具体的に解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/image-orientation-rotated-fix"
markdown: "https://giga-site.com/articles/image-orientation-rotated-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 画像の向きが勝手に回るときの原因と直し方

スマートフォンで撮影した写真をHTMLに載せると、意図した向きと90度や180度ずれて表示されることがあります。これはカメラが撮影時の向きをEXIFメタデータとして記録しているにもかかわらず、ブラウザやHTMLがそのデータを無視するために起きます。原因を正確に把握すれば、CSS1行またはJavaScriptで素早く修正できます。

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

## よくある原因

スマートフォンのカメラは、センサーの物理的な向きと撮影時の端末の向きの差分をEXIF Orientationタグ（1〜8の値）として記録します。縦向きで撮影したiPhoneの写真はOrientationが6（時計回り90度回転が必要）になっていることが多く、このタグを解釈しないブラウザや古いIMGタグ実装では横向きのまま表示されます。

もうひとつの原因は、画像編集ソフトやリサイズツールを通過する際にEXIFが削除またはリセットされるケースです。たとえばブラウザベースの画像圧縮ツールを使うとEXIFが消えて向きが確定されないため、アップロード先によって向きがばらばらになります。自前でリサイズ処理を書いている場合も同様のリスクがあります。

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

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

まず画像のEXIF Orientationを確認します。macOSなら「プレビュー」でGet Info（Command+I）を開き「More Info」にOrientationが表示されます。Windowsはエクスプローラーでプロパティ→詳細タブを確認します。値が1以外であれば向きの補正が必要です。

HTMLで手軽に直す方法はCSSの`image-orientation: from-image`プロパティです。対象のimgタグに`style="image-orientation: from-image;"`を追加するだけで、モダンブラウザはEXIFの値に従って自動的に回転します。ただしIE11やAndroid 4系では未対応なため、古いブラウザが対象に含まれる場合はexifr.jsなどのJavaScriptライブラリを使います。

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

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

共有先で「画像が回転している」と言われた場合、相手のブラウザバージョンを確認します。Safari 13.1以降とChrome 81以降はimage-orientationをデフォルトで適用するため、むしろ最新ブラウザで正しく表示されているなら古いブラウザとの挙動の差が問題です。

相手のOS・ブラウザを特定したうえで再現環境を揃えます。回転の方向（時計回り90度・反時計回り90度・180度）も聞いておくと修正コードを書く際の手がかりになります。修正後はギガサイト便で新しいプレビューURLを発行し、確認を依頼します。

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

## 再発防止の運用

画像をHTMLに組み込む前に必ずEXIFを確認するか、組み込み用の画像はすべてEXIF Orientationを1（正位置）に固定して書き出す運用にします。macOSの「プレビュー」でエクスポートするだけでEXIFが正規化される場合があります。ImageMagickを使う場合は`mogrify -auto-orient 画像ファイル`で一括変換できます。

AI生成HTMLに画像を差し込む際は、プロンプトに「imgタグにimage-orientation: from-imageをstyle属性で設定すること」と明記しておくと、生成されたコードに最初から対策が入ります。チーム内の画像アップロードガイドラインに「スマホ撮影画像はAuto-Orient処理後に使用」と追記しておくのも効果的です。

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

## よくある質問

### image-orientation: from-imageをCSSに追加しても効かない場合、何が考えられますか？

画像のEXIF情報が存在しない可能性があります。画像圧縮ツールを経由するとEXIFが削除されるケースがあります。exifrなどでOrientationを確認し、EXIFがなければ画像を元の向きで書き直すか、JavaScriptで手動回転させます。

### Canvas要素に画像を描画する場合も同じ問題が起きますか？

はい。canvas.drawImageはEXIFを自動適用しません。exifr.jsでOrientationを読み取り、その値に応じてcanvasのtransform（rotate/translate）を事前に設定してからdrawImageする必要があります。

### サムネイル一覧を自動生成するAI HTMLでまとめて対処する方法はありますか？

全imgタグにimage-orientation: from-imageをCSSで`img { image-orientation: from-image; }`として一括適用するのが最もシンプルです。これだけでモダンブラウザでのEXIF回転問題は解消します。

## 関連記事

- [画像の向きが勝手に回るときに共有前に確認するチェックリスト](https://giga-site.com/articles/image-orientation-rotated-checklist/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-fix/index.md)
- [レスポンシブ画像が荒く見えるときの原因と直し方](https://giga-site.com/articles/responsive-image-blurry-fix/index.md)
- [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "画像の向きが勝手に回るときの原因と直し方",
  "description": "スマホ撮影の画像がHTMLやWebページで回転してしまう問題を解決したい人向け。EXIFのOrientationタグが原因であることから、CSS・JavaScript・画像変換の3つの修正アプローチまでを具体的に解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/image-orientation-rotated-fix",
  "url": "https://giga-site.com/articles/image-orientation-rotated-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "image-orientation: from-imageをCSSに追加しても効かない場合、何が考えられますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画像のEXIF情報が存在しない可能性があります。画像圧縮ツールを経由するとEXIFが削除されるケースがあります。exifrなどでOrientationを確認し、EXIFがなければ画像を元の向きで書き直すか、JavaScriptで手動回転させます。"
      }
    },
    {
      "@type": "Question",
      "name": "Canvas要素に画像を描画する場合も同じ問題が起きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。canvas.drawImageはEXIFを自動適用しません。exifr.jsでOrientationを読み取り、その値に応じてcanvasのtransform（rotate/translate）を事前に設定してからdrawImageする必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "サムネイル一覧を自動生成するAI HTMLでまとめて対処する方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "全imgタグにimage-orientation: from-imageをCSSで`img { image-orientation: from-image; }`として一括適用するのが最もシンプルです。これだけでモダンブラウザでのEXIF回転問題は解消します。"
      }
    }
  ]
}
```