よくある原因
最も多い原因はviewportメタタグの欠落または誤記です。`<meta name="viewport" content="width=device-width, initial-scale=1">`がない場合、AndroidのブラウザはページをPC幅（通常980px）として描画し、全体を縮小表示するため文字が極端に小さくなります。AI生成HTMLはこのタグを省略することがあるので、`<head>`内に必ず存在するか確認してください。
もう一つの原因はfont-sizeにpxではなくvw単位を使っている場合です。たとえば`font-size: 1.5vw`はPC幅1200pxなら18pxになりますが、Android画面幅360pxでは5.4pxになり読めません。本文テキストにはpxまたはremを使い、vwはタイトルやヒーロー要素に限定するのが安全です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
HTMLファイルをテキストエディタで開き、`<head>`タグ内に`viewport`のmetaタグが存在するか検索してください。存在しない場合は`<meta name="viewport" content="width=device-width, initial-scale=1">`を追加します。initial-scaleを0.5や2.0にしている場合も文字サイズが意図と異なるので、必ず1に設定します。
CSSのfont-sizeを一括確認する手順として、ブラウザのDevToolsを使う方法が便利です。Chromeのデバイスツールバーで端末を「Pixel 7」などに設定し、Elementsパネルでbodyやpタグのcomputed font-sizeを確認します。16px未満になっているなら、該当セレクタのfont-size指定を修正する必要があります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
受け取った側がAndroidで見たときに文字が小さい場合、まず「Chromeの設定→フォントサイズ」が「小」になっていないか確認してもらいましょう。ただしこの設定は`text-size-adjust: none`をCSSに指定しているページでは無効化されるため、送り手側がそのプロパティを使っていないかも確認が必要です。
相手のAndroidバージョンとChromeのバージョンも把握できると原因を絞りやすくなります。Android 9以前のWebViewは`-webkit-text-size-adjust: 100%`の挙動が異なります。「設定→デバイス情報→Androidバージョン」で確認してもらい、古いOSであれば`-webkit-text-size-adjust: 100%`をbodyに追加することで改善するケースがあります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AI生成HTMLを受け取ったら公開前に必ずChromeのデバイスツールバーで「Galaxy S21」など一般的なAndroid端末でプレビューする習慣をつけましょう。ギガサイト便であれば公開URL発行後にスマートフォンで直接URLを開いて確認できます。この一手間で受信者からの「見えない」報告の8割は防げます。
AIへのプロンプトに「viewportメタタグを必ず含め、font-sizeはpxかremのみ使用し、vwはタイトルのみ」と明記しておくと生成物の品質が安定します。テンプレートとして保存しておき、毎回使い回すことでヒューマンエラーを削減できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
viewportメタタグを追加したのにAndroidでまだ文字が小さいです
CSSにmax-widthや固定widthをpxで指定し、画面幅を超えている可能性があります。bodyに`width: 100%; max-width: 100%`を追加し、コンテナ要素のwidthも%やmaxで指定し直してください。
iPhoneでは正常に見えるのにAndroidだけ崩れるのはなぜですか
SafariとChromeのデフォルトUA stylesheet、text-size-adjustの扱いが異なるためです。特に`-webkit-text-size-adjust`が未指定だとAndroid Chromeが自動縮小を行うことがあります。bodyに`-webkit-text-size-adjust: 100%`を指定すると改善するケースが多いです。
修正後のHTMLをギガサイト便で差し替えるにはどうすればよいですか
ギガサイト便の管理画面から対象の共有URLを選び、「ファイル差し替え」でHTMLを再アップロードします。URLは変わらないため、すでにリンクを共有済みの相手もリロードするだけで修正版を確認できます。