UI 設計のための HTML デザイン パターン
日野 克哉

鷲崎 弘宜

株式会社東芝ソフトウェア技術センター
神奈川県川崎市幸区小向東芝町 1

早稲田大学
基幹理工学部情報理工学科
東京都新宿区大久保 3-4-1

katsuya.hino@toshiba.co.jp

washizaki@waseda.jp

ABSTRACTHTML は本来、文書を記述するための言語であり、現在のWeb アプリケーションやサイトに見られるような高度なイ
ンタラクションを伴う UI を実現するためのタグは用意されていない。そのため、HTML で用意された既存のタグを組み合わせて使用し、様々な UI を実現している。ここで、世の中に存在する UI のパターンは限られているのにも関わらず、HTML におけるそれらの実装方法が何通りもあり、提供したい UX に対する UI を実現する最適な実装を瞬時に選択できないという問題がある。この要求に応えるために、
Web アプリケーションやサイトでよく見られる UI のパターンを抽出し、HTML でアクセシビリティを確保しつつ実装する方法を HTML UI Design Patterns としてまとめる。これにより、様々な閲覧環境でユーザビリティの高い HTML を素早く実装できるようになるほか、パターンを適用したHTML 間では、HTML の構造が共通となるため、これに適用できる CSS や JavaScript を使いまわせるようになる。

Categories and Subject Descriptors
D.3.3 [Programming Languages]: Language Constructs andFeatures – patterns.

General Terms
Documentation, Design, Human Factors, Languages

Keywords
User Interfaces, Web, HTML, CSS, JavaScript, Design Patterns

1. INTRODUCTION

Web アプリケーションやサイトは閲覧環境が多様でユーザビリティの確保が困難であり、またサイトが提供する情報の意味的な構造化がユーザ エージェントや検索エンジンなどからの評価において度々重要視される。よって、Web ア
プリケーションやサイトの UI は、一環境における完成図だ
けを意識して作成するのではなく、これらの副次的な事項も考慮して作成することが望ましい。しかし Web アプリケーションやサイトの UI 実装に使用される HTML は記述の自由度が高く、一つの UI を実現するだけでも複数の実装方法が存在する。そのため開発者はユーザビリティや構造化が考慮された最適な実装を瞬時に選択することが困難となっている。
本論文では、HTML で記述された Web アプリケーションおよびサイト向けの UI 設計時にみられる HTML 設計のパターンを「HTML UI Design Patterns」として紹介する。HTML UIDesign Patterns で抽出されるパターンは、HTML5 を活用し、より意味的な構造化がなされた HTML を設計することを基本的な指針としている。これにより、様々な閲覧環境におけるアクセシビリティの向上や検索エンジン最適化（SEO）
への対策といった効果が期待できる。
HTML UI Design Patterns の位置づけを Figure 1 に示す。
Designing Interfaces [1]は Web というメディアに限らない汎用的な UI を網羅したデザイン パターンである。Web で使用される UI パターンも含まれるが、HTML の設計については触れられていない。そのため Web 特有の多様な閲覧環境に対応したアクセシビリティについての考慮は含まれていない。一方で HTML UI Design Patterns は、Designing Interfaces
で紹介されたパターンのうち Web アプリケーションおよび
サイトでよく使用されるパターンを Web 特有のアクセシビ
リティを考慮しつつ HTML での実装例も交えて紹介している。パターンには UI を HTML で実現する際の HTML 構造
設計方法と、必要に応じて UI の機能に必要最小限の外見を定義しない CSS と JavaScript の記述が定義されている。また、Pro CSS and HTML Design Patterns [2]は HTML および
CSS を使用して表現できる外見や UI の記述方法を網羅したデザイン パターンである。こちらは各パターンに具体的なコードが HTML および CSS 共に定義されていて、パターンが対象とする解決策は構造から外見まで含んだ具体的なものであるため、その性質は GUI 部品ライブラリに近い。また、比較的内容が古いため、最新の HTML5 や CSS3 への対
応、検索エンジン最適化、アクセシビリティ対策などに対応していない。
なお、HTML UI Design Patterns が扱う UI の粒度は、画面部品（またはコントロール）の粒度から、それらを複数組み合わせたものくらいの間を対象としている。

