ボタンコード生成用
メニュー付きの分割ボタン
よく使う操作はそのまま、ほかの操作は矢印から。
用途・説明
左側を押すとメインの操作、右側の矢印を押すとほかの選択肢が開く、分割ボタンを作ります。「保存する／下書き保存／複製して保存」「ダウンロード（PNG／JPEG／PDF）」のように、似た操作をひとつにまとめたい管理画面やツールに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メインの操作]- 例：保存する
[ほかの操作]- 例：下書きとして保存、複製して保存
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「メニュー付きの分割ボタン」を実装してください。 ## 表示内容 - メインの操作（左側）：[メインの操作] - メニューに入れる操作（右側の矢印から開く）：[ほかの操作] ## デザイン - 全体：高さ 44px、背景 #1463F0、文字 #FFFFFF、角丸 8px - 左側：左右padding 20px、文字 15px・font-weight 700 - 右側：幅 44px、下向きの矢印アイコン（16px）。左側との間に rgba(255, 255, 255, 0.35) の縦線 1px - メニュー：ボタンの下 6px、右端をそろえる。背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、影 0 8px 24px rgba(27, 42, 68, 0.12) - メニュー項目：高さ 40px、文字 14px・色 #1B2A44、hover で背景 #F1F5FC ## 動作 - 矢印を押すとメニューが開閉する。メニューの外をクリック、または Esc キーで閉じる - メニューの項目を選ぶと、その操作を実行してメニューを閉じる ## アクセシビリティ - 左右は別々の button 要素にする。矢印側には aria-label="ほかの保存方法" のようなラベルと、aria-haspopup="menu"・aria-expanded を付ける - メニューは role="menu"、項目は role="menuitem"。上下の矢印キーで移動できる - メニューを閉じたら、フォーカスを矢印ボタンに戻す - focus-visible のスタイルを左右それぞれに用意する ## 出力形式 - [使用技術]のコードを1つ出力 - メニューの項目を配列で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。