よくある原因
「モーダルが閉じない」という報告には複数の意味が含まれます。①×ボタンを押しても反応しない、②背景クリックで閉じない、③モーダルは消えるが背景が暗いまま、④ESCキーが効かない——これらはすべて「閉じない」と表現されますが、原因は別々です。最初の返信でどれかを聞き分けることが重要です。
環境依存の問題も多く、相手のブラウザ(特にiOS Safari)やデバイスでのみ発生することがあります。「別のブラウザでは閉じますか?」という質問を早めに入れることで、HTML修正が必要かどうかを素早く判断できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
相手からの報告を受ける前に、自分でも公開URLにアクセスしてモーダルの動作を確認します。PC Chrome・PC Firefox・スマホSafariの3環境でチェックすると再現性の判断ができます。自分の環境で再現する場合はHTMLの問題と断定できます。
自分環境では閉じる場合は環境依存の可能性が高く、相手に「お使いのブラウザとOSを教えてください」と返信します。iPhoneのSafariで発生している場合は`cursor: pointer`の追加や、`addEventListener('touchend')`への切り替えで解決することが多いです。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
非エンジニアへの確認依頼文テンプレート:「ご報告ありがとうございます。状況を確認したいので、いくつか教えてください。①画面の右上(または×マーク)をクリックして反応がありますか?②モーダルの外側(暗い部分)をクリックしても閉じませんか?③使っているブラウザとデバイスを教えてください。」
エンジニアへの確認依頼文テンプレート:「F12でConsoleタブを開いた状態で×ボタンをクリックし、エラーが出るか教えてください。あわせて×ボタン要素を右クリック→Inspectして、onclickまたはaddEventListenerが設定されているかも確認できますか?」
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
2種類の確認依頼テンプレート(非エンジニア向け・エンジニア向け)をチームで共有しておき、誰が対応しても同じ品質で情報収集できるようにします。SlackのワークフロービルダーやNotionのスニペットに登録しておくのが便利です。
モーダル不具合の報告が複数回続いた場合、AIへのプロンプトを見直すタイミングです。「×ボタン・背景クリック・ESCキーの3つで閉じられること」を生成要件に必ず含めるよう、プロンプトのテンプレートを更新します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
確認依頼を送ったら相手が「全部試したけど閉じない」と答えました。次に何を聞けばいいですか?
「F12キーを押してConsoleタブを開き、×ボタンをクリックして赤いエラーが出るか教えてください」と次のステップに進みます。非エンジニアには「赤い文字が出てきますか?」と簡単な言葉に言い換えます。
確認依頼への回答がなくても修正を先に進めるべきですか?
自分の環境で再現できれば先に修正を進めて「修正しました」と連絡するのが効率的です。再現できない場合は情報待ちが合理的です。24時間経っても返信がなければ修正した版を送って「この版で試してみてください」と伝えます。
相手がスクリーンショットを送ってくれましたが、モーダルが開いたままの画面だけで情報が少ないです
「ありがとうございます。アドレスバーが見えるよう画面全体のスクリーンショットをもう一枚送ってもらえますか?あわせてConsoleタブ(F12→Console)が映ったものも送ってもらえると助かります。」と依頼します。