Shopify で折りたたみタブ（アコーディオン）を設置する方法とおすすめアプリを徹底解説
目次
- はじめに
- 記事の構成
- アコーディオン・折りたたみタブとは
- Shopify でアコーディオン・折りたたみタブは表示できる？
- アコーディオン・折りたたみタブを設置するメリット・デメリット
- テーマのコード編集とアプリ導入の比較
- おすすめ Shopify アプリ「シンプルアコーディオン表示｜お手軽折りたたみタブ」紹介
- アプリのインストール手順
- アプリをテーマに追加（有効化）
- アプリの設定項目を理解する
- すぐ使えるおすすめ設定例
- 関連施策との組み合わせ
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツ
- よくある質問
- まとめ
- 参考記事
はじめに
Shopify ストアを運営していると、商品ページや FAQ ページの情報量がどんどん増えていき、「ページが縦に長くて読みにくい」「お客様にどこを見てほしいのか伝わりにくい」と悩む場面が出てきます。
特に、配送情報・サイズガイド・素材の詳細・よくある質問・利用規約など、説明したい内容が多いストアでは、すべてをそのままページに並べるとどうしても情報過多になってしまいます。
そんなときに役立つのが、「アコーディオン（折りたたみタブ）」です。アコーディオンを使えば、長くなりがちなコンテンツを折りたたみ、お客様が必要な情報だけをクリックして開く形に整理できます。本記事では Shopify でアコーディオン・折りたたみタブを設置する方法を、テーマのコード編集とアプリ導入の両面から解説していきます。
この記事は以下の記事を参考にしています。
記事の構成
この記事は以下の流れで解説します。
- アコーディオン・折りたたみタブとは何か
- Shopify でアコーディオンを表示できるかどうか
- アコーディオンを設置するメリット・デメリット
- テーマのコード編集とアプリ導入の比較
- おすすめアプリ「シンプルアコーディオン表示｜お手軽折りたたみタブ」の使い方
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツ・よくある質問
「ノーコードで気軽に試したい」「コードでも実装してみたい」どちらの方にも役立つ内容に仕上げています。
アコーディオン・折りたたみタブとは
「アコーディオン」とは、Web サイト上で複数の項目を折りたたみ、クリックされたときだけ中身を展開して表示する UI のことです。「折りたたみタブ」「トグル」「アコーディオンメニュー」と呼ばれることもあります。
具体的には、次のようなページでよく使われています。
- FAQ（よくある質問）ページ
質問をクリックすると回答が下に展開される、定番のレイアウト - 商品ページの詳細情報
「サイズガイド」「配送について」「素材について」などをアコーディオンに収める - 利用規約・プライバシーポリシー
セクションごとに折りたたみ、必要な部分だけを開いて読めるようにする
ページの縦の長さを抑えながら、情報量はしっかりと保てるのがアコーディオンの強みです。
Shopify でアコーディオン・折りたたみタブは表示できる？
結論から言うと、Shopify でアコーディオンを表示することは可能ですが、実現方法は大きく分けて 2 つ あります。
-
テーマのコードを編集して実装する方法
Liquid・CSS・JavaScript（または<details>タグ）を使って、テーマ自体にアコーディオンを組み込む方法です。自由度は高いですが、ある程度のコーディング知識が必要になります。 -
アプリを導入して実装する方法
Shopify App Store のアプリを利用し、ノーコードでアコーディオンを設置する方法です。コードを編集する必要がないため、初心者でも安心して扱えます。
それぞれメリット・デメリットがありますので、ストアの状況や担当者のスキルに合わせて選ぶことが大切です。
アコーディオン・折りたたみタブを設置するメリット・デメリット
メリット
ページが見やすくなる
情報量の多いページでも、アコーディオンに格納することで縦の長さを抑えられます。最初は見出しだけが並ぶシンプルな状態で、お客様は気になる項目だけを開いて読む形になるので、ページ全体の印象が大きく変わります。
- ページがすっきりまとまる
- 見出し一覧でコンテンツの全体像をつかみやすい
- 「読まなくていい情報」を視覚的に減らせる
お客様が必要な情報を探しやすい
スクロールして長文を流し読みするのではなく、見出しからピンポイントで情報を開けるようになります。これにより「知りたいことがすぐに見つかる」体験が生まれます。
- 商品ページでサイズや素材だけサッと確認できる
- FAQ で気になる質問だけを開いて読める
- 「どこにあるか分からない」という離脱を減らせる
モバイル表示と相性が良い
スマートフォンの画面では、情報を縦にずらっと並べると、それだけでページが長くなりすぎてしまいます。アコーディオンを使えば、コンパクトに情報を整理でき、モバイルでも快適に閲覧できるようになります。
FAQ ページの構築が簡単になる
よくある質問のページは、いまや「アコーディオン形式で表示するのが当たり前」と言えるほど定番化しています。アコーディオンが使えるアプリを 1 つ入れるだけで、FAQ ページが一気に整います。
ブランドの印象が引き締まる
情報が整理されたページはそれだけで「丁寧に運営されているストア」という印象を与えてくれます。デザイン面でも、アコーディオンを使うことで余白がしっかり取れるレイアウトに仕上がりやすくなります。
デメリット
重要な情報が見落とされる可能性がある
アコーディオンに格納された情報はクリックされなければ表示されません。送料・返品ポリシーなど「絶対に見て欲しい情報」は、最初から開いておく、別の目立つセクションに置く、などの工夫が必要です。
過度に使うと逆効果になる
ページのほとんどがアコーディオンになると、お客様は「結局どこに何があるんだろう？」と迷ってしまいます。アコーディオンは「長文・項目が多い情報」だけに絞って使うのがコツです。
デザインを揃えないとチープに見える
アコーディオンのデザインがテーマと合っていないと、ページがちぐはぐな印象になります。色・フォント・余白・アイコンを最低限ストアのトーンに合わせて整えることが大切です。
テーマのコード編集とアプリ導入の比較
ここでは「テーマのコード編集」と「アプリ導入」のそれぞれのメリット・デメリットを比較してみます。
テーマのコード編集で実装する方法
メリット
- 自由度が高く、デザインを完全に思いどおりにできる
- 月額料金が発生しないため、長期的なランニングコストを抑えやすい
- 不要なスクリプトを読み込まないので、ページ速度を保ちやすい
デメリット
- Liquid・HTML・CSS・JavaScript の知識が必要
- テーマ更新時にコードが失われたり、競合したりする可能性がある
- 設定変更のたびにコード編集が必要で、運用負荷が高い
アプリを導入する方法
メリット
- ノーコードで設置・カスタマイズが可能
- テーマエディタから設定を変更できるため、運用がラク
- アプリの機能アップデートを継続的に利用できる
- ホームページ・商品ページ・コレクションページなど、あらゆるページに対応しやすい
デメリット
- 月額料金が発生するアプリが多い
- アプリによっては自由度に限界がある
- 利用するアプリ数が増えると、ストアパフォーマンスに影響することがある
結論：最初はアプリで小さく試すのがおすすめ
「とにかく早くアコーディオンを設置したい」「あれこれ試してから本格運用に入りたい」という場合は、まずはアプリで導入するのが最も現実的です。料金もそれほど高くなく、無料体験のあるアプリも多いので、リスクを抑えて始められます。
おすすめ Shopify アプリ「シンプルアコーディオン表示｜お手軽折りたたみタブ」紹介
ここからは、ノーコードでアコーディオンを設置できるおすすめアプリとして、「シンプルアコーディオン表示｜お手軽折りたたみタブ」をご紹介します。
アプリの基本情報
- アプリ名：シンプルアコーディオン表示｜お手軽折りたたみタブ
- 開発者：UnReact Inc.
- 価格：Basic Plan 月額 $3.99（年払いの場合 $39.99/年で 16% お得）
- 無料体験：7 日間
- 対応言語：日本語、英語、ドイツ語、フランス語、スペイン語、イタリア語、中国語（簡体字・繁体字）、韓国語など多数
- 対応カテゴリ：コンテンツ - その他
できること
このアプリでは、ストアのあらゆるページにアコーディオン（折りたたみタブ）を設置できます。
- ホーム・商品・コレクションなど、どのページにも設置可能
- リッチテキスト・画像・商品・コレクション・カスタム Liquid を自由に組み合わせて表示
- 5 種類のデザインスタイル × 7 種類のアイコンから選べる
- 色・フォント・枠線・余白・表示順をテーマエディタからカスタマイズ可能
- 見出し用ブロックでセクションタイトルを設置可能
- ノーコードで操作できる日本語管理画面
「アコーディオンを使ってみたいけれど、コードはあまり触りたくない」というストア運営者にぴったりのアプリです。
アプリのインストール手順
ここからは、実際のインストール手順を順番に追っていきます。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプルアコーディオン表示｜お手軽折りたたみタブ」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。月額 $3.99（7 日間の無料お試し期間あり）でご利用いただけます。
「インストール」ボタンをクリックすると、必要な権限が表示されますので、確認のうえインストールを完了してください。
インストールが完了すると、アプリ管理画面が表示されます。
アプリをテーマに追加（有効化）
アプリ管理画面から「テーマに追加する」ボタンをクリックすると、テーマエディタが開きます。
テーマエディタが開いたら、「シンプルアコーディオン表示」のセクションが追加されていることを確認します。
アコーディオンのアイテムは「ブロック」として追加します。各ブロックにはタイトルとコンテンツ（リッチテキスト・画像・商品・コレクション・カスタム Liquid）を設定できます。表示順はブロックの並び順で決まります。
アプリの設定項目を理解する
「シンプルアコーディオン表示｜お手軽折りたたみタブ」の主な設定項目を、カテゴリーごとに見ていきましょう。
コンテンツ設定
各アコーディオンアイテムの中身を作るための設定です。
- タイトル
アコーディオンの見出しを設定します。クリックすると展開される部分のテキストです。 - コンテンツ
リッチテキストエディタで、テキスト・画像・商品・コレクションを組み合わせて自由にコンテンツを作成できます。 - 商品
アコーディオン内に表示する商品を選択できます。 - コレクション
アコーディオン内に表示するコレクションを選択できます。 - カスタム Liquid
Liquid コードを直接入力して、独自のコンテンツを表示できます。
デザイン設定
アコーディオンの見た目を整える設定です。
- タイトルのフォントサイズ
アコーディオンアイテムのタイトル文字サイズを調整します。 - デザインスタイル
5 種類のデザインスタイルから選択（シンプルボーダー など）。 - タイトルの文字色 / アイテムタイトルの文字色
セクション全体と各アイテム、それぞれのタイトル色を細かく設定可能。 - アイコンの種類
7 種類のアイコンから選択（プラス（+/-） など）。 - アイコンの色 / サイズ
アイコンの見た目を調整できます。 - コンテンツの文字色 / ボーダーの色 / コンテンツの背景色
本文エリアの色味を細かく設定できます。
商品・コレクション表示設定
アコーディオン内に商品・コレクションを表示する場合の設定です。
- 商品のテキスト / コレクションのテキスト
商品名・コレクション名の表示テキストを設定。 - コレクションの画像を表示
画像を表示するかどうかを切り替え。 - ボタンのテキスト
商品ページ・コレクションページへのリンクボタンのテキストを設定。
余白設定
アプリブロックの上下の余白を設定できます。
- 上部余白 PC / 下部余白 PC
- 上部余白 モバイル / 下部余白 モバイル
PC とモバイルで別々の余白を設定できるので、デバイスごとの見え方を最適化できます。
追加 CSS
「追加 CSS」項目を使えば、設定項目以外の細かいデザイン調整も可能です。CSS のクラス名はブラウザの検証ツールから確認できます。
すぐ使えるおすすめ設定例
ここでは、よくあるユースケース別におすすめの設定例を紹介します。
FAQ ページ向けの設定
FAQ ページでは、シンプルなテキストのアコーディオンが見やすくおすすめです。
- デザインスタイル：シンプルボーダー系
- アイコン：プラス（+/-）
- タイトルのフォントサイズ：18px 前後
- コンテンツの文字色：本文と同じトーン
- 上下余白：少し広め
商品ページ向けの設定
商品ページの「サイズ」「配送」「素材」などをアコーディオンにまとめる場合は、ストアのテーマに馴染むトーンを意識します。
- デザインスタイル：ストアのテーマに合わせる
- アイコン：矢印タイプなどシンプルなもの
- アイテムタイトルの文字色：商品ページ全体のテキストカラーに揃える
- コンテンツの背景色：白系（または商品ページの背景に合わせる）
文言のテンプレ例
FAQ や商品ページで使えるアコーディオンの文言テンプレを紹介します。
- 「配送についてのよくある質問」
- 「サイズが分からない方へ」
- 「素材・お手入れについて」
- 「返品・交換ポリシー」
- 「お得なクーポン情報」
「お客様が知りたい順」に項目を並べ、見出しは短くシンプルに、本文には具体的な情報を入れるのがコツです。
関連施策との組み合わせ
アコーディオン・折りたたみタブは、他の施策と組み合わせるとさらに効果を発揮します。
FAQ ページと組み合わせる
FAQ ページにアコーディオンを設置し、検索バーや問い合わせフォームと組み合わせることで「自己解決できるサポートページ」を構築できます。サポートチームへの問い合わせ件数が減るため、運用負荷の軽減にもつながります。
商品レビューと組み合わせる
商品ページに「商品詳細」「サイズ」「配送」などのアコーディオンを並べ、その下にレビュー表示を組み合わせると、「情報がきちんと整理されたページ」と「他のお客様の声」をセットで見せられます。お客様の購買判断の後押しにもつながります。
利用規約・プライバシーポリシーページと組み合わせる
利用規約や特定商取引法に基づく表記など、長文ページもアコーディオンを使うとぐっと読みやすくなります。「規約 / プライバシー / 返品ポリシー」をひとつのページに集約し、それぞれをアコーディオンで整理する構成もおすすめです。
モバイル UI 改善施策と組み合わせる
モバイル向けの改善施策（フローティングカートバー、固定 CTA など）と組み合わせて使うと、モバイル全体の操作性が大きく向上します。ページの長さを抑えるアコーディオンは、モバイル UI 改善との相性が抜群です。
テーマのコード編集で実装する場合のサンプルコード
「アプリではなく、テーマのコードで実装したい」という方向けに、シンプルなサンプルコードを紹介します。
実装の流れ
- セクション/スニペットファイルを作成する
- HTML（Liquid）を記述する
- CSS でスタイルを整える
- 必要に応じて JavaScript で挙動を追加する
<details> と <summary> を使えば、JavaScript なしでもアコーディオンが動きます。アクセシビリティの面でも標準で安心です。
HTML を追加
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 %}
CSS を追加
assets/accordion.css などにスタイルを追加します。
.ac-section {
max-width: 960px;
margin: 32px auto;
padding: 0 16px;
}
.ac-section__title {
font-size: 24px;
margin-bottom: 16px;
text-align: center;
}
.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;
font-weight: bold;
}
.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;
}
CSS を読み込むには、theme.liquid などで以下のように指定します。
{{ 'accordion.css' | asset_url | stylesheet_tag }}
JavaScript を追加
基本的な開閉動作は <details> で完結しますが、以下のような演出を加えたい場合は JavaScript で拡張できます。
- 1 つ開いたら他を自動で閉じる
- 開閉時にフェードアニメーションを追加する
- 開閉状態を URL ハッシュと連動させる
たとえば「1 つ開いたら他を閉じる」挙動は、次のように実装できます。
<script>
document.addEventListener('DOMContentLoaded', function () {
var items = document.querySelectorAll('.ac-item');
items.forEach(function (item) {
item.addEventListener('toggle', function () {
if (item.open) {
items.forEach(function (other) {
if (other !== item) other.removeAttribute('open');
});
}
});
});
});
</script>
コード実装の注意点
- テーマアップデートでコードが上書きされる可能性があるため、できるだけ「セクション化」して管理する
<details>のデフォルトデザインはブラウザによって挙動が異なるため、CSS でしっかり調整する- アクセシビリティ（キーボード操作、
aria-*属性）も意識する - 大規模な FAQ ページでは、表示順や検索性も合わせて考える
「とりあえずアコーディオンを 1 か所だけ置きたい」程度であればコード実装でも十分ですが、「複数ページに展開したい」「運用しながら調整したい」場合は、最初からアプリ導入を選ぶほうが効率的です。
運用のコツ
アコーディオンを設置したあとに気をつけたい運用のコツも紹介しておきます。
- 見出しは「お客様の言葉」で書く
「サイズについて」よりも「サイズ選びに迷ったら」の方がクリックされやすくなります。 - 本当に折りたたむべき情報だけに絞る
すべてをアコーディオンにすると、かえって読みづらくなります。 - 重要な内容は最初から開いた状態にする
送料・返品ポリシーなど、見落としを避けたい情報は最初から開いておくのも一つの手です。 - モバイルで実機チェックする
モバイル UI で違和感がないか、必ず実機で確認しましょう。 - 定期的に内容を見直す
シーズン情報やキャンペーン情報など、古い内容のままになっていないか定期的に棚卸しすることが大切です。
よくある質問
Q. アコーディオンは商品ページ以外にも設置できますか？
A. はい。「シンプルアコーディオン表示｜お手軽折りたたみタブ」は、ホーム・商品・コレクションなど、ストアのあらゆるページに設置できます。
Q. ノーコードで本当に使えますか？
A. はい。設定はすべてテーマエディタから行えます。コーディングの知識がなくても、ブロックを追加してコンテンツを入力するだけで利用できます。
Q. アコーディオン内に商品やコレクションを表示できますか？
A. はい。各アコーディオンアイテムには、商品・コレクションを直接設定できます。関連商品の紹介や、カテゴリーごとの商品一覧の表示にも活用できます。
Q. デザインはどこまで変更できますか？
A. 5 種類のデザインスタイルと 7 種類のアイコンから選べるほか、色・フォント・枠線・余白などをテーマエディタから細かく調整できます。「追加 CSS」で独自のスタイルを上書きすることも可能です。
Q. 料金はどれくらいかかりますか？
A. Basic Plan 月額 $3.99（年払いなら $39.99/年で 16% お得）です。インストールから 7 日間は無料で試せます。
Q. アンインストールしたらアコーディオンはどうなりますか？
A. アプリブロックは表示されなくなります。再インストール時に設定が引き継がれるかどうかは Shopify の仕様に依存するので、重要な情報はバックアップしておくと安心です。
まとめ
最後に、本記事のポイントを箇条書きで振り返ります。
- アコーディオン（折りたたみタブ）は、情報量の多いページを整理する強力な UI
- ページの見やすさ向上、お客様の情報探しやすさ、モバイル対応など、メリットが多い
- Shopify ではテーマのコード編集とアプリ導入の 2 通りの実装方法がある
- 自由度はコード編集が高いが、運用のしやすさはアプリ導入が圧倒的
- 「シンプルアコーディオン表示｜お手軽折りたたみタブ」なら、月額 $3.99 でノーコード・日本語 UI・あらゆるページ対応のアコーディオンを実現可能
- まずは 7 日間の無料体験で気軽に試して、ストアに合うかどうか判断するのがおすすめ
ストアの情報をすっきり整理して、お客様にとってより快適な体験を届けていきましょう。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
