ボタンコード生成用
大・中・小のボタンサイズセット
場面に合わせて使い分ける、3つの大きさをそろえて。
用途・説明
同じデザインのボタンを、大・中・小の3サイズでそろえて作ります。ファーストビューには大、フォームには中、表やカードのなかには小、というように使い分けるための基本セットです。高さ・文字サイズ・余白を一定の比率で決めるので、サイト全体でボタンの見た目がばらつきません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：申し込む
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはデザインシステムに詳しいフロントエンドエンジニアです。 以下の条件で「大・中・小のボタンサイズセット」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言]（3サイズとも同じ文言で並べる） ## サイズ - 大：高さ 56px、文字 17px、左右padding 32px - 中：高さ 44px、文字 15px、左右padding 24px - 小：高さ 32px、文字 13px、左右padding 16px ## デザイン - 背景 #1463F0、文字 #FFFFFF、font-weight 700、角丸 999px - サイズが変わっても、角丸・文字の太さ・色は変えない - 3つを横に並べ、下端ではなく中央でそろえる。間隔 16px ## 状態 - hover：背景を一段暗く - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - disabled：背景 #E2E8F0、文字 #8A96AA ## アクセシビリティ - 小サイズは見た目の高さが 32px でも、タップ領域が 44×44px になるよう透明な余白を広げる - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - スマホでは小サイズを主要な操作に使わない、という注意をコメントに書く ## 出力形式 - [使用技術]のコードを1つ出力 - サイズは class（または props）の切り替えだけで変えられるようにし、数値はCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。