「スクロールしてもついてくるボタン」って知ってますか?うまく利用できれば訪問者を誘導できる仕掛けの1つですね。ランディングページなどでよく見かけるかと思います。今回は、この追尾ボタンの実装方法をまとめました。動きをつける追尾メニューの実装手順3ステップでかんたんに実装できます。1.HTMLのリストタグ(UL、LI)でメニューを作る2.CSSで表示位置を指定する3.CSSでスタイルを整えるたったこれだけで実現できます。リストタグだけでメニューを作るリストタグだけでコーディングができるのでかんたんですね。href="#">資料請求・お問い合わせ</a></li></ul></nav>もちろんAタグの中にIMGタグで画像を表示させるのもありです。以降は上記のソースコードをもとに説明していきます。CSSで表示する位置を決める実は追尾させるためのスタイル設定はHTMLと同様にとてもかんたんです。スタイルシートに下記の内容を書き込むだけで追尾メニューが表示できます。100px;}rightやtopの値は適当に変更してください。スタイルシートで見た目を整える最後にスタイルシートで見た目を整えて完成になります。いかがだったでしょうか?追尾ボタンをうまく利用できればコンバージョン率を上げられます。注意点もありますのでお伝えしますね。【注意点】ランディングページなどで追尾ボタンをたくさん表示し過ぎると、閲覧のじゃまになってしまい見づらくなってしまいます。シンプルに閲覧のじゃまにならないように表示しましょう。ゴールと関係の無いページへのリンクメニューやボタンの表示はページ離脱の原因にもなるためおすすめしません。最後にクリック数を増やすためのちょっとしたコツをお伝えします。クリック数を増やすためのコツ追尾メニューに限りませんが、クリックしてほしいバナーやメニューのクリック率を上げる方法をお伝えします。コントラストをつけるクリックしてほしい箇所の色やサイズなどの見た目を、をまわりの要素と差をつけるということです。例として下記の画像を参照してください。特定の箇所だけ見た目を変えると、なんだか目立って気になりませんか?動きをつけるクリックしてほしい箇所に動きをつけることで動いている部分に目が行きます。最近良く見るものとしてプルプル動くボタンがありますね。class=”simple”]ここはクリックしないでね[/btn]このように動きをつけて反応率(クリック率)を上げる方法もあります。以上、追尾メニューの実装方法になります。検証しながら最適な誘導のしくみを作っていただければと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取るキタジマ山形の田舎でIT・WEB系フリーランスしてます。元溶接屋→インフラ系エンジニア→WEBエンジニア→現在フリーランス。主なお仕事は、WEBサイトの制作やITシステムの構築。追尾メニューの作り方(LPとかで使えば誘導に効果あり)運営者こんにちは、当サイトを運営しているキタジマと申します。山形県の田舎でIT・WEB系のフリーランスとして2019年から活動してます。元溶接屋→インフラ系エンジニア→WEBエンジニア→現在フリーランス。主なお仕事は、WEBサイトの制作やITシステムの構築。そんな僕は田舎でのんびり暮らしてます。プロフィール詳細お問い合わせはこちらWEBサイト制作のご依頼はこちらフリーランススタートガイドポートフォリオざっくりですが、僕の経験・実績のあるジャンルです。