2026/05/11

Shopify にテキスト付き画像（バナー）を設置できるアプリ6選を紹介！画像を活かしてストアを彩る方法

@ 五条真一

今回の記事は Shopify App Store で提供されている、テキスト付き画像（バナー）アプリについての記事です。Shopify ストアに画像とテキストを組み合わせたセクションを設置したい運営者の方に向けて、おすすめのアプリを 6 つ厳選してご紹介します。

テキスト付き画像（バナー）とは

「テキスト付き画像（バナー）」とは、Shopify ストアの中で画像にタイトル・サブタイトル・説明文・ボタンなどの テキスト を組み合わせて表示するセクションのことです。ホームページのファーストビュー、商品ページのブランドストーリー、コレクションページへの導線など、ストアのさまざまな場面で活用される定番の UI 要素です。

EC サイトにおいて画像はもっとも視覚的に強い訴求手段であり、その画像にメッセージや CTA を組み合わせた「テキスト付き画像」は、訪問者を商品ページや特集ページへ誘導するための重要な役割を担います。テーマの標準セクションでも簡単な「画像とテキスト」は実装できますが、デザインの自由度や装飾の細かさには限界があり、ブランドの世界観をしっかり表現したい場合にはアプリの活用が現実的な選択肢になります。

テキスト付き画像（バナー）アプリについて調べるにあたり、以下の記事を参考にしています。

テキスト付き画像（バナー）を導入する利点

ブランドの世界観を視覚的に伝えられる
写真とコピーを組み合わせることで、商品名や説明だけでは伝えにくい雰囲気・ストーリー・世界観を訪問者に届けられます。
ページ滞在時間と回遊率の向上が見込める
印象的なバナーを設置することで訪問者の視線を集め、関連ページへの誘導率を高められます。
CTA を明確に配置できる
バナー内にボタンを置くことで、コレクションページや商品ページへの遷移を促し、コンバージョン改善に貢献します。
季節やキャンペーンに合わせて素早く運用できる
ノーコードで設置できるアプリを使えば、テーマファイルを直接編集することなくバナーを差し替えられます。
デザインのバリエーションを広げられる
標準テーマでは表現できないコラージュやマーキー、スクロールフェードなど、こだわりのレイアウトでストアを彩れます。
モバイルでも見やすい表示を作れる
PC・スマホそれぞれで最適なレイアウトや画像位置に切り替えられるため、スマホ閲覧者が多いストアでも訴求力を維持できます。

テキスト付き画像アプリの選び方

導入するアプリを検討する際は、以下のポイントを意識すると失敗が少なくなります。

ノーコードでテーマに追加できるか
デザインのバリエーション・カスタマイズ性が十分か
PC・モバイル両方の表示に対応しているか
色、装飾、レイアウトを細かく調整できるか
月額料金が運用規模に見合っているか
インストール後すぐ使い始められるか

これらの条件を踏まえると、画像セクションを「ブランドの世界観を伝える場所」として活用したいストアには、デザインのバリエーションが多く、ノーコードで細かいカスタマイズが可能なアプリを選ぶのが正解です。

ノーコード派におすすめの組み合わせ

ここでは、テーマファイルに直接コードを書かず、アプリだけで実装するパターンを紹介します。たとえば、メインのバナー演出を「シンプルテキスト付き画像｜Image with Text」で構築し、それを補強するイメージ装飾を別アプリで実現するイメージです。

組み合わせ例:

メインバナー: シンプルテキスト付き画像｜Image with Text（Overlay デザイン）
商品画像の補足: Widgetic (Image Hotspots) で注目ポイントを表示
バリエーション: Swatchify Image Swatches で色や柄を可視化
商品変化の訴求: FlipSlide Before After Image でビフォーアフター比較

このように役割を分担すれば、ノーコードのままでも訴求力のある商品ページを作り上げられます。

コーディングで Image with Text を実装する場合のサンプル

アプリを使わずに、テーマファイルに直接「テキスト付き画像」を実装することも可能です。学習目的や、ピンポイントで微調整したい場合に参考にしてください。

セクション用 Liquid を作成し、HTML 構造を定義します。

{%- comment -%} sections/image-with-text-custom.liquid {%- endcomment -%}
<section class="iwt-section" style="--iwt-max-width: {{ section.settings.max_width }}px;">
  <div class="iwt-inner iwt-{{ section.settings.image_position }}">
    <div class="iwt-image">
      {% if section.settings.image %}
        <img
          src="{{ section.settings.image | image_url: width: 1200 }}"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
        >
      {% endif %}
    </div>
    <div class="iwt-content">
      {% if section.settings.subtitle != blank %}
        <p class="iwt-subtitle">{{ section.settings.subtitle }}</p>
      {% endif %}
      {% if section.settings.title != blank %}
        <h2 class="iwt-title">{{ section.settings.title }}</h2>
      {% endif %}
      {% if section.settings.description != blank %}
        <div class="iwt-description">{{ section.settings.description }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_url != blank %}
        <a class="iwt-button" href="{{ section.settings.button_url }}">
          {{ section.settings.button_label }}
        </a>
      {% endif %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Image with Text (Custom)",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "画像" },
    { "type": "text", "id": "subtitle", "label": "サブタイトル" },
    { "type": "text", "id": "title", "label": "タイトル" },
    { "type": "richtext", "id": "description", "label": "説明文" },
    { "type": "text", "id": "button_label", "label": "ボタンテキスト" },
    { "type": "url", "id": "button_url", "label": "ボタン URL" },
    {
      "type": "select",
      "id": "image_position",
      "label": "画像の配置",
      "options": [
        { "value": "left", "label": "左" },
        { "value": "right", "label": "右" }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "最大幅",
      "min": 800,
      "max": 1600,
      "step": 50,
      "unit": "px",
      "default": 1200
    }
  ],
  "presets": [
    { "name": "Image with Text (Custom)" }
  ]
}
{% endschema %}

