Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
716
Help us understand the problem. What is going on with this article?
@shiraishiwataru

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

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。
ナビゲーションや、「もっと見る」 リンクで中身のレビュー全文見られる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

716
Help us understand the problem. What is going on with this article?
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
tabelog
お店選びで失敗したくない人のためのグルメサイト「食べログ」を開発しています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
716
Help us understand the problem. What is going on with this article?