モーダル・通知・タブコード生成用
通知バッジ
ベルやアイコンの角に、未読の数を小さく表示。
用途・説明
ベルのアイコンやアバター、タブの文字に添える通知バッジを作成します。未読の件数を表示するもの、点だけのもの、「NEW」のラベルの3種類を用意します。件数が増えても崩れない形にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使う場所]- 例：ヘッダーのベルのアイコン、タブの文字の横
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「通知バッジ」を実装してください。 ## 作るもの [使う場所] で使う、以下の3種類のバッジ。 1. 件数のバッジ：アイコンの右上に、未読の件数を表示する 2. 点のバッジ：アイコンやアバターの右上に、小さな点だけを表示する 3. ラベルのバッジ：文字の右に、件数または「NEW」を表示する ## デザイン - 件数のバッジ：高さ 18px、最小の幅 18px、左右padding 5px、角丸 999px、背景 #C9343A、文字 #FFFFFF・11px・font-weight 700 - 件数のバッジのまわりに、背景と同じ色のふち（2px）を付けて、アイコンから浮かせる - 点のバッジ：10px の円、背景 #1463F0、同じくふち（2px）を付ける - ラベルのバッジ（件数）：高さ 20px、左右padding 8px、角丸 999px、背景 #1463F0、文字 #FFFFFF・12px・font-weight 700 - ラベルのバッジ（NEW）：背景は #1463F0 の9%の淡い色、文字 #1463F0 - ベルのアイコンを入れるボタン：40px の円、背景 #FFFFFF、枠線 1px solid #E2E8F0 ## 動作 - 件数が0のときは、バッジを表示しない - 件数が100以上のときは「99+」と表示する - 件数が増えたときに、バッジが1度だけ小さく弾む（0.3秒） ## 位置 - 件数と点のバッジは、アイコンの右上の角に中心が来るように置く（親を position: relative にする） - 件数の桁が増えたら、左ではなく右に広がるようにする ## アクセシビリティ - バッジの数字は、アイコンのボタンの aria-label に含める（例：「お知らせ、未読3件」）。バッジ自体は aria-hidden="true" - 点のバッジは、「未読あり」を読み上げ用の文字で伝える - 赤い色だけに頼らず、数字や文字で意味が伝わるようにする - 弾む動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 3種類を並べたサンプルも一緒に出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。