ボタンコード生成用
削除用の注意ボタン
取り消せない操作を、赤系の色ではっきり区別する。
用途・説明
データの削除や退会など、取り消せない操作のためのボタンを1つ作ります。通常のボタンと見分けがつくよう赤系の配色にしつつ、ふだんは枠線だけにして目立ちすぎないようにしています。押し間違いを防ぐための置き方も指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 何を消すかが分かる言葉に。例：アカウントを削除する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「削除用の注意ボタン」を1つ実装してください。 ## 表示内容 - ボタン文言：[ボタン文言]（左側にゴミ箱のアイコン） ## デザイン - 通常時：背景 #FFFFFF、文字 #C9343A、枠線 1px solid #C9343A - 高さ 44px、左右padding 20px、角丸 8px - 文字：15px、font-weight 700 - アイコン：16px の線画（インラインSVG）、文字との間隔 6px ## 状態 - hover：背景を #C9343A、文字とアイコンを #FFFFFF に反転 - active：背景を #C9343A より一段暗い色に - focus-visible：#C9343A の 2px のアウトラインを外側に 2px 離して表示 - disabled：枠線と文字を #9AA5B8 に、カーソルは not-allowed ## 置き方の注意（コメントで説明） - 「保存」などの主要なボタンのすぐ隣に置かず、離して配置する - 押したらすぐ実行せず、確認のステップを挟む前提にする（確認ダイアログ自体は今回は実装しない） ## アクセシビリティ - button 要素（type="button"）で実装する - 色だけに頼らず、文言とアイコンで削除の操作だと分かるようにする - アイコンは aria-hidden="true" - 文字と背景のコントラスト比は 4.5:1 以上（通常時・hover時の両方） ## 出力形式 - [使用技術]で、このボタン1つぶんのコードを出力 - 色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。