2. DESIGING UI PATTERNS IN HTMLHTML で UI を設計するには、HTML で用意されているHTML 要素を組み合わせる。HTML 要素には基本的なものしか用意されておらず、高度な機能やインタラクションを実現するものは、HTML 要素を組み合わせて作成しなければならない。

Figure 1. HTML UI Design Patterns の位置づけ
HTML UI Design Patterns で紹介する各パターンでは、HTMLで当該 UI パターンを実現する際の最低限必要な HTML 要素を示している。デザイン パターンを参照する者は、ここで示している以外の要素を必須要素の内外に追加して、各自の UI を設計する。
また、各必須要素には推奨クラス名が定義されている。推奨クラス名をつけると、JavaScript による動作定義が必要なパターンにおいて、自前で JavaScript を実装することなく、HTML UI Design Patterns に対応した JavaScript ライブラリをそのまま適用できる。クラス名以外にも、必須要素には条件が指定されることがある。条件には、HTML 要素型、必須属性、子要素保持の可否、同じ要素内に同時に存在できる数が挙げられる。

4. DESIGN PATTERNS

本章では、HTML UI Design Patterns に含まれるパターンを紹介する。なお、パターンの紹介は Canonical Form1 を参考にし、Name・Category・Context・Problem・Forces・Solution・
Resulting Context・Known Uses・Example・Related Patterns の項目を記述している。
各パターンの解決策では、必要最小限の HTML 要素とその構造を図示している。矩形は HTML 要素に対応し、矩形の内側にはその要素の概要およびその要素の HTML 要素型な
らびにクラス名を CSS セレクタに似た形式で記述している。

4.1 Major Navigation

3. CATEGORIES AND RELATIONSHTML UI Design Patterns では、UI パターンを次の 6 つのグ
ループに分類した（Table 1）。
本論文では、これらの分類のうち、ナビゲーションおよび入力に属するパターンについて紹介する。
また、HTML UI Design Patterns の参照者が適用すべきパターンを選択する際の手助けとして、HTML UI Design Patterns で紹介する各パターン間の関連と、Figure 1 で紹介した類似するデザイン パターンで紹介されているパターンとの関連を
Figure 2 に示す。「パンくず」および「タブによるナビゲー
シ ョ ン 」 パ タ ー ン は 、 そ れ ぞ れ Designing Interfaces の「Breadcrumbs」および「Module Tabs」パターンを HTML で実装するパターンである。その他のパターン間を結ぶ実線
は、そのパターンが類似していることを示す。レイアウト、
アクション、データ表示、および外見の分類に含まれるパターンについては本論文では触れない。

1

http://c2.com/cgi/wiki?CanonicalForm

Figure 4.1.1 主要なナビゲーション
主要なナビゲーション

4.1.1 Name
主要なナビゲーション（Major Navigation）

4.1.2 Category
ナビゲーション

4.1.3 Context
目の不自由な利用者を想定した Web アプリケーションやサイトを構築している。目の不自由な利用者はスクリーン リーダという文字の読み上げ機能を使用して画面上の情報を読み取る。目視では本文や興味のある位置までの読み飛ばしが容易なため気づかないが、一つの画面に記載される文字量は思いのほか多く、これらすべてが読み上げられると利用者は必要な情報を選別することが困難となる。

Table 1. HTML UI Design Patterns のパターン分類
分類

含まれるパターンレイアウト

画面全体の配置を決定するパターン。

ナビゲーション

画面遷移の手段を提供するパターン。

アクション

機能や操作の手段を提供するパターン。

データ表示

データの様々な形式で表示するパターン。

入力

データの入力手段を提供するパターン。

外見

外見の変化を司るパターン。

Figure 2. パターン間の関連
パターン間の関連

4.1.4 Problem

4.1.5 Forces

