ウィジェットを使ったスマホの追従メニューをカスタマイズする方法

こんにちは！デザイナーのオモトです。
今回は、ホームページ制作サービス「BiNDup」のテンプレートでも使われている、スクロールしてもボタンを追従して表示できるウィジェットの活用方法とそのカスタマイズ方法についてご紹介！
使いやすいボタンのサンプルをサイトデータで用意したのでぜひダウンロードして試してみてください。

ウィジェットって邪魔じゃない？

サイトのコンバージョン（以下、CV）を高めるのに便利なポップアップ通知ですが、載せ方を間違えると見ている人にとっては邪魔な存在になりがち。
問合せボタンや特別なお知らせは目立たせたいものの、見ている人に親切な導線であるべきです。

BiNDupではバナーやボタンをページの上にフロートさせて常に目立つ位置に固定表示できるウィジェット機能を搭載

そこでBiNDupの以下の機能を使って適した使い方を紹介したいと思います。

• BiNDupでは、PCとスマホで表示内容を出し分けできる
• 「スクロールしたら表示する」「×ボタンで表示を消せる（逆に×ボタン自体も消せる）」などかゆい所に手が届く！

スマホに追従メニューを取り入れるメリット

ホームページに、追従メニューを取り入れることで、常にこちらの意図するボタンをクリックさせやすくすることができます。
お問い合わせや資料請求など、CVに繋げるための導線の確保にとても有効です。また、常に表示されていて意識してしまうので、サービス内容や強みなどアピールしたいPV数の増加に貢献します。
特に衝動買いが起こりやすい、商品の購入ボタンなどが効果的で、ユーザーが少しでも商品に興味を持ったタイミングで押すことができるので、ユーザーが購入ボタンを探すストレスがなくなり逃さずCVに繋げることができます。ただ、検討する時間が長く考えてから購入に至る場合は、効果は比較的薄い、ということもあります。

スマホに追従メニューを取り入れるデメリット

追従メニューは、画面の上部や下部に常に固定されたコンテンツが表示されるので、ホームページの閲覧可能な領域が狭くなり、結果として、見づらいホームページになってしまう可能性があります。
また、追従メニューは、作り手側の都合で、ユーザーを誘導しているので「買って欲しい」というこちらの意図が強く伝わりすぎて、ユーザーに悪い印象を当たえることもあります。

共通するカスタマイズ

デフォルトだと、ウィジェットの横幅は、全体に対して20%の表示エリアに設定されているので100%に変更します。
（全体のDressじゃないと設定が効きません。）

①画面右上から、共通のDressを編集。「ウィジェット右下」の横幅100%にします。
②ブロックエディタを開き、「PCではこのブロックを非表示に」にチェックを入れます。
※この設定をすると、どうしても左下のウィジェットエリアが潰れて編集不可能な状態になってしまいます。ご注意ください。

追従ボタン1「1種類のCVボタン」

サンプルサイトスマホサイト用のボタンです。スマホで閲覧してください

リンクボタンの編集画面を開き「テンプレート」から横幅100%のボタンを選択。詳細編集モードを開いて、padding:12px;、font-size:12pxを調整して、高さを抑えます。難しい場合は、名称を「btn1」で別名保存後、サンプルのCSSをコピー&ペーストして下さい。

追従ボタン2「2種類のCVボタン」

サンプルサイトスマホサイト用のボタンです。スマホで閲覧してください

上と同じ、ボタンの設定を使い回します。（２つめのボタンの色だけ変更下さい）
①「資料請求」「お申し込み」の２つのリンクボタンを用意し、その間に分割線を入れます。ブロックエディタの設定で「スマホ表示時」のプレーンを２段に設定し、カラム間の間隔を「ゼロ」に設定します。同じく、「スマホ表示時」の余白の数値も「ゼロ」に設定します。
②リンクボタンのデザイン編集画面を開き設定を複製、色を変えて完成です。

追従ボタン3「CVボタン+ページトップに戻るボタン」

サンプルサイトスマホサイト用のボタンです。スマホで閲覧してください

上と同じ、ボタンの設定を使い回します。（トップに戻る用のボタンの色だけ変更下さい）
あとは、ボタンの比率を変更するだけです。

①ブロックエディタを開き、PCの表示を左右違いに設定します。

②スマホ表示時のタブに切り替え、オプションを「PCと同じ」に設定します。

③CSS詳細設定を開き、「右のカラム」を15% !important、左のカラムを85% !importantにします。これで完成です。 !importantは何よりもこの設定を優先するという意味なのですが、これを入れないと効かないかと思いますので入れてみて下さい。

追従ボタン4「アイコン付グローバルメニュー」

2020年1月に追加された、スマホメニューの「タイル」という新しい形式を使えば、このような定番のスタイルも簡単に可能です！詳しい内容はこちらの記事で！
https://bindup.jp/camp/bind/25952

サンプルサイトスマホサイト用のボタンです。スマホで閲覧してください

①リンクボタンの文字列を改行して、２行目にテキストをいれます。アイコンを設定しておきます。

②メニューA>リスト項目>リンク>1行目[first-line]のスマホ表示時の文字サイズを20pxに設定します。

③スマホサイトの設定を、「タイル」「積み重ねる」「デフォルトの表示数」を５に設定する。

スマホメニューの設定手順は以下のページをご確認ください。
スマホメニューのレイアウトを編集する
これで完成です！

いかがでしたでしょうか？
よかったら試してみてください！

サイトデータ

今回紹介したサンプルのサイトデータを以下より配布します。データを開いて直接、設定箇所を確認してみてください。