Studioでタブ切り替えを実装する方法｜18枚の画像で解説！
「Studioの〇〇の使い方を知りたい」などご要望がありましたら、
いいねを押した後にメッセージ欄を設けていますので、お気軽にご連絡ください！
送信中です
タブ切り替えが実装できれば、デザインでプロっぽく見せられるだけでなく、ユーザーの操作性の向上にも繋がります。
そこで今回は、Studioでタブ切り替えを実装する方法を解説していきます。
完成イメージは下記の通りになります。ぜひ参考にしてみてください！
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
Studioでタブ切り替えを実装する手順
Studioでタブ切り替えを実装する手順について、画像付きで解説します。
Kaji最新エディタを使った実装方法になります！
①：土台となるボックスを準備する
タブ切り替えを設置するための、土台ボックスを準備します。
②：タブ1つ目のコンテンツを作成する
「みかん」と「さくらんぼ」のタブを作りたいなら、テキスト入りのボックスを2つ用意します。
これは1つ目の「みかん」が選ばれたときのデザインを作成します。
先ほど作ったタブの下に、1つ目のタブが選択された時のコンテンツを作ります。
「タブ」と「タブ中のコンテンツ」をグループ化します。
Kajiグループ化したボックスに「〇〇を選択している状態」のように言語化しておくと、その後も編集しやすいです。
「横幅：100％、高さ：auto」に設定します。
③：タブを複製します
今回の例だと、さくらんぼが選択された時のタブ、コンテンツの中身に変更します。
④：IDとアンカーリンクを設定する
今回の例だと、みかんのグループボックスに「mikan」というIDをつけて、さくらんぼのグループボックスに「sakuranbo」というIDをつけます。
今回の例だと、タブ2個×2行なので4つのタブにアンカーリンクを設定します。
Kajiみかんのタブには「#mikan」というアンカーリンク、さくらんぼのタブには「#sakuranbo」というアンカーリンクを設定します。
⑤：レイアウトを調整します
今回の例だと、「みかんを選択してる状態」や「さくらんぼを選択してる状態」のボックスの上部にpaddingをつけます。
「みかんを選択してる状態」や「さくらんぼを選択してる状態」のボックスを選択した状態で、グループ化します。
グループ化したボックスを選択した状態で、「並びの矢印：右向き」と「配置：左上寄せ」を設定します。
グループ化したボックスを選択した状態で、はみ出し設定ですが、「非表示」に変更した上で、「clipの代わりにhiddenを使用」にチェックを入れます。
Studioでタブ切り替えを実装する方法【旧エディタver】
Studioでタブ切り替えを実装する方法は、下記のとおりです。
各ステップごとに画像を用いて説明していきます。
①：タブの格納ボックスとコンテンツの格納ボックスを用意する
左メニューの矢印ボタンをクリックします。
「追加」→「ボックス」→「Box」をクリックします。ボックスを2個追加しましょう。
下記のように、タブの格納ボックスとコンテンツの格納ボックスの2つを用意できたらOKです。
Kaji「タブの格納ボックス」と「コンテンツの格納ボックス」はわかりやすいように記入しているだけです。真似はしなくて大丈夫です！
②：タブの格納ボックス内にタブボックスを配置する
次に、タブの格納ボックス内にタブボックスを配置していきます。
Kajiタブが2つ必要なら、ボックスを2つ配置。タブが3つ必要なら、ボックスを3つ配置するようにしましょう！
今回の例では、タブボックスを2つ用意していきます。
左メニューの「Box」を選択して、タブの格納ボックス内にドラッグ&ドロップします。
Kajiタブの格納ボックスが小さいと、ドラッグ&ドロップをしても中に入れることが難しいです！もしタブの格納ボックスの中に入れれない場合は、まずタブの格納ボックスの縦幅・横幅を大きくするのがおすすめです！
今回はタブを2つ用意したいので、先ほどと同様、左メニューの「Box」を選択して、タブの格納ボックス内にドラッグ&ドロップします。
そして今回はタブが2つなので、横幅を50%に変更しておきます。
Kajiタブが4つであれば、横幅は25%を指定します！
タブを選択した状態で、上部メニューの横幅を50%に変更しておきましょう。
③：コンテンツの格納ボックスにコンテンツボックスを配置する
タブの格納ボックス内にタブボックスを配置した要領で、コンテンツの格納ボックスにコンテンツボックスを配置していきます。
タブが2個ということは、同様にコンテンツも2個になります。
Kajiタブが4個必要な方は、コンテンツも4個追加するようにしましょう！
左メニューの「Box」を選択して、コンテンツの格納ボックス内にドラッグ&ドロップします。
今回はコンテンツを2つ用意したいので、先ほどと同様、左メニューの「Box」を選択して、コンテンツの格納ボックス内にドラッグ&ドロップします。
コンテンツを選択した状態で、上部メニューを「横幅：100%」と「縦幅：コンテンツ格納ボックスの縦幅÷タブ数」に変更しておきましょう。
Kaji今回の例だと、コンテンツ格納ボックスの縦幅が500pxになっているので、「500÷2=250px」と計算できます！
コンテンツを配置できたら、コンテンツの中身を埋めておきましょう。
④：各コンテンツボックスにIDを設定する
次に、各コンテンツボックスにIDを設定していきます。
KajiIDを設定することで、タブとの紐付けができるようになります！
タブを選択した状態で、画面右にある矢印ボタンをクリックします。
そのコンテンツに合うIDを指定します。今回の例だとみかんのコンテンツなので、IDは「orange」と指定します。
Kaji基本的に英語で指定しましょう！
同様に、さくらんぼのコンテンツボックスにもIDを設定していきます。
⑤：各タブボックスにリンクを設定する
次に、各タブボックスにリンクを設定していきます。
KajiコンテンツボックスにIDを付与して、タブボックスにリンクを設定すれば、紐付けが完了です！
タブを選択した状態で、画面右にある矢印ボタンをクリックします。
みかんのタブをクリックすれば、みかんのコンテンツボックスが表示されてほしいですよね。
なので、みかんのタブにはリンクで「#orange」を設定します。
同様にさくらんぼのタブには、リンクで「#cherry」を設定します。
⑥：はみ出し設定を「非表示」に設定する
では次に、コンテンツの格納ボックスの縦幅をコンテンツ1つ分の縦幅に変更します。
Kaji今回の例だと、コンテンツ1つ分の縦幅は250pxなので、コンテンツの格納ボックスの縦幅も250pxに設定します。
コンテンツの格納ボックスを選択した状態で、上部メニューの縦幅を250pxに変更します。
コンテンツの格納ボックスを選択した状態で、上部メニューの「はみ出し」をクリックして、「非表示」をクリックします。
これでタブ切り替えの実装は完了です！実際にレビュー画面でしっかり実装できているか確認してみてくださいね！
Studioでタブ切り替えを実装するメリット
Studioでタブ切り替えを実装するメリットは、下記のとおりです。
それぞれ詳しく説明します。
スマホユーザーの離脱を下げやすい
スマホ用のサイトは「縦に長すぎる問題」が発生してきます。
Kaji横のスペースが狭いので、どうしても縦長になってしまう傾向があります！
ですがタブ切り替えを実装すれば、縦に伸びることなく、小さいスペースでセクションをまとめることができます。
その結果、スマホユーザーの負担を減らすことができます。すると離脱率も下がりやすくなるので、ユーザー満足度が上がって、SEO的に好影響を及ぼす可能性が高いといえます。
デザイン性でプロっぽさを演出できる
またタブのUIがあるだけで、ユーザーに対してプロっぽさを演出することができます。
10〜20年前に作られたサイトだとタブ切り替えがなく、情報がただ淡々と並べられているサイトが多いですよね。そのような中で、タブ切り替えがあってUIを意識されているサイトがあると、それだけで差別化にも繋がります。
Kajiここのサイトは「サイトも定期的にメンテナンスしているんだな」という評価も得られます。
「人は見た目が9割」という言葉があるように、サイトも見た目が肝心です。
情報量が多くて、一括で見せるとごちゃついた印象を与えてしまうセクションがあるなら、タブ切り替えを実装してスッキリ見せる工夫をするようにしましょう。
ユーザーの欲しい情報だけ提供できる
タブ切り替えは、ユーザーの欲しい情報だけ提供できるというメリットもあります。
例えば、タブ切り替えの中の内容が、飲食店 / 美容室 / コンサル業などのお客様の声だったとします。サイトを見ているユーザー飲食店が経営していたとすると、飲食店のお客様の声に興味はあっても、美容室やコンサル業のお客様の声は興味がない可能性が高いですよね。
もしタブ切り替えを実装していないなら、その部分は読み飛ばさなければならないので、ユーザーの負担になってしまいます。
KajiUX（ユーザーエクスペリエンス）が悪化すると、離脱率が上がるだけでなく、サイトの再訪率も下がってしまいます！
ですがタブ切り替えがあれば、読みたいタブだけクリックして、自分に必要な情報だけを読むことが可能になります。なのでお客様のストレスを減らすことにも繋がります。
ホームページ制作なら「Terace」にお任せ！
当メディアを運営する私達は、Studioを使ったホームページ制作サービスを運営しています。
サービスの強みを一言で表すなら、「集客に強いホームページが作れる」ということです。
- AI×人間の分業でSEO対策が圧倒的に安い
- SEO専門家による細部まで徹底したSEO対策（基本〜本格）
- はじめてのSEOガイド・公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（Webデザイナー専属）
- Studio製だから自社で簡単に更新できる
- ホームページ制作実績、累計50サイト以上
最安18万円〜とお手軽な価格ですが、徹底的にSEO対策されたホームページが作れます。なぜ安く作れるのか、その理由はシンプルで「人間が得意なことは人間、AIが得意なこと（リサーチなど）はAI」が担当しているためです。
オリジナルデザイン、かつ本格的に集客できるホームページがほしい方は、ぜひお気軽にご相談ください。
個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
※コメントは最大500文字、5回まで送信できます
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます