おはこんばんにちは。😌
きょうPです。
今までデザイナーとして働いてきた中で、「このUIの名前何だっけ?」となる場面があったので、自分のメモも兼ねてUIに関する用語をまとめて見ました。
自分の中でのデザイン引き出しが増えたり、デザインを説明する際の役に立つ知識なので覚えておきましょう。✨
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/b8479d8cb434efc40db343d02af7ae75.jpg)
UI分類
名前 | 説明 | 主な例 |
CUI(キャラクタ・ユーザー・インターフェイス) | キーボードを使って、命令をテキスト入力で操作を行うUI。 | コマンドプロンプト |
GUI(グラフィカル・ユーザー・インターフェイス) | マウスを使った直感的に操作を行うUI。 | PhotoShop,WEBブラウザ |
NUI(ナチュラル・ユーザー・インターフェース) | 画面に直接触れたり、自分の体を動かすことで操作を行うUI。 | スマホゲーム,任天堂Wii |
UIパーツ
フォーム周り
テキストボックス
テキスト情報を入力。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/d2535219c9bd0396559d01a73b857416.jpg)
セレクトボックス(プルダウン)
選択肢の中から1つだけ選択。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/feef0274ee3f73e2cdae1cb2f567052b.jpg)
ラジオボタン
選択肢の中から1つだけ選択。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/3b0e1da0491f19356c398dd1eda2d401.jpg)
チェックボックス
選択肢の中から複数選択。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/178be4cb402f97d84da023926688f2c2.jpg)
テキストエリア
テキストを複数行入力できる入力欄。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/f23cb945066b1e6fda95f30561f9edd7.jpg)
ファイル
ローカルからファイルを選択。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/1abe2ef1658212ce96c483c2a85a748f.jpg)
スピナー(増減)ボタン
+-ボタンで数量を選択。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/413c326c56acccd646c93d7a2efdd99a.jpg)
スライダー(レンジ入力欄)
数値を選べるスライダー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/0da3520c67843007c3d0dffe19d1fee0.jpg)
カラーピッカー
色を選ぶ入力欄 。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/5170261436ca6c6d7230a2ead7eb100d.jpg)
ラベル
フォームの中でフォームの項目名と構成部品を関連付けるためのタグ。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/fddf3e6431aa3edf42e1cf1859a60d78.jpg)
プレイスホルダー
入力される文字・値の代わりに、仮に入力されている文字や値。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/85a529fb2c1c4a7c6d632d48d43bd0d3.jpg)
リードオンリー(読み取り専用)
読み取り専用の入力要素。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/bfd251cd3a3d7439f481ea854a1511d8.jpg)
ディセーブル(非活性)
入力や操作などの無効化。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/0a1884d74c45d2923402328e2556607b.jpg)
メニュー系
ドロワーメニュー(ハンバーガーメニュー)
開閉できるメニュー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/a6d0bad3b7e5126e3a50b94748e05f89.jpg)
メガメニュー
階層化したページをグループごとに表示したメニュー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/f547168a7ce64111851b3b52fbc3e9dd.jpg)
ドリルダウン
さらに項目が開くメニュー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/6613a2e5131948d23849107c74899445.jpg)
タブメニュー
画面内でコンテンツを切り替えるメニュー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/53c0bb251742aad844575831aaa76326.jpg)
スプリングボード
主にスマホで採用されているメニューUI。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/fa4859f007046bdc4fa13fcd2bdb9e8a.jpg)
表示系
ポップアップ
突然現れるウインドウ全般を指す意味。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/22145fa5a6c7482d859aac28534c82e3.jpg)
モーダル
ボタンを操作しないと消えないウインドウ。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/685475504d32d68746628320f1c39983.jpg)
ダイアログ
「はい」または「いいえ」などやり取りを行うウインドウ。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/a7151aed720fb4e61301677efe03c1cf.jpg)
ライトボックス
画像を拡大表示。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/df7ec6c472db9400ea69a9875ad2b51b.jpg)
トースト
自動で消える通知。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/ea3d99e2defb54d018c7b5a74994fdac.jpg)
ツールチップ
マウスオーバーで表示される補足説明。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/90535486f24a0873737180892fd631ab.jpg)
構造・フロー系
パンくず
自分の居るサイト階層の確認。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/1448ce8f8770ad7aa82f354b61cc8d49.jpg)
ステップバー
全体のフローを確認(直線型)。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/fde1fa3d7d78276387c718fdec457b8d.jpg)
ステップインジケータ
全体のフローを確認(メーター型)。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/c28bdd633c302355710f72fa97a73346.jpg)
その他
テーブル
表組み。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/c0ae3018e19920e77093165bb51f822a.jpg)
カード型UI
四角形の枠内に要素を並べたレイアウト。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/28c9af2740d1d4997f04eead0f948cbf.jpg)
カルーセル
横並びでスクロールできるスライドショー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/fa8ec1e85497bcf95b6737bd278dadab.jpg)
アコーディオン
要素の開閉ができるUI。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/6a20d3c8b4f991ec0487dddee871eb3f.jpg)
ページネーション
複数ページに分かれた画面をページ番号ごとに遷移できるUI。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/38a9b39dbff49abb68df842b81a81a27.jpg)
バッジ
アプリアイコンなどの右上に表示される数。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/7b1cdd436f394d7a2244b324d1e99b93.jpg)
プログレスバー
読み込み動作など進捗状況が分かるバー。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/a09c3ff7218d9e048d1ba142acd054df.jpg)
プログレスインジケータ
何らかの操作が進行中であることを表すUI。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/03/9eb6936ea67dfffb990bd2f3f6aa5e07.jpg)