Overview

Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。
人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。
コミュニケーション円滑にな〜れ
※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。

ポップアップ表示系

JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。

閲覧中のページにカバーを重ねて表示させるやつ。
modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。

マウスオーバーすると吹き出しとかで表示されるUI。
補足説明などで使用されることが多い。

閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。
スパイウェアなどの感染源にもなるため嫌われており衰退。

サイト内で自位置を示すリンクリスト。
語源は童話ヘンゼルとグレーテルの、森で迷子にならないようパンくずを置いていったエピソードから。（童話ではパンくずは鳥に食べられ、結局迷子になるが）

Facebookで採用され一躍メジャーになった、三本線のアイコン表現。
サイトを横断するグローバルナビや、カテゴリーのリストなど入れられて汎用的。

上のハンバーガーメニューと合わせて使われることが多い、画面全体がスライドしてメニューリストが現れるUI。
スライドメニューとも。ちなみにドロワーは引き出しの意。

マウスオーバーやクリックによりサブ的な要素のリストがニョキッと出てくるインターフェイス。
ドロップダウンメニューとも。

トップページなどに、アイコンとともに主要動線を並べるUI。
[ハンバーガーメニュー+ドロワー]が出現する以前はわりと主流だった。
MacのLaunchPadとかで未だに使われている。

下部などにグミ(インジケータ)がついてる横スライドタイプのコンテンツギャラリー。
勝手に動くものは自動送りカルーセルなどと言ったりする。カルーセルは日本語で言うとメリーゴーラウンド。

開閉するUI。
ナビゲーションや、「もっと見る」リンクで中身のレビュー全文見られるUIもアコーディオンと言うことが多い。

処理状況を知らせるUI。
長い処理の場合、進捗状況がわかりやすい分待ちストレスもインジケーターより少ないか。

決済情報やユーザー情報の入力など、CVまでに複数ページにまたがる場合、
あとどれくらいでゴールできるか示してあげると親切。

1: テキストフォームなどにうっすらと示されるヒント的な文言。
2: ページ表示の際に、画像がロードされるまでに表示させておく仮のコンテンツなどの、仮に表示させておくモノの総称。

コンテンツ(html)は基本的に共通で、画面幅に合わせてレイアウトをガチャガチャ変える手法。

レスポンシブデザインとはちがい、レイアウトはそのまま、画面幅に合わせてコンテンツが伸縮するレイアウト。
対してコンテンツ幅が固定のものは"固定幅レイアウト"や"ソリッドレイアウト"などと言う。

スクロールをトリガーにして、アニメーションを取り入れたり奥行きのあるページを表現するような手法。