Web アプリケーションやサイトには、本文の内容とは直接関係のない様々なリンクが存在し、そのリンクもサイト内の主要なページへ遷移するリンクのようにユーザにとって使用頻度の高いものから、免責事項記載へのリンクなど繰
り返し何度も遷移しないリンクのように使用頻度の低いものまである。これらをすべて読み上げられてもユーザは使用頻度の高いリンクを容易に扱えない。

音声読み上げでの利用を想定する。しかし目視における一
覧性も引き続き確保する必要がある。
音声読み上げ時の利便性を向上させる必要がある。しかし同一内容で音声読み上げ用のページを作成し同期するといった手間はかけられない。
使用頻度の高いリンクへのアクセスをしやすくする必要がある。しかし使用者にとって使用頻度の高いリンクがページ内のあらゆる場所に分散している。

デザインの都合上、音声読上げ時にも本文やナビゲーショ
ンへのアクセスを簡単にする必要がある。しかし、目視の際のデザインを重視する必要があり、ページ内にアクセスを簡単にするためのリンクを導入できない。
目視での利便性を優先して HTML 構造を作成するため、読み上げ順を考慮して HTML 要素を再配置できない。

4.1.6 Solution
使用頻度の高い比較的少数のリンクを「主要なナビゲーシ
ョン」として配置し、これを nav 要素で囲う。nav 要素で囲うとスクリーン リーダは nav 要素だけの読み上げや nav 要
素の読み飛ばしができるようになる。
リンクはリストを表現する要素（ol または ul 要素）を使用する。各ページへのナビゲーションをリストの項目（li 要素）で表現する。リストの項目には、リンクの実体であるアンカ（a 要素）を入れる。

最近のインターネット検索サイトでは検索対象のカテゴリを切り替えられる（Figure 4.1.3）。例の上部にあるカテゴ
リを切り替えるためのリンク集には本パターンを適用する。
一方、検索結果のリンク集は検索サイトのコンテンツであるので、本パターンは適用できない。

4.1.9 Example<nav><ul class="ts-navigation-list"><li class="ts-navigation-item"><a class="current">Web</a></li><li class="ts-navigation-item"><a href="images">Images</a></li><li class="ts-navigation-item"><a href="videos">Videos</a></li><li class="ts-navigation-item"><a href="maps">Maps</a></li><li class="ts-navigation-item"><a href="news">News</a>
</li>
</ul>
</nav>

4.1.10 Related Patterns
ナビゲーション先に階層構造がある場合は「パンくず」パターンを検討する。
Figure 4.1.2 HTML 要素構造

4.2 Tab Navigation

4.1.7 Resulting Context
スクリーン リーダは「主要なナビゲーション」の位置を把握でき、ユーザは使用頻度の高いページへの遷移を容易にできるようになり、また遷移を必要としない場合はリンク
を読み飛ばすことができる。

4.1.8 Known Uses

Figure 4.2.1 タブによるナビゲーション
タブによるナビゲーション

4.2.1 Name

タブによるナビゲーション（Tab Navigation）

4.2.2 Category
ナビゲーション

4.2.3 Context

Figure 4.1.3 検索サイトにおけ検索サイトにおける使用例
サイトにおける使用例

画面の一部分で複数のタイトル付きの表示内容を素早く切り替えられるタブ型の UI を作成している。ページ全体を通常のハイパーリンクで遷移させると HTTP のトランザクシ
ョンが発生し、ページ全体の読み込みと描画が起こり、素早い切り替えが実現できない。そのため JavaScript を使用して HTML 要素の表示・非表示を切り替えることで素早い切り替えを実現するが、表示内容の切り替えが JavaScript に依存してしまう。

4.2.4 Problem
JavaScript が無効の環境で閲覧した時に表示内容が切り替えられなくなり、表示できない内容が生じてしまう。例えば、
インターネットに公開される Web サイトは、JavaScript を実行しない検索エンジンのクローラからアクセスされる可能性がある。

4.2.7 Resulting Context
JavaScript が無効の時にはすべてのタブ ページが表示され、アクセスできない内容が生じない。また、その場合には、タブのアンカをクリックすることで対応するタブ ページの位置が表示されるため、タブによるナビゲーションができる。

