コンポーネント

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

コンポーネント一覧

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

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

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

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

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

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

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

日付ピッカーは、日付を選択するためのフォームコントロールを提供します。カレンダーは、日付の選択を補助するコンポーネントです。

ディスクロージャーは、コンテンツのセクション内の任意の範囲を折りたたむことができるユーザーインターフェースです。

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

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

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

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

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

「リンクテキスト」は通常、色や下線などの視覚的な表現で通常のテキストと区別され、リンクを持つテキスト要素です。

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

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

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

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

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