モーダル・通知・タブコード生成用
ピル型の切り替えタブ
「月払い／年払い」など、2〜3択を切り替える。
用途・説明
丸みのある枠のなかで、白いつまみが動くピル型の切り替えタブ（セグメントコントロール）を作成します。「月払い／年払い」「日／週／月」など、2〜4個の選択肢から表示を切り替えるときに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[選択肢のリスト]- 例：月払い、年払い
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ピル型の切り替えタブ」を実装してください。 ## 表示内容 - 選択肢：[選択肢のリスト] - 切り替えた結果を表示する、サンプルのエリア ## レイアウト - 選択肢を、1つの丸い枠のなかに横に並べる - すべての選択肢を、同じ幅にする（いちばん長い文字に合わせる） - 幅は内容に合わせる（inline-flex）。スマホで収まらないときは、幅100%にして等分する ## デザイン - 外側の枠：背景は #1463F0 の12%の淡い色、角丸 999px、padding 4px - 選択肢：高さ 40px、左右padding 24px、文字 14px・font-weight 700・色 #5F6D84 - 選択中のつまみ：背景 #FFFFFF、角丸 999px、影 0 1px 4px rgba(27,42,68,0.12)。文字は #1463F0 - 選択肢にラベルを添えられるようにする（例：「年払い」の右に「2か月分お得」。11px、背景 #1463F0、文字 #FFFFFF、角丸 999px） - 角ばった見た目のものも用意する（外側の角丸 10px、つまみの角丸 7px） ## 動作 - 選択中のつまみは、1つの要素を動かして表現する。切り替えると、0.2秒でなめらかに横へ移動する - 切り替えたら、選んだ値をコールバックで渡す ## アクセシビリティ - 内容のパネルを切り替える場合は、タブ（role="tablist" / "tab"）として実装する - 表示の方法や設定を切り替える場合は、ラジオボタン（role="radiogroup" / "radio"、aria-checked）として実装する。どちらで実装したかをコメントで説明する - 左右の矢印キーで選択を移動できる - グループに aria-label を付ける（例：「お支払いの周期」） - つまみの動きは prefers-reduced-motion で無効化 - タップ領域は高さ 44px 以上（見た目が 40px の場合は、余白で補う） ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。