4.2.8 Known Uses

4.2.5 Forces
JavaScript が無効の環境で閲覧される可能性もある。しかし
JavaScript が無効の環境でもすべての表示内容が表示される必要がある。
JavaScript が無効の環境ではタブの切り替えが機能せず、すべてのタブ ページの内容が同時に表示される。しかし、引き続きタブによるナビゲーションの利便性を確保したい。

4.2.6 Solution
切り替え対象の表示内容のうち、初期に表示されない表示
内 容 の 非 表 示 化 を JavaScript に よ っ て 行 う 。 す る と 、JavaScript 無効の環境では初期の非表示化が行われないため、すべての表示内容が表示されたままになる。さらにタイトルを表現する HTML 要素と表示内容を表現する HTML 要素とをアンカで対応づけることで、JavaScript が無効の場合には、タイトルがそのまま表示内容へのナビゲーション リン
クとして機能する。これを実現するには、次に述べる構造
で HTML を作成する。
タブ リストですべてのタブを保持する。タブ ページ コンテ
ナですべてのタブ ページを保持する。各タブを各タブ ペー
ジに対応づける。タブ ページに id 属性を指定する。アンカの href 属性に「“#”+タブ ページの id 属性」を指定する。タブがクリックされたら、対応するタブ ページ以外に、タブページが非表示となるようなクラスを JavaScript で指定する。

Figure 4.2.3 JavaScript 無効時の様子「タブによるナビゲーション」を使用して複数の内容を切り 替 え て 表 示 で き る 領 域 を 作 成 し た （ Figure 4.2.3 ） 。
JavaScript が無効でもすべてのページの内容が表示され、タブをクリックすると該当するページの内容が表示されている位置までスクロールする。

4.2.9 Example

Figure 4.2.2 HTML 要素構造

<ul class="tabcontrol-tab-list"><li class="tabcontrol-tab"><a href="#page1">Page 1</a></li><li class="tabcontrol-tab"><a href="#page2">Page 2</a></li><li class="tabcontrol-tab"><a href="#page3">Page 3</a></li></ul><div class="tabcontrol-tab-page-container"><div class="tabcontrol-tab-page" id="page1"><h1>Page 1 Content</h1></div><div class="tabcontrol-tab-page" id="page2"><h1>Page 2 Content</h1></div><div class="tabcontrol-tab-page" id="page3"><h1>Page 3 Content</h1></div></div>

4.2.10 Related Patterns
ページ全体のナビゲーションは「主要なナビゲーション」
パターンを検討する。
Web UI に限らない、より汎用的な UI でのパターンについて
は、Designing Interfaces の「Module Tabs」パターン[1]を参照する。
タブの外見は維持するが、JavaScript を使用せず通常の同期型 HTTP 通信によって複数のページを遷移させるときには、
Pro CSS and HTML Design Patterns の「Tab Menu」パターン[2]を参照する。
Pro CSS and HTML Design Patterns の「Tabs」パターン[2]は本パターンと似ているが、JavaScript が無効の環境では一部の表示内容が表示されず、また表示内容の非表示化に画面外の座標を指定する方法が取られており、SEO においてペナルティとなる可能性がある。

4.3 Breadcrumbs

Figure 4.3.1 パンくず4.3.1 Name
パンくず（Breadcrumbs）

各ページへのリンクのリストなので、全体をリスト（ul 要素）で表現する。各ページへのナビゲーションをリストの項目（li 要素）で表現する。リストの項目には、リンクの実体であるアンカ（a 要素）を入れる。アンカ内には span 要
素を入れ、その中にタイトルを記入する。
検索エンジンがページを結果に表示する際、サイト内における位置も同時に表示されるようにする。これには検索エ
ンジンにパンくずであることを伝える必要がある。
microdata を埋め込むことで、パンくずであることを表現できる。リストの項目には、itemscope 属性を指定し、1 つのリンクを表す HTML 上での範囲を明示する。リストの項目には、次の属性と属性値のペアを指定し、この項目がパン
くずの 1 項目であることを明示する:
itemtype="http://data-vocabulary.org/Breadcrumb"
アンカには、次の属性と属性値のペアを指定し、これが当該項目の URL を示していることを明示する:
itemprop="url"
タイトルには、次の属性と属性値のペアを指定し、これが当該項目のページ タイトルを示していることを明示する:
itemprop="title"
項目間の区切り文字（「>」など）は、CSS を使用して表示することが望ましいが、項目内のアンカ外領域にテキストで記入することもできる。

