Shopifyでスライドショーを実装する方法を考察

はじめに

今回は、Shopify でスライドショーを実装する方法について解説していきます。

コーディングを用いてスライドショーを作成する方法や、Shopify アプリを用いてスライドショーを作成する方法について解説していきます。

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

Shopify のスライドショーについて

まずは、Shopify のスライドショーについてざっくりと解説していきます。

Shopifyのスライドショー機能は、オンラインストアの視覚的魅力を高める重要な要素です。基本的には、テーマカスタマイザーを通じて簡単に実装できますが、より高度なカスタマイズにはLiquidコードの理解が必要です。

実装の際は、画像の最適化が鍵となります。大きすぎる画像ファイルはページの読み込み速度に悪影響を与えるため、適切なサイズと圧縮が重要です。また、モバイルレスポンシブ対応も忘れずに。

パフォーマンス面では、スライドの数を3〜5枚程度に抑えることをおすすめします。過剰なアニメーションやトランジション効果も控えめにし、サイト全体の速度低下を防ぎましょう。

さらに、各スライドに明確なCall-to-Actionを設定することで、ユーザーエンゲージメントを高められます。動的コンテンツの活用も効果的で、例えば在庫状況や限定セール情報などをリアルタイムで表示できます。

適切に実装されたスライドショーは、商品のアピールやブランドイメージの強化に大きく貢献し、結果としてコンバージョン率の向上につながります。

それでは次に、Shopify でスライドショーを導入するメリット・デメリットについてまとめていきます。

Shopify でスライドショーを実装するメリット・デメリット

ここからは、Shopify でスライドショーを実装するメリット・デメリットについて考察していきましょう。

Shopifyでスライドショーを実装するメリット

まずは、Shopify でスライドショーを実装するメリットについて考えていきましょう。

1. 視覚的なインパクトとブランド認知の向上

スライドショーは、視覚的に強力なコンテンツを簡単に表示できるため、訪問者の目を引くのに最適です。例えば、新商品やキャンペーン、特別なオファーを大きく目立たせることで、訪問者に強い印象を与えることができます。これにより、ブランド認知を高め、リピーターを増やす効果があります。

2. コンバージョン率の向上

スライドショーは、ストアのトップページやランディングページに配置されることが多く、商品やサービスの魅力を一瞬で伝えることができます。これにより、訪問者が製品に興味を持ち、最終的には購入行動につながる可能性が高まります。特に、セールや期間限定オファーなど、緊急性を感じさせるコンテンツをスライドショーに組み込むことで、コンバージョン率をさらに向上させることができます。

3. 多様なコンテンツの表示が可能

スライドショーを使用することで、複数のメッセージやビジュアルを短時間で効果的に伝えることができます。例えば、新製品の紹介、顧客の声、人気商品のピックアップなど、異なるコンテンツを順番に表示することで、訪問者に豊富な情報を提供しつつ、ページをすっきりと保つことができます。

4. モバイルフレンドリーなデザイン

多くのスライドショー機能は、レスポンシブデザインをサポートしており、モバイルデバイスでも美しく表示されます。スマートフォンやタブレットを使用するユーザーが増えている現代において、デバイスに関係なく一貫したユーザー体験を提供できることは、大きなメリットです。モバイルユーザーもスムーズにスライドショーを閲覧できるため、顧客満足度が向上し、購入意欲を高める効果が期待できます。

5. 簡単なカスタマイズと管理

Shopifyのスライドショー機能は、多くの場合、テーマに組み込まれており、ノーコードで設定が可能です。管理画面から簡単に画像やテキストを変更できるため、シーズンごとのキャンペーンや新商品のプロモーションに合わせて柔軟に対応できます。これにより、ストアの維持管理が容易になり、マーケティング活動をより効率的に行えるようになります。

Shopifyでスライドショーを実装するデメリット

ここからは、Shopify でスライドショーを実装するデメリットについて考察していきます。

1. ページ読み込み速度の低下

