訪問者の目に留まるCTAを、コードなしで
「LINEの友だち登録」や「お問い合わせ」への導線を、全ページでスクロールに追従するボタンとして設置したい。
そう思っても、多くのWordPressテーマでは専用プラグインを追加するか、テーマファイルを直接編集する必要があります。
Utopiaには、この用途のために「フローティングウィジェット」という設定画面が標準で用意されています。
管理画面の「Utopia」→「フローティングウィジェット」から、追加のプラグインなしで数クリックで設置できます。
用意されている3つのウィジェットタイプ
「フローティングウィジェット」画面では、次の3種類からボタンの形式を選べます。
画像・バナー
透過PNGなどの画像をアップロードするだけで設置できます。推奨サイズは200×200pxで、ロゴやキャラクター画像を使った目立つCTAに向いています。
テキストボタン
ボタンテキストと、背景色・文字色を指定するだけのシンプルな形式です。絵文字アイコンを添えることもでき、画像を用意しなくてもすぐに使えます。
カスタムHTML
LINE公式アカウントのバッジコードやiframeなど、任意のHTMLコードをそのまま貼り付けられます。外部サービスが配布する埋め込みコードを使いたい場合に便利です。
表示位置・サイズ・アニメーションを自由に調整
ウィジェットの見た目は、次の項目を組み合わせて細かく調整できます。
表示位置は「右下」「左下」「下中央」「右上」「左上」の5パターンから選択可能です。
サイズは「小(80px)」「中(120px)」「大(160px)」の3段階が用意されています。
アニメーションは「なし」「バウンス」「パルス」から選べ、初めて訪れる人の視線を引きやすくなります。
2つのウィジェットを同時に運用できる
Utopiaでは、フローティングウィジェットを同時に2つまで有効化できます。
たとえば「ウィジェット1」にLINE登録ボタンを、「ウィジェット2」にお問い合わせボタンを設定し、右下と左下に振り分けて表示する、といった使い分けが可能です。
サイトの目的に応じて、CTAを1本に絞るか、複数本用意するかを柔軟に決められます。
訪問者への配慮も設定でカバー
常に表示され続けるフローティング要素は、便利な反面、訪問者にとって煩わしく感じられることもあります。
Utopiaでは「閉じるボタンを表示」をオンにすると、訪問者が一度閉じたウィジェットは次のセッションまで再表示されなくなります。
また「モバイルで非表示」を有効にすれば、画面幅768px未満のスマートフォンではウィジェットを表示しないようにできます。狭い画面でのコンテンツとの重なりや、誤タップを防ぐのに役立ちます。
まとめ:まずはウィジェット1つを試してみる
フローティングウィジェットは、LINE登録・お問い合わせ・キャンペーン告知など、サイトごとに異なるCTAをプラグインなしで実現できる機能です。
管理画面の「Utopia」→「フローティングウィジェット」を開き、まずは「ウィジェット1」を有効化して、テキストボタンタイプで試しに設置してみることをおすすめします。
表示位置とアニメーションを変えるだけでも、サイトの印象や反応の違いを確認できるはずです。