4.3.2 Category
ナビゲーション

4.3.3 Context
ページが階層化された Web サイトを構築している。各ペー
ジには、そのページの階層を示し、さらに上位階層へ遷移するためのナビゲーションを、a 要素を使用したリンクで作成している。単なるリンクなので、これが階層を表現していることは UI を目視している人間にしかわからない。

4.3.4 Problem
このナビゲーションが階層を表現していることが UI を目視している人間にしかわからないため、検索エンジンによって当該ページが検索結果に表示される際に当該ページの階層情報が表示されず、検索エンジンからの訪問者のユーザ
ビリティが低下する。

4.3.5 Forces
検索エンジンからサイト内のサブ ページへの流入が想定される。その際、階層表示が原因でユーザが期待しないペー
ジへアクセスすることは避けたい。しかし、ユーザの利便性を維持するために階層表示は廃止できない。

Figure 4.3.2 HTML 要素構造

4.3.7 Resulting Context
検索エンジンの結果に当該ページのサイト内における位置も表示され、ページを訪れる前にユーザがサイトの構造を把握できる。
検索エンジンの結果から、ホーム ページなど、サイト内にある当該ページ以外のページにも直接たどれるようになる。

4.3.8 Known Uses
4.3.6 Solution
検索エンジンのクローラが階層情報を機械的に読み取ることができるように、階層情報を表現できる Breadcrumb という microdata を埋め込んだ「パンくず」ナビゲーションを配置する。

Figure 4.3.3 ショッピング サイトでの使用例
サイトでの使用例
ショッピング サイトでは、商品ページがカテゴリ別に分けられている。各ページの上部には、現在表示しているペー

ジのサイト全体における位置を表示するリンク リストが表示される（Figure 4.3.3）。このリストには本パターンを適用できる。

4.4 Custom Button Drop-down List

4.3.9 Example<ul class="ts-breadcrumbs-list"><liclass="ts-breadcrumbs-item"
itemscope
itemtype="http://data-vocabulary.org/Breadcrumb"><a class="ts-breadcrumbs-anchor" href="/foods"
itemprop="url"><span class="ts-breadcrumbs-title" itemprop="title">
食品</span></a> ›</li><li
class="ts-breadcrumbs-item"
itemscope
itemtype="http://data-vocabulary.org/Breadcrumb"><a class="ts-breadcrumbs-anchor" href="/foods/breads"
itemprop="url"><span class="ts-breadcrumbs-title" itemprop="title">
パン</span></a> ›</li><li
class="ts-breadcrumbs-item"
itemscope
itemtype="http://data-vocabulary.org/Breadcrumb"><a class="ts-breadcrumbs-anchor" itemprop="url"><span class="ts-breadcrumbs-title" itemprop="title">
食パン</span>
</a>
</li>
</ul>

4.3.10 Related Patterns
階層構造のないフラットなナビゲーションは、「パンくず」
を使用せずに「主要なナビゲーション」パターンを検討する。
このナビゲーションが、当該サイト内の移動における重要な手段である場合は、さらに「主要なナビゲーション」パ
ターンを同時に適用し、ナビゲーションのためのリンクであることを表現する。
Web UI に限らない、より汎用的な UI でのパターンについて
は、Designing Interfaces の「Breadcrumbs」パターン[1]を参照する。

Figure 4.4.1 カスタム ボタン ドロップダウン リスト

4.4.1 Name
カスタム ボタン ドロップダウン リスト（Custom Button Drop-down List）

4.4.2 Category
入力

