ユーザーインターフェース（UI）といえば、ボタン、チェックボックス、ラジオボタンなど色んな要素があり、その名前を聞けばどんなものなのかだいたいイメージがつくものが多いと思います。
ですが最近フロントエンドの開発をしていて、見たことはあるけれどその名前は知らなかったUI要素があったりしたので、今回はフロントエンド開発において知っておきたいUI要素について整理してみました。その中にはなんか面白い名前が付けられているな～と思ったりしたものもありました。
では各UI要素の名称とそれをいつ、なぜ使うのか一つずつ見て行きたいと思います。
Category
ユーザーインターフェイス要素はだいたい次の4つのカテゴリで分類されています。
- Input Controls
ユーザーがシステムに何かの情報を入力できるようにします。
会員登録、プロフィール管理などに使用されるUI要素がこちらに該当します。
例）button, radio button, checkbox, input fieldなど - Navigation Components
ユーザーがアプリやウェブページの画面移動をするのに役立ちます。
例）breadcrumb, pagination, search field, tags, iconなど - Informational Components
ユーザーと情報を共有する時に使用します。
例）tooltips, progress bar, badge/notifications, modal windowなど - Containers
関連するコンテンツをまとめて保持します。
例）accordionなど
カテゴリの分類は、ある要素が特定のカテゴリに限定されるとは限られてなく大まかに分けられます。以下、メニュー系という分類を付け加えて個人的に分かりやすいと思った要素別に分類してみました。
メニュー系
ハンバーガーメニュー(Hamburger Menu)
長さの同じ3本の横線が並んだデザインでクリックすると隠れている情報を表示する時に使われます。主にメニューや探索一覧リンクを含めています。見た目がハンバーガーを積み重ねたように見えるのでハンバーガーメニューと呼ばれています。
ドネルメニュー(Doner Menu)
長さの違う3本の横線が並んだデザインで主にリストやグループのフィルタリングする時に使われます。
弁当メニュー(Bento Menu)
9個の小円や四角形が縦横3個ずつ並んだデザインでクリックするとアプリケーションのメニューを表示する時に使われます。
見た目が弁当を上から見た様子に似ていることから弁当メニューと呼ばれています。
ケバブメニュー(Kebab Menu)
3個の小円が縦に並んだデザインでクリックするとグループ化されたオプションのセットを表示する時に使われます。
ミートボールメニュー(Meatballs Menu)
3個の小円が横に並んだデザインでクリックするとアプリケーションの機能やオプションを表示する時に使われます。
サイドバー(Sidebar)
画面の左端や右端に配置され検索操作やコンテンツ情報を表示する時に使われます。
常に表示されていたり、使用しない時は隠れていたりします。
タブバー(Tab Bar)
モバイルアプリの画面下部に配置されることが多いと思います。
ユーザーが各セクションに移動するのに役立ちます。
iOSではタブバーという呼び方をしますが、Androidではボトムナビゲーションと呼びます。
Input Controls
ボタン(Button)
押下することで特定の動作が行われることを示す場合に使われます。
ラジオボタン(Radio Button)
複数の選択肢の中から、1つだけを選ぶ場合に使われます。
チェックボックス(Checkbox)
複数の選択肢から任意の複数個を選択する場合に使われます。
トグル(Toggle) トグルボタン、トグルスイッチ
簡単に言えばOn/Offするスイッチのようなものです。
同じ操作や処理によって二つの状態が交互に切り替わる時に使われます。
ピッカー(Picker)
Date PickerやTime Pickerなどがあります。
日付や時間を選択したりできるフォームを視覚的に表す時に使われます。
スライダーコントロール(Slider Controls)
スライダーをドラグして特定範囲の値を選択する時によく使われます。
スマホのボリュームや明るさを調整する時に使いますね。
ステッパー(Stepper)
あらかじめ設定されている値を増減させて値を調整する時に使われます。
インプットフィールド(Input Field)
ユーザーが文字や数字の情報を作成しシステムに伝える時に使われます。
文字列を入力するためのText fieldや、文字列を入力し検索するためのSearch Field など色々あります。
ドロップダウンメニュー(Dropdown Menu)
クリックするとドロップダウンされた複数のメニュー項目を表示させる時に使われます。ロールスクリーンを下ろすような動作で展開されるためプルダウンなどとも呼ばれています。
Navigation
パンくずリスト(Breadcrumb)
アプリケーションやサイト内の現在の場所を識別できるようにします。
ページネーション(Pagination)
ページの下部に配置されることが多く現在のページを識別することができ、クリックして他のページに移動することができます。
Informational Components
アイコン(Icon)
様々なことを直感的にユーザーに伝えるために使用されるシンプルな画像です。
タグ(Tag)
コンテンツの分類に役立つようラベルを付け、そのコンテンツの検索と閲覧を容易にする関連キーワードで構成されています。
SNSやブログなどでよく使われています。
バッジ(Badge/notifications)
メッセージなど何か新しいものがあることやプロセスが成功したこと、エラーが発生したことなどを通知する時に使われます。
ローダ(Loader)
色んな形のものがありますが、システムがバックグラウンドで処理を行う間を待機してもらうように通知する時に使われます。
ツールチップ(Tooltip)
フォーカスを当てると小さな枠内に補足説明を表示し、該当UI要素を理解するのに役立つヒントを提供する時に使われます。
プログレスバー(Progress Bar)
特定のタスクの進捗状況がどの程度完了したのかを視覚的に表示する時に使われます。
モーダルウィンドウ(ModalWindow)
子ウィンドウで特定の情報を提供するためのコンテンツやメッセージを表示し、ユーザーが何らかの操作をしない限り、親ウィンドウに戻さないようにする時に使われます。
カルーセル(Carousel)
メリーゴーラウンド、回転木馬、(空港で乗客の荷物を運ぶ)回転式コンベヤーなどの意味を持つ英単語で、画面上の表示領域の中でイメージやカードを左右に移動して、コンテンツなどを切り替えて表示する時に使われます。
フィード(Feed)
ユーザーアクティビティを時系列で表示します。その内容は様々で、テキストやイメージなど色んな種類で表現されます。
Containers
アコーディオン(Accordion)
コンテンツのセクションを展開したり折りたたんだりすることができ、限られたスペースに色んな情報を含める時に使われます。
終わり
フロントエンドを開発する際には、UIデザイナーとうまく意思疎通を図ってそのデザインの意図を理解し、ユーザービリティの高い実装をすることができるようUI要素について理解しておくことも大事だと思います。
上記の他にも色んなUI要素がありますし多少違う呼び方をするのもあると思いますが、UI要素について知るのに少しでも参考になれたら幸いです。
