2026/05/08

Shopify にカードカルーセルを設置できるアプリ6選を紹介！テキスト付き画像で魅せるストアの作り方

@ 五条真一

今回の記事は Shopify App Store で提供されている、カードカルーセルアプリについての記事です。最大 6 枚程度のテキスト付き画像カードを横スクロールで魅せる「カード・カルーセル・テキスト付き画像」の UI は、Apple Store のような洗練されたストア演出を実現したいときに欠かせないパーツになっています。

この記事では、カードカルーセルとは何か、Shopify ストアに導入するとどんな利点があるのか、選び方のポイント、そしておすすめのアプリ 6 選とその比較・日本語サポート状況・テーマのコード編集での実装サンプルまで、まとめて解説します。

カードカルーセルとは

カードカルーセルとは、画像とテキストを組み合わせた「カード」状のコンテンツを、横方向にスクロールして閲覧できる UI のことを指します。Apple Store のトップページや、Netflix の作品一覧、Amazon のおすすめ枠などでよく使われており、2026 年現在の EC サイトの定番表現の一つになっています。

通常の画像スライダーは「1 枚の画像で 1 つのメッセージ」を伝えるのに対し、カードカルーセルは「複数のカードを並べて、一度に多くの情報を提示できる」のが大きな特徴です。各カードに画像・サブタイトル・メイン見出し・補足テキスト・リンクを設定できるため、新商品・セール・コレクション・ストーリーなど、複数のテーマを同時にアピールできます。

カードカルーセルアプリについて調べるにあたり、以下の記事を参考にしています。

カードカルーセルを導入する利点

限られたファーストビューに複数のメッセージを詰め込める
1 つのセクションで複数のカードを横スクロールできるため、新商品・セール・コレクションなどを同時にアピールできます。スクロールしなくても多くの情報を伝えられるため、離脱を防ぎつつ訴求力を高められます。
各カードに個別のリンクを設定でき、回遊動線を作れる
カードごとに商品ページや特集ページへのリンクを設定できるため、お客様が興味を持ったカードから直接遷移できます。クリック数を減らしながらコンバージョンへつなげられます。
画像とテキストを組み合わせて訴求力を高められる
画像だけでは伝わりにくい価格や条件、商品の特徴をテキストで補足できます。「NEW」「LIMITED」「30% OFF」などのサブタイトルを足すと、視線を集めやすくなります。
Apple Store 風のおしゃれな見た目でブランド価値を演出できる
横スクロール、影付きカード、丸みのある角などを組み合わせると、プレミアム感のあるストアを演出できます。テーマ標準のセクションでは出せない上質な印象を作れます。
自動再生で複数キャンペーンを順番にアピールできる
自動再生機能があるアプリなら、お客様が操作しなくてもカードが順番にスライドします。ヒーローエリアでの活用に最適です。
レスポンシブ対応でデバイスを問わず美しく表示できる
PC・タブレット・スマホそれぞれで美しく表示できるアプリを選べば、デバイスごとに見た目が崩れる心配がありません。

カードカルーセルアプリの選び方

カードカルーセルアプリを選ぶ際は、以下の基準で比較するのがおすすめです。

ノーコードでカードを編集できるか
画像レイアウトのバリエーションが用意されているか
カード 1 枚あたりに設定できる項目（サブタイトル・見出し・補足・リンク）の自由度
自動再生・無限スクロールに対応しているか
カードの幅・比率・角丸・影など見た目のカスタマイズ性
レスポンシブ対応の品質
日本語サポートの有無
料金とのバランス

これらの基準を踏まえて、自社のストアの世界観や運用体制に合ったアプリを選んでいくのがポイントです。

価格比較

アプリ名	料金	特徴・提供サービス
シンプルカードカルーセル｜お手軽テキスト付き画像スライダー	$4.99/月	Apple Store 風のテキスト付き画像カードカルーセル。最大 6 枚、3 種類の画像レイアウト、自動再生・無限スクロール対応。
シンプルスライドショー｜お手軽画像スライダー	$3.99/月	ヒーローエリア向けの画像スライダー。PC・スマホ別画像対応。
Ada IQ: Slideshow Image Slider	$2.99/月	スライド・スライドショーともに無制限のスライドショーアプリ。
SOLEX ‑ Brand Carousel	無料〜$9.99/月	パートナー・スポンサー・ブランドロゴ専用の自動カルーセル。
Snap: Before and After Slider	$2.99/月	ビフォー・アフター比較スライダー。商品の効果訴求に特化。
Picca Lookbook ‑ Gallery	$2.99〜$9.99/月	メイソンリー・カルーセルなど 5 種類のレイアウト対応ギャラリー。

Shopify アプリの日本語サポート

アプリ名	日本語サポート
シンプルカードカルーセル｜お手軽テキスト付き画像スライダー	○
シンプルスライドショー｜お手軽画像スライダー	○
Ada IQ: Slideshow Image Slider	×
SOLEX ‑ Brand Carousel	×
Snap: Before and After Slider	×
Picca Lookbook ‑ Gallery	×

テーマのコード編集で実装する場合の参考コード

「アプリを使わずに自前でテキスト付き画像のカードカルーセルを実装したい」という方向けに、Liquid・CSS・JavaScript の最小サンプルを掲載します。Shopify テーマのカスタムセクションとして組み込むことを想定しています。

Liquid セクション

{% schema %}
{
  "name": "カードカルーセル",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し" }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "カード",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "画像" },
        { "type": "text", "id": "subtitle", "label": "サブタイトル" },
        { "type": "text", "id": "title", "label": "メイン見出し" },
        { "type": "richtext", "id": "description", "label": "補足テキスト" },
        { "type": "url", "id": "link", "label": "リンク" }
      ]
    }
  ]
}
{% endschema %}

