ボタンコード生成用
数が増えるいいねボタン
押すとハートが色づき、数字がひとつ増える。
用途・説明
ハートのアイコンと数字を並べた「いいね」ボタンを作ります。押すとハートが塗りつぶされて数字が1増え、もう一度押すと元に戻ります。ブログ記事、作品の一覧、レビュー、お気に入り登録などに使えます。押した瞬間の小さな動きで、反応したことが伝わります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[最初の数]- 例：128
[ラベル]- 読み上げ用の名前。例：いいね
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「数が増えるいいねボタン」を実装してください。 ## 表示内容 - ハートのアイコンと数字（最初の数：[最初の数]） - 読み上げ用のラベル：[ラベル] ## デザイン - 高さ 40px、左右padding 16px、角丸 999px、アイコンと数字の間隔 8px - 押す前：背景 #FFFFFF、枠線 1px solid #DCE4F0、アイコンは線だけ（色 #5F6D84）、数字は #5F6D84 - 押したあと：枠線と数字が #1463F0、背景は #1463F0 の9%の淡い色、アイコンは #1463F0 で塗りつぶす - 数字：14px、font-weight 700、font-variant-numeric: tabular-nums（桁が変わっても幅がぶれない） ## 動作 - 押すと数字が1増え、もう一度押すと1減る - 押した瞬間、ハートが 1 → 1.25 → 1 倍に 0.3秒でふくらむ - 1,000以上は「1.2k」のように短く表示する関数を用意する ## アクセシビリティ - button 要素に aria-pressed を付け、押した状態を伝える - aria-label は「[ラベル]（128件）」のように、数字も含めて読み上げられるようにする - 色だけでなく、アイコンの塗りの有無でも状態を区別する - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - サーバーへの保存はコールバックで受け取れるようにし、通信部分は含めない
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。