2026/05/01

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

@ 信条刃

Shopify

今回の記事は Shopify App Store で提供されている、アコーディオン（折りたたみタブ）アプリについての記事です。

アコーディオン・折りたたみタブとは

「アコーディオン」とは、Web サイト上で複数の項目を折りたたみ、クリックされたときだけ中身を展開して表示する UI のことです。「折りたたみタブ」「トグル」「アコーディオンメニュー」などと呼ばれることもあります。

たとえば次のようなシーンでよく使われます。

FAQ（よくある質問）ページで、質問をクリックすると回答が展開される
商品ページの「サイズガイド」「配送情報」「素材について」を折りたたんで整理する
利用規約・プライバシーポリシーをセクションごとに折りたたむ

ページに掲載したい情報量が多い場合に、視覚的にスッキリと整理しながらも、必要な情報をすぐに見つけられる UI として、現代の EC サイトでは定番の存在となっています。

アコーディオンアプリについて調べるにあたり、以下の記事を参考にしています。

アコーディオン・折りたたみタブを導入する利点

ページがスッキリ見やすくなる
長い説明文や FAQ をアコーディオンに格納することで、ページの縦の長さを抑えられます。お客様は最初に見出しだけを把握でき、興味のある項目だけを開いて読めるため、視覚的な負担が軽減されます。
お客様が必要な情報にすぐアクセスできる
見出しが一覧で並ぶため、お客様は自分が知りたい情報をワンクリックで開けます。スクロールして探す手間が減るので、商品ページの離脱率の改善にもつながります。
モバイル表示と相性が良い
スマートフォンでは情報を縦に並べると、ページが非常に長くなりがちです。アコーディオンを使うことで、モバイル画面でもコンパクトに情報を表示でき、閲覧体験が向上します。
FAQ ページの作成が簡単になる
よくある質問のページは、アコーディオン形式で表示するのがすでにスタンダードです。ノーコードでアコーディオンを設置できれば、FAQ ページを短時間で構築できます。
商品情報の整理に役立つ
サイズガイド、配送情報、素材の詳細、お手入れ方法など、商品ページで伝えたい情報をジャンルごとに折りたたんで配置できます。情報量を減らさず、見やすさだけを高められる点が大きな強みです。
ストア全体の印象を引き締められる
アコーディオンを上手に活用すれば、文字びっしりのページから「整理されたページ」へと印象を変えられます。ブランドとしての統一感や信頼感の演出にも貢献してくれます。

アコーディオン・折りたたみタブアプリの選び方

Shopify の App Store には、アコーディオンを設置できるアプリが多数公開されています。アプリ選びの際は、以下のような基準をチェックすると失敗しにくくなります。

ストアのどのページにアコーディオンを設置できるか（商品ページ専用 / 全ページ対応）
アコーディオン内に表示できるコンテンツの種類（テキスト、画像、商品、コレクション、Liquid など）
デザインのカスタマイズ範囲（色、フォント、枠線、余白、アイコン）
日本語のインターフェースに対応しているか
価格設定（無料プラン・無料体験・サブスクリプション・買い切り）
レビュー数や評価などの安心感

「とにかく FAQ ページを作りたい」のか、「商品ページの説明を整理したい」のか、「ホームページにもアコーディオンを設置したい」のか、目的に応じて選ぶアプリは変わってきます。自分のストアでアコーディオンを使いたい用途を明確にしてから、最適なアプリを選んでいきましょう。

アコーディオンを Liquid で実装するサンプルコード

「アプリではなく、自分のテーマに直接アコーディオンを実装したい」というケース向けに、シンプルなサンプルコードを紹介します。アプリを使わずにテーマで実装したい場合の参考にしてください。

セクション/スニペットとして sections/accordion.liquid を作成し、以下のような内容を入れます。

<section class="ac-section" aria-labelledby="ac-section-title">
  {% if section.settings.title != blank %}
    <h2 id="ac-section-title" class="ac-section__title">
      {{ section.settings.title }}
    </h2>
  {% endif %}

  <div class="ac-list">
    {% for block in section.blocks %}
      {% if block.type == 'item' %}
        <details class="ac-item" {{ block.shopify_attributes }}>
          <summary class="ac-item__summary">
            <span class="ac-item__title">{{ block.settings.title }}</span>
            <span class="ac-item__icon" aria-hidden="true">+</span>
          </summary>
          <div class="ac-item__body">
            {{ block.settings.body }}
          </div>
        </details>
      {% endif %}
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Accordion",
  "settings": [
    { "type": "text", "id": "title", "label": "Section title", "default": "FAQ" }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Accordion item",
      "settings": [
        { "type": "text", "id": "title", "label": "Title", "default": "Question" },
        { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Answer</p>" }
      ]
    }
  ],
  "presets": [
    { "name": "Accordion", "category": "Custom" }
  ]
}
{% endschema %}

