よくある原因
AIがボタンを生成する際、フォームのバリデーション想定で`disabled`属性を初期状態にセットし、バリデーションを通過したときに外部JSで`disabled`を外す設計にすることがあります。外部JSが読み込まれないと、ボタンはずっとグレーアウトしたままです。
レスポンシブデザインのためにメニューをオーバーレイする要素を生成した場合、そのオーバーレイのz-indexが高いままになってボタンの上に重なり、クリックを横取りするパターンも多いです。AIは各要素を独立して生成するため、全体としてのz-indexの整合性まで考慮しにくい傾向があります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
生成されたHTMLを受け取ったらまず`grep -n 'disabled'`を実行し、`disabled`属性を持つ要素をリストアップします。デモ用途であれば全て`disabled`を削除します。次に`grep -n 'pointer-events'`でpointeventsの設定箇所も確認してください。
JSがインラインで書かれているか外部ファイル参照かを確認します。外部ファイル参照（`<script src="...">`)がある場合、そのファイルが同梱されているか、CDNのURLが有効かを確認します。可能であればJSをHTMLにインライン化して依存をなくすようAIに再生成を依頼します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手から「このボタン押せません」と報告があった場合、「ブラウザのF12キーを押してConsoleタブを開いてください。赤いエラーが出ていますか？」と確認します。赤いエラーがあれば画面キャプチャを共有してもらい、こちらでAIに修正プロンプトを送ります。
相手がiPhoneユーザーでConsoleが見られない場合は、Safariのデバッグ機能をMacのSafariから有効化する方法を案内するか、Chrome for iOSで試してもらう方法を伝えます。どちらも難しい場合は「別のデバイスでも同じですか？」と聞くだけで環境依存かHTMLの問題かを切り分けられます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AIへのプロンプトに「ボタンはすべて`<button type="button">`タグで実装し、`disabled`属性は一切使わないこと。クリックイベントはinline onclickで書き、外部JSファイルに依存しないこと。z-indexは最大でも100以下に収め、オーバーレイ要素は使わないこと」と制約を加えます。
生成後の自動チェックとして、`grep -E 'disabled|pointer-events: none|z-index: [1-9][0-9]{2,}'` を実行して引っかかった行を確認する手順を定着させます。CI環境があればlintルールに組み込むと手動確認の手間を省けます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
インラインonclickを使うとセキュリティリスクはありますか？
HTMLを静的ファイルとして配信する場合、XSSのリスクは外部からのユーザー入力が混入するケースに限られます。AIが生成した静的デモHTMLではインラインonclickのセキュリティリスクはほぼ無視できます。
AIに再生成を依頼しても同じ問題のコードが出てきます
「前回のコードに`disabled`属性があり動作しませんでした。今回はdisabledを使わず、ボタンは最初からクリック可能な状態にしてください」と具体的な問題を伝えることで改善します。抽象的な指示より具体的なフィードバックが効果的です。
z-indexが原因の場合、どの要素のz-indexを変えればいいか素早く特定できますか？
DevToolsのElementsタブで問題のボタンを右クリック→「Inspect」して、StylesパネルのComputedで`z-index`を確認します。次に親要素をさかのぼって`stacking context`を作っている要素（positionとz-indexが設定された要素）を特定します。