UI
Design
Web
フロントエンド

Webデザインでよく使うUI要素の名称・用語一覧

More than 1 year has passed since last update.


Overview

Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。

人や会社ごとで固有の呼び方があると思いますが、自分の場合こんな感じです。

コミュニケーション円滑にな〜れ

※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。


ポップアップ表示系


▼ アラート

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

スクリーンショット 2016-11-25 14.15.03.png


▼ モーダルウィンドウ

閲覧中のページにカバーを重ねて表示させるやつ。

modalは「このページはいま入力モードだぜ」みたいな意味合いでmodeを形容詞化したことば。

スクリーンショット 2016-11-25 14.15.33.png


▼ ポップアップ表示・ポップオーバー表示・ツールチップ

マウスオーバーすると吹き出しとかで表示されるUI。

補足説明などで使用されることが多い。

スクリーンショット 2016-11-25 19.07.14.png


▼ ポップアップウィンドウ

閲覧中のウィンドウとは別に、勝手に開かれるウィンドウ。

スパイウェアなどの感染源にもなるため嫌われてて衰退。

スクリーンショット 2016-11-25 15.28.33.png


ナビゲーション・メニュー系


▼ パンくずリスト

サイト内で自位置を示すリンクリスト。

語源は童話ヘンゼルとグレーテルの、森で迷子にならないようパンくずを置いていったエピソードから。(童話ではパンくずは鳥に食べられ、結局迷子になるが)

スクリーンショット 2016-11-25 15.31.35.png


▼ ハンバーガーメニュー

Facebookで採用され一躍メジャーになった、三本線のアイコン表現。

サイトを横断するグローバルナビや、カテゴリーのリストなど入れられて汎用的。

スクリーンショット 2016-11-25 15.33.38.png


▼ ドロワーメニュー

上のハンバーガーメニューと合わせて使われることが多い、画面全体がスライドしてメニューリストが現れるUI。

スライドメニューとも。ちなみにドロワーは引き出しの意。

スクリーンショット 2016-11-25 15.51.33.png


▼ プルダウンメニュー

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

ドロップダウンメニューとも。

drop.png


▼ スプリングボード

トップページなどに、アイコンとともに主要動線を並べるUI。

[ハンバーガーメニュー+ドロワー]が出現する以前はわりと主流だった。

MacのLaunchPadとかで未だに使われている。

スクリーンショット 2016-11-28 13.37.29.png


表示非表示系


▼ カルーセル

下部とかにグミがついてる横スライドタイプのコンテンツギャラリー。

勝手に動くものは自動送りカルーセルなどと言ったりする。

carousel.png


▼ アコーディオン

開閉するUI。

ナビゲーションや、もっと見る とか押すと中身のレビュー全文見られるとかもこれ。

acordion.png


状態通知系


▼ プログレスバー

処理状況を知らせるUI。

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

bar.png


▼ ステップバー

決済情報やユーザー情報の入力など、CVまでに複数ページにまたがる場合、

あとどれくらいでゴールできるか示してあげると親切。

step.png


▼ プレースホルダー

1: テキストフォームなどにうっすらと示されるヒント的な文言。

2: ページ表示の際に、画像がロードされるまでに表示させておく仮のコンテンツなどの、仮に表示させておくモノの総称。

スクリーンショット 2016-11-28 13.38.58.png


レイアウト系


▼ レスポンシブデザイン

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

スクリーンショット 2016-11-28 14.07.52.png


▼ リキッドレイアウト

レスポンシブデザインとはちがい、レイアウトはそのまま、画面幅に合わせてコンテンツが伸縮するレイアウト。

対してコンテンツ幅が固定のものは"固定幅レイアウト"や"ソリッドレイアウト"などと言う。

スクリーンショット 2016-11-28 14.20.32.png


表現技法


▼ パララックス

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

nasagif.gif