ボタンコード生成用
アイコンだけの丸ボタン
お気に入りや共有に使う、丸いアイコンボタン。
用途・説明
文字を持たない、丸いアイコンだけのボタンを作ります。お気に入り、共有、ブックマーク、閉じるなど、カードや記事の端に置く小さな操作に向いています。選択中（お気に入り済みなど）の見た目も用意します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[アイコン]- 例：ハート（お気に入り）、共有、ブックマーク
[ボタンの説明]- スクリーンリーダー向けのラベル。例：お気に入りに追加
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「アイコンだけの丸ボタン」を実装してください。 ## 表示内容 - アイコン：[アイコン] - ボタンの説明（ラベル）：[ボタンの説明] ## デザイン - 直径 44px の円 - 未選択：背景 #FFFFFF、枠線 1px solid #DCE4F0、アイコン #5F6D84 - 選択中：背景 #1463F0、枠線も #1463F0、アイコン #FFFFFF - アイコン：20px 四方、線の太さ 1.8px ## 状態 - hover（未選択）：枠線とアイコンを #1463F0 に - active：0.92倍に縮小 - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - 選択の切り替え時に、アイコンを軽く弾ませる（200ms） ## アクセシビリティ - <button type="button"> で実装し、aria-label に [ボタンの説明] を入れる - 切り替え式の場合は aria-pressed で選択中かどうかを伝える - アイコンは装飾として aria-hidden="true" を付ける - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・直径・アイコンの大きさをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。