今回はプログレスバーで注目を集める方法についてお話しします。プログレスバーとは処理にかかるタスクの進捗状況を、視覚的・直感的にどの程度進んでいるかを示すものです。この記事を学ぶとプログレスバーの実例をもとに使い方を学ぶことができます。
この記事では、プログレスバーをなぜ設置するのか、また、プログレスバーを設置しない場合の実装方法について詳しく説明しています。実際の画面をもとに説明しているので初心者の方でも簡単に理解することができます。
今回お届けするノウハウはこちら
プログレスバーで注目を集める3つのポイント
- ポイント＃1.プログレスバーの実例と使い方
- ポイント＃2.なぜプログレスバーを設置するのか
- ポイント＃3.プログレスバーを設置しない場合の実装方法
ポイント＃1.プログレスバーの実例と使い方
プログレスバーというのはこのように進んでいくようなカウンターのようなものです。
では実際に私の画面を見てみましょう。
これは実際に私のお申し込みページの画面ですが、上にふわふわという風になっている、この動いているのがプログレスバーです。ここに何が書いてあるかというと特別なご案内がありますっていう風に言っています。こんな感じのプログレスバーをここに入れることによって、まだ読み込んでいるのかな？あれ？というふうにまず目を止めます。
そしてお客様はここを読んでいきます。自分で操作できるようになってみたいと思いませんか？というキャッチコピーをぱっと見ていただくという。目を止めていただく効果があるというのがプログレスバーです。実際にプログレスバーを見ていただきました。
ポイント＃2.なぜプログレスバーを設置するのか
人には以下の特徴があります。
- 動いているものは見てします
- 限定性に人は弱い
ではなぜプログレスバーを設置するのかについてです。
プログレスバーというのは基本的にあのような感じでクルクルという風に動いていたりします。そうすると人はグルグル動いているものに目を留めやすいです。特にランディングページというのは、テキストが多いです。文字がたくさんあって自主的に呼んでいくことになります。
しかしページを押した時に、上の方に目に止まるようなものがあったりすると、閉じようかなと思っていたのに何か動いていると人は目を止めてしまいます。
そういう効果がプログレスバーにはあります。さらにプログレスバーを設置したところには、限定性を持たせた何かを、すぐ申し込んでくださいというふうに促すことによって、成約率がアップしたり、それを申し込みする人が増えたり、そういった効果があります。
ポイント＃3.プログレスバーを設置しない場合の実装方法
プログレスバーのポイントを以下に示します。
- 「ちょっと待って」わかりやすいテキストで伝える
- 限定性を持たせる
クリックファネルだと簡単ですが、なかなかプログレスバーだとWordPressの機能になかったり、設置したくない場合もあるかもしれません。
あのようなバーは少し自分のサイトにふさわしくないなという風に思ってらっしゃる方もいらっしゃるかと思いますので、プログレスバーと同じような仕掛けができる方法を実際の画面でご覧いただきます。
上の画像は私のプログレスバーを設置しておらず、プログレスバーのようなことをしているサイト、ランディングページです。
ここで何をしているのかと言うと、ここでテキストに明確にあなたにお知らせがあります。特別なお知らせがありますということで、まず目を惹く仕掛けをしています。そして実はここに私の顔と赤ちゃんがいるんですが、人の顔、特に女性というのは人は目を止めやすいという検証結果があります。なのでこれを実際に動かしておいたり、このページが切り替わった時にここも私ですが、女性や子供が動いている。
そういったものを観せることによって、目を止めてくれます。目を止めたらどうなるのかと言うと、この動画の話を聞くかもしれませんし、「ここに成果を上げる週1のグループコンサルが特別にあるのか」という風に読んでくれます。ランディングページで必要な物はお客様に価値を届けなければなりません。そういった意味でお客様が目を止めずに閉じてしまったらおしまいです。
ですのでやはりお客様が足を留める、目を留める仕掛けを用意しておくのが非常に大切になります。そういった意味でプログレスバーと言う、そういった目を留める仕掛けを作ることによって、あなたのお申し込みページの成約率がぐっと上がったりもしますので、覚えておいてください。
まとめ
いかがでしたか？
今回はプログレスバーで注目を集める方法について解説をしていきました。どのようなことを意識して設定するかでお客様の目を引くことができプログレスバーで注目を集めることができます。この記事を参考にしてプログレスバーで注目を浴びてみてくださいね。