スタイルは assets/accordion.css などに、たとえば次のように記述します。

.ac-section {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 16px;
}

.ac-section__title {
  font-size: 24px;
  margin-bottom: 16px;
}

.ac-item {
  border-bottom: 1px solid #e5e5e5;
}

.ac-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.ac-item__summary::-webkit-details-marker {
  display: none;
}

.ac-item__icon {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.ac-item[open] .ac-item__icon {
  transform: rotate(45deg);
}

.ac-item__body {
  padding: 0 0 16px;
  color: #555;
  line-height: 1.7;
}

<details> と <summary> を使うことで、JavaScript なしでも展開・折りたたみが動く軽量な実装になります。アクセシビリティも標準で備わっており、SEO 観点でも素直なマークアップです。

ただし、こうしたテーマ直編集の方法は、テーマを変更したときにコードが失われたり、他のセクションと衝突したりするリスクがあります。手軽さ・運用負荷の低さを重視するのであれば、後述するアプリの導入が現実的な選択肢になります。

価格比較

以下、本記事で紹介したアプリの料金体系を比較します。

シンプルアコーディオン表示｜お手軽折りたたみタブ：$3.99/月（年 $39.99）。あらゆるページに設置可能・日本語 UI。
ThemeStack：Free / Pro $1.99/月。FAQ アコーディオン以外にも 15+ ブロックを利用可能。
Advanced Product Tabs：Free / Starter $2.99/月 / Premium $4.99/月。商品説明の見出し自動タブ化が強み。
Product Tabs by PageUni：無料インストール（プレミアム機能は一括料金）。商品タブ向け。
POWR: FAQ Page | Help Center：Free / Starter $3.84/月 / Pro $8.79/月 / Business $98.99/月。FAQ ヘルプセンター特化。
Amp Product Descriptions：Starter Free / Premium $9.99/月。商品ページのアコーディオン作成に強い。

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

各アプリの日本語対応状況を整理します。

シンプルアコーディオン表示｜お手軽折りたたみタブ：○（管理画面・テーマエディタともに日本語に対応）
ThemeStack：×（英語のみ）
Advanced Product Tabs：×（英語のみ）
Product Tabs by PageUni：×（英語のみ）
POWR: FAQ Page | Help Center：×（英語のみ）
Amp Product Descriptions：×（英語のみ）

使いやすさ

いくつかのアプリを並べて比較してみると、日本語のストア運営者にとって最も導入ハードルが低いのは、最初にご紹介した 「シンプルアコーディオン表示｜お手軽折りたたみタブ」 です。

管理画面・テーマエディタの両方が日本語に対応している
ホーム・商品・コレクションなど、あらゆるページに設置できる
リッチテキスト・画像・商品・コレクション・カスタム Liquid を組み合わせて、自由にコンテンツを作れる
5 種類のデザインスタイル × 7 種類のアイコンで、ストアのトーンに馴染ませられる
月額 $3.99 と低コストで、7 日間の無料体験あり

「アプリ選びで迷ったら、まずはこれから試してみる」という選択を後押しできるアプリだと言えるでしょう。

終わりに

今回は、Shopify でアコーディオン・折りたたみタブを設置できるアプリを 6 つご紹介しました。

ストアにアコーディオンを取り入れるだけでも、商品ページ・FAQ ページの見やすさは大きく変わります。「ページが縦に長くて読みにくい」「FAQ ページが整理できていない」といった悩みを抱えているストアは、ぜひ今回の記事を参考に、最適なアプリを見つけてみてください。

参考記事

@ 信条刃

Shopify

サイトTOP お問い合わせ

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

アコーディオン・折りたたみタブとは

アコーディオン・折りたたみタブを導入する利点

アコーディオン・折りたたみタブアプリの選び方

おすすめのアコーディオン・折りたたみタブ Shopify アプリ

シンプルアコーディオン表示｜お手軽折りたたみタブ ☆ 迷ったらこれ

特徴・機能

価格設定

ThemeStack

特徴・機能

価格設定

Advanced Product Tabs

特徴・機能

価格設定

Product Tabs by PageUni

特徴・機能

価格設定

POWR: FAQ Page | Help Center

特徴・機能

価格設定

Amp Product Descriptions

特徴・機能

価格設定

アコーディオンを Liquid で実装するサンプルコード

価格比較

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

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

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

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

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

Shopify にメルマガ登録ポップアップを設置できるアプリ5選を紹介！

Shopifyにクリックで自動適用されるクーポンバナーを設置できるアプリ6選を紹介！

Shopifyにブログ一覧スライダーを追加できるおすすめアプリ6選を紹介！