追従ウィジェット

追従ウィジェットに分類されるWeb表現技法12件。追従目次（現在地ハイライト）、出現する下端CTAバー、戻る↑ボタン（進捗リング付き）、縦型SNSシェアレールなど。ライブデモとコピーできるコード付き。

本文の横に固定した目次が、スクロール位置に応じて現在の見出しを自動でハイライトします。長文記事やドキュメントの回遊性を高める scrollspy の定番。クリックで該当位置へジャンプもできます。

少しスクロールすると画面下からスッと現れる追従CTAバー。価格や訴求と申し込みボタンを常に手の届く位置に置けます。ECやサービス、予約導線で離脱を防ぐ常套手段。閉じることも可能です。

一定量スクロールすると現れる「トップへ戻る」ボタン。周囲のリングが読み進み度を示し、押すと最上部へ滑らかに戻ります。長いページの定番ユーティリティをひとつにまとめました。

画面左端に縦並びで固定したSNSシェアの帯。ホバーでアイコンが横に伸び、ラベルが現れます。記事やキャンペーンページで拡散導線を常時見せておきたいときに有効です。

右下に固定した丸ボタンを押すと、関連アクションが扇状に開くフローティングメニュー（FAB）。問い合わせ・電話・トップへ等をまとめられます。モバイルサイトやアプリ風UIで重宝します。

画面右に縦並びのドットを固定し、表示中のセクションを示す1ページナビ。ホバーでセクション名が現れ、クリックで移動します。フルスクリーン構成のLPやポートフォリオに似合います。

画面下に固定し、Cookie利用への同意・設定・拒否を促すバナー。GDPR等への配慮で多くのサイトに必須の要素です。同意で畳まれ、設定で詳細選択へ。控えめな出現で本文を邪魔しません。

右下に常駐するチャットボタンをクリックすると、ミニチャット窓が開く問い合わせウィジェット。よくある質問や有人サポートへの入口として、コンバージョンや満足度の向上に使われます。

商品ページをスクロールすると下から現れる、サムネ・商品名・価格・数量・カート投入をまとめた追従バー。長い商品説明の途中でも、いつでも購入に進めます。ECの定番コンバージョン施策です。

ページ内セクションへのタブが、スクロールで上部に貼り付き、表示中の区画をハイライトします。商品詳細の「概要／仕様／レビュー」のような長いページの章内ナビとして定番です。

画面下に固定された小型のメディアプレーヤー。カバー画像・タイトル・再生／一時停止・進捗バー・波形イコライザを備えます。ポッドキャストや音楽、音声記事のサイトで継続再生を支えます。

記事下部に固定した、いいね・ブックマーク・コメント・シェアのアクションバー。数値カウンタ付きで反応を可視化します。クリックでハートが弾み、数が増える楽しい手応えを返します。