Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

shiraishiwataru
WEBメディアを運営している会社のWEBデザイナー→広告制作ディレクターです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした