Webデザインやアプリデザインにおいてユーザーインターフェース（UI）はユーザー体験（UX）を大きく左右する重要な要素です。優れたUIデザインを実現するには各UIパーツの役割や用途を理解し、適切に活用することが不可欠です。本記事ではデザイナーが覚えておくべきUIパーツをカテゴリ別に詳しく解説します。
ナビゲーション系UIパーツ
ナビゲーションバー（Navigation Bar）
Webサイトやアプリの主要なページ間を移動するためのメニューです。通常、ヘッダーやフッターに配置されます。
ハンバーガーメニュー（Hamburger Menu）
モバイル向けの省スペースなメニューアイコン（三本線）で、タップするとナビゲーションメニューが開く形式です。
タブバー（Tab Bar）
複数のページやセクションを簡単に切り替えられる横並びのタブ型メニュー。主にモバイルアプリで利用されます。
パンくずリスト（Breadcrumbs）
ユーザーが現在どのページにいるのかを階層的に示すナビゲーション要素。
サイドメニュー（Sidebar）
画面の左または右に配置されるナビゲーションメニュー。常時表示される場合と開閉式のものがあります。
ボタン系UIパーツ
プライマリボタン（Primary Button）
最も重要なアクションを促すための強調されたボタン。
セカンダリボタン（Secondary Button）
補助的なアクションを促すボタン。プライマリボタンより控えめなデザイン。
テキストボタン（Text Button）
枠や背景がなくテキストだけのボタン。主に補助的なアクションで使用される。
アイコンボタン（Icon Button）
アイコンのみで構成されたボタン。例：検索ボタン（虫眼鏡アイコン）
フローティングアクションボタン（FAB）
画面の上に浮かぶように配置されたアクションボタン。
フォーム入力系UIパーツ
テキスト入力フィールド（Text Input）
ユーザーがテキストを入力できる基本的な入力欄。
パスワード入力フィールド（Password Input）
入力した文字が非表示（*）になるテキスト入力欄。
チェックボックス（Checkbox）
複数の選択肢を選べる小さな四角形のボタン。
ラジオボタン（Radio Button）
選択肢の中から1つだけを選択できる丸型のボタン。
ドロップダウン（Dropdown）
選択肢のリストをプルダウン形式で表示し、1つ選択できるUI。
スライダー（Slider）
数値や音量などの調整に使用されるバー状のUI。
コンテンツ表示系UIパーツ
カード（Card）
情報をコンパクトにまとめて表示するボックス型のUI。記事リストや商品リストでよく使用される。
モーダル（Modal）
画面全体を覆うポップアップウィンドウ。ユーザーの操作を一時停止させ、特定のアクションを促す。
トースト（Toast）
画面の隅に一時的に表示される通知メッセージ。
ツールチップ（Tooltip）
ボタンやリンクにマウスをホバーすると表示される説明テキスト。
フィードバック系UIパーツ
ローディングスピナー（Loading Spinner）
処理中であることを示すアニメーション。
プログレスバー（Progress Bar）
進行状況を視覚的に示すバー。
アラート（Alert）
エラーメッセージや警告などの通知を表示するUI。
その他の重要なUIパーツ
アコーディオン（Accordion）
折りたたみ式のコンテンツ表示UI。
タグ（Tag）
コンテンツのカテゴリを示すラベル。
バッジ（Badge）
通知数や状態を示す小さなアイコン付きのラベル。
カルーセル（Carousel）
複数の画像やコンテンツをスライド形式で表示するUI。
まとめ
UIデザインを行う際には適切なUIパーツを選択し、ユーザーが直感的に操作できるように配置することが重要です。本記事で紹介したUIパーツを理解し適切に活用することで、より優れたデザインを作成できるでしょう。
他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。
