ボタンコード生成用
枠線のサブボタン
メインのボタンの隣に置く、控えめな2番手。
用途・説明
背景を塗らず、枠線と文字色だけで見せるボタンを1つ作ります。「資料を見る」「詳しく見る」など、メインのCTAほどは目立たせたくない行動に使います。塗りのボタンと並べたときに高さが揃う指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：資料を見る
[角丸]- 例：9999px（ピル型）、8px
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「枠線のサブボタン」を1つ実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] ## デザイン - 背景 #FFFFFF、文字 #1463F0、枠線 1.5px solid #1463F0 - 角丸：[角丸] - 高さ：52px、左右padding：28px - 文字：16px、font-weight 700、letter-spacing 0.04em、折り返さない - 枠線の太さを含めて高さが 52px になるようにする（塗りのボタンと並べたときに揃うように） ## 状態 - hover：#1463F0の8%の背景を敷く - active：背景を#1463F0の14%に - focus-visible：2px のアウトラインを外側に 2px 離して表示 - disabled：枠線と文字を #9AA5B8 に、カーソルは not-allowed ## アクセシビリティ - リンク遷移なら <a>、操作なら <button type="button"> を使う。どちらで実装したかを明記する - 文字・枠線と背景のコントラスト比は 4.5:1 以上。満たさない場合は色の調整案を出す - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]で、このボタン1つぶんのコードを出力 - 色・角丸・高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。