このワイヤーの特徴
読んでいる途中でも、問い合わせたくなったときに押せる
長いページでは、ページの最初や最後のボタンが画面から離れている時間が長くなります。スクロールしても画面の端に小さなボタンを残し、どこまで読んでいても押せるようにしています。
ほかのボタンが見えている間は、表示しない
ページの最初のボタンや、末尾のCTAが画面に入っているときに追従ボタンも出すと、同じボタンが2つ並びます。ほかのボタンが見えている間は隠し、見えなくなったときだけ表示しています。
本文を読む邪魔をしない大きさにとどめる
追従するものが大きいと、読める範囲がそのぶん狭くなります。PCでは画面の右下に小さく、SPでは画面の下に1行分の高さで置いています。
押す前に知りたいことを、短く添える
ボタンだけが追いかけてくると、押すとどうなるのかが分かりにくいことがあります。「相談は無料・2営業日以内に返信」のように、押す前に知りたい情報を短く添えています。
SPでは、画面の下いっぱいに置き、親指で押しやすくする
SPでは、画面の下のほうが指の届きやすい位置です。画面の下に横いっぱいのバーとして置き、端末の下の余白（ホームバーなど）にかからないようにしています。
制作時のよくある失敗
ページを開いた直後から表示し、最初のボタンと二重に並ぶ
ページの最初に問い合わせのボタンがあるのに、追従するボタンも同時に表示すると、同じボタンが2つ並んで見えます。
最初のボタンが画面から外れてから表示し、末尾のCTAが見えたら隠します。
本文やボタンの上にかぶさり、読めない・押せない
追従するバーがページの最後の内容やフォーカスした要素の上にかぶると、読めなかったり押せなかったりします。
バーの高さのぶんページの下に余白をとり、キーボードで移動したときに、フォーカスした要素がバーに隠れないようにします。
ほかの固定表示と重なる
チャットの窓口、ページの上部へ戻るボタン、Cookieの案内なども画面の下に固定されていることが多く、追従ボタンと重なりがちです。
画面の下に固定するものを洗い出し、重ならない位置と、同時に出す数を決めます。
問い合わせフォームのページにも表示する
フォームのページで「無料で相談する」が追いかけてくると、送信ボタンや入力欄を隠したり、SPでは入力中の領域やキーボードに重なったりすることがあります。
フォームのページでは表示しないようにし、ほかのページでも入力欄を操作している間は、必要に応じて隠します。
目立たせるために、動かし続ける
点滅や揺れで注意を引こうとすると、本文を読む邪魔になります。
表示・非表示の切り替えも控えめな動きにとどめ、動きを減らす設定をしている人には、動きを止めます。
見えないのに、キーボードで選べる状態が残っている
非表示のときに、透明にしたり画面の外へ動かしたりするだけだと、見えないボタンにキーボードのフォーカスが当たったり、読み上げで読まれたりします。
非表示のときは、キーボード操作や読み上げの対象からも外します。
よくある質問
PCでも、追従するボタンは必要ですか?
必ずしも必要ではありません。
PCは画面が広く、ヘッダーに問い合わせのボタンを置いておけば、同じ役割を果たせることが多いです。
ページが長く、ヘッダーも追従しない作りの場合は、右下に小さく置く方法があります。
閉じるボタンは付けたほうがよいですか?
1行分程度の小さなバーなら、付けなくても読む邪魔になりにくいです。
画面の多くを覆う大きさにする場合や、説明の文章を多く載せる場合は、閉じる手段を用意します。
閉じたあとに、同じページですぐに出し直さないようにします。
どのページに置けばよいですか?
サービス、料金、実績の紹介など、長く、読んでいる途中で問い合わせたくなりやすいページが向いています。
問い合わせフォームのページや、内容が短く、末尾のCTAがすぐ見えるページには置かないほうが、画面がすっきりします。
追従するバーに、電話のボタンも並べてよいですか?
並べることはできます。
その場合は、どちらを主にするかを決め、主のボタンを大きく、もう一方を控えめにして、同じ大きさで並べないようにします。
SPでは、電話のボタンを押すとすぐに発信できるようにしておくと便利です。