スタイルは別ファイルに分けると保守しやすくなります。

/* assets/image-with-text-custom.css */
.iwt-section {
  max-width: var(--iwt-max-width);
  margin: 0 auto;
  padding: 48px 16px;
}
.iwt-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.iwt-right .iwt-image {
  order: 2;
}
.iwt-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.iwt-subtitle {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.iwt-title {
  font-size: 32px;
  margin: 8px 0 16px;
}
.iwt-description {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.iwt-button {
  display: inline-block;
  padding: 12px 24px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 768px) {
  .iwt-inner {
    grid-template-columns: 1fr;
  }
}

スクロールでフェードインさせたい場合は、JavaScript で軽い演出を加えると印象が変わります。

// assets/image-with-text-custom.js
document.addEventListener('DOMContentLoaded', () => {
  const sections = document.querySelectorAll('.iwt-section');
  if (!('IntersectionObserver' in window)) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });

  sections.forEach((section) => observer.observe(section));
});

コードでも実装は可能ですが、メンテナンスや細かな表示調整を考えると、アプリで管理するほうが圧倒的に効率的です。ストアの規模や運用体制に合わせて選択してください。

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

アプリ名	日本語サポート
シンプルテキスト付き画像｜Image with Text	○
Widgetic (Image Hotspots)	×
Swatchify Image Swatches	○
FlipSlide Before After Image	×
vIMG: Multiple Variant Images	×
Lumora ‑ 生成AIイメージ	○

価格比較

アプリ名	料金	特徴・提供サービス
シンプルテキスト付き画像｜Image with Text	$3.99/月	10 種類のデザイン、ノーコード、カスタマイズ性高い
Widgetic (Image Hotspots)	無料〜$9.99/月	画像内ホットスポット
Swatchify Image Swatches	無料〜$19.99/月	画像/カラースウォッチ
FlipSlide Before After Image	無料〜$3/月	ビフォーアフター比較スライダー
vIMG: Multiple Variant Images	$2/月	バリエーション別複数画像表示
Lumora ‑ 生成AIイメージ	無料インストール（追加 $0.1/枚）	AI 画像生成

使いやすさ

これらのアプリの中で、テキスト付き画像（バナー）を中心に据えた施策を考えるなら、シンプルテキスト付き画像｜Image with Text が最もおすすめです。10 種類のデザインから用途に合わせて選べる柔軟性に加え、色や装飾、レイアウト、モバイル表示までノーコードで細かく整えられるため、ブランドの世界観を統一感のあるバナーとして表現しやすい点が魅力です。月額 $3.99 と手頃な料金で、1 週間の無料体験と年払い実質 2 ヶ月分無料も用意されているので、まずは気軽に試せます。

終わりに

今回は、Shopify でテキスト付き画像（バナー）を設置できるアプリを 6 つ紹介しました。ストアの規模やデザインの方向性に合わせて、最適なアプリを選んでみてください。

参考記事

@ 五条真一

Shopify

サイトTOP お問い合わせ

Shopify にテキスト付き画像（バナー）を設置できるアプリ6選を紹介！画像を活かしてストアを彩る方法

テキスト付き画像（バナー）とは

テキスト付き画像（バナー）を導入する利点

テキスト付き画像アプリの選び方

おすすめのテキスト付き画像 Shopify アプリ

シンプルテキスト付き画像｜Image with Text ☆ 迷ったらこれ

特徴・機能

価格設定

Widgetic (Image Hotspots)

特徴・機能

価格設定

Swatchify Image Swatches

特徴・機能

価格設定

FlipSlide Before After Image

特徴・機能

価格設定

vIMG: Multiple Variant Images

特徴・機能

価格設定

Lumora ‑ 生成AIイメージ

特徴・機能

価格設定

ノーコード派におすすめの組み合わせ

コーディングで Image with Text を実装する場合のサンプル

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

価格比較

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopify にメルマガ登録フォームを設置できるアプリ6選を紹介！

Shopify にテキスト付き画像（バナー）を設置できるアプリ6選を紹介！画像を活かしてストアを彩る方法

Shopify の商品比較・スペック比較テーブルを設置できるアプリ6選を紹介！

Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法

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

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