コンポーネント

コンポーネントは、ユーザーインタフェースを作成するためのデザイン構成要素です。

• アコーディオン

  アコーディオンは、同種のセクションが連続するとき、それらを折りたたんで一覧性を向上する目的で使用します。

• イメージスライダー

  イメージスライダーは、ギャラリーコンテンツのように複数のイメージを切り替えて見ることができるコンポーネントです。

• インプットテキスト

  インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。

• 引用ブロック

  引用ブロックは段落単位での引用を表し、これ自体も段落となるコンポーネントです。

• カード

  カードは、単一の主題に関するコンテンツをまとめて表示するコンテナとなるコンポーネントです。

• 箇条書きリスト

  箇条書きリストは、1つ以上の項目を列挙するときに使用します。

• 画像

  HTMLの<img>に対応した、ページ中に画像を埋め込むためのコンポーネントです。画像キャプションと組み合わせて使うこともできます。

• カルーセル

  カルーセルは、複数のスライドを順番に見ることのできるコンポーネントです。ウェブサイトのアイキャッチとしても使われますが、使用に注意が必要なコンポーネントです。

• 緊急時バナー

  緊急時バナーは、当該ウェブサイトで本来成すべきコミュニケーションを中断してでもファーストビューを占有して注意を促すためのコンポーネントです。

• 検索ボックス

  サイト内検索等で使用するコンポーネントです。詳細検索パネルや固定のキーワードで検索できるショートカットパーツを備えています。

• コンボボックス

  コンボボックスは、標準のフォームコントロールだけでは実現困難な複合的な操作のできるコンポーネントです。HTMLの<select>を拡張した選択支援タイプと<input type="text">を拡張した入力支援タイプの2つがあります。

• スイッチ

  スイッチは、切り替えたら即座に反映される設定項目のためのコントロールUIです。反映されたことがその場で目視により把握できる設定内容で使用できます。

• 水平メニュー

  水平メニューは、利用者を目的のページに誘導したり、コンテンツをわかりやすく表示するためのものです。

• スクロールトップボタン

  スクロールトップボタンは、ページの先頭へ迅速に移動するために使用されます。

• ステップナビゲーション

  一連の手続きを論理的なステップで提示して、完了までに必要な作業を俯瞰したり、進行状況を把握したりできるようにするコンポーネントです。ナビゲーションとして使用する場合もあります。

• 説明リスト

  「説明したいこと」と「その説明文」のペアを1つの項目として数え、それが複数連なるようなコンテンツの時に使用します。

• セレクトボックス

  セレクトボックスは、複数の選択肢を提供するフォームコントロールです。

• タブ

  クリアホルダーのインデックス用見出し（耳）をメタファーとしたタブラベルと、関連付けられたタブパネルの組み合わせのコンポーネントです。

• チェックボックス

  チェックボックスは、複数の項目の中から複数の選択肢を選ぶことを可能にします。

• チップタグ

  アイテム化した任意の情報を、表示・削除しやすくするための要素です。属性やユーザー情報をアイテムにして並べたり削除したりするような場合に有効です。

• チップラベル

  状態や状況を示すキーワードを表示して、情報の分類・整理の効率を向上させるグラフィック要素です。情報リストやテーブルの各行などのステータスを分かりやすく表示したい場合に有効です。

• ディスクロージャー

  ディスクロージャーは、メイン情報に対する追加情報を折りたたんで提示するときに使用します。

• ディバイダー

  ディバイダーは、異なるセクション、コンポーネント、またはコンテンツのグループ間に設けられる視覚的な区切りです。

• テーブルコントロール

  主にデータテーブルにおいて、表示する行や列を絞り込んだり、その他の制御操作を行ったりするための、コントロール群です。

• テーブル／データテーブル

  テーブルは、データや情報を行と列の組み合わせで構造化された表組です。

• テキストエリア

  テキストエリアコンポーネントは、自由記述テキストを入力する場合に使用します。

• ドロワー

  ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。

• ノティフィケーションバナー

  ウェブサイト全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、ウェブサイト側からユーザーへ提示する場合に用いる通知バナーです。

• パンくずリスト

  パンくずリストは、ウェブサイトの階層内でユーザーの現在の位置を表示します。

• ハンバーガーメニューボタン

  ハンバーガーメニューボタンは画面スペース資源に制限のある、主にモバイルデバイスで使用されるモバイルメニューを表示するためのトリガーとなるボタンです。

• 日付ピッカー／カレンダー

  日付ピッカーは、日付を選択するためのフォームコントロールとして、入力フィールドおよびカレンダーによって構成されるコンポーネントです。

• ファイルアップロード／ドロップエリア

  HTMLの<input type="file">に対応した、単体または複数のファイルを選択してアップロードできるようにするためのコンポーネントです。

• プログレスインジケーター

  プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。

• ページナビゲーション

  前ページ、次ページなど複数のページに遷移する際にコンテンツ下部に設置します。

• ヘッダーコンテナ

  ヘッダーコンテナは、ヘッダーに含まれるアイテムとして使う、さまざまなコンポーネントが内包されます。

• ボタン

  ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。

• ボトムナビゲーション

  ボトムナビゲーションは2個から5個までの目的地へのアクセスを可能にするものです。

• 見出し

  見出しは、主にページの冒頭やセクションの前に配置される、ページやセクションの主題を表すコンポーネントです。

• メガメニュー

  水平メニューから呼び出される、メニューリスト以外のコンテンツも内包できる領域が大きい、表示内容の幅的自由度の高いドロップダウンのバリエーションです。

• メニューリスト

  メニューアイテムを束ねたコンポーネントです。ローカルメニューとしてコンテンツエリアに配置したり、メニューリストボックスやメガメニューの中などに内包したりして使用します。

• メニューリストボックス

  メニューリストボックスは内容を示すテキストラベルと開閉ステータスを示すアイコンの組み合わせで表現されたオープナーで開閉し、ボックス内にメニューリストを内包します。

• モーダルダイアログ

  モーダルダイアログは、モードをもつダイアログです。これが表示されている時は、ダイアログ内しか操作できません。

• 目次

  長い文章のページに含まれる見出し要素を取り出して、ページの冒頭に目次として配置するためのコンポーネントです。

• モバイルメニュー

  モバイルデバイスなど、タッチスクリーンでのタップ操作を考慮したメニュー用コンポーネントで、ハンバーガーメニューボタン、ドロワーとともに使用されます。

• ユーティリティリンク

  ユーティリティリンクはふつうの横並びリンクリストに近いが、それよりもコンパクトに作られています。

• ラジオボタン

  ラジオボタンは、ユーザーが選択肢の中から1つだけを選択できるようにする場合に使用します。

• ランゲージセレクター

  ランゲージセレクターはユーザーが コンテンツを表示するために優先言語を選択できるようにするユーザーインタフェース要素です。

• リソースリスト

  リソースリストは、共通した複数の任意情報で構成されたオブジェクトのリストを表示します。

JIS2016

このバッジが付与されている達成基準は、JIS X 8341-3:2016に含まれています。なお、JIS X 8341-3:2016はWCAG 2.0と同一内容の規格です。

WCAG2.2

このバッジが付与されている達成基準は、WCAG 2.2に含まれています。