<section class="card-carousel">
  {% if section.settings.heading != blank %}
    <h2 class="card-carousel__heading">{{ section.settings.heading }}</h2>
  {% endif %}

  <div class="card-carousel__track" data-card-carousel-track>
    {% for block in section.blocks %}
      <a class="card-carousel__card" href="{{ block.settings.link | default: '#' }}">
        {% if block.settings.image %}
          <img class="card-carousel__image" src="{{ block.settings.image | image_url: width: 800 }}" alt="{{ block.settings.title }}" />
        {% endif %}
        <div class="card-carousel__body">
          {% if block.settings.subtitle != blank %}
            <p class="card-carousel__subtitle">{{ block.settings.subtitle }}</p>
          {% endif %}
          {% if block.settings.title != blank %}
            <p class="card-carousel__title">{{ block.settings.title }}</p>
          {% endif %}
          {% if block.settings.description != blank %}
            <div class="card-carousel__description">{{ block.settings.description }}</div>
          {% endif %}
        </div>
      </a>
    {% endfor %}
  </div>
</section>

CSS

.card-carousel {
  padding: 32px 16px;
}

.card-carousel__heading {
  font-size: 24px;
  margin-bottom: 16px;
}

.card-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.card-carousel__card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  background-color: #fff;
}

.card-carousel__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.card-carousel__body {
  padding: 16px;
}

.card-carousel__subtitle {
  font-size: 12px;
  color: #888;
  margin: 0 0 4px;
}

.card-carousel__title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

.card-carousel__description {
  font-size: 14px;
  color: #555;
}

JavaScript（自動再生）

document.addEventListener('DOMContentLoaded', () => {
  const track = document.querySelector('[data-card-carousel-track]');
  if (!track) return;

  let index = 0;
  const cards = track.children;
  const interval = 5000;

  setInterval(() => {
    index = (index + 1) % cards.length;
    const target = cards[index];
    if (!target) return;
    track.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });
  }, interval);
});

このコードは最小実装のサンプルなので、実際のテーマで使う場合はテーマの命名規則・余白・タイポグラフィに合わせて調整してください。とはいえ、レスポンシブ対応・無限スクロール・カードごとのレイアウト切り替えなどを安全に作り込もうとすると、実装・テストの工数が大きくなります。本格的な運用を想定するなら、専用アプリの導入を強くおすすめします。

使いやすさ

総合的にもっともおすすめなのは、ご紹介したアプリの中でも最初に取り上げた シンプルカードカルーセル｜お手軽テキスト付き画像スライダー です。テキスト付き画像をカード状に並べる「カードカルーセル」をピンポイントで実現でき、Apple Store 風のおしゃれなデザインが標準仕様で備わっています。最大 6 枚のカード、3 種類の画像レイアウト、自動再生・無限スクロール、リッチテキスト対応の補足、カスタム CSS まで網羅した上で、月額 $4.99 という導入しやすい価格、そして 7 日間の無料体験で気軽に試せる点が大きな魅力です。

特に「ストアの世界観をワンランク上げたい」「テーマ標準のセクションでは物足りない」と感じている方には、まず最初に試していただきたいアプリです。

終わりに

カードカルーセルは、ファーストビューを華やかに、かつ情報量を最大化できるパワフルな UI です。1 つのストアに複数のキャンペーンや商品テーマがある場合、それぞれをテキスト付きの個別カードとして並べ、リンクで導線を伸ばしていくだけで、ストアの回遊率や CV 率が大きく改善する可能性があります。

今回ご紹介した 6 つのアプリは、それぞれ用途が少しずつ異なります。Apple Store 風のテキスト付き画像カードカルーセルなら「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」、ヒーロー領域の画像スライダーなら「シンプルスライドショー」や「Ada IQ」、ブランドロゴ訴求なら「SOLEX ‑ Brand Carousel」、ビフォー・アフター比較なら「Snap」、複数レイアウトのギャラリーなら「Picca Lookbook」と、ストアの目的に合わせて選び分けてみてください。

参考記事

@ 五条真一

Shopify

サイトTOP お問い合わせ

Shopify にカードカルーセルを設置できるアプリ6選を紹介！テキスト付き画像で魅せるストアの作り方

カードカルーセルとは

カードカルーセルを導入する利点

カードカルーセルアプリの選び方

おすすめのカードカルーセル Shopify アプリ

シンプルカードカルーセル｜お手軽テキスト付き画像スライダー ☆ 迷ったらこれ

特徴・機能

価格設定

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

特徴・機能

価格設定

Ada IQ: Slideshow Image Slider

特徴・機能

価格設定

SOLEX ‑ Brand Carousel

特徴・機能

価格設定

Snap: Before and After Slider

特徴・機能

価格設定

Picca Lookbook ‑ Gallery

特徴・機能

価格設定

価格比較

Shopify アプリの日本語サポート

テーマのコード編集で実装する場合の参考コード

Liquid セクション

CSS

JavaScript（自動再生）

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopify にカードカルーセルを設置できるアプリ6選を紹介！テキスト付き画像で魅せるストアの作り方

Shopify のタイムライン表示アプリ 6 選！沿革・会社概要・ブランドストーリーを魅力的に伝える

Shopify に残りわずかバッジを設置できるアプリ6選を紹介！

Shopify にアコーディオン・折りたたみタブを設置できるアプリ 6 選を紹介！

Shopify にご利用ガイドを設置できるアプリ6選を紹介！

Shopify に最後に売れた時間を表示できるアプリ6選を紹介！