ボタンコード生成用
丸みのあるCTAボタン
押したくなる、やわらかいピル型のボタン。
用途・説明
申し込みや資料請求など、ページで一番押してほしい行動へ誘導するCTAボタンを1つ作ります。ホバー・フォーカス・無効状態まで含めて出力されます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で、丸みのあるCTAボタンを1つ実装してください。 ## 目的 - ページ内の主要な行動（申し込み・購入など）へ迷わず誘導する ## 表示内容 - ボタン文言：[ボタン文言]（右側に→の矢印アイコン） ## デザイン - 形：ピル型（border-radius: 9999px） - 高さ：52px（スマホも同じ）、左右padding：28px - 文字：16px、font-weight 700、letter-spacing 0.04em - 背景 #1463F0、文字 #FFFFFF、控えめな影（0 4px 12px を メインカラーの透明度20%で） - スマホでは幅100%にする ## 状態 - hover：背景を10%暗く、translateY(-1px) - active：translateY(0)、影を弱める - focus-visible：3px のアウトライン（#1463F0の40%透明度）を2pxオフセットで表示 - disabled：透明度50%、カーソルは not-allowed ## アクセシビリティ - リンク遷移なら <a>、送信なら <button> を使う。どちらで実装したかを明記する - 矢印アイコンは aria-hidden="true" - 文字と背景のコントラスト比4.5:1以上。満たさない場合は色の調整案を出す - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]で、このボタン1つぶんのコードを出力 - 最後に、色・サイズを変更するときに触る箇所を箇条書きで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。