スライドショーは、複数の高解像度画像や動画を表示するため、ページの読み込み速度に影響を与える可能性があります。特に、画像サイズが大きかったり、スライドショーのフレーム数が多かったりすると、訪問者がページを開く際に待たされる時間が増え、ユーザー体験が悪化する可能性があります。これにより、訪問者がページを離脱してしまうリスクが高まります。

2. 過度な視覚効果によるユーザーの混乱

スライドショーの使用が過度になると、ページ全体が忙しく感じられ、ユーザーが求めている情報に集中できなくなることがあります。特に、スライドの切り替えが速すぎたり、アニメーションが複雑だったりすると、ユーザーが重要なメッセージを見逃す可能性があるため、慎重に設定する必要があります。

3. コンバージョン率の低下リスク

スライドショーに頼りすぎると、かえってコンバージョン率が低下するリスクがあります。訪問者がスライドショーに表示される複数のメッセージに惑わされ、何をクリックすればよいのかがわからなくなることがあります。明確な行動を促すコールトゥアクションが欠如している場合、ユーザーがアクションを起こすことなくページを離れてしまう可能性が高まります。

4. モバイルユーザーへの影響

モバイルデバイスでは、スライドショーがうまく表示されないことがあります。特に、スライドショーのコンテンツが多すぎると、画面の小さなモバイルデバイスでは視認性が低下し、ユーザー体験に悪影響を与えることがあります。さらに、モバイルデータを使用しているユーザーにとって、スライドショーがページの読み込みを遅らせる要因となり得るため、注意が必要です。

5. メンテナンスと更新の負担

スライドショーを効果的に運用するには、定期的なメンテナンスとコンテンツの更新が必要です。シーズンごとのキャンペーンや新商品のプロモーションに合わせて画像やテキストを変更する手間が増え、リソースが限られている場合には負担となる可能性があります。また、スライドショーのコンテンツが古いままで放置されると、ブランドイメージにも悪影響を与える可能性があります。

ここからは、Shopify でスライドショーを実装するための方法について考察していきます。

コーディングを用いてスライドショーを実装する方法

コーディングを用いてスライドショーを実装する方法について考察していきます。

以下が、スライドショーのサンプルコードです。