4.4.3 Context
外見のデザインを重視した Web アプリケーションやサイトに含まれるフォーム上にドロップダウン リストを配置しようとしている。フォームでは、ドロップダウン リストはselect 要素で実現される。

4.4.4 Problem
多数の Web ブラウザでは、select 要素の収縮時における外見を変更できないため、ドロップダウン リストだけ Web ブラ
ウザで描画されるデフォルトの外見になってしまう。そのため、他の部分の外見と統一感のあるデザインが実現できない。

4.4.5 Forces
様々なブラウザで閲覧される可能性がある。どのブラウザ
でも収縮時の外見を同一にしなければ、UI 全体の統一感がなくなってしまう。
タッチ スクリーン デバイスに搭載されているブラウザから閲覧する可能性がある。しかしこれらの環境ではドロップ
ダウン時の外見をマウス環境のものと統一してしまうと使い勝手が悪くなる。

4.4.6 Solution
ドロップダウンを表現する select 要素を使いつつ、収縮時の外見を独自に作成して実現する。
select 要素は CSS で透明にし、その下に収縮時のドロップダ
ウン リストの外見を表現する「カスタム ボタン」を重ねる。
カスタム ボタンは適当な要素（span 要素など）を使って表現する。
ドロップダウンはブラウザ ネイティブのものを使用する。
そのためには、select 要素を透明にし（opacity: 0）、カスタム ボタンの上に同じ大きさで重ねる。

なお、カスタム ボタンと select 要素をドロップダウン リス
ト コンテナ（div 要素など）で囲い、高さと幅を 100%に指定すると、2 つの要素を同じ大きさにできる。

4.4.10 Related Patterns
ドロップダウン リストの展開時の外見も統一する場合は「カスタム リスト ドロップダウン リスト」パターンを検討する。

4.5 Custom List Drop-down List

Figure 4.4.2 HTML 要素構造

4.4.7 Resulting Context
ブラウザ間で収縮時におけるドロップダウン リストの見た目が統一され、入力フォームなどの体裁が崩れなくなる。
選択画面はブラウザのネイティブのものを使うので、スマートフォンならスマートフォンに適した選択画面が表示される。

Figure 4.5.1 カスタム リスト ドロップダウン リスト

4.5.1 Name
カスタム リスト ドロップダウン リスト（Custom List Drop-down List）

4.5.2 Category
入力

4.4.8 Known Uses
4.5.3 Context
外見のデザインを重視した Web アプリケーションやサイトに含まれるフォーム上にドロップダウン リストを配置しようとしている。フォームでは、ドロップダウン リストはselect 要素で実現される。

Figure 4.4.3 ブラウザによるブラウザによる外見のによる外見の比較
外見の比較
性別を選択するドロップダウン リストを、select 要素を使ったものと本パターンを適用したものとで上下に並べ、Internet Explorer 11（左）と Firefox 26（右）で表示させたところ（Figure 4.4.3）。本パターンを適用すると、異なるブラウザでも同様の外見を実現できる。

4.4.9 Example<div class="ts-dropdown" id="gender"><span class="ts-dropdown-button">Select one</span><select name="gender"><option value="0">Select one</option><option value="1">Male</option><option value="2">Female</option><option value="3">Not specified</option></select></div>

4.5.4 Problem
大多数の Web ブラウザでは、select 要素のドロップダウン時
における外見を変更できないため、ドロップダウン リスト
だけ Web ブラウザで描画されるデフォルトの外見になってしまう。そのため、他の部分の外見と統一感のあるデザインが実現できない。

4.5.5 Forces
すべてのブラウザで同様のドロップダウン時における見た目を実現する。
ドロップダウン時に表示される項目として、画像などの文字列以外のものも扱う。

4.5.6 Solution「カスタム ボタン ドロップダウン リスト」において、さらにドロップダウン時に出現するリストを表現する要素を独自に作成する。
ドロップダウン時に出現するリストは、リスト要素（ol ま
たは ul 要素と、li 要素）を使って表現する。

次のスタイルを指定して、select 要素の機能を保ったまま非表示にする:

性別を選択するドロップダウン リストに本パターンを適用させ、項目にアイコンを追加した（Figure 4.5.3）。

