はじめに

新卒で入社し、現場配属されてから8か月が経過…！フロントエンドの業務に関わる機会が多く、会話の中に出てくるUIコンポーネントの名前がだんだんと分かるようになってきました。

ただ、「同じようなUIコンポーネントを指しているはずなのに、呼び方が違う」ということが多々あり、
会話や文章の流れで何となく意味は通じるものの、
「結局このUIコンポーネントは何と呼ぶべきなんだ？」
とモヤっとすることが増えてきました🤔

そこで今回は、私の中でも特に呼び方に迷いやすかった
“画面上に表示されるポップアップ系のUIコンポーネント”
にフォーカスをあてて、役割、違いについて整理してみたいと思います！

対象読者

・フロント開発初心者
・Webデザイン初心者

ポップアップとは一時的に画面の最前面にポッと出てくるUIの総称です。
期間限定・一時出店のお店を「ポップアップストア」ということがあるので、IT以外でも言葉のイメージが世間一般に浸透している印象があります。

ここからポップアップの種類や名前、呼ばれ方について調査結果をまとめます。

ポップアップの状態は、大きく分けて2つあります。

『え、モーダルって↓↓みたいなポップアップ自体のこと言うんじゃないんだ～』

と思った方いませんか？（私は最初勘違いしてました💦）
実際、業務内の会話の中でも「このモーダルが～」という会話を聞きます。
この会話の中での「モーダル」は「モーダルダイアログ」の略らしいです。

「モーダル」という言葉自体は状態を表す言葉になります！

ポップアップの種類を調べていて、「見た目」よりも「目的」にフォーカスした説明が多いなと感じました。
「目的」ごとに名前があってそこに伴って見た目が変わる、という印象です！

・ユーザに選択、入力、確認をさせるUI

・特定のUI要素に紐づいて表示される
・特定のUI要素の補足情報やメニューを表示したいときに使われることが多い
・HTMLのpopoverの汎用性が高く広義な意味で使われる

↓メニューの表示

・画面の下端に出てくる短い処理結果や状態変化を一時的に知らせる通知UI
・スナックバーは、トーストより文章が長めだったり、1 アクション入れられたりする特徴がある
・数秒で自動的に消える設定のものが多い

↓スナックバー（赤枠部分）

↓トースト（赤枠部分）

・画面の上に別の画面を小さなパネルやウィンドウを重ねて表示するUI
・マウスのドラッグで場所を自在に動かすことも可能
・お問い合わせ画面のチャットサポートなどに使われる
・①～③より高度な処理が可能

実際には、ポップオーバーとフローティングウィンドウは、「ポップアップ」と総括で呼ばれている印象が強いです🤔

「ポップアップメニュー」だったり「ユーザ情報確認ポップアップ」といった感じで補助情報を修飾しやすくて使いやすいのかな～と思います。

あとは、ポップオーバーのUI要素を呼ぶ際、用途や挙動に合わせた名前で呼ぶことが多いのかなと思います。（例：ドロップダウンメニュー、ツールチップ...）

ダイアログを呼ぶときは「モーダル」「ダイアログ」が混合されて使われることが多い印象です。
今回調べた結果としては、

と使い分けるのが、個人的には分かりやすいかなと思いました！

今回、ポップアップに焦点を置いていろいろなWebサイトで調査したことや私自身が感じたことを、まとめてみました！

なんとなく使ってることが多いコンポーネントの名前と目的をきちんと理解し、自分の経験と結び付けられてよかったです。
私と同じフロント開発初心者の方の参考になったらうれしいです！

また、「自分は別の意味で使い分けしてる」「よく現場で混乱しがちなコンポーネント名」などあればぜひ教えてください～！