ボタンコード生成用
押せない状態のボタン
まだ押せない理由まで伝わる、無効状態のボタン。
用途・説明
入力が終わるまで押せない送信ボタンなど、無効（disabled）状態のボタンを作ります。ただ薄くするだけでなく、「なぜ押せないのか」を近くに表示し、条件を満たしたら有効になる切り替えまで含めています。フォームの送信、利用規約への同意、在庫切れの商品などに使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：次へ進む
[押せない理由]- 例：必須項目を入力すると進めます
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「押せない状態のボタン」と、有効な状態への切り替えを実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] - 押せない理由（ボタンの下に表示）：[押せない理由] ## デザイン - 無効時：背景 #E2E8F0、文字 #8A96AA、影なし、カーソルは not-allowed - 有効時：背景 #1463F0、文字 #FFFFFF - 高さ：48px、左右padding：28px、角丸：999px、文字 15px・font-weight 700 - 押せない理由：12px、色 #5F6D84、ボタンの下 8px。有効になったら非表示にする - 無効 → 有効の切り替えは、色を 0.2秒かけて変化させる ## 状態 - 無効時は hover しても見た目を変えない - 有効時の hover・active・focus-visible も用意する ## アクセシビリティ - disabled 属性ではなく aria-disabled="true" を使い、フォーカスできる状態を保つ（クリック時の処理はJavaScriptで止める） - 押せない理由は aria-describedby でボタンと関連付ける - 色だけで無効を伝えない（理由の文章を必ず表示する） - 無効時の文字と背景のコントラストが低くなりすぎないよう、3:1 以上を目安にする ## 出力形式 - [使用技術]のコードを1つ出力 - 無効・有効を切り替えるサンプル（チェックボックスに同意すると有効になる）を付ける
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。