ボタンコード生成用
絞り込み用のチップボタン
選択中だけ色が付く、小さなピル型のボタン群。
用途・説明
カテゴリやタグで一覧を絞り込むための、小さなピル型のボタン群を作ります。記事一覧、商品一覧、実績紹介などで「すべて／デザイン／開発」のように切り替える場面に使います。選択中のチップだけが塗りつぶされます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[チップの項目]- 例：すべて、デザイン、開発、マーケティング
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「絞り込み用のチップボタン」を実装してください。 ## 表示内容 - チップの項目：[チップの項目] - 最初は先頭の項目を選択中にする ## デザイン - 未選択：背景 #FFFFFF、文字 #47566E、枠線 1px solid #DCE4F0 - 選択中：背景 #1463F0、文字 #FFFFFF、枠線も #1463F0、font-weight 700 - 高さ：36px、左右padding：16px、角丸 9999px、文字 14px - チップの間隔は 8px。入りきらない場合は折り返す（スマホで横スクロールにする案も併記） ## 状態 - hover（未選択）：枠線と文字を #1463F0 に - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - 選択の切り替えは 150ms でなめらかに ## アクセシビリティ - 各チップは <button type="button"> で実装し、選択中のものに aria-pressed="true" を付ける - 選択中かどうかを、色だけでなく太字でも区別する - 見た目の高さは36pxのまま、上下に余白を足してタップ領域を44px確保する - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・高さ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。