【2026年】Shopify 商品説明タブで失敗しない設定術｜折りたたみ可能な行・アコーディオンの実装ガイド
目次
- はじめに
- 導入前に確認すべき5つのチェックポイント
- 失敗1：重要な情報をタブに隠して読まれなくなる
- 失敗2：SEOで「隠したコンテンツ」が不利になると思い込む（あるいは逆に油断する）
- 失敗3：スマホで見るとCTAが画面外に押し出される
- 失敗4：折りたたみ可能な行が「同時に複数開いてしまう」
- 失敗5：メタフィールドの出し分けで標準機能の限界にぶつかる
- コード編集とアプリ、どちらで実装するか
- ノーコードで失敗を避けやすいアプリ「シンプル商品説明タブ｜お手軽折りたたみ可能な行」
- アプリのインストール手順と簡単な使用方法
- コードで折りたたみ可能な行を実装する場合のサンプル
- よくある質問
- まとめ
はじめに
Shopify の商品説明タブやアコーディオンは、入れれば必ず売れるという魔法のパーツではありません。実際、設定を一つ間違えると「肝心の仕様がタブに隠れて読まれない」「スマホで誤作動する」「テーマ更新で消える」といった事故が起こります。
このページは、「Shopify 商品説明タブ」「Shopify 折りたたみ可能な行」「Shopify アコーディオン 商品ページ」 を実装するときに、現場で実際にぶつかりやすい失敗を先回りで潰していく構成にしました。導入前のチェックリストを起点に、つまずきやすいポイントごとに対処法を示し、その流れの中でコード実装とノーコードのアプリ導入の両方をカバーします。
最初に、導入前に必ず目を通してほしい確認項目から見ていきます。
導入前に確認すべき5つのチェックポイント
商品説明タブを設置する前に、以下を順番に確認してください。ここを飛ばして「とりあえず折りたたみ可能な行を置く」ところから始めると、後から作り直すことになりがちです。
- どの情報を展開状態のまま見せ、どこをアコーディオンに畳むかを決めたか
- タブ（横並び）にするか、見出しの残るアコーディオン（縦積み）にするか方針を決めたか
- 同時に複数のパネルが開く挙動でよいか、1つだけ開く挙動にしたいか
- 素材・原産国などをメタフィールドで出し分ける必要があるか
- テーマ更新やアンインストール時に表示が壊れない作り方になっているか
このうち1つ目から3つ目を曖昧にしたまま進めると、見た目はできても「読まれない商品ページ」 が完成してしまいます。理由を次の章から具体的に説明します。
失敗1：重要な情報をタブに隠して読まれなくなる
最も多い失敗が、伝えたい情報をすべてタブの中に押し込むことです。
Baymard Institute の調査では、横並びの「タブ」形式を採用したページで、27% のユーザーがタブ内のコンテンツ（仕様・返品ポリシー・レビューなど）を完全に見落とすという結果が出ています。クリックして開かなければ気づかない構造である以上、これは避けにくい性質です。
これに対して、見出しが常に画面に残るアコーディオン形式は、何が中にあるかをスキャンしやすく、発見性で優れます。つまり、「タブよりアコーディオン寄りに設計したほうが安全」 というのが実務上の落とし穴を踏まないための基本姿勢です。
回避策はシンプルです。
- 「送料無料」「即日発送」など強い訴求は、タブの外、購入ボタンの近くに置く
- サイズ・素材など主要な商品説明は展開状態で表示する
- FAQ や細かい仕様、配送ポリシーなど「探しに来る情報」だけを畳む
筆者がストアを見てきた経験でも、説明文を丸ごとアコーディオンに入れているページは、ファーストビューが整っている割にコンバージョンが伸び悩む傾向がありました。畳むのは「補足情報」に限定するのが安全です。
失敗2：SEOで「隠したコンテンツ」が不利になると思い込む（あるいは逆に油断する）
「アコーディオンで隠すと SEO に悪い」と過度に怖がるケースと、「Google が読むから何でも畳んでいい」と油断するケース、その両方が失敗のもとです。
事実関係を整理すると、Google 自体は タブやアコーディオンで折りたたまれた（hidden）コンテンツもクロール・インデックスできると明言しています。隠したから一切評価されない、ということはありません。
一方で注意したいのは、インデックスされること＝上位表示されること、ではない点です。検索評価の中心に据えたい主要な商品説明は展開状態で見せ、FAQ や詳細仕様だけを畳む設計が無難です。Nielsen Norman Group もアコーディオンは閲覧コスト（クリックという一手間）を上げると指摘しており、段数を増やしすぎるのも逆効果です。目安としてアコーディオンは最大6つ程度に抑えると、回遊性とのバランスが取りやすくなります。
ここを正しく理解しておくと、「SEO が怖いから何も畳めない」という思考停止からも、「全部畳んで身軽にすればいい」という雑な運用からも抜け出せます。
失敗3：スマホで見るとCTAが画面外に押し出される
商品説明タブが本当に効くのは、実はスマホです。
Shopify ストア全体のコンバージョン率（CVR）の平均は約 1.4%、上位 20% の閾値が 3.2% とされています。デバイス別に見ると、デスクトップが平均 1.9%／優良店 6.5% であるのに対し、モバイルは平均 1.2%／優良店 3.9% と、モバイルが構造的に低くなっています。
この差の一因が、スマホの狭い画面で長い説明文がカートボタンを画面外へ押し出してしまうことです。アコーディオン（折りたたみ可能な行）で説明を畳めば、ファーストビューに商品画像と購入ボタンを残せます。つまり商品説明タブは、見た目の整理以上にモバイル CVR のギャップを埋める施策として位置づけるのが正解です。
逆に、スマホで開閉ボタンが小さすぎる・タップ領域が狭いといった作りだと誤タップを誘発します。実装後は必ず実機（できれば指で）操作確認をしてください。
失敗4：折りたたみ可能な行が「同時に複数開いてしまう」
Dawn など Online Store 2.0 対応テーマには、標準ブロックとして「折りたたみ可能な行（Collapsible row）」 が用意されており、ノーコードでアコーディオンを作れます。ここまでは手軽です。
ところが標準のままだと、複数のアコーディオンを同時に開けてしまうという挙動になります。「1つ開いたら他は閉じてほしい」という、いわゆるワンオープン挙動にしたい場合は手当てが必要です。
方法は2つあります。1つは HTML の <details> 要素に name 属性を付与する方法、もう1つは JavaScript で兄弟要素から open 属性を取り除く方法です。name 属性を使う書き方は次のとおりです。
<details name="product-accordion">
<summary>サイズ・素材</summary>
<div class="accordion-body">
<p>ここに素材やサイズの説明を入れます。</p>
</div>
</details>
<details name="product-accordion">
<summary>配送・返品について</summary>
<div class="accordion-body">
<p>配送ポリシーや返品条件をここに記述します。</p>
</div>
</details>
<details name="product-accordion">
<summary>よくある質問</summary>
<div class="accordion-body">
<p>FAQ をここに記述します。</p>
</div>
</details>
同じ name を共有する <details> は、ブラウザ側で排他的に開閉されるため、JavaScript なしで「同時に1つだけ開く」挙動になります。
注意点として、Dawn は現在 jQuery を廃止しているため、ネット上で見つかる古い記事の jQuery ベースのアコーディオン制御コードはそのままでは動きません。スクリプトを書くならバニラ JS（素の JavaScript）への書き換えが前提になります。この「古いコードをコピペして動かない」という落とし穴は非常に多いので気をつけてください。
失敗5：メタフィールドの出し分けで標準機能の限界にぶつかる
Dawn の商品ページでは、「素材」「原産国」などをメタフィールドで定義し、動的ソース接続でアコーディオン／タブ内に表示できます。商品ごとに異なる仕様を見せたいときの定番手法です。
ただし、ここに標準機能の限界があります。「メタフィールドに値があるときだけタブを表示する」「項目ごとに表示を分岐させる」といった条件分岐は、標準の折りたたみ可能な行では実現できません。実際、Shopify コミュニティでもメタフィールドの項目ごとに分岐させたいという質問が未解決のまま残っています。
この条件分岐をコードで実現しようとすると Liquid のロジックを組む必要があり、保守の負担が一気に増えます。「商品ごとの出し分けを楽にしたい」というニーズこそ、後述するアプリ導入の動機になりやすいポイントです。
ここまでの5つの失敗を踏まえて、実際の実装手段（コード／アプリ）をそれぞれ見ていきます。
コード編集とアプリ、どちらで実装するか
ここまでの失敗を回避できるかどうかは、実装手段の選び方にも左右されます。それぞれの向き不向きを整理します。
テーマのコード編集で実装する場合
Liquid / HTML / CSS / JavaScript を直接編集して作る方法です。
- 月額費用がかからない（開発工数のみ）
- デザインの自由度が高く、サイトに完全に合わせられる
- 不要な機能を含まないため軽量化しやすい
一方で、Liquid や JS の知識が必須で、テーマ更新時にコードが上書きされるリスクがあり、メタフィールド連携など動的管理を始めると一気に複雑化します。失敗4・失敗5で挙げた問題に自力で対処できる体制があるかが分かれ目です。
アプリを導入する場合
管理画面の設定だけで表示させる方法です。
- ノーコードで導入でき、専門知識が不要
- インストールして設定するだけで導入が早い
- 配送情報などの共通コンテンツを一括で扱いやすい
- アイコンやデザインのプリセットが用意されている
月額費用がかかる点と、アプリの仕様範囲内での調整になる点は許容する必要があります。
まずはアプリで「どの情報をどこに畳むか」を検証し、運用が固まってから必要に応じてコード化する、という順序が手戻りを減らします。次に、その検証に向いた一本を紹介します。
ノーコードで失敗を避けやすいアプリ「シンプル商品説明タブ｜お手軽折りたたみ可能な行」
前章までの落とし穴のうち、「ワンオープン挙動」「初期表示状態の制御」「スマホ表示」「共通コンテンツの管理」を設定だけで詰められるのが、日本製の 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」 です。
アプリの基本情報
- アプリ名: シンプル商品説明タブ｜お手軽折りたたみ可能な行
- 価格: 月額 $2.99（年額なら実質2か月分が無料、1週間の無料トライアルあり）
- カテゴリー: 商品ディスプレイ、デザイン要素
- 対応言語: 日本語を含む多言語
※価格や仕様は変更される場合があります。最新情報はアプリストアのページをご確認ください。
参考までに、海外の類似アプリ「Amp Product Descriptions」は無料プラン（3商品まで）＋有料 $9.99/月で SEO フレンドリーを訴求しています。これと比べると、本アプリは $2.99/月 という価格帯で、見出し・本文・初期表示状態・アイコン・配色・文字サイズをノーコードで調整できる点が日本語環境での扱いやすさにつながっています。
このアプリで詰められること
本アプリは、商品ページにアコーディオン（折りたたみ可能な行）やタブ形式の説明エリアを追加し、情報を整理して見せるためのアプリです。失敗を避ける観点で要点を挙げると次のとおりです。
- ノーコードで商品説明タブ（アコーディオン）を追加できる
- 見出し・本文・初期表示状態を設定でき、主要情報を開いた状態で見せられる（失敗1の回避）
- 豊富なアイコンから選択、または画像アイコンも使用可能
- 色・文字サイズ・太さなどを細かく調整でき、スマホでもタップしやすい見出しに整えられる（失敗3の回避）
- 1クリックでテーマに追加できる
日本企業による開発のため管理画面が分かりやすく、特にスマホでのアコーディオン表示が見やすく設計されている点が、モバイル CVR を意識する運用と相性の良いところです。
アプリのインストール手順と簡単な使用方法
ここでは、ご利用ガイドを参考に、アプリのインストールから基本的な設定までの流れを解説します。
ご利用ガイド: 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」ご利用ガイド
1. アプリのインストール
-
Shopify 管理画面の左メニューから 「設定」 をクリックします。
-
「アプリと販売チャネル」 をクリックし、「Shopify App Store」 に移動します。
-
検索窓で 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」 を検索し、アプリ詳細ページを開きます。
-
「インストール」 をクリックし、権限確認画面で 「アプリをインストール」 をクリックして完了です。
2. アプリをテーマに追加（有効化）
インストール後、アプリをストアのテーマで有効化する必要があります。
自動でテーマに追加（1 クリック追加）
- アプリの管理画面を開きます。
- 追加したいテーマを選び、「テーマに追加」 ボタンをクリックします。
- テーマエディタが開くので、画面右上の 「保存」 をクリックして完了です。
手動でテーマに追加する場合
- Shopify 管理画面で 「オンラインストア」→「テーマ」 を開き、対象テーマの 「カスタマイズ」 をクリックします。
- 商品ページなど、タブを追加したいページに移動します。
- 「セクションを追加」 または 「ブロックを追加」 をクリックします。
- 「アプリ」タブから 「シンプル商品説明タブ」 を選んで追加します。
- 表示を確認し、問題なければ 「保存」 をクリックします。
3. 商品説明タブの設定
テーマエディタの設定パネルから、タブの内容やデザインをカスタマイズします。失敗を避ける観点では、特に「初期表示」の設定を最初に決めておくのがおすすめです。
コンテンツ設定
- 見出し: タブのタイトル（例：サイズ、素材、配送について）
- コンテンツ: タブの中に表示する文章。HTML も使用可能です。
- 初期表示: ページ読み込み時に開いておくかどうかを設定します。主要情報は開いた状態にしておくと、失敗1の見落としを防げます。
アイコン設定
- アイコン選択: プリセットされたアイコンから選択できます。
- 画像アイコン: オリジナルの画像をアップロードしてアイコンとして使用できます。
- サイズ・間隔: アイコンの大きさや余白を調整します。スマホでのタップしやすさにも関わります。
デザイン設定
- 見出しデザイン: 背景色、文字色、フォントサイズ、太さなどを変更します。
- コンテンツデザイン: 本文の背景色、文字色、フォントサイズを変更します。
- 区切り線・余白: セクションの上下マージンや区切り線の有無を調整します。
設定が完了したら、必ず 「保存」 をクリックして反映させましょう。
コードで折りたたみ可能な行を実装する場合のサンプル
アプリを使わず自力で実装したい方向けに、HTML・CSS・JavaScript でシンプルなアコーディオンを作る例を示します。テーマセクションとして使う前提のコードです。
注意: 作業前に必ずテーマのバックアップを取ってください。
sections フォルダに product-accordion.liquid というファイルを新規作成し、以下のコードを記述します。なお、このサンプルは各パネルが独立して開閉します。前章の失敗4で触れた「同時に1つだけ開く」挙動にしたい場合は、<button> を <details name="..."> 構造に置き換えるか、クリック時に兄弟要素の aria-expanded を false に戻す処理を加えてください。
<div class="product-accordion">
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">
<span class="accordion-title">詳細情報</span>
<span class="accordion-icon">+</span>
</button>
<div class="accordion-content" hidden>
<p>{{ product.description }}</p>
</div>
</div>
{% comment %} 必要に応じて項目を追加 {% endcomment %}
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">
<span class="accordion-title">配送について</span>
<span class="accordion-icon">+</span>
</button>
<div class="accordion-content" hidden>
<p>配送に関するポリシーをここに記述します。</p>
</div>
</div>
</div>
<style>
.product-accordion {
border-top: 1px solid #e0e0e0;
margin-top: 20px;
}
.accordion-item {
border-bottom: 1px solid #e0e0e0;
}
.accordion-header {
width: 100%;
padding: 15px 0;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
}
.accordion-title {
font-weight: bold;
font-size: 16px;
}
.accordion-content {
padding-bottom: 15px;
display: none; /* 初期状態は非表示 */
}
.accordion-content[style*="display: block"] {
display: block;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<script>
document.querySelectorAll('.accordion-header').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
content.hidden = isExpanded;
content.style.display = isExpanded ? 'none' : 'block';
button.querySelector('.accordion-icon').textContent = isExpanded ? '+' : '-';
});
});
</script>
{% schema %}
{
"name": "商品アコーディオン",
"settings": [],
"presets": [
{
"name": "商品アコーディオン"
}
]
}
{% endschema %}
作成後はテーマカスタマイズ画面で、この「商品アコーディオン」セクションを商品ページに追加します。前述のとおり、コンテンツをメタフィールドで動的管理しようとすると Liquid のロジックが必要になり、保守の手間が増えます。動的な出し分けまで求めるなら、無理に自作せずアプリを利用するのが現実的です。
よくある質問
商品説明タブの導入時に寄せられやすい疑問をまとめます。
Q: アプリをアンインストールしたらタブは消えますか？
A: はい、アプリブロックで導入した場合は、アプリを削除するかテーマエディタでブロックを削除すれば表示は消えます。コード編集で導入した場合は、手動でコードを削除する必要があります。
Q: 商品ごとに違う内容を表示できますか？
A: はい、アプリによっては商品ごとに異なる内容を設定したり、Shopify のメタフィールド機能で動的にコンテンツを出し分けたりできます。ただし「項目ごとに表示を条件分岐させる」のは標準ブロックでは難しい領域です。「シンプル商品説明タブ」アプリでも、アプリブロックを複数追加して使い分けるなどの工夫ができます。
Q: アコーディオンはいくつまで置いてよいですか？
A: 増やしすぎると逆に探しにくくなります。閲覧コストとのバランスから、6つ程度までを目安に、関連情報をグルーピングしてまとめるのがおすすめです。
まとめ
Shopify の商品説明タブ（折りたたみ可能な行・アコーディオン）は、入れること自体より「どこを畳み、どこを見せるか」 の設計で成果が決まります。本記事で挙げた失敗を裏返すと、次のように整理できます。
- 主要な商品説明は展開状態で見せ、補足や FAQ だけを畳む（読み落とし対策）
- 折りたたみたコンテンツもインデックスはされるが、評価の中心は展開部分に置く
- スマホで CTA が押し出されないよう、説明はアコーディオンに収める
- 「同時に1つだけ開く」は
<details name="...">などで対応し、古い jQuery コードは避ける - メタフィールドの条件分岐など標準の限界に当たったらアプリ導入を検討する
手軽さとスマホ表示の見やすさを重視するなら、ノーコードで設定でき無料トライアルも使える 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」 から試すのが、最初の一手として無理がありません。
まずは無料体験から、自社ストアの商品ページで折りたたみ可能な行を試し、モバイルでの見やすさの変化を確かめてみてください。
今回は、以下の記事を参考にしています。
