フローティングCTA（固定ボタン）
このパーツは、スクロールしても画面の右下に貼り付いたまま表示され続ける フローティングCTAボタン です。 position:fixed で bottom と right を指定し、本文の上に常に浮かせています。
このパーツの使いどころと実装ポイント
このパーツは、スクロールしても画面の右下に貼り付いたまま表示され続けるフローティングCTAボタンです。position:fixed で bottom と right を指定し、本文の上に常に浮かせています。封筒アイコンのインライン SVG とラベルを横並びにし、ホバーで少し浮き上がる動き（translateY）と影の変化で押せることを伝えます。
向いている場面
記事や事例が長く、最後まで読まないと問い合わせ先にたどり着けないオウンドメディア・サービスサイト、予約や見積りへ常に誘導したい店舗・クリニック・士業に向きます。読了を待たずいつでも行動できる導線になります。
カスタマイズと注意点
- リンク先を電話番号（
tel:）や LINE、フォームに差し替えるだけで用途が変わります - 画面幅 480px 以下ではラベルを隠しアイコンだけの円形にして、本文を邪魔しません
固定要素はページ最下部のフッターや他のボタンと重なりやすいので、z-index と余白を確認してください。アイコンには aria-hidden を付け、リンク自体に分かるテキストを残すとアクセシビリティが保てます。
よくある質問
スマホでもボタンを表示し続けて大丈夫ですか？
問題ありませんが、画面が狭いと本文に重なりやすくなります。このパーツは幅480px以下でラベルを隠してアイコンだけの円形に切り替わるため、表示面積を抑えつつ常時表示できます。
ボタンから電話発信や問い合わせフォームに飛ばせますか？
飛ばせます。リンクのhref属性を tel:電話番号 にすればタップで発信、フォームのURLにすれば問い合わせページへ遷移します。LINEの友だち追加リンクなどに変えることも可能です。