TCDテーマの「スマホ用固定フッターバー」のオススメ使用方法!【別アイコンも可】

この記事ではTCDテーマのスマホ用フッターバーの設定方法やオススメの設定について解説します。
スマートフォン時に固定のフッターバーを表示させることで、サイトに訪問したユーザーからのコンバージョンを高めることが可能です。
フッターバーをまだ設定していない方や設定が分からない方はこの記事を見て設定するようにしましょう。
スマホ用固定フッターバーとは
スマホ用固定フッターバーとは、下記のようにスマートフォン時に固定のフッターメニューを表示できる機能です。
フッターバーを表示すると、メニューを画面内に常に表示できるので、下記のようなユーザーのアクションを促す効果が期待できます。
- ・電話で来店予約を増やす
- ・お問い合わせフォームやLPに誘導して成約率を高める
- ・SNSのシェア率を上げ、記事の拡散を図る
今回はTCDテーマのフッターバーの設定方法とオススメ設定を用意しましたので、ぜひ活用してください。
具体的な機能
スマホ用固定フッターバーは、6種類のアイコンを表示でき、クリック後のアクションも設定することが可能です。
本来であれば、自分自身でテーマファイルのコードを書き換えてカスタマイズする必要がありますが、TCDテーマを利用すれば管理画面から簡単に設置することが可能です。
基本的な設定の流れは下記の3ステップです。
- 1表示方法を確認
- 2配色設定
- 3アイテムを設定
順番にみていきましょう。
表示方法を選べる
表示する場合は、スライドインとフェードインのどちらかをお選びいただけます。

TCDテーマオプション画面(表示方法)
どちらでも構いませんが、表示させたくない方はこちらで非表示に設定しましょう。
配色を変更可能
背景色(透明度も変更可)や枠線、フォントの色を簡単に変更することが可能です。

TCDテーマオプション画面(外観の設定)
デフォルトの配色はとてもシンプルなため、あまりフッターバーを強調させたくない場合は初期設定のままで構いません。
また、色を変更したい方は、サイトに順応するような色やユーザーの目に止まるような目立つ配色に設定するといいですね。
アイテムを追加して設定していく
フッターバーにどんなアイテムを表示するかを設定することができます。
「新しいアイテムを追加する」をクリックして、アイテムを追加できますし、ドラッグ&ドロップで簡単に並び替えることが可能です。
アイテムの設定は下記に順番に説明していきます。
※アイテムは多すぎるとタップしづらくなるので、表示するアイテム数は多くても4つまでにしましょう。
アイコンを6種類から選べることが可能
TCDテーマには下記のようにデフォルトで6種類のアイコンが用意されています。

TCDテーマオプション(アイコン選択)
アイコンは、ユーザーに直感的に内容を伝えるための大切な要素になりますので、用途別に使用すればCVを高める効果が見込めます。
また、別のアイコンを使用したい方は、下記の記事を参考にしてください。
TCDテーマの「スマホ用固定フッターバー」で表示するアイコンを変更する方法
よく使用するアイコンのunicodeをまとめましたのでぜひ使用してください。
e904 | |
e903 | |
ea92 | |
Youtube | ea9e |
Home | e90c |
Download | e91d |
クリック後のアクションを変更できる
フッターに表示したアイテムをタップした後のアクションを下記の3つから選択することが可能です。
・デフォルト
任意のリンク先を入力することが可能
・シェア
タップするとTwitter、Facebook、LINE、はてなブックマークのシェアボタンをポップアップ表示する
・電話番号
タップするとダイヤル画面に遷移し、設定された電話番号に電話をかけることが可能
使用したいアイコンと上手く組み合わせることができれば、より効果的に使うことができますね。
オススメ設定
一通り説明しましたが、組み合わせを考えるのが面倒くさい方のためによく使用されるオススメの設定を3つ用意しましたので、ぜひそのまま活用してください。
記事をシェアしてもらいたい人向け
こちらの設定はブロガーやマガジンサイト向けです。
記事を拡散してもらうための組み合わせになります。
ボタンのタイプ:シェア
アイコン :
電話予約を促したい方向け
こちらは電話をかけてもらうための組み合わせです。
電話予約やお問い合わせ時に便利ですね。
ボタンタイプ:電話番号
アイコン :
メールを送る
リンク先のURLに「mailto:example@gmail.com」と入力すれば、アイコンタップで自動的にメールを作成してくれます。
ボタンタイプ:デフォルト
アイコン :
まとめ
スマホ用フッターバーを設置することで、モバイルユーザーにアクションを促すことができるので、まだ設置していない方はぜひ設定してください。
また、表示するアイテムを増やしすぎるとユーザビリティを下げる原因となります。
ユーザーがタップしやすいように、アイテムの数は少なめにして効果的に活用しましょう。