タブとセグメンテッドコントロールの違いとUIタブデザイン | デジマースブログ
モバイルwebページは画面が小さいため、フィーチャーフォン時代からUI部品の「タブ」を使い、ページ内の一部に部分的な表示切替を行い多くの情報を載せてきました。
今回は、そんな「タブ」と、機能の近い「セグメンテッドコントロール(SegmentedControl)」の違いを目的とデザイン/UI含め紹介し、
後半にはタブ表現のバリエーションとユーザビリティーにふれ、最後にコピペして使えるソースを紹介します。
※「セグメントコントロール」ではなく「セグメンテッドコントロール」
※「Segmented」の「ed」読み方発音は「ed」を 「ɪd」と発音。したがって 「セグメント」+「ィッド」で「セグメントィッド」ですが、カタカナ表記は「セグメンテッド」が一般的です
タブとは
ページ内の一部を部分的な表示切替を行うことで、優先度の低い情報も限られたスペースで表示できる便利な機能です。
- タブの数は3～4つ程度 ※各項目名の文字数の関係で。
- デフォルトは一番左側がアクティブ状態にする
- 優先度の高い項目を一番左に配置 ※閉じられたタブ（特に右端）は開かれることが少ない
- 扱う情報をカテゴリ/ジャンルで切り替える（コンテンツ向き）
- タブ毎の情報が重複しない
以上の注意が必要です。
置かれる情報は「題名」の子要素（並列なもの）を表示切替することが望ましいです。
例.
セグメンテッドコントロール
(SegmentedControl)とは
iOSでは標準的なUIコンポーネントです。
「タブ」に似ていますが、テーマ全体に対してセグメントを分けて表示する機能です。
ポイントとして、
- 項目数は3～4つ程度が望ましい ※2つだけの場合はどちらがアクティブかわかりづらい
- デフォルトはタブと同じく一番左側がアクティブ状態にする
- 一つのデータをセグメントにより分けて表示（情報/データ 向き）
- 各セグメント間の情報は分け方により重複する
以上の注意が必要です。
置かれる情報は「主情報」の内容をセグメントにより表示切替することが望ましいです。
例.
タブとセグメンテッドコントロールそれぞれついて説明しましたが、
ポイントを踏まえて適切に使い分けていきましょう。
バリエーションの紹介
最後にタブのバリエーションを紹介します。
見比べると分かりますが、UI部品のデザインによって利用者はそれが「タブ」なのか「セグメンテッドコントロール」なのか、その他似た表現の「グローバルメニュー」なのか判断が難しいため、
デザインについてはユーザビリティーを考慮する必要があります。
「流行表現」にはそういった問題が付いてくるため、
見慣れた「定番表現」の方が利用者にとっては瞬間的にわかりやすいのではないでしょうか。
参考程度に定番表現タブのソースを掲載します。
定番タブのソースコード
(動かせます↓)
<div id="tabcontrol"> <a class ="tab1" href="#tabpage1">HTML</a> <a class ="tab1" href="#tabpage2">CSS</a> <a class ="tab1" href="#tabpage3">JavaScript</a> </div> <div id="tabbody"> <div id="tabpage1">タブ1内容</div> <div id="tabpage2">タブ2内容タブ2内容</div> <div id="tabpage3">タブ3内容タブ3内容タブ3内容</div> </div> <script> window.onload = aa; </script>
@charset "utf-8";
/* CSS Document */
body {
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;
}
/* ▼タブ(カスタマイズ中) */
#tabcontrol {
width: 100%;
height: auto;
border: 0.0px solid #FF0004;
margin: 0px 0% 0% 0%;/* インラインブロック化 */
border-width: 0px 0px 0px 0px; /* 下以外の枠線を引く */
position: relative; /* JavaScriptでz-indexを調整するために必要 */
overflow: hidden;
}
a.tab1 {
width: 31.3%;
border-top:solid 2px #656766;
border-bottom:solid 1px #656766;
border-left:solid 2px #656766;
border-right:solid 2px #656766;
font-size: 15px; font-size: 1.5rem;
text-align:center;
text-decoration: none ;/*リンク文字の下線を取る*/
margin: 0% 0% 0% 0.8%;
padding: 7px 0 7px 0; /* 内側の余白 */
border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
float: left;
}
div.tabcontrol_btn1_a_tag_on {
color: #656766;
text-decoration: none ;/*リンク文字の下線を取る*/
width: 31.3%;
border-top:solid 2px #656766;
border-bottom:solid 2px #ffffff;
border-left:solid 2px #656766;
border-right:solid 2px #656766;
text-align:center;
margin: 0% 0% 0% 0.8%;
padding: 1.75% 0 1.75% 0%; /* 内側の余白 */
border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
background-color:#ffffff;
float: left;
}
div.tabcontrol_btn1_a_tag_off {
color: #ffffff;
text-decoration: none ;/*リンク文字の下線を取る*/
width: 31.3%;
border: solid #656766;
border-width: 2px 2px 1px 2px; /* 下以外の枠線を引く */
text-align:center;
margin: 0% 0.75% 0% 0.75%;
padding: 1.75% 0 1.75% 0%; /* 内側の余白 */
border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
background-color:#656766;
float: left;
}
/* ▼タブの中身(カスタマイズ中) */
#tabbody div{
width: auto;
border-top:solid 2px #656766;
border-bottom:solid 2px #656766;
border-left:solid 0px #656766;
border-right:solid 0px #656766;
margin: -2px auto 5% auto;
padding: 3.75% 1% 3.75% 1%; /* 内側の余白量 */
background-color: #FFFFFF; /* 背景色 */
}
#tabbody1 div{
width: auto;
border-top:solid 2px #656766;
border-bottom:solid 2px #656766;
border-left:solid 0px #656766;
border-right:solid 0px #656766;
margin: -2px auto 5% auto;
padding: 3.75% 1% 3.75% 1%; /* 内側の余白量 */
background-color: #FFFFFF; /* 背景色 */
}
#tabbody2 div{
width: auto;
border-top:solid 2px #656766;
border-bottom:solid 2px #656766;
border-left:solid 0px #656766;
border-right:solid 0px #656766;
margin: -2px auto 5% auto;
padding: 3.75% 1% 3.75% 1%; /* 内側の余白量 */
background-color: #FFFFFF; /* 背景色 */
}
#tabbody3 div{
width: auto;
border-top:solid 2px #656766;
border-bottom:solid 2px #656766;
border-left:solid 0px #656766;
border-right:solid 0px #656766;
margin: -2px auto 5% auto;
padding: 3.75% 1% 3.75% 1%; /* 内側の余白量 */
background-color: #FFFFFF; /* 背景色 */
}
/* ▼タブの配色 */
#tabcontrol a:nth-child(1), { color: #ffffdd; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), { color: #ddffdd; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), { color: #ddddff; }/* 3つ目のタブとその中身用の配色 */
function aa() {
// ---------------------------
// ▼A：対象要素を得る
// ---------------------------
var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
var pages = document.getElementById('tabbody').getElementsByTagName('div');
// ---------------------------
// ▼B：タブの切り替え処理
// ---------------------------
function changeTab() {
// ▼B-1. href属性値から対象のid名を抜き出す
var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);
// ▼B-2. 指定のタブページだけを表示する
for(var i=0; i<pages.length; i++) {
if( pages[i].id != targetid ) {
pages[i].style.display = "none";
}
else {
pages[i].style.display = "block";
}
}
// ▼B-3. クリックされたタブを前面に表示する
for(var i=0; i<tabs.length; i++) {
tabs[i].setAttribute('style','color:#ffffff;border-bottom:solid 2px #656766;background-color:#656766;');
}
this.setAttribute('style','color:#656766;border-bottom:solid 2px #ffffff;background-color:#ffffff;');
// ▼B-4. ページ遷移しないようにfalseを返す
return false;
}
// ---------------------------
// ▼C：すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
// ---------------------------
for(var i=0; i<tabs.length; i++) {
tabs[i].onclick = changeTab;
}
// ---------------------------
// ▼D：最初は先頭のタブを選択しておく
// ---------------------------
tabs[0].onclick();
}
※JavaScript等、こちらのページ記事を参考にしてカスタマイズしてみました。
「ページ移動せずに内容を変更するタブ機能の作り方」
注意）今回は外部JavaScriptファイル構成にしていますので、
hesdタグ内で読み込んだJavaScript関数を「window.onload」で最後に実行する順番でなくては発動しません。
「div id="tabbody"」の終了タグの後で、下記スクリプトを実行させてください↓
<script> window.onload = aa; </script>
ご意見あればお願いします。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
他の記事をさがす ⇒ 記事一覧へ
