---
title: "Androidだけ文字が小さく見える問題をAI生成HTMLで防ぐプロンプト"
description: "AIで生成したHTMLがAndroidで文字小さくなるのを防ぎたい方向け。ChatGPTやClaudeへの指示文に加えるべきviewport・font-size・text-size-adjustの条件と、生成後に確認すべきチェックポイントをまとめています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/android-small-text-ai-prompt"
markdown: "https://giga-site.com/articles/android-small-text-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Androidだけ文字が小さく見える問題をAI生成HTMLで防ぐプロンプト
AIにHTMLを生成させるとき、プロンプトに一文追加するだけでAndroidの文字サイズ崩れをほぼ防げます。どのような指示を与えればviewportタグやfont-size単位が正しく出力されるか、実際に使えるプロンプト例と、生成後の確認ポイントを具体的に解説します。
> Source HTML: https://giga-site.com/articles/android-small-text-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
AIはプロンプトにモバイル対応の指示がないと、デスクトップ向けのCSSを優先しがちです。特にviewportメタタグは「HTMLの基本構造を生成して」程度の指示では省略されることが多く、Androidのデフォルトビューポート幅（980px）でレンダリングされ文字が小さくなります。
font-sizeの単位も指定がなければAIは文脈に応じてpx・em・vwを混在させます。見出しにvwを使い本文にemを使うような出力は、Androidの小さい画面では崩れる組み合わせです。単位ポリシーをプロンプトに明記することが防止の第一歩です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
生成されたHTMLを受け取ったら、まず``内に``があることを確認します。次にCSSファイル（またはstyleタグ）をCmd+Fで`vw`と検索し、本文要素（p, li, span等）に使われていないかを確認します。これだけで主要な問題の有無を1分以内に把握できます。
Chromeに生成されたHTMLをドラッグ&ドロップして開き、DevToolsのデバイスツールバーでPixel 7などのAndroid端末を選択してください。段落テキストをクリックしComputedタブでfont-sizeが16px前後になっているなら合格です。14px未満の場合はプロンプトを修正して再生成してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
プロンプトを修正して再生成した場合、相手に「Chrome以外のブラウザで開いている可能性があるか」を確認してもらうと切り分けが進みます。Samsung Internet、UCブラウザ、アプリ内WebViewなどはChromeと挙動が異なるため、まずChromeで開いた場合の表示を確認してもらうのが基本です。
相手に「スクリーンショットをテキストで説明してもらう」のではなく、ギガサイト便のURLを同じ端末で再度開きリロードしてから確認するように依頼すると、キャッシュによる古い表示の誤認を防げます。修正版を差し替えた後は「ページを長押し→再読込」を行ってもらうと確実です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
再発防止に最も効くのはプロンプトテンプレートの整備です。「HTMLを生成する際は必ず(1)``を``内に含める、(2)本文のfont-sizeはremまたはpxのみ使用、(3)bodyに`-webkit-text-size-adjust: 100%`を設定する」という条件を固定文として保存しておきましょう。
週次で新しいHTMLを生成する業務なら、生成→Chrome DevToolsで確認→ギガサイト便にアップ→実機確認、の4ステップをチェックリスト化してノーションや社内wikiに貼っておくと担当者が変わっても品質が落ちません。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### プロンプトにviewportを指定したのにAIが別の設定で出力しました
AIはプロンプトを解釈して判断するため、「必ず」「そのまま使用」などの強調表現を加えると遵守率が上がります。また生成後にdiffで確認し、違えば「viewportのinitial-scaleを1に修正して再出力してください」と追加指示してください。
### AIが生成したCSSに`text-size-adjust: none`が入っていました。これは問題ですか
noneにするとユーザーがブラウザのフォントサイズ設定を変更しても効かなくなるため、アクセシビリティ上好ましくありません。100%に変更するようAIに指示するか、手動で修正してください。
### 毎回再生成するのが面倒です。一度作ったHTMLをテンプレートにする方法はありますか
正常に表示されたHTMLの``部分とbodyのCSSリセット部分を抜き出して「共通ヘッダーテンプレート.txt」として保存します。次回からAIに「このヘッダーを使ってコンテンツ部分だけ生成して」と指示することで、毎回の設定ミスを防げます。
## 関連記事
- [Androidだけ文字が小さく見えるときの原因と直し方](https://giga-site.com/articles/android-small-text-fix/index.md)
- [Androidだけ文字が小さく見えるときに共有前に確認するチェックリスト](https://giga-site.com/articles/android-small-text-checklist/index.md)
- [Androidだけ文字が小さく見えるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/android-small-text-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/favicon-cache-ai-prompt/index.md)
- [QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/qr-404-ai-prompt/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Androidだけ文字が小さく見える問題をAI生成HTMLで防ぐプロンプト",
"description": "AIで生成したHTMLがAndroidで文字小さくなるのを防ぎたい方向け。ChatGPTやClaudeへの指示文に加えるべきviewport・font-size・text-size-adjustの条件と、生成後に確認すべきチェックポイントをまとめています。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/android-small-text-ai-prompt",
"url": "https://giga-site.com/articles/android-small-text-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": "プロンプトにviewportを指定したのにAIが別の設定で出力しました",
"acceptedAnswer": {
"@type": "Answer",
"text": "AIはプロンプトを解釈して判断するため、「必ず」「そのまま使用」などの強調表現を加えると遵守率が上がります。また生成後にdiffで確認し、違えば「viewportのinitial-scaleを1に修正して再出力してください」と追加指示してください。"
}
},
{
"@type": "Question",
"name": "AIが生成したCSSに`text-size-adjust: none`が入っていました。これは問題ですか",
"acceptedAnswer": {
"@type": "Answer",
"text": "noneにするとユーザーがブラウザのフォントサイズ設定を変更しても効かなくなるため、アクセシビリティ上好ましくありません。100%に変更するようAIに指示するか、手動で修正してください。"
}
},
{
"@type": "Question",
"name": "毎回再生成するのが面倒です。一度作ったHTMLをテンプレートにする方法はありますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "正常に表示されたHTMLの``部分とbodyのCSSリセット部分を抜き出して「共通ヘッダーテンプレート.txt」として保存します。次回からAIに「このヘッダーを使ってコンテンツ部分だけ生成して」と指示することで、毎回の設定ミスを防げます。"
}
}
]
}
```