必見の 9 つのスティッキー バーの例 (および無料のスティッキー バー テンプレート)

公開: 2024-02-20

ウェブサイトのトップは重要な要素であることに疑いの余地はありません。 現在、人々の集中力が持続する時間が短くなっている(最近の統計によると、 2000 年代初頭に比べて 25% 減の 8.25 秒に短縮されている)ことを考えると、訪問者が最初にチェックするものであるため、最初に何が起こるかは非常に重要です。

この記事では、スティッキーバーについて、その概要、使用方法、効果的な理由について説明します。 さらに、独自のデザインを行うための 9 つのクールな例を紹介します。

それでは、いきましょう!

ショートカット ️

  • スティッキーバーとは何ですか?
  • スティッキーバーの使い方は?
  • 9 個のスティッキー バーの例
  • 無料のスティッキーバーテンプレート
  • スティッキーバーをデザインするための 4 つのヒント

スティッキーバーとは何ですか?

スティッキーバーはステッカーのようなもので、ユーザーが上下にスクロールしても Web サイト上に表示されたままになる固定要素です。 ウェブサイトの上部または下部に配置できます。

これは、訪問者の目を引き、閲覧の邪魔をせずに重要な情報、行動喚起、特別オファーを表示する注目を集めるツールです。

例として、このスティッキー バー テンプレートを確認してください。

スティッキーバーの使い方は?

スティッキーバーは次のようなさまざまな用途に使用できます。

  • ウェブサイト訪問者に送料無料と配達スケジュールを知らせる、
  • 割引コードを共有する、
  • 連絡先情報を取得し、
  • アナウンスをしたり、
  • フィードバックを求める、
  • イベントやフラッシュセールの宣伝
  • ソーシャルメディアでより多くの「いいね!」やシェアを獲得できます。

スティッキーバーは、Web サイト上の便利なヘルパーのようなものです。 これらにより、ユーザーの移動を中断することなく、エキサイティングなセール、時間制限のある注文、重要な更新情報を訪問者に簡単に伝えることができます。

したがって、割引を提供する場合でも、何か新しいことを発表する場合でも、e コマース ストアが今年最高の顧客サービス賞を受賞したことを宣伝する場合でも、スティッキー バーはメッセージを伝えるためのシンプルかつ効果的な方法です。

9 個のスティッキー バーの例

スティッキー バーを使用する利点をすべて理解したところで、9 つの優れたスティッキー バーの例を見てみましょう。

1. クラウン&ポー

クラウンと足のスティッキーバーの例

Crown & Paw のスティッキー バーは、配送料をさらに節約するために訪問者にもう少し支出を促す良い例です。 これは動的配送バーであり、顧客がカートに入れたものに基づいて自動的に更新されることを意味します。

顧客は送料無料を好むため、この粘着バーは買い物の継続を促す効果的な方法であり、平均注文額を増加させます。

2. キス・マイ・ケト

Kiss my Keto のスティッキーバーの例

Kiss My Keto の粘着バーは、割引コードを宣伝する方法の完璧な例です。

顧客まだクーポン コードを使用していない場合、Web サイトの閲覧中に貼り付けられる粘着バーは、割引の利用を逃さないようにするための便利なリマインダーとして機能します。

そして、それがここでの鍵です。探索中に常に表示されるようにすることで、買い物中にクーポンを適用するよう常に通知することができます。

3. ソラガーデン

SolaGarden スティッキーバーの例

SolaGarden は、以前に収集したデータを使用して、Web サイト訪問者がすでに見た製品を宣伝し、フレンドリーなリマインダーとして機能させました。

彼らは同時に速達配送取引も宣伝しました。 これは、再訪問者を顧客に変えるための優れた方法です。

4.バイオズー

BioZoo スティッキー バーの例

BioZoo のスティッキー バーは、説得力のあるコピーと、20,000 フォリント以上購入する Web サイト訪問者に対する送料無料という追加のインセンティブを組み合わせています。

「ペットをもう少しかわいがってください」というインパクトのあるメッセージは、効果的な行動喚起として機能するだけでなく、ペットの飼い主の共感を呼び、単なる取引を超えたつながりを生み出します。

