Studioでタブ切り替えを実装する方法｜18枚の画像で解説！

タブ切り替えが実装できれば、デザインでプロっぽく見せられるだけでなく、ユーザーの操作性の向上にも繋がります。

そこで今回は、Studioでタブ切り替えを実装する方法を解説していきます。

完成イメージは下記の通りになります。ぜひ参考にしてみてください！

Studioでタブ切り替えを実装する方法

Studioでタブ切り替えを実装する方法は、下記のとおりです。

各ステップごとに画像を用いて説明していきます。

①：タブの格納ボックスとコンテンツの格納ボックスを用意する

左メニューの矢印ボタンをクリックします。

「追加」→「ボックス」→「Box」をクリックします。ボックスを2個追加しましょう。

下記のように、タブの格納ボックスとコンテンツの格納ボックスの2つを用意できたらOKです。

②：タブの格納ボックス内にタブボックスを配置する

次に、タブの格納ボックス内にタブボックスを配置していきます。

今回の例では、タブボックスを2つ用意していきます。

左メニューの「Box」を選択して、タブの格納ボックス内にドラッグ&ドロップします。

今回はタブを2つ用意したいので、先ほどと同様、左メニューの「Box」を選択して、タブの格納ボックス内にドラッグ&ドロップします。

そして今回はタブが2つなので、横幅を50%に変更しておきます。

タブを選択した状態で、上部メニューの横幅を50%に変更しておきましょう。

③：コンテンツの格納ボックスにコンテンツボックスを配置する

タブの格納ボックス内にタブボックスを配置した要領で、コンテンツの格納ボックスにコンテンツボックスを配置していきます。

タブが2個ということは、同様にコンテンツも2個になります。

左メニューの「Box」を選択して、コンテンツの格納ボックス内にドラッグ&ドロップします。

今回はコンテンツを2つ用意したいので、先ほどと同様、左メニューの「Box」を選択して、コンテンツの格納ボックス内にドラッグ&ドロップします。

コンテンツを選択した状態で、上部メニューを「横幅：100%」と「縦幅：コンテンツ格納ボックスの縦幅÷タブ数」に変更しておきましょう。

コンテンツを配置できたら、コンテンツの中身を埋めておきましょう。

④：各コンテンツボックスにIDを設定する

次に、各コンテンツボックスにIDを設定していきます。

タブを選択した状態で、画面右にある矢印ボタンをクリックします。

そのコンテンツに合うIDを指定します。今回の例だとみかんのコンテンツなので、IDは「orange」と指定します。

同様に、さくらんぼのコンテンツボックスにもIDを設定していきます。

⑤：各タブボックスにリンクを設定する

次に、各タブボックスにリンクを設定していきます。

タブを選択した状態で、画面右にある矢印ボタンをクリックします。

みかんのタブをクリックすれば、みかんのコンテンツボックスが表示されてほしいですよね。

なので、みかんのタブにはリンクで「#orange」を設定します。

同様にさくらんぼのタブには、リンクで「#cherry」を設定します。

⑥：はみ出し設定を「非表示」に設定する

では次に、コンテンツの格納ボックスの縦幅をコンテンツ1つ分の縦幅に変更します。

コンテンツの格納ボックスを選択した状態で、上部メニューの縦幅を250pxに変更します。

コンテンツの格納ボックスを選択した状態で、上部メニューの「はみ出し」をクリックして、「非表示」をクリックします。

これでタブ切り替えの実装は完了です！実際にレビュー画面でしっかり実装できているか確認してみてくださいね！

Studioでタブ切り替えを実装するメリット

Studioでタブ切り替えを実装するメリットは、下記のとおりです。

それぞれ詳しく説明します。

スマホユーザーの離脱を下げやすい

スマホ用のサイトは「縦に長すぎる問題」が発生してきます。

ですがタブ切り替えを実装すれば、縦に伸びることなく、小さいスペースでセクションをまとめることができます。

その結果、スマホユーザーの負担を減らすことができます。すると離脱率も下がりやすくなるので、ユーザー満足度が上がって、SEO的に好影響を及ぼす可能性が高いといえます。

デザイン性でプロっぽさを演出できる

またタブのUIがあるだけで、ユーザーに対してプロっぽさを演出することができます。

10〜20年前に作られたサイトだとタブ切り替えがなく、情報がただ淡々と並べられているサイトが多いですよね。そのような中で、タブ切り替えがあってUIを意識されているサイトがあると、それだけで差別化にも繋がります。

「人は見た目が9割」という言葉があるように、サイトも見た目が肝心です。

情報量が多くて、一括で見せるとごちゃついた印象を与えてしまうセクションがあるなら、タブ切り替えを実装してスッキリ見せる工夫をするようにしましょう。

ユーザーの欲しい情報だけ提供できる

タブ切り替えは、ユーザーの欲しい情報だけ提供できるというメリットもあります。

例えば、タブ切り替えの中の内容が、飲食店 / 美容室 / コンサル業などのお客様の声だったとします。サイトを見ているユーザー飲食店が経営していたとすると、飲食店のお客様の声に興味はあっても、美容室やコンサル業のお客様の声は興味がない可能性が高いですよね。

もしタブ切り替えを実装していないなら、その部分は読み飛ばさなければならないので、ユーザーの負担になってしまいます。

ですがタブ切り替えがあれば、読みたいタブだけクリックして、自分に必要な情報だけを読むことが可能になります。なのでお客様のストレスを減らすことにも繋がります。

ホームページ制作なら「Terace」にお任せ！