ボタンコード生成用
アイコン付きのボタン
文字の左にアイコンを添えて、何が起きるかを伝える。
用途・説明
文字の左にアイコンを添えた塗りのボタンを1つ作ります。「ダウンロード」「カートに入れる」「共有する」など、押すと何が起きるかをアイコンで補いたい操作に向いています。アイコンと文字の位置がずれない指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：資料をダウンロード
[アイコン]- 例：ダウンロード（下向きの矢印）、カート、共有
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「アイコン付きのボタン」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] - アイコン：[アイコン] ## デザイン - 背景 #1463F0、文字とアイコン #FFFFFF - 角丸：9999px（ピル型） - 高さ：52px、左padding：24px、右padding：28px（アイコンのぶん左を少し詰める） - アイコン：20px 四方、線の太さ 2px、文字との間隔 8px - 文字：16px、font-weight 700、折り返さない ## 状態 - hover：背景を一段暗い色に - active：0.98倍に縮小 - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - disabled：背景 #E2E8F0、文字とアイコン #9AA5B8 ## アクセシビリティ - リンク遷移なら <a>、操作なら <button type="button"> を使う。どちらで実装したかを明記する - アイコンはインラインSVGで実装し、stroke は currentColor にする - アイコンは装飾なので aria-hidden="true" を付ける（ボタン文言だけで意味が通じること） - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・アイコンの大きさ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。