Studioのタブ切り替えの作り方｜トグル（アコーディオン）との使い分け

「料金プランを月額と年額でタブ切り替えしたい」「よくある質問を押したら開く形にしたい」——このふたつは似て見えて、Studioでの作り方がまったく違います。答えを先にお伝えすると、同じ枠で中身を入れ替えるタブはラジオボタン＋カスタムコード、押して開くトグル（アコーディオン）はクリックの条件だけで作れます。この記事では、まずどちらを作るべきかを切り分けたうえで、それぞれの手順とつまずきの直し方をまとめます。150名以上が参加する国内最大級のStudio学習コミュニティ「ノーコードサロン」を運営していますが、「タブを作りたい」という相談の半分くらいは、聞いてみるとトグルで足りる内容です。

まず切り分け：作りたいのはタブか、トグルか

タブとトグルは、見せ方と作る手間がはっきり違います。ここを取り違えると、コードが要らないものにコードを書いたり、逆に無理な形で押し込んだりすることになります。違いを表にまとめました。

比べるところ	タブ	トグル（アコーディオン）
見せ方	同じ枠の中で中身を入れ替える	見出しの下に中身が開き、下の要素を押し下げる
高さ	ほぼ変わらない	開くたびに縦に伸びる
同時に見える数	常に1つだけ	複数を同時に開く形にもできる
向いている情報	月額と年額のように、比べてどれかを選ぶもの	よくある質問のように、項目が多く互いに独立しているもの
項目が増えたとき	スマホで横に収まらなくなる	縦に伸びるだけなので破綻しにくい
Studioでの作り方	ラジオボタン＋カスタムコード	入れ子＋クリックの条件（コード不要）
初期表示	どれか1つを選択済みにしておく必要がある	全部閉じた状態でも成り立つ

迷ったときの目安は項目数です。2〜4個で、しかも「どれかひとつを選んで見る」情報ならタブ。5個以上あるか、ユーザーが気になるところだけつまみ読みする情報ならトグルが向いています。トグルだけを作りたい方は、この先の手順をとばしてクリックで開閉するトグルの作り方の考え方をそのまま使えます。開閉の仕組みはプルダウンメニューと同じです。

結論：タブ切り替えはラジオボタン＋カスタムコードが扱いやすい

Studioでタブ切り替えを作る方法はいくつかありますが、標準のラジオボタンとカスタムコードを組み合わせる方法が、現時点でいちばん扱いやすい手順です。ラジオボタンで「どのタブが選ばれているか」を管理し、その状態に応じて表示するコンテンツを切り替えます。ページ遷移が起きないため、表示がなめらかです。

ラジオボタンを使うのは、「複数の中から必ず1つだけ選ばれる」という性質が、タブの動きとそのまま同じだからです。自分で排他制御（ほかを閉じる処理）を書かなくても、選択がひとつに保たれます。ラジオボタンはフォームのパーツとして用意されているので、フォームを一度作ったことがあれば設置で迷いません。

なお、CMSに入れたコンテンツを条件で出し分けたい場合は、タブ切り替えではなくCMS動的フィルターのほうが向いています。静的に用意したコンテンツの切り替えはタブ、データベースの中身の絞り込みはフィルター、と分けて考えると設計がすっきりします。

タブ切り替えを実装する手順

手順1：タブのボタンをラジオボタンで作る

タブの見出しになるボタンを、標準のラジオボタンで用意します。タブの数だけボタンを並べ、同じグループとして扱われるようにしておきます。見た目は丸いラジオボタンのままでなくてよいので、枠と余白を付けて、押せるボタンらしい形に整えます。文字の周囲に余白を持たせておくと、スマホでも押し外しが減ります。

手順2：切り替えるコンテンツを用意する

各タブに対応するコンテンツ（表示エリア）を作ります。最初はすべてのコンテンツを同じ位置に重ねて配置し、選ばれているタブのものだけを表示する、という考え方で組みます。重ねる前に、中身の高さを近づけておくのがコツです。タブごとに高さが大きく違うと、切り替えた瞬間に下のセクションが跳ねて読みにくくなります。

手順3：カスタムコードで表示を制御する

ラジオボタンの選択状態に応じて、対応するコンテンツだけを表示するようカスタムコードで制御します。コードを書く前に、次の3つを決めておくと指示が明確になります。

1. どのラジオボタンが、どのコンテンツと対応するか（順番と名前をそろえる）
2. ページを開いた時点で選ばれているのはどれか
3. 選ばれていないコンテンツは「非表示」にするのか「透明」にするのか（透明だと場所を取り続けます）

コードが不安な場合は、Embed Code AIに「選択したタブのコンテンツだけ表示する」と指示してコードを生成する方法も選択肢になります。その際も、上の3点を指示文に含めておくと、手直しが減ります。

手順4：公開状態で確認する

タブの動きは、編集画面では再現されないことがあります。組み終わったらプレビューか公開後のページで確認してください。PCで動いていても、スマホ幅ではボタンが折り返して崩れることがあるため、必ず両方の幅で見ます。

タブ切り替えが向いている場面

タブ切り替えは、次のような場面で効果を発揮します。

• 料金プラン（月額・年額などの切り替え）
• サービスや機能の詳細を、種類別に整理する
• 対象者別の案内（個人向け・法人向けなど）

