こんばんは！
ゆうです！
今回は
『ユーザインターフェース(UI)の名前』
をまとめます。
あのUI作りたいとなってきた人には
あれの名前がわからない！となる人が
多いのではないでしょうか？
特にIT業界に入ったばかりの人は
IT系の用語がわからないのと同様に
わからないことが多いです。
私も実はそうでした。
ですから
今回はその辺りをまとめます。
まとめるだけなので
検索の補助に使ってください！
それではいきましょう！
ポップアップ表示系
▼ アラート
JSのalertかブラウザのデフォルトの
機能で出るもの。ダイアログとも。
▼ モーダルウィンドウ
閲覧中のページにカバーを重ねて表示させるUI。
modalは「このページはいま入力しています。」
といった意味合いでmodeを形容詞化した単語。
▼ ポップアップ表示
ポップオーバー表示
ツールチップ
マウスオーバーすると吹き出しとかで表示されるUI。
補足説明などで使用されることが多い。
▼ ポップアップウィンドウ
閲覧中のウィンドウとは別に、勝手に開かれるウィンドウ。
スパイウェアなどの感染源にもなるため嫌われてて衰退。
ナビゲーション・メニュー系
▼ パンくずリスト
サイト内で自位置を示すリンクリスト。
語源は童話ヘンゼルとグレーテルの、
森で迷子にならないようパンくずを
置いていったエピソードより。
▼ ハンバーガーメニュー
Facebookで採用され一躍メジャーになった、
三本線のUI。
サイトを横断するグローバルナビや、
カテゴリーのリストなど入れられて汎用的。
主にスマホ用アプリで使われることが多い印象。
PCサイトでも使われることはある。
▼ ドロワーメニュー(スライドメニュー)
上のハンバーガーメニューと合わせて
使われることが多い、画面全体がスライドして
メニューリストが現れるUI。
ちなみにドロワーは引き出しのという意味。
▼ プルダウンメニュー(ドロップダウンメニュー)
マウスオーバーやクリックによりサブ的な
要素のリストが出てくるUI。
▼ スプリングボード
トップページなどに、アイコンとともに主要動線を並べるUI。
[ハンバーガーメニュー+ドロワー]が出現する以前はわりと主流だった。
MacのLaunchPadとかで未だに使われている。
表示非表示系
▼ カルーセル
下部とかにグミがついてるUI。
横スライドタイプのコンテンツギャラリー。
勝手に動くものは自動送りカルーセルなど
と言ったりする。
▼ アコーディオン
開閉するUI。
ナビゲーションや、もっと見る とか押すと中身のレビュー全文見られるとかもこれ。
状態通知系
▼ プログレスバー
処理状況を知らせるUI。
長い処理の場合、進捗状況がわかりやすい分待ちストレスもインジケーターより少ないか。
▼ ステップバー
決済情報やユーザー情報の入力など、
CVまでに複数ページにまたがる場合、
あとどれくらいでゴールできるか
示してあげるためのUI。
▼ プレースホルダー
1: テキストフォームなどにうっすらと示されるヒント的な文言。
2: ページ表示の際に、画像がロードされるまでに表示させておく仮のコンテンツなどの、仮に表示させておくモノの総称。
レイアウト系
▼ レスポンシブデザイン
コンテンツ(html)は基本的に共通で、画面幅に合わせてレイアウトをガチャガチャ変える手法。
▼ リキッドレイアウト
レスポンシブデザインとはちがい、
レイアウトはそのまま、画面幅に合わせて
コンテンツが伸縮するレイアウト。
対してコンテンツ幅が固定のものは
"固定幅レイアウト"や"ソリッドレイアウト"などと言う。
