---
title: "ボタンがクリックできない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでボタンがクリックできなくなる問題をプロンプトで防ぐ方法を解説。AIへの指示文の書き方から、生成後の確認コマンドまでを実践的にまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/button-not-clickable-ai-prompt"
markdown: "https://giga-site.com/articles/button-not-clickable-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# ボタンがクリックできない問題をAI生成HTMLで防ぐプロンプト

AIにHTMLを生成させると、ボタンが視覚的には存在するのにクリックできない問題がしばしば発生します。`disabled`属性の残留、JSの外部依存、z-indexの競合が主な原因であり、プロンプトの書き方を工夫することで生成段階からこれらを防ぐことができます。

> Source HTML: https://giga-site.com/articles/button-not-clickable-ai-prompt
> Article index: https://giga-site.com/articles/index.md

## よくある原因

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が設定された要素）を特定します。

## 関連記事

- [ボタンがクリックできないときの原因と直し方](https://giga-site.com/articles/button-not-clickable-fix/index.md)
- [ボタンがクリックできないときに共有前に確認するチェックリスト](https://giga-site.com/articles/button-not-clickable-checklist/index.md)
- [ボタンがクリックできないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/button-not-clickable-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [SVGが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/svg-not-showing-ai-prompt/index.md)
- [WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/webp-not-showing-ai-prompt/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ボタンがクリックできない問題をAI生成HTMLで防ぐプロンプト",
  "description": "AI生成HTMLでボタンがクリックできなくなる問題をプロンプトで防ぐ方法を解説。AIへの指示文の書き方から、生成後の確認コマンドまでを実践的にまとめます。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/button-not-clickable-ai-prompt",
  "url": "https://giga-site.com/articles/button-not-clickable-ai-prompt",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "インラインonclickを使うとセキュリティリスクはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLを静的ファイルとして配信する場合、XSSのリスクは外部からのユーザー入力が混入するケースに限られます。AIが生成した静的デモHTMLではインラインonclickのセキュリティリスクはほぼ無視できます。"
      }
    },
    {
      "@type": "Question",
      "name": "AIに再生成を依頼しても同じ問題のコードが出てきます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "「前回のコードに`disabled`属性があり動作しませんでした。今回はdisabledを使わず、ボタンは最初からクリック可能な状態にしてください」と具体的な問題を伝えることで改善します。抽象的な指示より具体的なフィードバックが効果的です。"
      }
    },
    {
      "@type": "Question",
      "name": "z-indexが原因の場合、どの要素のz-indexを変えればいいか素早く特定できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "DevToolsのElementsタブで問題のボタンを右クリック→「Inspect」して、StylesパネルのComputedで`z-index`を確認します。次に親要素をさかのぼって`stacking context`を作っている要素（positionとz-indexが設定された要素）を特定します。"
      }
    }
  ]
}
```