よくある原因
文字が小さく見える原因は、ページ側のviewport設定ミスである場合と、受け取り側のブラウザ設定や端末設定に起因する場合の2通りあります。依頼メッセージを送る前に、自分でChromeのDevToolsでAndroid端末を模擬して確認すると、相手への問い合わせ前に原因の見当がつき、依頼内容を絞ることができます。
特に多いのは、相手がChromeではなくメーカー標準ブラウザやアプリ内ブラウザでURLを開いているケースです。ギガサイト便で発行したURLをSNSアプリのタップで開いた場合、アプリ内WebViewでレンダリングされるため通常のChromeと表示が異なることがあります。依頼メッセージにはブラウザの種類を確認する項目を必ず含めましょう。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
相手に依頼を送る前に、自分でできる確認として「CSSにviewportメタタグがあるか」「font-sizeの単位がvwになっていないか」を確認します。問題があれば修正版をギガサイト便に差し替えてから依頼メッセージを送ると、相手を一度の確認で解決できます。
修正に自信がない場合は、AIに「このHTMLのAndroid表示を修正して」と入力してHTMLを丸ごと貼り付けると、viewportタグの追加とfont-size単位の修正を一括で行ってくれます。修正済みHTMLを差し替えた後にURLを相手に確認してもらうと手順がシンプルになります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手に送る確認依頼メッセージの文例：「お手数ですが、以下の点を教えてください。(1)使っているブラウザ名（ChromeかSamsung Internetか等）(2)Androidのバージョン（設定→デバイス情報で確認できます）(3)URLをどこから開きましたか（メール・SNS・ブラウザに直接入力 等）」。この3点で原因の8割を特定できます。
相手が「ブラウザが分からない」という場合は、「アドレスバーが丸い形のブラウザはChrome、横長の形はSamsung Internetです」など視覚的な識別方法を伝えると回答率が上がります。また「ChromeでURLを直接入力して開き直したら直ったか」を試してもらうと、アプリ内ブラウザ起因かどうかをすぐに切り分けられます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
同じ確認依頼を毎回ゼロから書くのは手間です。「Android表示確認依頼テンプレ.txt」として上記の3点確認文を保存しておき、問題が報告されたらコピペで送れるようにしておきましょう。ギガサイト便の差し替えURLも一緒に送れるよう、テンプレートに「差し替え後URL：」という行を入れておくと便利です。
社内で複数人が同じURLを共有して確認する運用の場合、ギガサイト便のパスワード保護機能を使って確認用URLを発行し、修正が終わったら同URLを差し替えるフローにすると、誰が何のバージョンを見ているか混乱を防げます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
相手から「Chromeで開いてもまだ小さい」と言われました。次の手順は？
HTMLのviewportタグとfont-size単位を再確認し、`-webkit-text-size-adjust: 100%`をbodyに追加した修正版をギガサイト便に差し替えて、再度確認を依頼してください。それでも改善しない場合は相手のAndroidバージョンを確認し、古いOSでは表示互換性の限界がある旨を伝えます。
確認を依頼したら相手が何も返信してくれません。どうすればよいですか
非技術者に「バージョン確認」は負荷が高いことがあります。「画面全体のスクリーンショットを送ってもらえますか」という一言に変えると返信率が上がります。スクリーンショットからブラウザ名とAndroidバージョンを推定できる場合もあります。
Androidの文字問題が解決したのに今度はiPhoneで崩れると言われました
Android向けに`-webkit-text-size-adjust: 100%`を追加した影響でSafariの挙動が変わることは稀ですが、CSSの変更範囲を最小限にすることが重要です。bodyのfont-sizeをpx固定にすれば両OSで安定することが多いです。