UI 設 計 のための HTML デザイン パターン 日 野 克 哉 株 式 会 社 東 芝 ソフトウェア 技 術 センター 鷲 崎 弘 宜 早 稲 田 大 学 基 幹 理 工 学 研 究 科 情 報 理 工 学 専 攻 HTML は 本 来 文 書 を 記 述 するための 言 語 であり 現 在 の Web アプリケー ションやサイトに 見 られるような 高 度 なインタラクションを 伴 う UI を 実 現 す るためのタグは 用 意 されていない そのため HTML で 用 意 された 既 存 のタグ を 組 み 合 わせて 使 用 し 様 々な UI を 実 現 している ここで 世 の 中 に 存 在 する UI のパターンは 限 られているのにも 関 わらず HTML におけるそれらの 実 装 方 法 が 何 通 りもあり 提 供 したい UX に 対 する UI を 実 現 する 最 適 な 実 装 を 瞬 時 に 選 択 できないという 問 題 がある この 要 求 に 応 えるために Web アプリケーションやサイトでよく 見 られる UI のパターンを 抽 出 し HTML でアクセシビリティを 確 保 しつつ 実 装 する 方 法 を HTML UI Design Patterns としてまとめる これにより 様 々な 閲 覧 環 境 でユーザビリティの 高 い HTML を 素 早 く 実 装 できるようになるほか パターンを 適 用 した HTML 間 では HTML の 構 造 が 共 通 となるため これに 適 用 できる CSS や JavaScript を 使 いまわせるように なる 1. はじめに Web アプリケーションやサイトは 閲 覧 環 境 が 多 様 でユーザビリティの 確 保 が 困 難 であり またサイトが 提 供 する 情 報 の 意 味 的 な 構 造 化 がユーザ エージェントや 検 索 エンジンなど からの 評 価 において 度 々 重 要 視 される よって Web アプリケーションやサイトの UI は 一 環 境 における 完 成 図 だけを 意 識 して 作 成 するのではなく これらの 副 次 的 な 事 項 も 考 慮 して 作 成 することが 望 ましい しかし Web アプリケーションやサイトの UI 実 装 に 使 用 さ れる HTML は 記 述 の 自 由 度 が 高 く 一 つの UI を 実 現 するだけでも 複 数 の 実 装 方 法 が 存 在 する そのため 開 発 者 はユーザビリティや 構 造 化 が 考 慮 された 最 適 な 実 装 を 瞬 時 に 選 択 す ることが 困 難 となっている 本 論 文 では HTML で 記 述 された Web アプリケーションおよびサイト 向 けの UI 設 計 時 にみられる HTML 設 計 のパターンを HTML UI Design Patterns として 紹 介 する HTML UI Design Patterns で 抽 出 されるパターンは HTML5 を 活 用 し より 意 味 的 な 構 造 化 が なされた HTML を 設 計 することを 基 本 的 な 指 針 としている これにより 様 々な 閲 覧 環 境 におけるアクセシビリティの 向 上 や 検 索 エンジン 最 適 化 (SEO)への 対 策 といった 効 果 が
期 待 できる HTML UI Design Patterns の 位 置 づけを 図 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 の 粒 度 は 画 面 部 品 (またはコントロール) の 粒 度 から それらを 複 数 組 み 合 わせたものくらいの 間 を 対 象 としている 図 1 類 似 デザイン パターン 内 での HTML UI デザインパターンの 位 置 づけ 2. HTML による UI パターンの 設 計 について HTML で UI を 設 計 するには HTML で 用 意 されている HTML 要 素 を 組 み 合 わせる HTML 要 素 には 基 本 的 なものしか 用 意 されておらず 高 度 な 機 能 やインタラクションを 実
現 するものは HTML 要 素 を 組 み 合 わせて 作 成 しなければならない HTML UI Design Patterns で 紹 介 する 各 パターンでは HTML で 当 該 UI パターンを 実 現 する 際 の 最 低 限 必 要 な HTML 要 素 を 示 している デザイン パターンを 参 照 する 者 は ここで 示 している 以 外 の 要 素 を 必 須 要 素 の 内 外 に 追 加 して 各 自 の UI を 設 計 する また 各 必 須 要 素 には 推 奨 クラス 名 が 定 義 されている 推 奨 クラス 名 をつけると JavaScript による 動 作 定 義 が 必 要 なパターンにおいて 自 前 で JavaScript を 実 装 すること なく HTML UI Design Patterns に 対 応 した JavaScript ライブラリをそのまま 適 用 でき る クラス 名 以 外 にも 必 須 要 素 には 条 件 が 指 定 されることがある 条 件 には HTML 要 素 型 必 須 属 性 子 要 素 保 持 の 可 否 同 じ 要 素 内 に 同 時 に 存 在 できる 数 が 挙 げられる 3. パターンの 分 類 とパターン 間 の 関 連 HTML UI Design Patterns では UI パターンを 次 の 6 つのグループに 分 類 した レイアウト 画 面 全 体 の 配 置 を 決 定 するパターン ナビゲーション 画 面 遷 移 の 手 段 を 提 供 するパターン アクション 機 能 や 操 作 の 手 段 を 提 供 するパターン データ 表 示 データの 様 々な 形 式 で 表 示 するパターン 入 力 データの 入 力 手 段 を 提 供 するパターン 外 見 外 見 の 変 化 を 司 るパターン 本 論 文 では これらの 分 類 のうち ナビゲーションおよび 入 力 に 属 するパターンについて 紹 介 する また HTML UI Design Patterns の 参 照 者 が 適 用 すべきパターンを 選 択 する 際 の 手 助 け として HTML UI Design Patterns で 紹 介 する 各 パターン 間 の 関 連 と 図 1 で 紹 介 した 類 似 するデザイン パターンで 紹 介 されているパターンとの 関 連 を 図 2 に 示 した
図 2 パターンの 関 連 パンくずは Breadcrumbs の HTML での 実 装 タブによるナ ビゲーションは Module Tabs の HTML での 実 装 その 他 の 関 連 は 類 似 パターン レイアウト アクション データ 表 示 および 外 見 の 分 類 に 関 しては 本 論 文 では 省 略 する 4. デザイン パターン 本 章 では HTML UI Design Patterns に 含 まれるパターンを 紹 介 する なお パターンの 紹 介 は Canonical Form 1 に 照 らし 合 わせ 名 前 分 類 文 脈 問 題 フォース 解 決 策 解 決 後 の 状 況 事 例 関 連 するパターンの 項 目 を 記 述 している 4.1. 主 要 なナビゲーション(Major Navigation) 分 類 ナビゲーション 文 脈 目 の 不 自 由 な 利 用 者 を 想 定 した Web アプリケーションやサイトを 構 築 している 目 の 不 自 由 な 利 用 者 はスクリーン リーダという 文 字 の 読 み 上 げ 機 能 を 使 用 して 画 面 上 の 情 報 を 読 1 http://c2.com/cgi/wiki?canonicalform
み 取 る 目 視 では 本 文 や 興 味 のある 位 置 までの 読 み 飛 ばしが 容 易 なため 気 づかないが 一 つ の 画 面 に 記 載 される 文 字 量 は 思 いのほか 多 く これらすべてが 読 み 上 げられると 利 用 者 は 必 要 な 情 報 を 選 別 することが 困 難 となる 問 題 Web アプリケーションやサイトには 本 文 の 内 容 とは 直 接 関 係 のない 様 々なリンクが 存 在 し そのリンクもサイト 内 の 主 要 なページへ 遷 移 するリンクのようにユーザにとって 使 用 頻 度 の 高 いものから 免 責 事 項 記 載 へのリンクなど 繰 り 返 し 何 度 も 遷 移 しないリンクのよ うに 使 用 頻 度 の 低 いものまである これらをすべて 読 み 上 げられてもユーザは 使 用 頻 度 の 高 いリンクを 容 易 に 扱 えない フォース 音 声 読 み 上 げでの 利 用 を 想 定 する しかし 目 視 における 一 覧 性 も 引 き 続 き 確 保 する 必 要 が ある 音 声 読 み 上 げ 時 の 利 便 性 を 向 上 させる 必 要 がある しかし 同 一 内 容 で 音 声 読 み 上 げ 用 のペ ージを 作 成 し 同 期 するといった 手 間 はかけられない 使 用 頻 度 の 高 いリンクへのアクセスをしやすくする 必 要 がある しかし 使 用 者 にとって 使 用 頻 度 の 高 いリンクがページ 内 のあらゆる 場 所 に 分 散 している デザインの 都 合 上 音 声 読 上 げ 時 にも 本 文 やナビゲーションへのアクセスを 簡 単 にする 必 要 がある しかし 目 視 の 際 のデザインを 重 視 する 必 要 があり ページ 内 にアクセスを 簡 単 にするためのリンクを 導 入 できない 目 視 での 利 便 性 を 優 先 して HTML 構 造 を 作 成 するため 読 み 上 げ 順 を 考 慮 して HTML 要 素 を 再 配 置 できない 解 決 策 使 用 頻 度 の 高 い 比 較 的 少 数 のリンクを 主 要 なナビゲーション として 配 置 し これを nav 要 素 で 囲 う nav 要 素 で 囲 うとスクリーン リーダは nav 要 素 だけの 読 み 上 げや nav 要 素 の 読 み 飛 ばしができるようになる リンクはリストを 表 現 する 要 素 (ol または ul 要 素 )を 使 用 する 各 ページへのナビゲーシ ョンをリストの 項 目 (li 要 素 )で 表 現 する リストの 項 目 には リンクの 実 体 であるアンカ (a 要 素 )を 入 れる
解 決 後 の 状 況 スクリーン リーダは 主 要 なナビゲーション の 位 置 を 把 握 でき ユーザは 使 用 頻 度 の 高 いページへの 遷 移 を 容 易 にできるようになり また 遷 移 を 必 要 としない 場 合 はリンクを 読 み 飛 ばすことができる 事 例 最 近 のインターネット 検 索 サイトでは 検 索 対 象 のカテゴリを 切 り 替 えられる 例 の 上 部 に あるカテゴリを 切 り 替 えるためのリンク 集 には 本 パターンを 適 用 する 一 方 検 索 結 果 のリ ンク 集 は 検 索 サイトのコンテンツであるので 本 パターンは 適 用 できない 関 連 するパターン ナビゲーション 先 に 階 層 構 造 がある 場 合 は パンくず パターンを 検 討 する
4.2. タブによるナビゲーション(Tab Navigation) 分 類 ナビゲーション 文 脈 画 面 の 一 部 分 で 複 数 のタイトル 付 きの 表 示 内 容 を 素 早 く 切 り 替 えられるタブ 型 の UI を 作 成 している ページ 全 体 を 通 常 のハイパーリンクで 遷 移 させると HTTP のトランザクショ ンが 発 生 し ページ 全 体 の 読 み 込 みと 描 画 が 起 こり 素 早 い 切 り 替 えが 実 現 できない その ため JavaScript を 使 用 して HTML 要 素 の 表 示 非 表 示 を 切 り 替 えることで 素 早 い 切 り 替 えを 実 現 するが 表 示 内 容 の 切 り 替 えが JavaScript に 依 存 してしまう 問 題 JavaScript が 無 効 の 環 境 で 閲 覧 した 時 に 表 示 内 容 が 切 り 替 えられなくなり 表 示 できない 内 容 が 生 じてしまう フォース JavaScript が 無 効 の 環 境 で 閲 覧 される 可 能 性 もある JavaScript が 無 効 の 環 境 でもすべての 表 示 内 容 が 表 示 される 必 要 がある 切 り 替 えが 働 か ずにすべての 内 容 が 表 示 されても 引 き 続 きタブによるナビゲーションの 利 便 性 も 確 保 し たい 解 決 策 切 り 替 え 対 象 の 表 示 内 容 のうち 初 期 に 表 示 されない 表 示 内 容 の 非 表 示 化 を JavaScript に よって 行 う すると JavaScript 無 効 の 環 境 では 初 期 の 非 表 示 化 が 行 われないため すべ ての 表 示 内 容 が 表 示 されたままになる さらにタイトルを 表 現 する HTML 要 素 と 表 示 内 容 を 表 現 する HTML 要 素 とをアンカで 対 応 づけることで JavaScript が 無 効 の 場 合 には タ イトルがそのまま 表 示 内 容 へのナビゲーション リンクとして 機 能 する これを 実 現 するに は 次 の 構 造 で HTML を 作 成 する タブ リストですべてのタブを 保 持 する
タブ ページ コンテナですべてのタブ ページを 保 持 する 各 タブを 各 タブ ページに 対 応 づける タブ ページに id 属 性 を 指 定 する アンカの href 属 性 に '#'+タブ ページの id を 指 定 する タブがクリックされたら 対 応 するタブ ページ 以 外 に タブ ページが 非 表 示 となるような クラスを JavaScript で 指 定 する 解 決 後 の 状 況 JavaScript が 無 効 の 時 では すべてのページが 表 示 されるため アクセスできない 内 容 が 生 じない JavaScript が 無 効 の 時 では タブのアンカをクリックすると 対 応 するページの 位 置 が 表 示 されるため タブによるナビゲーションができる 事 例
タブによるナビゲーション を 使 用 して 複 数 の 内 容 を 切 り 替 えて 表 示 できる 領 域 を 作 成 した 右 は JavaScript が 無 効 な 場 合 で すべてのページの 内 容 が 表 示 され タブをクリッ クすると 該 当 するページの 内 容 が 表 示 されている 位 置 までスクロールする 関 連 するパターン ページ 全 体 のナビゲーションは 主 要 なナビゲーション パターンを 検 討 する Web に 限 らない より 汎 用 的 なパターンについては Designing Interfaces の Module Tabs パターン[1]を 参 照 する JavaScript を 使 用 せず 複 数 のページをタブの 外 見 でナビゲーションするときには Pro CSS and HTML Design Patterns の Tab Menu パターン[2]を 参 照 する Pro CSS and HTML Design Patterns の Tabs パターン[2]は 本 パターンと 似 ているが JavaScript が 無 効 の 環 境 では 一 部 の 表 示 内 容 が 表 示 されず また 表 示 内 容 の 非 表 示 化 に 画 面 外 の 座 標 を 指 定 する 方 法 が 取 られており SEO においてペナルティとなる 可 能 性 が ある 4.3. パンくず(Breadcrumbs) 分 類 ナビゲーション 文 脈 ページが 階 層 化 された Web サイトを 構 築 している 各 ページには そのページの 階 層 を 示 し さらに 上 位 階 層 へ 遷 移 するためのナビゲーションを a 要 素 を 使 用 したリンクで 作 成 し ている 単 なるリンクなので これが 階 層 を 表 現 していることは UI を 目 視 している 人 間 に しかわからない 問 題 このナビゲーションが 階 層 を 表 現 していることが UI を 目 視 している 人 間 にしかわからな いため 検 索 エンジンによって 当 該 ページが 検 索 結 果 に 表 示 される 際 に 当 該 ページの 階 層 情 報 が 表 示 されず 検 索 エンジンからの 訪 問 者 のユーザビリティが 低 下 する フォース 検 索 エンジンからサイト 内 のサブ ページへの 流 入 が 想 定 される 階 層 表 示 が 原 因 でユーザが 期 待 しないページへアクセスすることは 避 けたい しかし ユー ザの 利 便 性 を 維 持 するために 階 層 表 示 は 廃 止 できない
解 決 策 検 索 エンジンのクローラが 階 層 情 報 を 機 械 的 に 読 み 取 ることができるように 階 層 情 報 を 表 現 できる Breadcrumb という microdata を 埋 め 込 んだ パンくず ナビゲーションを 配 置 する 各 ページへのリンクのリストなので 全 体 をリスト(ul 要 素 )で 表 現 する 各 ページへのナ ビゲーションをリストの 項 目 (li 要 素 )で 表 現 する リストの 項 目 には リンクの 実 体 であ るアンカ(a 要 素 )を 入 れる アンカ 内 には span 要 素 を 入 れ その 中 にタイトルを 記 入 す る このナビゲーションが 当 該 サイト 内 の 移 動 における 重 要 な 手 段 である 場 合 は スクリーン リーダでナビゲーションしやすくするためにさらに 全 体 を nav 要 素 で 囲 い ナビゲーショ ンのためのリンクであることを 表 現 する 検 索 エンジンがページを 結 果 に 表 示 する 際 サイト 内 における 位 置 も 同 時 に 表 示 されるよ うにする これには 検 索 エンジンにパンくずであることを 伝 える 必 要 がある microdata を 埋 め 込 むことで パンくずであることを 表 現 できる リストの 項 目 には itemscope 属 性 を 指 定 し 1 つのリンクを 表 す HTML 上 での 範 囲 を 明 示 する リストの 項 目 には 次 の 属 性 と 属 性 値 のペアを 指 定 し この 項 目 がパンくずの 1 項 目 であることを 明 示 する: itemtype="http://data-vocabulary.org/breadcrumb" アンカには 次 の 属 性 と 属 性 値 のペアを 指 定 し これが 当 該 項 目 の URL を 示 していること を 明 示 する: itemprop="url" タイトルには 次 の 属 性 と 属 性 値 のペアを 指 定 し これが 当 該 項 目 のページ タイトルを 示 していることを 明 示 する: itemprop="title" 項 目 間 の 区 切 り 文 字 ( > など)は CSS を 使 用 して 表 示 することが 望 ましいが 項 目 内 のアンカ 外 領 域 にテキストで 記 入 することもできる 解 決 後 の 状 況 検 索 エンジンの 結 果 に 当 該 ページのサイト 内 における 位 置 も 表 示 され ページを 訪 れる 前 にユーザがサイトの 構 造 を 把 握 できる 検 索 エンジンの 結 果 から ホーム ページなど サイト 内 にある 当 該 ページ 以 外 のページに も 直 接 たどれるようになる
事 例 ショッピング サイトでは 商 品 ページがカテゴリ 別 に 分 けられている 各 ページの 上 部 に は 現 在 表 示 しているページのサイト 全 体 における 位 置 を 表 示 するリンク リストが 表 示 さ れる このリストには 本 パターンを 適 用 できる 関 連 するパターン 階 層 構 造 のないフラットなナビゲーションは 主 要 なナビゲーション パターンを 検 討 す る Web に 限 らない より 汎 用 的 なパターンは Designing Interfaces の Breadcrumbs パ ターン[1]を 参 照 する 4.4. カスタム ボタン ドロップダウン リスト(Custom Button Drop-down List) 分 類 入 力
文 脈 外 見 のデザインを 重 視 した Web アプリケーションやサイトに 含 まれるフォーム 上 にドロッ プダウン リストを 配 置 しようとしている フォームでは ドロップダウン リストは select 要 素 で 実 現 される 問 題 多 数 の Web ブラウザでは select 要 素 の 収 縮 時 における 外 見 を 変 更 できないため ドロッ プダウン リストだけ Web ブラウザで 描 画 されるデフォルトの 外 見 になってしまう その ため 他 の 部 分 の 外 見 と 統 一 感 のあるデザインが 実 現 できない フォース すべてのブラウザで 同 様 の 収 縮 時 における 見 た 目 を 実 現 する タッチ スクリーン デバイスに 搭 載 されているブラウザから 閲 覧 する 可 能 性 がある しか しこれらの 環 境 では 収 縮 時 の 外 見 をマウス 環 境 のものと 統 一 してしまうと 使 い 勝 手 が 悪 く なる 解 決 策 ドロップダウンを 表 現 する select 要 素 を 使 いつつ 収 縮 時 の 外 見 を 独 自 に 作 成 して 実 現 す る select 要 素 は CSS で 透 明 にし その 下 に 収 縮 時 のドロップダウン リストの 外 見 を 表 現 する カスタム ボタン を 重 ねる カスタム ボタンは 適 当 な 要 素 (span 要 素 など)を 使 って 表 現 する ドロップダウンはブラウザ ネイティブのものを 使 用 する そのためには select 要 素 を 透 明 にし(opacity: 0) カスタム ボタンの 上 に 同 じ 大 きさで 重 ねる なお カスタム ボタンと select 要 素 をドロップダウン リスト コンテナ(div 要 素 など) で 囲 い 高 さと 幅 を 100%に 指 定 すると 2 つの 要 素 を 同 じ 大 きさにできる 解 決 後 の 状 況 ブラウザ 間 で 収 縮 時 におけるドロップダウン リストの 見 た 目 が 統 一 され 入 力 フォームな
どの 体 裁 が 崩 れなくなる 選 択 画 面 はブラウザのネイティブのものを 使 うので スマートフォンならスマートフォン に 適 した 選 択 画 面 が 表 示 される 事 例 性 別 を 選 択 するドロップダウン リストを select 要 素 を 使 ったものと 本 パターンを 適 用 し たものとで 上 下 に 並 べ Internet Explorer 11( 左 )と Firefox 26( 右 )で 表 示 させたとこ ろ 本 パターンを 適 用 すると 異 なるブラウザでも 同 様 の 外 見 を 実 現 できる 関 連 するパターン ドロップダウン リストの 展 開 時 の 外 見 も 統 一 する 場 合 は カスタム リスト ドロップダ ウン リスト パターンを 検 討 する 4.5. カスタム リスト ドロップダウン リスト(Custom List Drop-down List) 分 類 入 力 文 脈 外 見 のデザインを 重 視 した Web アプリケーションやサイトに 含 まれるフォーム 上 にドロッ プダウン リストを 配 置 しようとしている フォームでは ドロップダウン リストは select 要 素 で 実 現 される 問 題 多 数 の Web ブラウザでは select 要 素 のドロップダウン 時 における 外 見 を 変 更 できないた め ドロップダウン リストだけ Web ブラウザで 描 画 されるデフォルトの 外 見 になってし まう そのため 他 の 部 分 の 外 見 と 統 一 感 のあるデザインが 実 現 できない
フォース すべてのブラウザで 同 様 のドロップダウン 時 における 見 た 目 を 実 現 する ドロップダウン 時 に 表 示 される 項 目 として 画 像 などの 文 字 列 以 外 のものも 扱 う 解 決 策 カスタム ボタン ドロップダウン リスト において さらにドロップダウン 時 に 出 現 す るリストを 表 現 する 要 素 を 独 自 に 作 成 する ドロップダウン 時 に 出 現 するリストは リスト 要 素 (ol または ul 要 素 と li 要 素 )を 使 っ て 表 現 する 次 のスタイルを 指 定 して select 要 素 の 機 能 を 保 ったまま 非 表 示 にする: position: absolute; clip: rect(0,0,0,0); select 要 素 に tabindex="-1" 属 性 を 追 加 し ネイティブのドロップダウン リストがフォーカ スを 得 ないようにする 代 わりにドロップダウン リスト コンテナの tabindex 属 性 に 0 以 上 を 指 定 し カスタム リ スト ドロップダウン リストがフォーカスを 得 られるようにする 解 決 後 の 状 況 ブラウザ 間 でドロップダウン 時 のドロップダウン リストの 見 た 目 が 統 一 される リストの 項 目 に 文 字 以 外 の 項 目 が 追 加 できて 表 現 力 が 向 上 する
事 例 性 別 を 選 択 するドロップダウン リストに 本 パターンを 適 用 させ 項 目 にアイコンを 追 加 し た 関 連 するパターン タッチ スクリーン デバイスなどで 閲 覧 される 可 能 性 がある 場 合 は カスタム ボタン ドロップダウン リスト パターンを 検 討 する 4.6. 3 状 態 チェック ボックス(Three-state Check Box) 分 類 入 力 文 脈 Web アプリケーションやサイト 内 のフォームで ユーザに チェック 未 チェック チ ェックでも 未 チェックでもない という 3 状 態 を 入 力 させようとしている ユーザは 3 状 態 をとるチェック ボックスの 使 用 に 慣 れており Web においてもこれの 使 用 を 期 待 してい る
問 題 type 属 性 が checkbox と 指 定 された input 要 素 はフォームで 使 用 できるチェック ボックス であるが これは チェック 未 チェック の 2 状 態 しか 入 力 できない フォース HTML では 3 状 態 を 入 力 するためにドロップダウン リストが 使 用 される しかし ドロッ プダウン リストは 画 面 上 を 占 める 面 積 が 広 く これを 設 置 する 余 分 なスペースがない 解 決 策 type 属 性 が checkbox と 指 定 された input 要 素 を 使 用 しつつ チェック ボックスの 外 見 を 独 自 に 作 成 し JavaScript で 3 状 態 の 制 御 を 行 うことで 3 状 態 チェック ボックス を 実 現 する チェック 状 態 を 格 納 する 要 素 ( 非 表 示 input 要 素 )を 配 置 し そこにチェック 状 態 を 数 値 な どで 格 納 する チェック 状 態 格 納 要 素 に name 属 性 を 指 定 すると フォームでこの 値 が 取 得 できる チェック ボックスがクリックされた 時 チェック ボックスの 外 見 を JavaScript で 3 状 態 に 変 更 する 同 時 にチェック 状 態 格 納 の value 属 性 も JavaScript で 変 更 する 解 決 後 の 状 況 他 の input 要 素 と 同 じように 使 える 3 状 態 チェック ボックスが 設 置 される
事 例 機 器 の 動 作 状 態 を 2 値 で 設 定 する 画 面 において 複 数 の 機 器 にまとめて 値 を 設 定 したい 場 合 がある このような 場 合 複 数 の 機 器 をまとめたグループにチェック ボックスを 設 けれ ばよいが グループ 内 の 機 器 の 状 態 が 統 一 されていない 場 合 そのチェック ボックスは チ ェック でも 未 チェック でもない 値 をとる このような UI を 実 現 するには 本 パター ンを 適 用 する 関 連 するパターン トグル ボタン パターンは 3 状 態 チェック ボックス パターンと 同 様 にフォーム 上 で 状 態 をユーザに 入 力 させるが 入 力 させる 状 態 は 2 状 態 のうちどちらかの 状 態 であ る 4.7. トグル ボタン(Toggle Button) 分 類 入 力 文 脈 Web アプリケーションで オン オフ の 2 状 態 を 切 り 替 えて 制 御 する UI を 作 成 して いる チェック ボックスやラジオ ボタンでも オン オフ の 2 状 態 を 切 り 替 えられる が 押 された 状 態 を 保 持 するボタンでこれを 表 現 しようとしている 問 題 HTML でボタンを 表 現 する button 要 素 や input 要 素 では 押 された 状 態 を 保 持 できないた め オン オフ 状 態 を 表 現 できない また チェック ボックスやラジオ ボタンを 表 現 する input 要 素 は 多 くのブラウザで 外 見 を 変 更 できないため これをボタンのような 外 見 にすることも 困 難 である
フォース JavaScript でトグル ボタンを 実 現 すると HTML のチェック ボックスとの 互 換 性 が 損 な われる すべての Web ブラウザで 同 じ 外 見 を 実 現 する JavaScript が 無 効 の 環 境 で 閲 覧 される 可 能 性 がある 解 決 策 type 属 性 が checkbox または radio と 指 定 された input 要 素 は フォームの 要 素 として 使 用 できるチェック ボックスまたはラジオ ボタンである これを 非 表 示 にして クリックに よって 2 値 を 切 り 替 えて 保 持 する 要 素 として 使 用 する 一 方 ボタンの 外 見 は 独 自 に 作 成 し input 要 素 の 値 に 応 じてボタンの 凹 凸 が 変 化 させる 次 のスタイルを 指 定 して input 要 素 をクリック 可 能 かつ 非 表 示 にする: position: absolute; clip: rect(0,0,0,0); CSS のセレクタでは + 演 算 子 で 直 前 の 要 素 の 状 態 を 利 用 できるため input 要 素 の 直 後 に label 要 素 を 配 置 することで label 要 素 の 外 見 を input 要 素 の 状 態 に 応 じて 変 更 できるよう にする input 要 素 に 任 意 の id 属 性 を 指 定 し label 要 素 には for 属 性 に input 要 素 の id 属 性 値 を 指 定 する label 要 素 は input 要 素 のチェック 状 態 に 応 じて オン オフそれぞれの 見 た 目 が 切 り 替 わるようにする label 要 素 の 働 きで label 要 素 がクリックされると for 属 性 で 指 定 された input 要 素 のチェ ック 状 態 が 変 更 される
解 決 後 の 状 況 JavaScript が 無 効 でも 機 能 するトグル ボタンが 設 置 でき 通 常 のチェック ボックスやラ ジオ ボタンと 同 様 に 使 用 できる 事 例 ストリーミング 動 画 などを 録 画 するアプリケーションで 録 画 の 開 始 と 停 止 という 機 能 が 同 一 のボタンに 割 り 当 てられ そのボタンが 録 画 中 か 否 かの 状 態 をもつことは 珍 しくない このようなボタンには 本 パターンが 適 用 できる 関 連 するパターン 3 状 態 チェック ボックス パターンは トグル ボタン パターンと 同 様 にフォーム 上 で 状 態 をユーザに 入 力 させるが 入 力 させる 状 態 は 3 状 態 のうちいずれかの 状 態 である 参 考 文 献 1. Jenifer Tidwell, Designing Interfaces, 2nd Edition, O Reilly Media, 2010 2. Michael Bowers, Pro CSS and HTML Design Patterns, Apress, 2007