5.ブレンドジェット

BlendJet のスティッキー バーの例

Blendjet の例は、新しいリード、特にブランドに馴染み始めたばかりのリードを引き付けるのに最適です。 最初の注文で 10% 割引などのインセンティブを提供することで、新規購読者を獲得できます。

行動喚起にも、通常の「今すぐサインアップ」の代わりに「10% オフ」と表示されていることに注意してください。

6. ファンディングサークル

Funding Circle のスティッキー バーの例

Funding Circle の粘着バーは、明るい色を使用することでどのように人の目を引くかを示しています。 彼らのコピーも素晴らしく、自分たちのビジネスが他の企業の「手頃な融資の獲得」にどのように役立つかを強調しています。

訪問者はバナーをすぐに目にしますが、この形式はポップアップよりも邪魔にならないため、潜在的な顧客がホームページに没頭する時間が得られます。

7. 勤務中の設備

On Duty のスティッキー バーの例

On Duty Equipment の粘着バーは訪問者に 20% オフを奨励し、潜在的な顧客がそれを認識できるようにクーポン コード表示します。

顧客が決して引き換えないクーポン コードを提供することにうんざりしている場合は、フォローアップのスティッキー バーを実装すると、顧客が購入を完了するよう促すことができます。

8. ソルナ

Solluna のスティッキーバーの例

紹介したい新しい製品やサービスはありますか? Solluna の新しい本を宣伝する粘着バーの例からヒントを得てください。 これは直接的で、ポップアップよりも煩わしさがなく、ページの上部に配置されるため、人々の目を引くのに最適な場所です。

9.デックスゴー

Deck の Go スティッキー バーの例

スティッキー バーは、配送スケジュールや営業時間などの重要な企業情報を提供するのにも最適です。 たとえば、DecksGo は、バナーに必要な休日の営業開始情報をすべて表示し、顧客に常に最新情報を提供します。

無料のスティッキーバーテンプレート

スティッキー バーのデザインを開始できるように、無料のテンプレートのコレクションを厳選しました。 これらのテンプレートはカスタマイズ可能なため、独自のブランディングやメッセージを簡単に実装できます。

スティッキーバーをデザインするための 4 つのヒント

これらの 4 つの必須のヒントを活用して、スティッキー バー ゲームをレベルアップしましょう。

1. 明瞭さが鍵

スティッキーバーを作成するときは、メッセージが明確かつ簡潔であることを確認してください。 ユーザーは、プロモーション、情報、行動喚起などの目的を即座に把握する必要があります。

2.魅力的な色を使用する

視覚的に魅力的な色、フォント、グラフィックでスティッキー バーにスパイスを加えます。 注意を引くことと過度に邪魔なデザインを避けることの間で適切なバランスをとってください。

目を引くプレゼンテーションが大きな違いを生む可能性があることを忘れないでください。

3. モバイル向けに最適化する

モバイル ユーザーを寒い屋外に放置しないでください。 スティッキー バーがモバイル デバイス向けに最適化されていることを確認し、すべてのプラットフォームでシームレスで楽しいエクスペリエンスを保証します。

デスクトップでもスマートフォンでも、視聴者は簡単なアクセスとナビゲーションを楽しむことができます。

4. 常に実験してください

実験することを恐れないでください! スティッキー バーのさまざまなバリエーションをテストして、独自の視聴者にとって最も効果的なデザインを特定します。

少しの試行錯誤が、ユーザー エンゲージメントとコンバージョンを大幅に向上させる洞察につながる可能性があります。

まとめ

スティッキー バーが e コマース サイトにとって多用途で便利な味方であることを、もうご理解いただけたと思います。

実世界の例からインスピレーションを引き出し、重要な設計ヒントを実装することで、スティッキー バーの可能性を最大限に活用して、製品を効果的に宣伝し、情報を伝え、ユーザーを引き付けることができます。

ぜひ、無料のテンプレートを試してみて、スティッキー バーの力でゲームをレベルアップしてください。