コンポーネント

コンポーネント一覧

• ボタン

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

• アコーディオン

  アコーディオンは、ユーザーがコンテンツのセクションを展開または折りたたむことができるユーザーインタフェースです。

• ボトムナビゲーション

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

• パンくずリスト

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

• チェックボックス

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

• モーダルダイアログ

  ダイアログは、重要な情報を知らせ、決定や選択を求めるコンポーネントです。複数のタスクを含む場合があります。

• ディバイダー

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

• ドロワー

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

• 緊急時バナー

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

• グローバルメニュー

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

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

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

• ヘッダーコンテナ

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

• ランゲージセレクター

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

• メガメニュー

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

• メニューリスト

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

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

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

• モバイルメニュー

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

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

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

• ページネーション

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

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

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

• ラジオボタン

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

• リソースリスト

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

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

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

• セレクトボックス

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

• テーブル

  テーブルは、表形式のデータを表示するために使用します。

• テキストエリア

  テキストエリアコンポーネントは、1行以上のテキストを入力する場合に使用します。

• インプットテキスト

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

• ユーティリティリンク

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

バッジについて

基本デザインの各ページにおいて、JIS X 8341-3:2016およびWCAG 2.1ならびにWCAG 2.2の達成基準を掲示している箇所では、参照元のドキュメントを略称で記載しています。
また、ガイドラインや解説書へリンクする場合に、WAIC（ウェブアクセシビリティ基盤委員会）による日本語訳があるものについては日本語訳版へリンクしています。日本語訳版が無いものはW3C（World Wide Web Consortium）による英語の原文へのリンクとなります。

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