ボタンコード生成用
セグメントコントロール
2〜4つの選択肢から1つを選ぶ、つながったボタン。
用途・説明
「月払い／年払い」「リスト／グリッド」「日／週／月」のように、少ない選択肢から1つを選ぶための、ひとつながりのボタンを作ります。選ばれている項目が白く浮き上がる見た目で、いまの状態がひと目で分かります。料金表の切り替えや、一覧の表示切り替えに使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[選択肢]- 2〜4個。例：日、週、月
[最初に選ぶ項目]- 例：週
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「セグメントコントロール」を実装してください。 ## 表示内容 - 選択肢：[選択肢] - 最初に選ばれている項目：[最初に選ぶ項目] ## デザイン - 外枠：背景 #E3EAF6、padding 4px、角丸 999px、高さ 40px - 各項目：横幅をそろえる、文字 14px、色 #5F6D84、角丸 999px - 選択中の項目：背景 #FFFFFF、文字 #1463F0、font-weight 700、影 0 1px 3px rgba(27, 42, 68, 0.12) - 選択が変わるとき、白い背景が 0.2秒で横にすべるように移動する ## 動作 - クリックで選択を切り替える。同時に選べるのは1つだけ - 選択が変わったら、コールバック（またはイベント）で値を受け取れるようにする ## アクセシビリティ - role="radiogroup" と role="radio"（または input type="radio" と label）で実装する - 左右の矢印キーで選択を移動できる - 選択中かどうかを aria-checked で伝える。色だけに頼らず、太字でも区別する - focus-visible のスタイルを用意する - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 選択肢を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。