ボタンコード生成用
フローティングボタン
画面の右下に浮かぶ、丸いアクションボタン。
用途・説明
画面の右下に固定して表示する、丸いボタン（FAB）を1つ作ります。投稿の作成、チャットを開く、ページの先頭へ戻るなど、どこまでスクロールしてもすぐ使いたい操作に向いています。コンテンツやフッターに重なりすぎない指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[アイコン]- 例：プラス（新規作成）、チャット、上向きの矢印
[ボタンの説明]- スクリーンリーダー向けのラベル。例：新しく投稿する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「フローティングボタン」を実装してください。 ## 表示内容 - アイコン：[アイコン] - ボタンの説明（ラベル）：[ボタンの説明] ## デザイン - 直径 56px の円、背景 #1463F0、アイコン #FFFFFF（24px 四方、線の太さ 2px） - 位置：画面の右下に固定（position: fixed）。右 16px、下 16px。iPhoneのホームバーに重ならないよう safe-area-inset-bottom を加える - 影：#1463F0 の35%の色で、下方向にやわらかく - ほかのコンテンツより手前に表示する（z-index） ## 状態 - hover：背景を一段暗い色に、影を少し大きく - active：0.94倍に縮小 - focus-visible：#1463F0 の 2px のアウトラインを外側に 3px 離して表示 - ページの最下部では、フッターのリンクに重ならないようにする方法を併記する ## アクセシビリティ - <button type="button"> で実装し、aria-label に [ボタンの説明] を入れる - アイコンは装飾として aria-hidden="true" を付ける - ボタンに隠れて読めない・押せない要素が出ないよう、ページ下部に余白を確保する - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・直径・位置をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。