ボタンコード生成用
角丸の四角い塗りボタン
フォームや管理画面で使いやすい、標準の塗りボタン。
用途・説明
角を少しだけ丸めた、四角い塗りのボタンを1つ作ります。フォームの送信、設定の保存、管理画面の操作など、ピル型ほど主張させたくない場面の基本のボタンとして使えます。入力欄と並べたときに高さがそろう指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：送信する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「角丸の四角い塗りボタン」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] ## デザイン - 背景 #1463F0、文字 #FFFFFF、枠線なし - 角丸：8px - 高さ：48px、左右padding：24px、最小幅：120px - 文字：15px、font-weight 700、letter-spacing 0.04em、折り返さない - 影は付けない（フラットな見た目） ## 状態 - hover：背景を #1463F0 より一段暗い色に - active：さらに一段暗くする - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - disabled：背景 #E2E8F0、文字 #9AA5B8、カーソルは not-allowed ## アクセシビリティ - リンク遷移なら <a>、操作なら <button type="button"> を使う。どちらで実装したかを明記する - 白い文字と #1463F0 のコントラスト比は 4.5:1 以上。満たさない場合は色の調整案を出す - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・角丸・高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。