💡

ShopifyでInstagramの追従アイコンを実装する方法を考察

に公開
Shopify
shopifyアプリ
tech

はじめに

今回は、Shopify で常時表示される 追従型の Instagram アイコンを実装する方法について考察しました。

スクロールしても画面の端にインスタアイコンが表示され続けるようにすることで、訪問ユーザーをスムーズに Instagram に誘導できます。HTML・CSS を使った実装方法や、Liquid を用いたより柔軟な実装方法について解説していきます。さらに、Shopify アプリを使えばノーコードでも簡単に Instagram アイコンを追従表示できるので、その方法も紹介します。

今回は、以下の記事を参考にしています。

それでは、頑張っていきましょう。

Shopify で追従インスタアイコンを実装する定義

追従インスタアイコンとは、ユーザーがページをスクロールしても常に画面端に表示される Instagram アイコンを指します。EC サイトの集客において、SNS との連携は重要です。特に Instagram は、ビジュアル重視の商品やブランドの世界観をアピールするのに適したプラットフォームです。

この追従インスタアイコンを Shopify ストアに導入することで、ユーザーの視野に常にアイコンが表示され、いつでも Instagram へアクセスできるようになります。シンプルかつ効果的な施策と言えます。

Shopify で追従インスタアイコンを実装するメリット

まずは、Shopify で追従インスタアイコンを実装するメリットを整理していきましょう。

1. ユーザーエクスペリエンスの向上

画面をスクロールしても常にアイコンが表示されるため、ユーザーが「Instagram に誘導されている」と直感的に理解できます。興味を持った瞬間にすぐアクセスできる利便性により、ユーザーエクスペリエンスが向上します。

2. SNS 流入経路の強化

Instagram を積極的に運用している場合、ショップ内での導線が増えることで、Instagram アカウントのフォロワー増加や、投稿へのエンゲージメント向上が期待できます。SNS 経由でショップへの再訪が促進される可能性も高まります。

3. ブランド認知度の向上

アイコンにブランドのイメージカラーを使うなど、カスタマイズ次第でブランディング効果も狙えます。ショップの世界観を壊すことなく設置すれば、ブランド認知度の向上にもつながります。

4. 設置が簡単

追従型のインスタアイコンは、一見技術が必要そうに見えて、意外とシンプルな実装で導入可能です。後ほど紹介する方法や、Shopify アプリを利用することで、ノーコードでも簡単に設定ができます。

5. モバイルにも対応しやすい

スマホの画面サイズでも、画面端に小さくアイコンを配置すれば邪魔になりません。PC・モバイルいずれにおいても操作しやすい導線を確保できます。

Shopify で追従インスタアイコンを実装するデメリット

一方で、追従インスタアイコンを実装するにあたって、いくつかのデメリットも考慮しておきましょう。

1. ページデザインとの調和が必要

アイコンが常に表示されるがゆえに、デザインによっては「邪魔」と感じられる可能性があります。ストアの UI / UX を損なわないよう、配置やサイズ、デザインをしっかり調整する必要があります。

2. 表示パフォーマンスのリスク

アイコン自体はシンプルでも、追従機能を JS などで実装する場合はコードが増えるため、ごくわずかにページの読み込みが遅くなる可能性があります。ただし、工夫次第で影響を最小限に抑えることも可能です。

3. クリックが分散する可能性

追従アイコンが目立ちすぎると、商品閲覧やカートへの導線よりもインスタへ流れてしまうケースも考えられます。ショップ内で行ってほしいアクション（商品購入）とのバランスを保つ工夫が必要です。

4. 一部ユーザーにとって不要な場合

Instagram を利用していない・興味がないユーザーにとっては、追従アイコンが不必要な装飾になってしまう可能性があります。特定のページだけに表示するなど、ターゲットを意識したカスタマイズが理想的です。

Shopify で追従インスタアイコンを実装する方法

それでは、追従インスタアイコンを実装する具体的な方法を見ていきましょう。
以下の HTML・CSS・JavaScript のサンプルコードは、あくまでシンプルな例です。要件に合わせて調整してください。

<!-- インスタアイコンを設置する要素 -->
<div class="floating-instagram-icon" id="floating-instagram-icon">
  <a href="https://www.instagram.com/your_account" target="_blank" rel="noopener noreferrer">
    <img 
      src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" 
      alt="Instagram Icon" 
      class="instagram-icon-img" 
    />
  </a>
</div>

<!-- 追従インスタアイコンの CSS -->
<style>
  .floating-instagram-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999; 
    /* 他の要素より前面に表示するために大きめの z-index を指定 */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .instagram-icon-img {
    width: 32px;
    height: 32px;
  }

  /* ホバー時のエフェクト */
  .floating-instagram-icon:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-2px);
  }

  /* スマホなど画面幅の小さいデバイス用にサイズ調整 */
  @media screen and (max-width: 480px) {
    .floating-instagram-icon {
      width: 50px;
      height: 50px;
      bottom: 15px;
      right: 15px;
    }
    .instagram-icon-img {
      width: 24px;
      height: 24px;
    }
  }
</style>

<!-- 追従インスタアイコンの表示制御用 JavaScript -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const instaIcon = document.getElementById('floating-instagram-icon');
    
    // ページトップではアイコンを非表示にしたい場合の例
    // 以下はスクロール位置が 100px を超えたら表示する実装例です
    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        instaIcon.style.display = 'flex';
      } else {
        instaIcon.style.display = 'none';
      }
    });
  });
