トラブルシュート

モーダルが閉じないときに相手へ伝える確認依頼の書き方

モーダルが閉じないと相手から報告があったとき、原因特定に必要な情報を一度の返信で集めることができれば、修正のターンアラウンドタイムを大幅に短縮できます。相手のスキルレベル別に使える確認依頼文のテンプレートと、情報を引き出すコツを解説します。

よくある原因

「モーダルが閉じない」という報告には複数の意味が含まれます。①×ボタンを押しても反応しない、②背景クリックで閉じない、③モーダルは消えるが背景が暗いまま、④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)が映ったものも送ってもらえると助かります。」と依頼します。

関連記事

トラブルシュート

モーダルが閉じないときの原因と直し方

共有HTMLのモーダルが閉じないトラブルの原因と修正方法を解説。AI生成コードで起きやすいJSイベント未設定・display切り替えの誤り・z-index競合を症状別に整理します。

5分で読める
トラブルシュート

モーダルが閉じない問題をAI生成HTMLで防ぐプロンプト

AI生成HTMLでモーダルが閉じない問題を防ぐプロンプトの書き方を解説。×ボタン・背景クリック・ESCキーの3つの閉じ方を網羅した指示文テンプレートと、生成後の検証手順を紹介します。

4分で読める
「トラブルシュート」の記事をもっと見る →