ボタンコード生成用
メインとサブの2連ボタン
塗りと枠線のボタンを並べて、優先順位を見せる。
用途・説明
塗りのメインボタンと枠線のサブボタンを横に並べたセットを作ります。ファーストビューの「無料ではじめる／資料を見る」、確認画面の「保存する／キャンセル」など、2つの行動の優先順位を見た目で伝えたい場面に使います。スマホでは縦に積む指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メインのボタン文言]- 例：無料ではじめる
[サブのボタン文言]- 例：資料を見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「メインとサブの2連ボタン」を実装してください。 ## 表示内容 - メインボタン：[メインのボタン文言] - サブボタン：[サブのボタン文言] ## デザイン - メイン：背景 #1463F0、文字 #FFFFFF - サブ：背景 #FFFFFF、文字 #1463F0、枠線 1.5px solid #1463F0 - どちらも高さ 52px、左右padding 28px、角丸 9999px、文字 16px・font-weight 700 - ボタンの間隔は 12px。2つの高さと文字の位置をそろえる - PC：横並び（メインが左）。スマホ（480px未満）：縦に積み、どちらも全幅。メインを上にする ## 状態 - hover：メインは背景を一段暗く、サブは #1463F0 の8%の背景を敷く - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - disabled：それぞれ淡いグレーで表示 ## アクセシビリティ - それぞれ、リンク遷移なら <a>、操作なら <button type="button"> を使う - キーボードの Tab の順番は、メイン → サブ の順にする - 文字・枠線と背景のコントラスト比は 4.5:1 以上 - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・角丸・高さ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。