記事の詳細
スマホの画面の固定位置に電話番号を常に表示!予約やお問い合わせ件数を増加させる効果あり!
こんにちわ
木曜担当の吉見です!
最近涼しくなってきて、ようやく過ごしやすい日常が送れていてホッとしています(*’▽’)
クーラーも使わず、暖房も使わない今の時期ってなんて最高なんでしょう(*’▽’)!
さて、今日は私のお気に入りで、コピペで今すぐ使える便利な機能をご紹介したいと思います。
インクループでWEBサイト制作をする際にもよく設置します。
それほどすっごく便利なんです!(/・ω・)/
今回のブログの見出しはコチラです!
お客様がスムーズに予約・お問い合わせができるかが大切!
今やほとんどの人が持っているスマートフォン。
何かを検索して、スマホからそのまま予約をしたりお問い合わせの電話をかけた経験は皆さんあるかと思います。
「予約したいけどどこから予約すればいいんだろう?」
「いろんなページがありすぎて、予約の仕方がわからない」
「結局どこからお問合せしたらいいのかわからなくて、探すの面倒だからやめてしまった」
こんな経験はないでしょうか?
「あるある」の一つではないでしょうか。私はしょっちゅうあります(笑)
お客様を逃がさないようにするために
なかなかお問い合わせをするための方法が見つからないと
今すぐに予約したいのに!
今すぐにお問い合わせしたいのに!
スマホを片手にイライラ。こんな場面が想像できますね。
予約やお問い合わせの仕方がスムーズにできないと、
このようにお問い合わせをしたいと思っているお客様を失ってしまう恐れがあるのです。
ですから、訪問したお客様がスムーズに予約やお問い合わせをしやすいWEBサイトをインクループでは心がけて制作をしています。
スマホからそのまま予約・お問い合わせができるようにする
スマホでWEBサイトを閲覧しているお客様がスムーズに予約やお問い合わせをするための
誰でもわかる!簡単な方法
を一つご紹介したいと思います。
その方法とは、スマホからいつでもお問合わせの電話がかけられるように画面下部に常に電話をかけるためのボタンを表示し続けるということです。
こちらはインクループ社長のご両親が経営されている「焼肉八起」です。
(※相模大野にあって、私は人生の中で一番おいしかったです!自家製のタレが自慢です♪)
上記がスマホで見た焼肉八起のWEBサイトです。(URLはこちらです)
スマホでWEBサイトを表示すると、画面の一番下にはすぐにお問い合わせできるように「電話で予約する」ボタンが設置してあります。これをタップするとそのまま電話がかけられるというものです。
このボタンはパソコンで閲覧している時には表示されることなく、スマホの時だけ表示され、さらに画面をスクロールしても常に最下部に表示され続けるのです。
つまり、すぐお問い合わせ方法が見つかる&すぐに予約の電話ができるのです!
これだけです。
シンプルオブ ザ ベスト!!!!
そうなんです。これが一番スムーズ。ユーザーにとってもストレスなし!
こういったシンプルさがすごく便利で利用価値は高いと思うのです。
活用してみた結果・・・利用している人はどれくらいいるのか?
実際にこの「電話をかける」ボタンを設置したとして、どのくらいクリックされるものなのか?という結果がどうなのか気になりますよね。
どんなことでもトライアンドエラーが大切です!
結果はこちらです!
※クリック数の計測にはGoogleアナリティクスのイベントトラッキングを利用しています。
[過去記事]
クリック回数を測定したい!たった1行でGoogleアナリティクスでイベントトラッキングを設定する
WordPressでGoogleアナリティクスのイベントトラッキングが反映されない!(泣)
電話するボタンは確実に機能しているようです。徐々に利用してくれている方が増えているようです。
機会損失を減らすことができているのではないかと思います。
コピペだけで実装できるご予約ボタン
「…便利で簡単なのはわかったんだど、実際にサイトに埋め込もうとすると、やっぱり大変なんでしょ…?」
と思いましたか?
思った以上に簡単なんです。ご安心を!!!(*´ω`)!
どこに埋め込めばいいのか?というと、この部分です。
footerのあと、もしくはbodyのあとに埋め込みましょう。
焼肉八起のHPでは、こちらに埋め込んでいます。
HTMLは以下のようになります。
電話番号の入力を忘れずに(/・ω・)/
1 2 3 4 5 6 7 8 |
<!-- [ スマホ用フッター電話 ] --> <div class="footer_area"> <div class="footer_area_inner"><a class="inquiry_btn" href="tel:電話番号をここに入れる"> 電話で予約する ☎電話番号をここに入れる</a></div> </div> <!-- [ スマホ用フッター電話 ] --> |
PCの画面上では表示せず、スマホの画面上のみ表示させるようにCSSを作ります。
以下のCSSをコピペすればOKです!デザインはお任せします♪
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/*641px~PC PC上では見えないようにする*/ @media screen and (min-width:641px){ .footer_area{ display: none; } } /*スマホ~641pxの幅サイズまで*/ @media screen and (max-width:640px){ .footer_area { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba( 0, 0, 0, 0.6 ); z-index: 10000; } .footer_area .footer_area_inner { position: relative; width: 80%; margin: 0px auto; padding: 10px 0; margin-right: 0px; } .footer_area .footer_area_inner .footer_area_inner_btn { width: 85%; padding: 11px 0; font-size: 20px; font-weight: bold; margin-left: 15px; line-height: 1.3; } .inquiry_btn { background-color: #068BF1; -webkit-border-radius: 3px; display: inline-block; text-align: center; text-decoration: none; width: 80%; padding: 5px 0; font-size: 18px; font-weight: bold; } .inquiry_btn:link, .inquiry_btn:visited { color: #FFFFFF !important; } .footer_area_inner span{ color: #fff; } #siteBottom{ margin-bottom: 85px; } } |
簡単なので、ぜひお試しくださいませ(/・ω・)/
コメント
この記事へのトラックバックはありません。
始めまして^ ^
記事を読んでぜひ使いたいと思ってます!
そこで、質問なのですがこちらは《予約電話》のボタンのみですが
私は、マイページとお問い合わせボタンの2つw並べて使いたいと思っております。
2つ並べて設置して見たのですが、縦に並んでしまってどうしても横並びにできません・・・
ぜひ教えてもらいたいです。
いきなりのコメント失礼いたします。
YUKOさま
コメントありがとうございます。
お返事が遅くなりまして申し訳ございません。
ボタンの要素を並べたいとのことですが、記事に記載しているCSSの18行目~24行目と34行目~44行目の記述を下記へ変更してみてください。
.footer_area .footer_area_inner {
position: relative;
width: 100%;
margin: 0px auto;
padding: 10px 0;
margin-right: 0px;
text-align: center;
}
.inquiry_btn {
background-color: #068BF1;
-webkit-border-radius: 3px;
display: inline-block;
text-align: center;
text-decoration: none;
width: 40%;
padding: 5px 0;
font-size: 18px;
font-weight: bold;
}
ボタンの横幅が広すぎると要素が縦に並んでしまいますので、横幅を調整してみてください。