よくある原因
チェックリストで防げるトラブルの典型は「モーダルを閉じるボタンのID名とJSの参照IDが違う」問題です。AIがHTMLを生成する際に`close-modal`と命名し、JSでは`closeModal`（キャメルケース）で参照していたり、スペルミスが1文字混入していることがあります。
モーダルが閉じた後に`body`の`overflow: hidden`が残って背景がスクロールできなくなるのも、チェックリストがあれば防げる典型的な問題です。「閉じた後に背景をスクロールできるか」を確認ステップに入れておくと、この症状を共有前に発見できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック①：モーダルを開く→×ボタンをクリックして閉じる、の操作を実施。チェック②：モーダルを開く→オーバーレイ（背景の暗い部分）をクリックして閉じる、の操作を実施。チェック③：モーダルを閉じた後にページ全体をスクロールできるか確認。チェック④：モーダルを開く→閉じる→再度開く、の繰り返し操作が正常か確認。
DevToolsのConsoleタブを開いた状態でチェック①〜④を実施し、赤いエラーが一件も出ないことを確認します。エラーが出た場合はメッセージをメモして原因を特定します。`Cannot read properties of null`はID名の不一致、`is not a function`は関数定義の場所の問題です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手から「モーダルが閉じない」と報告があったら、「×ボタンとオーバーレイクリックのどちらを試しましたか？両方ダメですか？」と聞きます。両方ダメなら閉じるロジック全体の問題、片方だけなら特定のイベントリスナーの問題です。
スマホユーザーの場合、「モーダルの外をタップしても閉じない」という報告は、オーバーレイのタッチイベントが設定されていないことが多いです。`onclick`はiOS Safariでは一部要素で動かないため、`addEventListener('touchend', closeModal)`を追加するか、`cursor: pointer`をオーバーレイ要素に設定します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
モーダルを含むHTMLの共有前チェックを「①×ボタンで閉じる、②背景クリックで閉じる、③再オープン可能、④スクロール復帰、⑤Consoleエラーなし」の5項目に標準化します。Notionのチェックボックステンプレートに組み込んでおくと毎回の確認が習慣化します。
AIにモーダルを生成させる際は「テスト手順：①×ボタンで閉じる ②背景クリックで閉じる ③2回目の開閉が正常 をすべて満たす実装にしてください」とプロンプトに含めると、生成時点からテストケースを考慮したコードになりやすいです。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
チェックリストの①〜④はすべてやらないといけませんか？最低限どれが重要ですか？
最低限は①×ボタンで閉じる確認と⑤Consoleエラーなしの2項目です。時間があれば②背景クリックと③再オープン確認を追加すると実用上の不具合をほぼカバーできます。
モーダルを閉じるとページが一瞬白くなります
モーダルを閉じるJSが`location.reload()`をセットで呼んでいる可能性があります。閉じる関数のコードを確認し、不要な`reload`を削除してください。AIがリセット処理として自動的に挿入することがあります。
複数のモーダルがある場合、チェック項目は倍になりますか？
基本的には各モーダルに対してチェック①③を実施する必要があります。ただし閉じるロジックを共通関数にまとめてある場合は、代表の1つを確認すれば十分なことが多いです。