Material Designをはじめとして、グラフィカルユーザーインターフェース（GUI）のデザインシステムは数多く公開されています。
各デザインシステムに含まれるUIコンポーネントは、各ブランドやサービスに最適化された独自の内容ですが、基本的な部分は共通しています。
たとえば「Button」コンポーネントは、どのデザインシステムでも、同じ役割かつ同じ名前で定義されています。
一方、役割は概ね同じでも、名称が異なるケースもあります。
この記事では、そのようなケースの具体例を挙げながら、UIコンポーネントの名称を整理します。
各デザインシステムのコンポーネントのカタログ化の粒度がさまざまで、グループ化の判定は筆者独自のものですが、複数のデザインシステムを参照する際の参考になれば幸いです。
今回対象としたデザインシステムやUI Kit
- Apple Human Interface Guidelines
- Bootstrap
- Atlassian Design System
- Material Design（Google）
- Carbon Design System（IBM）
- U.S. Web Design System（USWDS）
- GOV.UK Design System
- SmartHR Design System
- デジタル庁デザインシステム
- Fluent 2（Microsoft）
- Shadcn/ui
（コンポーネント名は、オリジナルが複数形の場合も単数形に変更して統一しています。例：Chips → Chip）
テキスト入力：「Text field」「Text input」など
| UIコンポーネント名 | デザインシステム |
| Text field | Apple Atlassian Material Design（Google） |
| Text input | Carbon（IBM） USWDS GOV.UK |
| Input | SmartHR Fluent 2（Microsoft） Shadcn/ui |
| Input text | デジタル庁 |
テキストを入力する基本的なコンポーネントです。
「Text input」や「Input」は、HTMLの<input type=”text”>と一致する名称です。（inputタグのデフォルトタイプはtext）
なお、Material Design、USWDS、Appleは、1行のみの入力と複数行の入力を1つのUIコンポーネントにまとめています。
それ以外のデザインシステムでは、1行入力を「Text input」、複数行入力を「Textarea」のように、コンポーネントを分けているケースが多いです。
これもHTMLの<textarea>タグに合わせた名称です。
確認するもの：「Dialog」「Modal Dialog」など
| UIコンポーネント名 | デザインシステム |
| Dialog | Material Design（Google） SmartHR Fluent 2（Microsoft） Shadcn/ui |
| Modal | Bootstrap Carbon（IBM） USWDS |
| Modal dialog | Atlassian デジタル庁 |
| Alert | Apple |
| Alart Dialog | Shadcn/ui |
「ダイアログ」は直訳すると「対話」です。
「モーダル」は「モードの」という意味で、ひとつのモードに入っていて他の操作をさせないことを示します。対義語は「モードレス」です。
上記のコンポーネントの多くがモーダルな動作をしますが、たとえばSmartHRには「ModelessDialog」も存在します。
また、Material Designや、Bootstrapでは、フルスクリーン表示もサポートされています。
Shadcn/uiでは「Dialog」と「Alart Dialog」が別に定義されています。
左右でオンとオフを選ぶ：「Switch」「Toggle」
| UIコンポーネント名 | デザインシステム |
| Switch | Apple Bootstrap Material Design（Google） SmartHR Fluent 2（Microsoft） Shadcn/ui |
| Toggle | Atlassian Carbon（IBM） |
Appleでは「Switch」「Checkbox」「Radio Button」など、2つの状態を選択させることをまとめて「Toggle」として案内しています。
また、Shadcn/uiでは、「Switch」と「Toggle」が別のコンポーネントとして定義されています。Toggleはシンプルなボタン表現です。
なお、「Switch」と「Checkbox」は、どちらもオンオフの二択入力ですが、「Checkbox」が入力後に登録ボタンを押して有効になるのに対し、「Switch」は入力と同時に有効とするのが、一般的な使い分けです。
小さい情報：「Chip」「Tag」
| UIコンポーネント名 | デザインシステム |
| Chip | Material Design（Google） SmartHR |
| Tag | Atlassian Carbon（IBM） USWDS GOV.UK Fluent 2（Microsoft） |
「ソーシャルタグ」「ハッシュタグ」「タグ付け」など、「Tag」は情報（ラベル）を付与する印象です。
これに対して、「Chip」はテキストなどが乗っている板状のオブジェクトに焦点を当てたネーミングだと考えられます。
ひょっこり現れる：「Snackbar」「Toast」など
| UIコンポーネント名 | デザインシステム |
| Snackbar | Material Design（Google） |
| Toast | Bootstrap Carbon（IBM） Fluent 2（Microsoft） |
| Sonner | Shadcn/ui |
| Flag | Atlassian |
画面の外側からスライドして現れ、状態の変化や警告などをオーバーレイで表示するコンポーネントです。
Shadcn/uiでは以前からあった「Toast」コンポーネントを非推奨にして、代わりに「Sonner」が追加されました。
「Sonner」は「Toast」を基本としたコンポーネントのようです。
以下は、各名称について筆者の解釈です。
「Snackbar」は少ない情報を提供することを、軽食店に例えた。
「Toast」はトースターからパンが飛び上がる様子から。
「Flag」は注意を引く際の旗を上げる様子から。
「Sonner」はフランス語の「（警報などが）鳴り響く、知らせる」の意味の単語から。
