ボタンコード生成用
件数バッジ付きのアイコンボタン
ベルやカートの右上に、新着の件数を小さく表示。
用途・説明
お知らせのベル、カート、メッセージなどのアイコンボタンの右上に、件数を示す小さな丸いバッジを重ねて作ります。ヘッダーの右側やアプリの下部メニューに置いて、新着があることをさりげなく伝えられます。0件のときは隠す、多いときは「99+」にする、といった表示の決まりも含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[アイコンの種類]- 例：ベル、カート、メッセージ
[件数]- 例：3
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「件数バッジ付きのアイコンボタン」を実装してください。 ## 表示内容 - アイコン：[アイコンの種類]（線のアイコン、24px） - バッジに表示する件数：[件数] ## デザイン - ボタン：44×44px、角丸 50%、背景は透明、アイコンの色 #1B2A44。hover で背景 #F1F5FC - バッジ：最小幅 18px、高さ 18px、角丸 999px、背景 #1463F0、文字 #FFFFFF・11px・font-weight 700 - バッジの位置：アイコンの右上に少し重ねる（top 4px、right 4px） - バッジのまわりに 2px の白いふち（box-shadow: 0 0 0 2px #FFFFFF）を付け、アイコンから浮かせる ## 表示の決まり - 0件のときはバッジを表示しない - 100件以上は「99+」と表示する - 件数ではなく「新着あり」だけを伝える、数字なしの小さな丸（8px）の例も併記する ## アクセシビリティ - button 要素の aria-label に「お知らせ（3件の未読）」のように、件数まで含める - バッジ自体は aria-hidden="true" にして、二重に読み上げられないようにする - 件数が変わったことを伝える必要がある場合の、aria-live の使い方をコメントで補足する - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 件数は props（または data 属性）で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。