タブの基本的な使い方とデザイン

タブは、ページのコンテンツを切り替える場合に使われるUIです。

かかかず

当サイトでもトップページなど、色んなところでタブUIを使っています。

タブを使うことで、画面全体を遷移する必要がない為ユーザーの負担を減らすことができ、限られたスペースに複数のコンテンツを表示することができます。

この記事では、そんなタブのUIについて解説します。

タブとは？
- クリックしなければ中身を見れない
- 関心の高いものをはじめに開いているタブにする
タブをデザインする時の3つのポイント
HTMLとCSSのコピペでできるタブのUI
ネイティブなJavaScriptで作るタブ
さいごに

タブとは？

タブは、開いている状態と閉じている状態があります。

タブは引き出しのように必要な情報を出し入れすることができ、すべてのコンテンツを一度に表示する必要がない時に有効です。

便利なUIですが、タブの特徴について解説します。

クリックしなければ中身を見れない

タブのデメリットとして、それぞれのタブの中の情報を同時に表示することはできない為、情報を比較する必要がある場合には不向きです。

タブは基本的に、開いている状態と閉じている状態の2つあります。

はじめに開いているタブは、ユーザーがアクションする前から表示されますが、閉じているタブはユーザーがクリックしなければ見ることができません。

そのため、タブの中の情報をタイトルで判断することになります。タブを使うことによって、一度に全ての情報を表示するよりも見つけづらくならないように分かりやすいタイトルを付けましょう。

関心の高いものをはじめに開いているタブにする

タブに置くコンテンツは、ユーザーの関心の高いもの・低いもので優先順位をつける必要があります。

タブは多くのWebサイトで利用されているため、ユーザーにとって「クリックすることで、選択した項目に切り替わる」という挙動がイメージしやすいことが利点です。

その為、はじめに開いているタブの情報はユーザーにとって関心の高いものにして、タブを活用してもらえるような設計が必要です。

タブをデザインする時の3つのポイント

タブはUIの中でも、地味で面白みのない一面のように見えるかもしれませんが、きちんとタブの機能や役割を理解してデザインすることによって、ユーザーの混乱を防ぎ、ユーザーもストレスなく必要な情報を受け取ることができます。

それを考慮した上で、以下3つのことについてはデザインする上で注意するようにしましょう。

タブの数とタイトルのサイズに配慮する

タブは、PCサイトだけでなくスペースに限りのあるスマートフォンサイトでも頻繁にも利用されています。

スマートフォンサイトの場合には、ボタンと同様に指でタップできる十分なサイズが必要なため、タブの数は3つから5が限界で、それ以上の場合は、タブUIのメリットである見出しの一覧性が失われてしいます。

また、その時のタブのタイトルの可読性も重要で、タイトルが読みやすいテキストサイズを心がけましょう。

タブは一列にする

タブの数は、並列に並べられる数にする必要があります。

タブをの数を2列以上にしてしまうと、1列目のタブとコンテンツが離れてしまいタブと認識できなくなることで、ユーザーが情報を見落としてしまう可能性があります。

1列に収まりきらないようなタブは、情報設計を見直す必要があるでしょう。

パネルの最上部にタブバーを設置

ユーザーは、コンテンツを見る時に上から順に内容を見ていく為、タブバーは最上部に設置してまず一番最初に見える位置にメニューを配置することで、構成や目次を見やすくします。

また、ユーザーが現在地を把握できるよう、色を付けたり、アンダーラインを引いたりして、表示中のタブを目立たせましょう。

HTMLとCSSのコピペでできるタブのUI

タブは見慣れたUIで、そこに何か特別な意味があるようには感じられないかもしれませんが、とても効率よく情報を提供することができます。

かかかず

それでは、コピペできるタブの紹介です。

以下はjsを使わないHTMLとCSSのコピペでできるタブです。

　総合　プログラミング

総合の内容がここに入ります

プログラミングの内容がここに入ります

コードを表示する

HTML

<div class="wrapper">
<div class="tabs">
    <input id="all" type="radio" name="tab_item" checked>
    <label class="tab_item tab_item01" for="all"><i class="fas fa-rss"></i>　総合</label>
    <input id="programming" type="radio" name="tab_item">
    <label class="tab_item tab_item02" for="programming"><i class="fas fa-rss"></i>　プログラミング</label>
    <div class="tab_content" id="all_content">
        総合の内容がここに入ります
    </div>
    <div class="tab_content" id="programming_content">
        プログラミングの内容がここに入ります
</div>
</div>
</div>

CSS

.wrapper{
}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  background-color: #FFFFFF;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}

.tab_item01 {
 border-radius: 6px 0 0 6px;
}

.tab_item02 {
 border-radius: 0 6px 6px 0;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 20px 2px 0;
  clear: both;
  overflow: hidden;
}

.tab_content{
    position:  relative;            /* 位置指定 */
    animation: anime1 1s ease;      /* アニメーション指定 */
}
 
@keyframes anime1 {
    0% {
        opacity:  0;                /* 透明度指定 */
        top: 50px;                  /* 位置指定 */
    }
    100% {
        opacity:  1;                /* 透明度指定 */
        top: 0;                     /* 位置指定 */
    }
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #6bb6ff;
  color: #fff;
}