<div class="slideshow-wrapper" data-slideshow>
  <div class="slideshow" style="height: {{ section.settings.slideshow_height }}px;">
    {% for block in section.blocks %}
      {% if block.type == 'slide' %}
        <div class="slideshow__slide{% if forloop.first %} slideshow__slide--active{% endif %}" {{ block.shopify_attributes }} data-slide>
          {% if block.settings.image %}
            {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="slideshow__image lazyload"
                 src="{{ block.settings.image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ block.settings.image.alt | escape }}">
          {% endif %}
          <div class="slideshow__text-wrap">
            <div class="slideshow__text-content">
              {% if block.settings.heading != blank %}
                <h2 class="slideshow__title">{{ block.settings.heading | escape }}</h2>
              {% endif %}
              {% if block.settings.text != blank %}
                <div class="slideshow__text">{{ block.settings.text }}</div>
              {% endif %}
              {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
                  {{ block.settings.button_label | escape }}
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
  {% if section.blocks.size > 1 %}
    <button type="button" class="slideshow__arrow slideshow__arrow--prev" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">
      {% include 'icon-chevron-left' %}
      <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
    </button>
    <button type="button" class="slideshow__arrow slideshow__arrow--next" aria-label="{{ 'sections.slideshow.next_slide' | t }}">
      {% include 'icon-chevron-right' %}
      <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
    </button>
  {% endif %}
</div>

{% stylesheet %}
.slideshow-wrapper {
  position: relative;
  overflow: hidden;
}

.slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slideshow__slide--active {
  opacity: 1;
  z-index: 1;
}

.slideshow__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__text-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
}

.slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.slideshow__arrow--prev {
  left: 10px;
}

.slideshow__arrow--next {
  right: 10px;
}
{% endstylesheet %}

{% javascript %}
class Slideshow {
  constructor(element) {
    this.element = element;
    this.slides = this.element.querySelectorAll('[data-slide]');
    this.arrows = this.element.querySelectorAll('.slideshow__arrow');
    this.currentSlide = 0;
    this.slideCount = this.slides.length;
    this.slideshow_speed = parseInt(this.element.getAttribute('data-slideshow-speed'), 10);

    this.init();
  }

  init() {
    this.bindEvents();
    this.startAutoplay();
  }

  bindEvents() {
    this.arrows.forEach(arrow => {
      arrow.addEventListener('click', this.handleArrowClick.bind(this));
    });
  }

  handleArrowClick(event) {
    const direction = event.currentTarget.classList.contains('slideshow__arrow--next') ? 1 : -1;
    this.changeSlide(direction);
  }

  changeSlide(direction) {
    this.slides[this.currentSlide].classList.remove('slideshow__slide--active');
    this.currentSlide = (this.currentSlide + direction + this.slideCount) % this.slideCount;
    this.slides[this.currentSlide].classList.add('slideshow__slide--active');
  }

  startAutoplay() {
    setInterval(() => {
      this.changeSlide(1);
    }, this.slideshow_speed);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const slideshowElements = document.querySelectorAll('[data-slideshow]');
  slideshowElements.forEach(element => new Slideshow(element));
});
{% endjavascript %}


{% schema %}
{
  "name": "スライドショー",
  "settings": [
    {
      "type": "range",
      "id": "slideshow_height",
      "min": 300,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "スライドショーの高さ",
      "default": 500
    },
    {
      "type": "select",
      "id": "slideshow_speed",
      "options": [
        { "value": "3000", "label": "3秒" },
        { "value": "4000", "label": "4秒" },
        { "value": "5000", "label": "5秒" },
        { "value": "6000", "label": "6秒" }
      ],
      "default": "5000",
      "label": "スライド切り替え速度"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "スライド",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "画像"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "見出し"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "テキスト"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "ボタンリンク"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "ボタンラベル"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "スライドショー",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}

今回は、こちらのコードについて解説していきます。

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

スキーマ定義

まず、セクションのスキーマ定義から見ていきましょう。

{% schema %}
{
  "name": "スライドショー",
  "settings": [
    {
      "type": "range",
      "id": "slideshow_height",
      "min": 300,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "スライドショーの高さ",
      "default": 500
    },
    {
      "type": "select",
      "id": "slideshow_speed",
      "options": [
        { "value": "3000", "label": "3秒" },
        { "value": "4000", "label": "4秒" },
        { "value": "5000", "label": "5秒" },
        { "value": "6000", "label": "6秒" }
      ],
      "default": "5000",
      "label": "スライド切り替え速度"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "スライド",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "画像"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "見出し"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "テキスト"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "ボタンリンク"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "ボタンラベル"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "スライドショー",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}

こちらのスキーマ定義について、ざっくりと解説していきます。

• セクション設定:

  • slideshow_height: スライドショーの高さをピクセル単位で設定できます。範囲は300px〜1000pxで、10px刻みで調整可能です。
  • slideshow_speed: スライドの切り替え速度を選択できます。3秒から6秒までの選択肢があります。

• ブロック設定:

  • 各スライドは「ブロック」として定義されています。
  • 画像、見出し、テキスト、ボタンリンク、ボタンラベルを設定できます。
  • これにより、各スライドの内容を柔軟にカスタマイズできます。

• プリセット:

  • デフォルトで2つのスライドを持つプリセットが定義されています。
  • これにより、ユーザーが新しくセクションを追加した際に、すぐに使える状態になります。

Liquid構造

次に、スライドショーの Liquid の構造について解説していきます。

<div class="slideshow-wrapper" data-slideshow>
  <div class="slideshow" style="height: {{ section.settings.slideshow_height }}px;">
    {% for block in section.blocks %}
      {% if block.type == 'slide' %}
        <div class="slideshow__slide{% if forloop.first %} slideshow__slide--active{% endif %}" {{ block.shopify_attributes }} data-slide>
          {% if block.settings.image %}
            {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="slideshow__image lazyload"
                 src="{{ block.settings.image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ block.settings.image.alt | escape }}">
          {% endif %}
          <div class="slideshow__text-wrap">
            <div class="slideshow__text-content">
              {% if block.settings.heading != blank %}
                <h2 class="slideshow__title">{{ block.settings.heading | escape }}</h2>
              {% endif %}
              {% if block.settings.text != blank %}
                <div class="slideshow__text">{{ block.settings.text }}</div>
              {% endif %}
              {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
                  {{ block.settings.button_label | escape }}
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
  {% if section.blocks.size > 1 %}
    <button type="button" class="slideshow__arrow slideshow__arrow--prev" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">
      {% include 'icon-chevron-left' %}
      <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
    </button>
    <button type="button" class="slideshow__arrow slideshow__arrow--next" aria-label="{{ 'sections.slideshow.next_slide' | t }}">
      {% include 'icon-chevron-right' %}
      <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
    </button>
  {% endif %}
</div>

こちらの Liquid について、ざっくりと解説します。

• スライドショーのラッパー
  data-slideshow 属性を持つ外部の div 要素は、JavaScriptで初期化する際に使用されます。

• スライドの生成
  Liquidの for ループを使用して、各スライドを動的に生成しています。最初のスライドには slideshow__slide--active クラスが追加され、初期表示時に見えるようになっています。

• レスポンシブ画像
  lazyload クラスと data- 属性を使用して、遅延読み込みとレスポンシブ画像を実現しています。data-widths 属性は、様々な画面サイズに対応する画像のサイズを指定しています。

• スライドコンテンツ
  各スライドには、画像、見出し、テキスト、ボタンが含まれる可能性があります。条件文を使用して、設定されている場合のみ各要素を表示しています。

• ナビゲーション矢印
  スライドが2つ以上ある場合のみ、前後のスライドに移動するための矢印ボタンを表示します。アクセシビリティを考慮し、適切な aria-label を使用しています。

CSS についての解説

スライドショーの CSS について見ていきましょう。

{% stylesheet %}
.slideshow-wrapper {
  position: relative;
  overflow: hidden;
}

.slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slideshow__slide--active {
  opacity: 1;
  z-index: 1;
}

.slideshow__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__text-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
}

.slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.slideshow__arrow--prev {
  left: 10px;
}

.slideshow__arrow--next {
  right: 10px;
}
{% endstylesheet %}

こちらの CSS について、ざっくりとまとめていきます。

• レイアウト
  position: absolute を使用して、スライドを重ね合わせています。overflow: hidden で、スライドショーの範囲外にはみ出す部分を隠しています。

• トランジション
  スライドの切り替えは opacity のトランジションで実現しています。アクティブなスライドは opacity: 1 で表示され、非アクティブなスライドは opacity: 0 で隠れます。

• レスポンシブデザイン
  width: 100% や height: 100% を使用して、親要素にフィットするようにしています。画像は object-fit: cover で、アスペクト比を維持しながらスライド全体をカバーします。

• テキスト配置
  テキストは絶対位置指定で中央に配置されています。transform: translate(-50%, -50%) を使用して、正確に中央に配置しています。

• ナビゲーション矢印
  矢印ボタンも絶対位置指定で配置され、半透明の背景を持っています。:hover 擬似クラスを使用して、ホバー時のスタイルを追加するとよいでしょう。

JavaScript のコードの解説

最後に、JavaScript のコードの解説を行っていきます。頑張っていきましょう。

{% javascript %}
class Slideshow {
  constructor(element) {
    this.element = element;
    this.slides = this.element.querySelectorAll('[data-slide]');
    this.arrows = this.element.querySelectorAll('.slideshow__arrow');
    this.currentSlide = 0;
    this.slideCount = this.slides.length;
    this.slideshow_speed = parseInt(this.element.getAttribute('data-slideshow-speed'), 10);

    this.init();
  }

  init() {
    this.bindEvents();
    this.startAutoplay();
  }

  bindEvents() {
    this.arrows.forEach(arrow => {
      arrow.addEventListener('click', this.handleArrowClick.bind(this));
    });
  }

  handleArrowClick(event) {
    const direction = event.currentTarget.classList.contains('slideshow__arrow--next') ? 1 : -1;
    this.changeSlide(direction);
  }

  changeSlide(direction) {
    this.slides[this.currentSlide].classList.remove('slideshow__slide--active');
    this.currentSlide = (this.currentSlide + direction + this.slideCount) % this.slideCount;
    this.slides[this.currentSlide].classList.add('slideshow__slide--active');
  }

  startAutoplay() {
    setInterval(() => {
      this.changeSlide(1);
    }, this.slideshow_speed);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const slideshowElements = document.querySelectorAll('[data-slideshow]');
  slideshowElements.forEach(element => new Slideshow(element));
});
{% endjavascript %}

こちらのコードのざっくりとした解説を行っていきます。

• クラスベースの設計
  ES6のクラス構文を使用して、スライドショーの機能をカプセル化しています。これにより、コードの再利用性と保守性が向上します。

• 初期化
  コンストラクタで必要な要素を取得し、初期状態を設定しています。init() メソッドでイベントのバインドとオートプレイを開始します。

• イベントハンドリング
  矢印ボタンのクリックイベントをバインドしています。handleArrowClick() メソッドで、クリックされた矢印の方向を判断しています。

• スライド切り替え
  changeSlide() メソッドで、現在のスライドからクラスを削除し、次のスライドにクラスを追加しています。モジュロ演算子 % を使用して、スライドのインデックスが配列の範囲内に収まるようにしています。

• オートプレイ
  setInterval() を使用して、一定間隔でスライドを自動的に切り替えています。切り替え間隔は、HTMLの data-slideshow-speed 属性から取得しています。

• 初期化処理
  DOMContentLoaded イベントで、ページ上のすべてのスライドショー要素を初期化しています。これにより、複数のスライドショーを同じページ上で使用できます。

ここまでで、Shopify にスライドショーを実装するサンプルコードについての解説は終了です。

ここからは、非エンジニアの方に向けて Shopify アプリを用いてスライドショーを実装する方法について解説していきます。

Shopify アプリを用いてスライドショーを実装する方法

それでは、Shopify アプリを用いてスライドショーを実装する方法について解説していきます。

今回紹介するのは、シンプルスライドショー｜お手軽画像スライダーというアプリです。

以下が、Shopify 公式のアプリストアになります。

https://apps.shopify.com/ur-smart-image-slideshow?locale=ja

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

https://unreact.jp/blog/about-slideshow

https://zenn.dev/eijijii/scraps/35806bac66dc15

https://zenn.dev/natsume_katu/articles/d8f5d70f3807ff

https://qiita.com/eijiSaito/items/a5fc2710569f3b3e84c0

https://unblog.unreact.jp/blog/0ltes-pgr

https://unreact.jp/shopify-apps/sa-020-ur-slideshow-app/guide

それでは、Shopify でスライドショーを実装できるこちらのアプリについて解説していきます。

シンプルスライドショー｜お手軽画像スライダーの機能

シンプルスライドショー｜お手軽画像スライダーは、ノーコードで Shopify にスライドショーを挿入できるアプリです。

高いデザイン性のスライドショーを簡単に挿入できる、日本製の Shopify アプリです。

ノーコードで以下のような画像スライダーを Shopify ストアに挿入できます。

また、スキーマの編集項目が非常に沢山あるので、画像スライダーの見た目を自由にカスタマイズできます。

そして、PC 用とスマホ用に別々の画像を設定することが可能です。

このように、安価で非常にシンプルでかつ使いやすい Shopify アプリです。

コーディングによるスライドショーの実装が難しい場合は、選択肢の一つに入ってくるかと思います。

https://apps.shopify.com/ur-smart-image-slideshow?locale=ja

最後に

ここまでで、コーディングを用いてスライドショーを実装する方法と、Shopify アプリを用いてスライドショーを実装する方法を解説しました。

お疲れさまでした。