ストア訪問者の目を引きつけるために、「常に画面内に表示されるフローティング動画バナー」を導入してみたいとお考えではないでしょうか。近年、EC サイトに動画コンテンツを組み込むことで、ブランドストーリーや商品の魅力を効果的に伝える事例が増えています。その中でも特に注目されているのが、追従する動画バナー(floating video banner)です。
本記事では、代表的な「追従する動画バナーアプリ 6 選」を紹介します。コーディング不要でストアに動画バナーを追加できるもの、デモページや事例紹介など多機能なものまで幅広くまとめました。ぜひ参考にしてみてください。
追従する動画バナー(floating video banner)は、ユーザーがページをスクロールしても画面の特定の位置(画面下部やサイドなど)に固定表示される動画コンテンツのことを指します。通常のバナーと異なり、常にユーザーの視界に入るため、商品の特徴やブランドの魅力を強力にアピールできるのが特長です。
例えば、YouTube で使われる「ピクチャーインピクチャー(PIP)」のようなイメージを思い浮かべてみてください。EC サイトでもこれを導入することで、ユーザーのエンゲージメントを高められます。
商品特徴やブランドストーリーを強調できる
文字情報だけでは伝えにくいニュアンスを動画で伝えられます。商品説明や使い方の紹介、ブランドメッセージなどを視覚的に訴求できるため、ユーザー理解を深めやすくなります。
ユーザーの注意喚起・コンバージョン向上
ページのどこを見ていても動画が表示され続けるため、重要な告知や期間限定オファーなどを見逃させる心配が減ります。サイト滞在時間の向上と、そこからの購入率アップが期待できます。
広告効果の向上
他のバナーとは違って常に視界に入るため、キャンペーンや新商品の告知を効率的に行えます。「ユーザーがすぐに離脱してしまう」という課題に対しても、見てもらえる機会を大幅に増やすことができます。
操作に慣れてもらいやすい
「フローティング動画バナー」はスマホアプリや SNS でも浸透しているため、初めて利用するユーザーでも直感的に理解しやすいです。違和感を感じにくいという点もメリットです。
管理・更新が簡単
Shopify アプリの中には動画やテキストを一元管理し、リアルタイムで切り替え・更新できるものがあります。日々の売上強化施策や季節プロモーションにも機敏に対応可能です。
追従する動画バナーを導入するにあたって、以下のポイントを確認しておくと良いでしょう。
コーディング不要で導入できるか
開発リソースが限られている場合でも、管理画面で簡単に設定ができるかを確認します。
動画の自動再生や静音再生に対応しているか
ユーザー体験を損なわないように、ミュート状態での自動再生やマニュアル再生などの設定が行えるかを見極めます。
デザインや配置のカスタマイズ性
PC やスマホなど、異なるデバイスで見え方を最適化したい場合は、細かい位置調整やサイズ変更が簡単にできるか確認が必要です。
テーマや他アプリとの互換性
最新テーマに対応しているか、導入済みのアプリと競合しないかなどの互換性チェックも大切です。
日本語サポートの有無
日本語のドキュメントやサポートがあれば、トラブルシューティングもスムーズに進められます。
以下、Shopify App Store にある「追従する動画バナーアプリ」をピックアップしました。それぞれの価格設定や機能、特徴を簡潔にまとめています。
価格設定
月額 4.99 ドル(7 日間の無料体験あり)
ハイライト
特徴・機能
以下のShopify公式のアプリストアからインストールできます。
価格設定
無料プランあり(有料プランは月額 39.99 ドル~)
ハイライト
特徴・機能
価格設定
無料プランあり(有料プランは月額 19 ドル~)
ハイライト
特徴・機能
価格設定
無料プランあり(有料プランは月額 19 ドル~)
ハイライト
特徴・機能
価格設定
無料
ハイライト
特徴・機能
価格設定
無料インストール(有料プランは月額 29.99 ドル~)
ハイライト
特徴・機能
6 つのアプリをざっくり比較すると、以下のような傾向があります。(※テーブルマークダウンを使わず、箇条書きでまとめています)
シンプル追従動画バナー|フローティング動画バナー
月額 4.99 ドル(7 日間の無料体験)
比較的安価で、フローティング動画バナーをノーコード導入したい初心者向け。
ReelUp‑Shoppable Videos+ Reels
無料プランあり。 有料は月額 39.99 ドル~
TikTok や Instagram に精通し、UGC 動画を積極活用したい方におすすめ。
Spark — Reels Video Slider
無料プランあり。 有料は月額 19 ドル~
ショート動画やカルーセル表示をメインにしたいストアに向いている。
Videowise Shoppable Videos UGC
無料プランあり。 有料は月額 19 ドル~
ライブコマースや AI 活用など幅広い機能を試したいストアにおすすめ。
Vizup Shoppable Video Slider
完全無料
まずはコストを抑えて試してみたい方に注目。多彩なレイアウトも魅力。
Videeo: Shoppable Videos & UGC
無料インストール(有料プランは月額 29.99 ドル~)
多機能でライブ配信やアプリ連携に強い。拡張性を重視するなら検討。
現時点で、いずれのアプリも開発者のサポート言語は英語表記となっています。(一部、日本企業が開発しているケースでも、公式翻訳が「英語のみ」の場合があります。)ただし、サポート窓口やドキュメントは、今後アップデートされる可能性もあるため、インストール時に確認してみてください。
シンプル追従動画バナー|フローティング動画バナー
「このアプリは日本語に翻訳されていません」との記載
ReelUp‑Shoppable Videos+ Reels
英語のみ
Spark — Reels Video Slider
英語のみ
Videowise Shoppable Videos UGC
英語のみ
Vizup Shoppable Video Slider
英語のみ
Videeo: Shoppable Videos & UGC
英語のみ
ノーコードで追従動画バナーを挿入したい場合は、シンプル追従動画バナーなど、導入・設定手順がシンプルなアプリが便利です。より高度なマーケティング機能やライブ配信連携を重視するなら、Videowise もしくは Videeo など、多機能アプリを試してみると良いでしょう。
使い勝手はストアの要件や運営体制によって異なるため、「動画を埋め込むだけでいいのか」「ライブコマースや UGC をフル活用したいのか」を見極めて選ぶのがおすすめです。
アプリを使わずに、テーマに直接「追従する動画バナー」を設置する場合の簡単な例を紹介します。以下のコードを参考に、theme.liquid
や layout/theme.liquid
のフッター付近に追加することで、画面右下に動画が固定表示されるイメージを実現できます。
{% comment %}
シンプルなフローティング動画バナーのサンプルコード
ポイント:position: fixed; と z-index の指定
{% endcomment %}
<div id="floating-video-banner"
style="
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
height: 170px;
z-index: 9999;
background-color: #000;
border-radius: 4px;
overflow: hidden;
">
<video
src="{{ 'example-video.mp4' | asset_url }}"
autoplay
muted
loop
style="
width: 100%;
height: 100%;
object-fit: cover;
">
<p>お使いのブラウザでは動画タグがサポートされていません。</p>
</video>
</div>
position: fixed;
で要素がスクロールしても画面に固定されるよう設定z-index: 9999;
で他の要素より前面に表示autoplay muted loop
など動画の再生モードを指定object-fit: cover;
で動画のアスペクト比を保ったまま埋め込みもちろん、このコードだけでは「視聴開始のトリガー」や「停止ボタン」などの細かい制御は実装されていませんが、まずはフローティング表示の仕組みを掴むうえで参考になります。実際に運用する場合は、ユーザーに不快感を与えないよう、音声の扱いや再生制御を細かく調整すると良いでしょう。
今回は「追従する動画バナーアプリ 6 選」をまとめて紹介しました。動画をフローティング表示することで、ユーザーの視線をしっかりキャッチし、購買行動を促進できます。まずは無料プランやトライアル期間を活用して、実際の使い勝手を確かめてみることをおすすめします。
参考までに、アプリを使わずにテーマに直接コードを挿入する方法のサンプルも紹介しました。アプリ導入との比較検討材料としてお役立てください。
このように、動画の活用はストアの魅力を直感的に伝える手段として非常に効果的です。ぜひ本記事をきっかけに、ストアのエンゲージメント向上や売上アップにつなげてみてください!