</script>

上記コードをテーマの theme.liquid や layout.liquid の <body> タグ直下、もしくはセクションに追加すれば、スクロール時にも画面右下にアイコンが追従表示される仕組みを作ることが可能です。

追従インスタアイコンのコードを解説

  1. HTML
    <div class="floating-instagram-icon" id="floating-instagram-icon">
    追従アイコンを包む要素です。中にリンクとアイコン画像を設置しています。target="_blank" で新規タブ、rel="noopener noreferrer" でセキュリティ対策を行っています。

  2. CSS
    position: fixed; bottom: 20px; right: 20px; で画面右下に固定表示。
    z-index: 9999; でほかの要素より前面に表示します。
    border-radius: 50%; で円形にし、ホバー時には少し影と位置を変えて、目立ちつつもシンプルに仕上げています。

  3. JavaScript
    window.addEventListener('scroll', () => {...}); でスクロール量が一定を超えたら表示する例を示しています。常時表示したい場合は、このイベントリスナーを削除するか、常に display: flex; を指定しておけばOKです。

Liquid を用いた追従インスタアイコンの実装

Liquid を使うと、ページごとにアイコンの有無やリンク先を切り替えるなど、より柔軟な対応が可能です。例えば商品ページとトップページではリンク先を変えたい場合など、以下のような条件分岐を行えます。

{% if template.name == 'index' %}
  <!-- トップページなら特定の画像を使用 -->
  <div class="floating-instagram-icon">
    <a href="https://www.instagram.com/your_brand_top/" target="_blank">
      <img src="{{ 'top_icon.png' | asset_url }}" alt="Top Instagram Icon" />
    </a>
  </div>
{% elsif template.name == 'product' %}
  <!-- 商品ページなら別のアカウントへリンクする例 -->
  <div class="floating-instagram-icon">
    <a href="https://www.instagram.com/your_brand_products/" target="_blank">
      <img src="{{ 'product_icon.png' | asset_url }}" alt="Product Instagram Icon" />
    </a>
  </div>
{% endif %}

template.name を活用して、トップページ・商品ページ・コレクションページなど、ページ種別に応じたアイコン表示が可能になります。
Liquid で条件分岐を使いこなすことで、同じ要素でもページごとに異なる表示やリンク設定ができるのが大きな特徴です。

Shopify アプリを用いて追従インスタアイコンを実装する方法

ここまで、コーディングを用いた実装方法を紹介しましたが、ノーコードで素早く導入したい方におすすめなのが、Shopify アプリを活用する方法です。

今回紹介するのは、
「シンプル Instagram 誘導｜追従インスタアイコン」
というアプリです。

シンプル Instagram 誘導｜追従インスタアイコン とは？

  • 価格: 月額 $3.99 (7日間の無料体験あり)

  • 評価: 0.0 (0 レビュー)

  • 開発者: 株式会社UnReact

  • 機能

    • スクロールしても追従する Instagram アイコンを簡単に追加
    • ストア内どのページにも柔軟に設置可能
    • ノーコードでカスタマイズでき、デザインも簡単に調整
    • PC・スマホ両対応で、ユーザーの画面サイズを問わず自然に表示

以下のShopify公式のアプリストアからインストールできます。

シンプル Instagram 誘導｜追従インスタアイコン

アプリの特徴

  • 常時表示される追従 Instagram アイコンを使って、ストア訪問者を Instagram へ誘導しやすくなります。
  • アイコンのリンク先 URL やアイコンデザインの変更など、アプリの管理画面から自由に設定が可能。
  • 開発者や専門知識を必要とせず、数クリックで導入できるため、忙しいストア運営者にもおすすめです。

シンプル Instagram 誘導｜追従インスタアイコンの概要

ここからは、シンプル Instagram 誘導｜追従インスタアイコンの機能の概要について解説していきます。

こちらのアプリを使えば追従する Instagram（インスタグラム）アイコンをShopifyストアに簡単に追加できます。

スクロールしても追従する Instagram（インスタグラム）アイコンを表示できます。

ストアのどのページにもInstagram（インスタグラム）アイコンを設置できます。

ノーコードで様々な項目をカスタマイズできます。

1 クリックでテーマに追加できます。

以下の、Shopify公式のアプリストアからインストールが可能です。
https://apps.shopify.com/sa-085-ur-sticky-instagram?locale=ja

こんな方におすすめ

  • Instagram を活用してブランド認知を広げたい
  • SNS からの流入をさらに強化したい
  • コーディングに時間をかけず、即座にストアに追従アイコンを設置したい

Shopify アプリストアからインストール後、管理画面で「表示する位置」「アイコンのデザイン」「リンク先 URL」などを設定すればすぐに利用開始できます。7日間の無料体験があるので、導入ハードルも低く安心ですね。

最後に

今回は、Shopify で 追従インスタアイコンを実装する方法と、アプリを用いて簡単に導入する方法を解説しました。スクロールしても常に目に入るアイコンは、ユーザーにとってわかりやすく、インスタへの誘導を強化するのに大変効果的です。

  • コードで実装すれば、細かいカスタマイズやページごとの出し分けが自由自在です。
  • Shopify アプリを活用すれば、ノーコードで迅速に導入できます。

ストアのブランディングに合わせたデザインや、ユーザーの導線を考慮した配置を行い、Instagram からの集客アップにつなげてみてください。ぜひお試しください！
。

参考記事

今回は、以下の記事を参考にしています。

Discussion