position: absolute;
clip: rect(0,0,0,0);

4.5.9 Example

select 要素に tabindex="-1"属性を追加し、ネイティブのドロップダウン リストがフォーカスを得ないようにする。
代わりにドロップダウン リスト コンテナの tabindex 属性に0 以上を指定し、カスタム リスト ドロップダウン リストがフォーカスを得られるようにする。

Figure 4.5.2 HTML 要素構造

<div class="ts-dropdown" id="gender" tabindex="0"><span class="ts-dropdown-button"><img src="null.png" alt=""><span class="ts-dropdown-list-item-text">Select one</span></span><ul class="ts-dropdown-list"><li><img src="null.png" alt=""><span class="ts-dropdown-list-item-text">Select one</span>
</li>
<li>
<img src="male.png" alt=""><span class="ts-dropdown-list-item-text">Male</span>
</li>
<li>
<img src="female.png" alt=""><span class="ts-dropdown-list-item-text">Female</span>
</li>
<li>
<img src="notspecified.png" alt=""><span class="ts-dropdown-list-item-text">Not specified</span>
</li>
</ul>
<select name="gender" tabindex="-1"><option value="0">Select one</option><option value="1">Male</option><option value="2">Female</option><option value="3">Not specified</option></select></div>

4.5.7 Resulting Context
ブラウザ間でドロップダウン時のドロップダウン リストの見た目が統一される。

4.5.10 Related Patterns

リストの項目に文字以外の項目が追加できて、表現力が向上する。

タッチ スクリーン デバイスなどで閲覧される可能性がある
場合は「カスタム ボタン ドロップダウン リスト」パターンを検討する。

4.5.8 Known Uses

4.6 Three-state Check Box

Figure 4.6.1 3 状態チェック
状態チェック ボックス

4.6.1 Name

3 状態チェック ボックス（Three-state Check Box）

4.6.2 Category
入力
Figure 4.5.3 性別を選択
性別を選択する
選択するドロップダウン
するドロップダウン リスト

4.6.3 Context

4.6.7 Resulting Context

Web アプリケーションやサイト内のフォームで、ユーザに「チェック」・「未チェック」・「チェックでも未チェッ
クでもない」という 3 状態を入力させようとしている。ユーザは 3 状態をとるチェック ボックスの使用に慣れており、Web に お い て も こ れ の 使 用 を 期 待 し て い る 。 例 え ば 、Microsoft Windows のフォルダのプロパティでは、フォルダ内のファイルに一括して属性を設定するための UI として 3状態チェックボックスを採用している。

他の input 要素と同じように使える、3 状態チェック ボック
スが設置される。

4.6.8 Known Uses

4.6.4 Problem
input 要素の type 属性に"checkbox"を指定するとフォームで使用できるチェック ボックスを作成できるが、これは「チェック」・「未チェック」の 2 状態しか入力できない。

4.6.5 ForcesHTML で 3 状態を入力するには select 要素によるドロップダ
ウン リストが使用できる。しかし、ドロップダウン リスト
は画面上を占める面積が広く、これを設置する余分なスペースが必要である。

4.6.6 Solution
type 属性に"checkbox"を指定した input 要素を使用しつつ、チェック ボックスの外見を独自に作成し、JavaScript で 3 状態の制御を行うことで「3 状態チェック ボックス」を実現する。
チェック状態を格納する要素（非表示 input 要素）を配置し、そこにチェック状態を数値などで格納する。
チェック状態格納要素に name 属性を指定すると、フォーム
でこの値が取得できる。
チェック ボックスがクリックされた時、チェック ボックスの外見を JavaScript で 3 状態に変更する。
同時にチェック状態格納の value 属性も JavaScript で変更する。

Figure 4.6.3 複数機器の動作状態を複数機器の動作状態を設定
動作状態を設定する
設定する画面する画面例
画面例
機器の動作状態を 2 値で設定する画面において、複数の機器にまとめて値を設定したい場合がある（Figure 4.6.3）。
このような場合、複数の機器をまとめたグループにチェッ
ク ボックスを設ければよいが、グループ内の機器の状態が統一されていない場合、そのチェック ボックスは「チェック」でも「未チェック」でもない値をとる。このような UIを実現するには、本パターンを適用する。