共通しているのは「同じ枠の中で、見せる中身だけを切り替えたい」情報です。縦に長く並べると読むのが大変なコンテンツを、コンパクトにまとめられます。逆に、よくある質問のように項目数が読めないものは、タブにするとあとで増やせなくなります。

よくあるつまずきと対処

切り替わらない

いちばん多いのは、ラジオボタンとコンテンツの対応がずれているケースです。1番目のボタンに2番目のコンテンツが紐づいている、あるいは途中でコンテンツを追加して順番が繰り上がっている、という状態です。ボタンとコンテンツに同じ順番で名前を付け直すと、原因がすぐ見えます。ラジオボタンが別のグループとして扱われていて、複数同時に選べてしまっていないかも確認してください。

最初に何も表示されない

ページを開いた時点でどのタブも選ばれていないと、コンテンツはすべて非表示のまま、空の枠だけが残ります。初期選択のタブを決めて、そのコンテンツが最初から見えるようにしておきます。いちばん見せたい内容を初期表示に置くのが基本です。

スマホでタブが崩れる

PCでは横一列に収まっていたボタンが、スマホ幅でははみ出したり、不自然な位置で折り返したりします。対処は3つあります。ボタンの文字を短くする、横スクロールできる並びにする、タブの数を減らす。文字を2〜3文字ずつ削るだけで収まることも多いです。ブレークポイントごとにボタンの幅と折り返しを見直してください。

使いやすいタブ切り替えにする配慮

タブ切り替えは、ただ動けばよいわけではなく、訪問者が迷わず使えることが大切です。今どのタブが選ばれているのかがひと目で分かるように、選択中のタブの色や下線をはっきり変えておくと、操作に迷いがなくなります。選択状態が分かりにくいと、訪問者は自分がどこを見ているのか分からなくなります。

選択中のタブを明確にする

選択されているタブと、そうでないタブの見た目に十分な差をつけましょう。色を変える、下線を引く、太字にするなどの方法があります。差が小さいと、どのタブが開いているのか分かりにくくなり、使い勝手を損ないます。あわせて、押せる場所だと分かるようホバー時の変化も付けておくと親切です。

初期表示と数のバランスを考える

ページを開いた時点で、どのタブの内容が表示されるかを必ず設定しておきます。何も表示されない状態は避けましょう。また、タブの数が多すぎると、特にスマホで扱いにくくなります。サロンに届く相談でも、タブを5つ以上並べようとして崩れている例が目立ちます。数が多いときは、無理にタブで押し込まず、トグルへの切り替えを検討してください。

よくある質問

Q1タブ切り替えはコードなしで作れますか？

押すと下に開くトグル（アコーディオン）であれば、ボックスを入れ子にしてクリックの条件で表示を切り替えるだけで作れます。コードは不要です。一方、同じ枠の中で中身を入れ替える本来のタブを複数用意する場合は、ラジオボタンとカスタムコードを組み合わせる方法が扱いやすいです。まずどちらの動きが欲しいのかを決めてください。

Q2CMSのコンテンツをタブで出し分けられますか？

CMSの動的コンテンツを条件で出し分けたい場合は、タブ切り替えよりCMS動的フィルターのほうが向いています。静的に用意したコンテンツを切り替えるならタブ、データベースの内容を絞り込むならフィルター、と使い分けると設計がシンプルになります。

Q3スマホでタブが多いときはどうすればよいですか？

タブが多いと、スマホでは横に収まりきらず崩れがちです。折り返して2段にする、横スクロールできる並びにする、といった工夫で収まる場合もあります。ただし、5個以上をタブで並べるのは無理が出やすいところです。項目を統合して数を絞るか、トグル（アコーディオン）に切り替えるほうが、結果的に使いやすくなります。

Q4特定のタブを開いた状態でリンクを共有できますか？

この作り方では、選ばれているタブの状態はURLに残りません。「このタブを開いた状態で見せたい」という要件があるなら、URLのクエリで表示内容を変えるCMS動的フィルターの仕組みのほうが近い形です。共有が目的なら、タブではなくページを分けてしまうのも確実な選択です。

Q5タブ切り替えはSEOに影響しますか？

タブで切り替えるコンテンツは同じページ内にあるため、基本的には検索エンジンに読み取られます。ただし、初期表示で見えない内容が多すぎると、重要な情報が伝わりにくくなる可能性はあります。SEOで特に重視したい情報は、タブの中に隠すのではなく、常に見える形で配置するか、初期表示のタブに含めるとよいでしょう。タブはあくまで情報整理の手段と位置づけ、伝えたい核となる内容は確実に目に入る場所に置くのが安全です。

まとめ

最初に決めるのは、作りたいものがタブかトグルかです。同じ枠で中身を入れ替えるならタブ、見出しの下に開いて縦に伸ばすならトグルで、後者はコードなしで作れます。タブは、標準のラジオボタンで選択状態を管理し、カスタムコードで表示を制御する方法が扱いやすい実装です。動かないときは「切り替わらない」「最初に何も表示されない」「スマホで崩れる」のどれかに当てはめると、見る場所が絞れます。切り替えに動きを付けたいときはアニメーションの付け方もあわせて確認してください。

ノーコードサロンでは、こうしたUIの実装相談が日々やり取りされています。作りかけの画面を見せて聞ける相手がいるだけで、詰まっている時間は短くなります。