UIコンポーネント、あれってなんて名前？

私はWebサイト制作からWeb開発の畑に足を踏み入れた者です。
最近は、先輩方のおかげで開発業務にやっと慣れてきた気がします。
（まだまだ分からないことが多いので、日々勉強です。）

Web業界の前は貿易事務をしていたので、最初はUIコンポーネントの呼び名もあまり知らず、クライアントさんや開発チームメンバーの話が分からないということがありました。

こちらはその頃を思い出して書いた記事で、最近Web業界に足を踏み入れた方向けの記事となります。
少しでも参考になれば幸いです。

## 早速ですが、具体的にこんなものがあります
* **グローバルナビゲーション（グローバルメニュー）** ：
全ページ共通のメニュー。シンプルにメニューと呼ぶことが多い気がしますが、『グロナビ』と呼ぶ人もたまーにいる。
![スクリーンショット 2024-06-30 11.37.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/f138a670-57c9-6374-5d97-e538ee310fcc.png)
https://hajimari.inc/
<br>

* **ハンバーガーメニュー** ：
お察しの通り、見た目がハンバーガーに見える、非表示になっている各メニューを表示させるためのボタン。画面幅がPCサイズより小さいときによく使われる。
![スクリーンショット 2024-06-26 18.09.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/fdcfe249-16d8-f08a-17f2-a5b757ccd7d4.png)
<br>

* **FV, MV** :
First Visualはサイトに訪れた際、ユーザーが最初に見る画面（ヘッダー領域も含む）。Main VisualはFVのヘッダーを含まない領域。（FV=MVだったり、人によって使い方がまちまちな気がします。）
![スクリーンショット 2024-06-26 18.15.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/712caccb-459e-651a-fc65-9676846b3b21.png)
https://itpropartners.com/hr/
<br>

* **ファビコン** ：
タブに表示されるアイコン。favorite iconの略。
![スクリーンショット 2024-06-26 18.18.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/af42ac9f-5503-32c3-e520-f8e6e186e6b4.png)
<br>

* **パンくずリスト** ：
下層ページに移動した際、ユーザーが迷子にならないようにどのページにいるか分かりやすくする表示。
![スクリーンショット 2024-06-26 18.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/cef88e59-0c3d-2ff0-5a10-82a4909cd0f4.png)
https://itpropartners.com/job
<br>

* **スライド（カルーセル）** ：
コンテンツがスライドし、次々と入れ替わっていく。クリック or スワイプによって入れ替わるものと、自動で入れ替わるのものがある。
![スクリーンショット 2024-07-02 16.57.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/8705eec8-2286-7b65-6348-ab096ca4d135.png)
http://www.ai-hosp.or.jp/health/index.html
<br>

* **スライダー** : 
ボリュームなどの調整の横長のスイッチ（？）のことらしい。知らなかった。スライダー=スライドと思ってた。恐らく同意で使ってる人いますよね？
![スクリーンショット 2024-07-01 14.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/4a45237e-c7d4-03dd-61dd-640558fd5be1.png)
https://mui.com/material-ui/react-slider/
<br>

* **カード** ：
トランプカードのような形のコンテンツのひとまとまり。通常、PC画面では複数のカードが横並びになってる。
![スクリーンショット 2024-06-27 9.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/b5ce8b35-6feb-c083-ce5d-caa38882cf0c.png)
https://syukatsu-craft.com/
<br>

* **ステッパー** :
申込みフォームなどでよく使われる、今どの工程まで進んでいるか確認できるゲージ。
![スクリーンショット 2024-07-01 14.57.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/73ec268e-2088-b5eb-56a5-0e7e44edfcad.png)
https://mui.com/material-ui/react-stepper/
<br>

* **モーダル（ポップアップウィンドウ）** ：
主にボタンを押下した際に、画面上に現れるポップアップウィンドウ。（画面遷移を伴わない）
![スクリーンショット 2024-07-01 13.58.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/93939385-ce60-5f79-38ba-d9ee27c1c3e7.png)
https://mui.com/material-ui/react-modal/
<br>

* **アコーディオン** ：
初期状態では一部コンテンツが折りたたまれていて、ユーザーがトリガーになるコンテンツをクリックすると、折りたたまれていたコンテンツが展開される。
![スクリーンショット 2024-06-27 10.03.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/74d8b1f5-1a2f-ced6-15fc-f9f5bb290cfb.png)
<br>

* **スナックバー（トースト）**　:
ユーザーのアクションに対して、アプリやWebサイトの画面の端に出現する長細いお知らせ。
![スクリーンショット 2024-07-01 13.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/e39a7c22-27c0-c3b9-c19e-c6e852b3ff10.png)
https://m2.material.io/components/snackbars
<br>

* **パララックス** ：
スクロールした際に手前と奥の要素の動きに差があるもの。サイトの雰囲気がリッチになる(スクショだとわからないので、下記サイトにて見てみてください)

具体例：https://about.instagram.com/ja-jp/
参考記事：https://qiita.com/degudegu2510/items/8af66ccdfe3ccb227866
<br>

* **CTAボタン** ：
ユーザーに行動を促すボタンで、コンバージョンに関わるため繰り返し使うのが定石。
![syukatsu-craft.com_-min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/7b3368b3-ff0d-8be9-a771-653364d71614.png)
<br>

* **ページネーション**：
主に記事の更新があるページで、記事が増えた際に表示される。他のページへ遷移するためのリンクがついている。
![スクリーンショット 2024-06-27 9.51.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/0dab3a47-12d6-8dbb-8322-a817bfedaf63.png)
<br>

* **フロートボタン（フローティングボタン）** :
スクロールしても画面の端で追随してくるボタンのこと。上に戻る矢印のほかに、申し込みボタンや、お問い合わせボタンもよくある。
![スクリーンショット 2024-06-27 10.18.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804754/2a80bb35-fec5-387c-4fc2-aa924fb01ba1.png)

## まとめ

人によって呼び方が違ったり、クライアントさんが間違った呼び方をしていることがあるので、認識合わせは適度に必要かもしれません。
私自身も間違えて使っているものがありました。笑

コンポーネントによっては海外と日本での呼び方が違うものもありそうなので、海外の方とお仕事をする際はより一層気をつけたいと思いました！

載せきれなかったコンポーネントは下記サイトでも見られるので、暇なときに見てみてください。
https://mui.com/material-ui/all-components/