4.6.9 Example<label><input type="checkbox"><input type="hidden" name="group"><span>機器グループ</span></label>

4.6.10 Related Patterns「トグル ボタン」パターンは、「3 状態チェック ボックス」
パターンと同様にフォーム上で状態をユーザに入力させる
が、入力させる状態は 2 状態のうちどちらかの状態である。

4.7 Toggle Button

Figure 4.7.1 トグル ボタン

4.7.1 Name
トグル ボタン（Toggle Button）

4.7.2 Category
入力
Figure 4.6.2 HTML 要素構造

4.7.3 Context
Web アプリケーションで、「オン」・「オフ」の 2 状態を切り替えて制御する UI を作成している。チェック ボックスやラジオ ボタンでも「オン」・「オフ」の 2 状態を切り替えられるが、押された状態を保持するボタンでこれを表現しようとしている。

4.7.4 Problem
HTML でボタンを表現する button 要素や input 要素では押された状態を保持できないため、「オン」・「オフ」状態を表現できない。また、チェック ボックスやラジオ ボタンを表現する input 要素は多くのブラウザで外見を変更できないため、これをボタンのような外見にすることも困難である。

Figure 4.7.2 HTML 要素構造

4.7.7 Resulting Context

4.7.5 Forces

JavaScript が無効でも機能するトグル ボタンが設置でき、通常のチェック ボックスやラジオ ボタンと同様に使用できる。

JavaScript でトグル ボタンを実現すると、HTML のチェックボックスとの互換性が損なわれる。

4.7.8 Known Uses

すべての Web ブラウザで同じ外見を実現する。
JavaScript が無効の環境で閲覧される可能性がある。

4.7.6 Solution

Figure 4.7.3 録画ボタンの例
録画ボタンの例

type 属性に"checkbox"または"radio"と指定された input 要素
は、フォームの要素として使用できるチェック ボックスまたはラジオ ボタンである。これを非表示にして、クリック
によって 2 値を切り替えて保持する要素として使用する。
一方ボタンの外見は独自に作成し、input 要素の値に応じてボタンの凹凸が変化させる。

ストリーミング動画などを録画するアプリケーションで、録画の開始と停止という機能が同一のボタンに割り当てられ、そのボタンが録画中か否かの状態をもつことは珍しくない（Figure 4.7.3）。このようなボタンには本パターンが適用できる。

次のスタイルを指定して、input 要素をクリック可能かつ非表示にする:

4.7.9 Example

position: absolute;
clip: rect(0,0,0,0);
CSS のセレクタでは、+演算子で直前の要素の状態を利用できるため、input 要素の直後に label 要素を配置することでlabel 要素の外見を input 要素の状態に応じて変更できるようにする。
input 要素に任意の id 属性を指定し、label 要素には for 属性に input 要素の id 属性値を指定する。

<input type="checkbox" id="rec"><label for="rec"><img src="rec.png" alt=""> REC</label>

4.7.10 Related Patterns「3 状態チェック ボックス」パターンは「トグル ボタン」
パターンと同様にフォーム上で状態をユーザに入力させる
が、入力させる状態は 3 状態のうちいずれかの状態である。

5. ACKNOWLEDGMENTS

label 要素は、input 要素のチェック状態に応じて、オン・オ
フそれぞれの見た目が切り替わるようにする。

シェファードの友野氏には、このデザイン パターンを作成するにあたって非常に有用な助言を数多くいただきました。
この場を借りて感謝申し上げます。

label 要素の働きで、label 要素がクリックされると for 属性で指定された input 要素のチェック状態が変更される。

6. REFERENCES[1] Tidwell, J. 2010. Designing Interfaces, 2nd Edition. O’Reilly
Media, Inc., Sebastopol, CA.
[2] Bowers, M. 2007. Pro CSS and HTML Design Patterns.
Apress Media LLC, New York, NY.