62
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

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

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

早速ですが、具体的にこんなものがあります

  • グローバルナビゲーション(グローバルメニュー)
    全ページ共通のメニュー。シンプルにメニューと呼ぶことが多い気がしますが、『グロナビ』と呼ぶ人もたまーにいる。
    スクリーンショット 2024-06-30 11.37.18.png
    https://hajimari.inc/

  • ハンバーガーメニュー
    お察しの通り、見た目がハンバーガーに見える、非表示になっている各メニューを表示させるためのボタン。画面幅がPCサイズより小さいときによく使われる。
    スクリーンショット 2024-06-26 18.09.09.png

  • FV, MV :
    First Visualはサイトに訪れた際、ユーザーが最初に見る画面(ヘッダー領域も含む)。Main VisualはFVのヘッダーを含まない領域。(FV=MVだったり、人によって使い方がまちまちな気がします。)
    スクリーンショット 2024-06-26 18.15.20.png
    https://itpropartners.com/hr/

  • ファビコン
    タブに表示されるアイコン。favorite iconの略。
    スクリーンショット 2024-06-26 18.18.29.png

  • パンくずリスト
    下層ページに移動した際、ユーザーが迷子にならないようにどのページにいるか分かりやすくする表示。
    スクリーンショット 2024-06-26 18.22.57.png
    https://itpropartners.com/job

  • スライド(カルーセル)
    コンテンツがスライドし、次々と入れ替わっていく。クリック or スワイプによって入れ替わるものと、自動で入れ替わるのものがある。
    スクリーンショット 2024-07-02 16.57.41.png
    http://www.ai-hosp.or.jp/health/index.html

  • スライダー :
    ボリュームなどの調整の横長のスイッチ(?)のことらしい。知らなかった。スライダー=スライドと思ってた。恐らく同意で使ってる人いますよね?
    スクリーンショット 2024-07-01 14.54.57.png
    https://mui.com/material-ui/react-slider/

  • カード
    トランプカードのような形のコンテンツのひとまとまり。通常、PC画面では複数のカードが横並びになってる。
    スクリーンショット 2024-06-27 9.53.37.png
    https://syukatsu-craft.com/


  • モーダル(ポップアップウィンドウ)
    主にボタンを押下した際に、画面上に現れるポップアップウィンドウ。(画面遷移を伴わない)
    スクリーンショット 2024-07-01 13.58.21.png
    https://mui.com/material-ui/react-modal/

  • アコーディオン
    初期状態では一部コンテンツが折りたたまれていて、ユーザーがトリガーになるコンテンツをクリックすると、折りたたまれていたコンテンツが展開される。
    スクリーンショット 2024-06-27 10.03.06.png


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

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

  • CTAボタン
    ユーザーに行動を促すボタンで、コンバージョンに関わるため繰り返し使うのが定石。
    syukatsu-craft.com_-min.png

  • ページネーション
    主に記事の更新があるページで、記事が増えた際に表示される。他のページへ遷移するためのリンクがついている。
    スクリーンショット 2024-06-27 9.51.22.png

  • フロートボタン(フローティングボタン) :
    スクロールしても画面の端で追随してくるボタンのこと。上に戻る矢印のほかに、申し込みボタンや、お問い合わせボタンもよくある。
    スクリーンショット 2024-06-27 10.18.34.png

まとめ

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

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

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

62
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?