テスターの画面では、メッセージが広告の裏に隠れていた

「ゴルフは全く分からないんですが」

ゴルフのスコア集計アプリのテスト中、ある開発者の方からこんな報告が届きました。

ゴルフは全く分からないんですが、下の広告とポップがかぶって見れなくなっています。

最終ホールをクリックするとこのような画面になりました。

下が見れません

スクリーンショットも添えてくれていました。

18ホール目で「最終ホール」ボタンを押すと、画面の下に「18ホール完了！集計を確認しましょう」という短いメッセージが出る作りです。スマホアプリでよく見る、数秒で消える通知（トースト）です。

そのメッセージが、画面の一番下にある広告バナーの裏に隠れて、読めなくなっていたのです。

不思議に思いました。広告に隠れないように、対策はしてあったからです。

アプリの画面全体（body）には、広告バナーの高さ60ピクセル分の余白を下に入れていました。

body { padding-bottom: calc(env(safe-area-inset-bottom) + var(--ad-pad, 0px)); }
body.ad-active { --ad-pad: 60px; }

広告が表示されたら ad-active を付けて、余白を60ピクセルにする。これで、ボタンやスコアの表は広告より上に収まっていました。

では、なぜメッセージだけが隠れたのか。

メッセージの位置は、こう指定していました。

.toast { position: fixed; bottom: 24px; }

position: fixed の要素は、画面（ビューポート）を基準に置かれます。 親である body にどれだけ余白を入れても、その影響を受けません。

つまりメッセージは、画面の下端から24ピクセルの位置に出ていました。そこは広告バナーが占める60ピクセルの内側です。

本文には「広告を避けて」と伝えてあったのに、メッセージにだけは伝わっていなかったのです。

しかも、隠れていたのは「最終ホール」のメッセージだけではありませんでした。「スマホに保存しました」など、同じ仕組みで出すメッセージは全部、同じように広告の裏にいたはずです。

メッセージの位置にも、body と同じ計算を足しました。

.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom) + var(--ad-pad, 0px)); }

--ad-pad は body に付けた値ですが、CSS の変数は子の要素に受け継がれるので、メッセージの側からも読めます。

広告が表示されていない環境では 0px になるので、見た目はこれまでと変わりません。

修正そのものは1行でしたが、その途中でヒヤリとしたことがあります。

アプリの画面ファイル（index.html）が、2つあったのです。

ファイル	最終更新	広告の設定	集計表の「合計」列
フォルダ直下の index.html	6月20日（古い）	テスト広告のまま	無い
アプリに組み込まれる方	6月27日（最新）	本番広告	有る

もし古いほうを直して、アプリ側にコピーしていたら、どうなっていたか。

本番の広告がテスト広告に戻り、後から足した「合計」列も消えていました。 メッセージを1行直すつもりで、2つの機能を壊すところでした。

AIに2つのファイルを比べてもらったことで、事前に気づけました。修正は、組み込まれる側のファイルを直接直しています。

念のため、ビルドしたアプリの中身も確かめました。組み込まれた画面ファイルが、直したファイルと1バイトも違わないことと、広告が本番の設定のままであることです。

報告してくれた方には、修正版が出たことをお伝えしました。

このアプリの募集文には、あえてこう書いていました。

ゴルフをされない方は、説明なしで「どこから入力すればよいか」が分かるかを見てほしい

ゴルフを知っている人は、最終ホールまで入力すると、そのまま集計画面を見にいきます。メッセージを読む必要がないので、隠れていても気づきません。

ゴルフを知らない人は、画面に出る案内を頼りに進みます。 だから、読めないことにすぐ気づいた。

先入観のない人に触ってもらう価値は、こういうところにあるのだと思いました。

そしてこの方とは、お互いのアプリの不具合を見つけ合って、お互いに直すことになりました。私が見つけたのは、その方のアプリで音声の一部が途中で途切れる不具合。それも、私の報告の翌日には直っていました。

画面の下に広告バナーを置いているなら、確認してみてください。

本文に余白を入れていても、position: fixed の要素はその外にいます。 トースト、フローティングボタン、下から出るメニューなど
広告は、テスト環境では出ないことがあります。 ブラウザで確かめただけでは、この重なりは見えません
画面ファイルが複数あったら、どれがアプリに組み込まれているかを必ず確かめる
画面の下端は、広告だけでなくシステムのバーとも取り合いになります。 Android 15 以降は特に注意が必要です（Capacitor 6 でステータスバーが重なる）

実機で、広告が出ている状態で、画面の端まで見る。 結局は、それがいちばん確実でした。