---
title: "画像の向きが勝手に回る問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLで画像の向き問題を最初から回避したい制作者向け。スマホ撮影画像のEXIF回転をAIに自動補正させるためのプロンプト文言と、生成後の確認手順を具体的に解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/image-orientation-rotated-ai-prompt"
markdown: "https://giga-site.com/articles/image-orientation-rotated-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 画像の向きが勝手に回る問題をAI生成HTMLで防ぐプロンプト
AIに「画像をアップロードして表示するHTMLを作って」と頼むと、EXIFの回転補正を考慮しないコードが生成されることがあります。モバイルで撮影した写真を扱うページは、特にプロンプトで向き補正を明示しないと、スマホユーザーが使ったときに画像が回転して表示される問題が頻発します。
> Source HTML: https://giga-site.com/articles/image-orientation-rotated-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AIが生成するHTML/JavaScriptのデフォルトは、で受け取った画像をFileReaderで読み込み、imgタグのsrcに設定するだけのシンプルな構成です。この構成はEXIF Orientationを完全に無視するため、iPhoneで縦向きに撮った写真が90度回転して表示されます。
プロンプトに「レスポンシブ対応」「ドラッグ＆ドロップ対応」などUI要件を詰め込むと、AIはそちらに集中してEXIF補正を盛り込みません。AIは明示されていない要件を推測して補完することは稀であるため、画像補正のような技術的な要件は必ずプロンプトに明記する必要があります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
プロンプトに加えるべき文言は「アップロードされた画像はexifr.jsを使ってEXIF Orientationを取得し、Canvasで回転補正してから表示してください。exifr.jsはCDN（https://cdn.jsdelivr.net/npm/exifr/dist/lite.umd.js）から読み込んでください」です。これだけで生成コードにexifr.jsの利用が含まれます。
生成されたHTMLを使う前に、スマホで撮影したJPEG（iPhoneのカメラロールから取った横向き・縦向き各1枚が理想）でテストします。コンソールにexifrのエラーが出ていないか確認し、画像が正しい向きで表示されればOKです。CSSのimage-orientationが設定されているか（`img { image-orientation: from-image; }`）もコードを確認します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
ギガサイト便でプレビューURLを発行して共有相手にテストしてもらう際、相手のスマートフォン（iOSとAndroid両方が理想）で実際に写真をアップロードして向きを確認してもらいます。PCのブラウザでのドラッグ＆ドロップとスマホのカメラロールからのアップロードでは挙動が異なることがあります。
相手から「やはり回転している」と報告が来た場合、相手の端末・OS・ブラウザを確認し、exifrのコンソールエラーがないかも確認してもらいます。exifrがEXIFを読めなかった（例：PNG形式や既にAuto-Orient済みのJPEG）ケースと、読めたが回転補正が不完全だったケースで対処が変わります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
画像アップロード機能を含むHTMLを量産する場合は、EXIFを考慮した「アップロード共通モジュール」スニペットを手元に用意し、AIへのプロンプトにそのコードを貼り付けて「このコードを参考に組み込んでください」と指示するのが最も確実です。毎回プロンプトで説明するより再現性が上がります。
スニペットには最低限、①exifr.jsのCDN読み込み、②FileReader完了後にexifr.orientationを取得、③orientationに応じたcanvas回転処理、④canvas.toDataURLでimgタグに反映、の4ステップを含めます。これをGistやNotionに保存しておくと次のプロジェクトで即使えます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### exifr.jsのliteビルドと通常ビルドはどちらを使えばよいですか？
EXIF Orientationの取得だけが目的なら、ファイルサイズが小さいliteビルドで十分です。GPS情報やカメラメーカー情報なども取得したい場合は通常ビルドを使います。CDNのURLにdist/liteが含まれているか確認してください。
### Canvasで回転補正すると画質が落ちますか？
Canvas経由でtoDataURL('image/jpeg', 0.9)のように品質を指定して書き出すと、元のJPEGより若干画質が落ちる場合があります。品質重視の用途ではtoDataURL('image/png')を使うと無劣化になりますがファイルサイズが大きくなります。
### AIへのプロンプトで毎回exifr.jsを指定するのが面倒です。代替手段はありますか？
CSSの`image-orientation: from-image`だけで対応できる場面も多いです。ファイルアップロード後にimgタグのsrcを直接設定する構成なら、このCSS1行だけで最新ブラウザでの回転問題は解決します。Canvasを介さない場合はexifr.js不要です。
## 関連記事
- [画像の向きが勝手に回るときの原因と直し方](https://giga-site.com/articles/image-orientation-rotated-fix/index.md)
- [画像の向きが勝手に回るときに共有前に確認するチェックリスト](https://giga-site.com/articles/image-orientation-rotated-checklist/index.md)
- [画像の向きが勝手に回るときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/image-orientation-rotated-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [レスポンシブ画像が荒く見える問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/responsive-image-blurry-ai-prompt/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "画像の向きが勝手に回る問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLで画像の向き問題を最初から回避したい制作者向け。スマホ撮影画像のEXIF回転をAIに自動補正させるためのプロンプト文言と、生成後の確認手順を具体的に解説します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/image-orientation-rotated-ai-prompt",
"url": "https://giga-site.com/articles/image-orientation-rotated-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "exifr.jsのliteビルドと通常ビルドはどちらを使えばよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "EXIF Orientationの取得だけが目的なら、ファイルサイズが小さいliteビルドで十分です。GPS情報やカメラメーカー情報なども取得したい場合は通常ビルドを使います。CDNのURLにdist/liteが含まれているか確認してください。"
}
},
{
"@type": "Question",
"name": "Canvasで回転補正すると画質が落ちますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "Canvas経由でtoDataURL('image/jpeg', 0.9)のように品質を指定して書き出すと、元のJPEGより若干画質が落ちる場合があります。品質重視の用途ではtoDataURL('image/png')を使うと無劣化になりますがファイルサイズが大きくなります。"
}
},
{
"@type": "Question",
"name": "AIへのプロンプトで毎回exifr.jsを指定するのが面倒です。代替手段はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "CSSの`image-orientation: from-image`だけで対応できる場面も多いです。ファイルアップロード後にimgタグのsrcを直接設定する構成なら、このCSS1行だけで最新ブラウザでの回転問題は解決します。Canvasを介さない場合はexifr.js不要です。"
}
}
]
}
```