知りたい人続出！スマホから問合せを増やす固定バナーの設定方法[無料データ付]

BiNDupから導入された「ウィジェット機能」、活用できてますか？
そのままバナーやお問い合わせボタンを設置するだけで、簡単にコンバージョンへの導線を強化できる便利な機能ですが、スマホで表示したときのサイズ感が合わない（大きすぎるなど）と感じることもあるのではないでしょうか。

そこで今回は、ウィジェットの調整方法について解説したいと思います。
最後にサンプルデータも配布しますので実装は簡単です。設定方法をぜひ参考にしてみてください。

スマホ用の固定バナーを設置した、本日のサンプル

まずはサンプルから。PCとスマホでデザインを変えているのが今回のミソです。スマホ時にウィジェットがページ下部で追従するのはいつも通りですが、サンプルではウィジェットを２分割（お問い合わせボタンと電話ボタンを２つ設置）するような見せ方にカスタマイズしています。
サンプルサイトを見る
※ぜひスマホからチェックしてみて下さいね

ウィジェット機能を使った設定方法を解説

設定するにあたってのポイントは以下の３つです。

• ウィジェットの右下と左下を活用
• スマホ用にウィジェットの幅を（必要に応じて位置も）調整
• （極力）画像化しない

ウィジェットの右下と左下を活用

完成イメージとしては、スマホの時にページの下部でボタンがついてきてほしいので、使用するウィジェットは上・中・下のうち下の２つを利用したいと思います。

画面中央上のアイコンから、ウィジェット編集モードに切り替える

スマホでタップしたら電話がかかるように設定

ウィジェットにはそれぞれリンクパーツを設定します。
この時、電話ボタンをタップした時にそのまま発信できるようにするには、下記の設定項目から「tel:」を選んだ上で電話番号を設定すると簡単です。

リンク先には「tel:000-0000-0000」の様に電話番号を設定

そして、特にスマホの場合ブロックの余白は「ゼロ」にしておいてください。
またPCから電話はかけられないので、電話ボタンを設定した方のウィジェットは「PCで非表示」にしておきます。

下準備はこれで終了です。次からは細かい設定に入ります。

スマホ用にウィジェットの幅と位置を調整

Dressでの設定でやることは大きく２つあります。リンクパーツの設定は装飾的な意味が強いので実質１つだけでOK。

1. スマホ時のウィジェットのサイズ調整
2. リンクパーツの設定

では細かく解説します。

スマホ時のウィジェットのサイズ調整

こちらもそこまで複雑ではありません。ブロックエディタでスマホ時の「ウィジェットエリア自体の横幅」をそれぞれの50%にします。

次にDress側で、横幅設定を100%にしてください。ブロックエディタ側の設定だけでは意図したサイズになりませんのでポイントです。

Dressでは設定対象を「ウィジェット」にしておくと、設定項目を探すのが楽になります。

リンクパーツの設定

次にリンクパーツの設定をします。
基本的にはお好みの設定で構いませんが、左右のボタンの高さを揃える為に文字サイズや余白は同じ設定にしましょう。
デザインはリンクボタンで設定しても大丈夫ですが、スマホ時の調整をするのはDressの方が向いているので今回はDressで設定していきます。※詳細編集モードでの調整が必要。設定しやすい方で調整してください。

以下が今回のスマホ側の設定箇所の重要箇所です。それ以外は装飾的な要素なので割愛します。ご自身で気になるとこを調整してください。

• ウィジェット右下（ウィジェット左下）＞リンク
• 表示形式（ブロック）
• 文字サイズ
• 内側の余白
• 行の高さ

基本的には、左右のウィジェットでリンクパーツの設定を揃えると綺麗に仕上がります

できるだけ画像化せずに仕上げる

最後にウィジェットを設定するときのポイントをひとつ。必ずしもというわけではありませんが、バナーなどを画像で作成した場合、スマホ時で綺麗に表示するのにスマホ用の画像を用意する必要があったりと手間が増えるので、あまりオススメしません。画像を使いたい場合は背景画像が設定できますので、そちらを使ってデザインしても良いと思います。

サンプルのサイトデータ配布

最後に今回の設定をまとめたサイトデータを配布します。以下よりログインの上、ぜひ使ってみて下さい。