フォーム・お問い合わせコード生成用
画面に追従する相談ボタン
右下に浮かぶボタンから、いつでも相談できる。
用途・説明
どのページでも画面の右下に表示される、相談用のボタンを作成します。押すと小さなパネルが開き、フォーム・電話・チャットなどの連絡方法を選べます。問い合わせを増やしたいサービスサイトや店舗サイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[呼びかけ文]- 例：ご質問はお気軽にどうぞ
[連絡方法]- 例：フォームで相談、電話する、LINEで相談
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「画面に追従する相談ボタン」を実装してください。 ## 表示内容 - 丸いボタン（吹き出しのアイコン） - ボタンの上に、呼びかけの吹き出し：[呼びかけ文]（最初だけ表示） - 押すと開くパネル：連絡方法（[連絡方法]）のリンク一覧 ## レイアウト・デザイン - ボタン：直径 56px、背景 #1463F0、アイコン #FFFFFF。画面の右下に固定（右 16px、下 16px、safe-area-inset-bottom を加える） - 呼びかけの吹き出し：背景 #FFFFFF、枠線 1px solid #E2E8F0、13px、font-weight 700、色 #1B2A44、うすい影 - パネル：幅 300px、背景 #FFFFFF、角丸 16px、影。ボタンの上に開く - 連絡方法の行：高さ 52px、15px、色 #1B2A44、左にアイコン（#1463F0） ## 動作 - ボタンでパネルを開閉する。開いているあいだ、アイコンを「×」に変える - パネルの外を押す、または Esc キーで閉じる - 呼びかけの吹き出しは、閉じたら再表示しない - フッターやほかの固定要素と重ならないようにする ## アクセシビリティ - ボタンは button 要素、aria-expanded と aria-controls、aria-label="お問い合わせ方法を開く" を付ける - 開いたらパネル内の最初のリンクへ、閉じたらボタンへフォーカスを移す - ボタンに隠れて読めない・押せない要素が出ないよう、ページ下部に余白を確保する - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 連絡方法を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。