追尾メニューの作り方(LPとかで使えば誘導に効果あり)

追尾メニューの作り方(LPとかで使えば誘導に効果あり)

「スクロールしてもついてくるボタン」って知ってますか?
うまく利用できれば訪問者を誘導できる仕掛けの1つですね。
ランディングページなどでよく見かけるかと思います。

今回は、この追尾ボタンの実装方法をまとめました。

追尾メニューの実装手順

3ステップでかんたんに実装できます。

1.HTMLのリストタグ(UL、LI)でメニューを作る
2.CSSで表示位置を指定する
3.CSSでスタイルを整える

たったこれだけで実現できます。

リストタグだけでメニューを作る

リストタグだけでコーディングができるのでかんたんですね。

<nav>
<ul>
<li><a href="#">コンセプト</a></li>
<li><a href="#">お客様の声</a></li>
<li><a href="#">資料請求・お問い合わせ</a></li>
</ul>
</nav>

追尾メニュー画像「リストタグでメニューを作る」

もちろんAタグの中にIMGタグで画像を表示させるのもありです。

以降は上記のソースコードをもとに説明していきます。

CSSで表示する位置を決める

実は追尾させるためのスタイル設定はHTMLと同様にとてもかんたんです。

スタイルシートに下記の内容を書き込むだけで追尾メニューが表示できます。

nav {
position: fixed;
right: 0px;
top: 100px;
}

rightやtopの値は適当に変更してください。

追尾メニュー画像「表示位置を決める」

スタイルシートで見た目を整える

最後にスタイルシートで見た目を整えて完成になります。

追尾メニュー画像「最後はスタイルシートで見た目を整える」

いかがだったでしょうか?
追尾ボタンをうまく利用できればコンバージョン率を上げられます。

注意点もありますのでお伝えしますね。

【注意点】ランディングページなどで追尾ボタンをたくさん表示し過ぎると、閲覧のじゃまになってしまい見づらくなってしまいます。なるべるシンプルに閲覧のじゃまにならないように表示しましょう。

また、ゴールと関係の無いページへのリンクメニューやボタンの表示はページ離脱の原因にもなるためおすすめしません。

最後にクリック数を増やすためのちょっとしたコツをお伝えします。

クリック数を増やすためのコツ

追尾メニューに限りませんが、クリックしてほしいバナーやメニューのクリック率を上げる方法をお伝えします。

コントラストをつける

クリックしてほしい箇所の色やサイズなどの見た目を、をまわりの要素と差をつけるということです。

例として下記の画像を参照してください。

特定の箇所だけ見た目を変えると、なんだか目立って気になりませんか?

追尾メニュー画像「コントラストを付ける」

動きをつける

クリックしてほしい箇所に動きをつけることで動いている部分に目が行きます。

最近良く見るものとしてプルプル動くボタンがありますね。
当サイトでも使用しています♪

[btn class=”big lightning”]ここはクリックしないでね[/btn]

[btn class=”simple”]ここはクリックしないでね[/btn]

このように動きをつけて反応率(クリック率)を上げる方法もあります。

以上、追尾メニューの実装方法になります。
いろいろ検証しながら最適な誘導のしくみを作っていただければと思います。

Webサイト作成

< NEXT 開業フリーで個人事業主の開業手続きと青色申告の申請をしてみた【2019年】

個人情報保護法のCCPAはGDPRよりも厳しい?「2020年から施行予定」 PREV >

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

six − 1 =