モバイルアプリのデザインや開発を進める中で、「このパーツの名前は何だっけ？」「どれを使うのが適切なのだろう？」と迷うことはありませんか？
この記事では、モバイルアプリで頻繁に使用される定番のUIパーツをピックアップし、それぞれの「正確な名前」「役割」を分かりやすく解説いたします。
この記事をお届けしているJ.B.Goode Inc.は、「ソフトウェアでできること、すべて」を掲げ、AWSなどのインフラ構築からシステム開発、UI/UXデザインまでを一気通貫で手がけるクリエイティブ＆テックカンパニーです。私たちが日々プロダクトを開発・デザインする中で培った、「ユーザーにとって直感的で使いやすいUIのノウハウ」をベースに本編を解説していきます。
ナビゲーション
ユーザーがアプリ内で迷子にならず、目的の画面へスムーズに移動できるようにするためのパーツです。
タブバー
アプリの最下部に常駐し、アプリの主要な機能や画面へワンタップで切り替えるためのパーツです。
現在表示しているタブがひと目でわかるよう、アイコンの色を変えたりアクティブ状態を明示したりする工夫が必要です。
ナビゲーションバー
画面の最上部に位置し、現在の画面タイトルを明示して「何をしている場所か」を伝えます。また、左端に「戻る」ボタン、右端に「完了」や「編集」などのアクションボタンを配置します。
iOSではナビゲーションバー、Androidではトップアプリバー（Top App Bar）とも呼ばれ、OSごとのガイドラインに合わせることが重要です
ハンバーガーメニュー
タップすることで隠れている詳細なメニュー（ドロワーメニュー）を呼び出すためのパーツです。
画面スペースを節約できる反面、メニューが隠れてしまうというデメリットもあります。
頻繁に使う主要機能はタブバーに置き、利用頻度の低い設定などをここに格納するのが一般的です。
ドロワーメニュー
普段は画面外に隠れており、ハンバーガーメニューのタップや画面端からのスワイプによって、現れるメニューです。
多くのメニュー項目を整理して表示できるため、多機能なアプリのマイページメニューなどに適しています。
フォーム
ユーザーがテキストを入力したり、選択肢からデータを選んだりするためのパーツです。
テキストフィールド
氏名、メールアドレス、パスワードなど、1行の短いテキストを入力してもらうためのパーツです。
何を入力すべきかを示す「プレースホルダー」の表示や、入力エラー時のバリデーション（赤文字での警告など）の設計がセットで必要になります。
テキストエリア
複数行のテキストを入力するためのパーツ
お問い合わせ内容やレビュー、メモなど、複数行にわたる長文を入力してもらうためのパーツです。
文字数に応じて自動で高さが広がる仕様にするか、スクロールさせるかをあらかじめ考慮しておくと親切です。
検索バー
キーワードを入力して、アプリ内の膨大な情報から目的のコンテンツを絞り込むためのパーツです。
入力中に候補を表示する「サジェスト機能」や、入力した文字をワンタップで消去できる「クリアボタン（×）」を配置すると利便性が大幅に向上します。
日付ピッカー
画面上に重ねて表示し、ユーザーが直感的に年月日や時間を間違えずに選択できるようにするためのパーツです。
キーボードで数字を直接入力させるよりも入力ミス（存在しない日付の入力など）を防げるため、予約アプリや誕生日入力には必須です。
ファイルピッカー
端末内のフォトライブラリやファイルフォルダにアクセスし、画像やPDFなどのデータをアプリ内にアップロードするためのパーツです。
アップロード可能なファイル形式（.jpg, .pngなど）や容量制限を近くに明記しておくと親切です。
チェックボックス
提示された選択肢の中から、複数を同時に選ぶことができるパーツです。
四角い箱（□）の中にチェックマーク（✓）のデザインが世界共通の標準です。
ラジオボタン
提示された選択肢の中から、1つだけを選ぶためのパーツ
チェックボックスと混同しやすいので、「複数選べる＝チェックボックス」「1つしか選べない＝ラジオボタン」というルールを徹底しましょう。
トグル
状態の切り替えや、対等なふたつの選択肢を直感的に行き来させるためのパーツです。
トグルボタン
「リスト表示 ⇄ グリッド表示」や「おすすめ順 ⇄ 新着順」のように、2つ（または3つ）の対等な選択肢を切り替えるためのボタンです。
トグルスイッチ
「プッシュ通知のON/OFF」や「ダークモードの切り替え」のように、1つの機能の有効化・無効化を切り替えるためのパーツです。
オーバーレイ
元の画面を維持したまま、その上に重ねて表示するパーツです。
トースト
「下書きを保存しました」「お気に入りに追加しました」など、操作の結果を画面の下部（または上部）に小さく表示し、数秒経つと自動的に消滅するメッセージウィンドウです。
スナックバー
メッセージを通知し、特定の操作を行えるウィンドウです。
トーストと似ていますが、メッセージの横に「元に戻す」などの簡単なアクションボタンを配置できるのが特徴です。
ダイアログ
画面の上に重ねて表示され、特定の短いタスクを要求するウィンドウです。
ダイアログが出ている間は背景が暗くなり、他の操作ができなくなります。
ボトムシート
画面下部から出現し、画面の半分ほどを覆うように表示するウィンドウです。
モバイル端末は画面の上部よりも下部の方が指が届きやすいため、ダイアログの代わりに選択肢や詳細情報を表示するUIとして、近年のモバイルアプリで非常に重宝されています。
ツールチップ
アイコンをタップすることで、要素の補足説明が小さな吹き出しとして表示されるパーツです。
画面の省スペース化のために文字量を減らしたデザインの補助として有効です。
ステータス
アプリが現在どのような状態にあるか、処理がどこまで進んでいるかをユーザーに視覚的に伝えるパーツです。
ローディングスピナー
画面の読み込み中であることをユーザーに伝えるためのパーツです。
画面がフリーズしているわけではなく「裏で動いていますよ」と伝えることで、ユーザーの離脱を防ぎます。
近年は、コンテンツの形をした灰色のプレースホルダーを表示する「スケルトンスクリーン」を代わりに使うケースも増えています。
ステップインジケーター
「カート ＞ お届け先入力 ＞ 支払い方法 ＞ 確認」のように、完了までに複数の手順が必要なプロセスにおいて、現在全体のどこにいるかを明示するパーツです。
ゴールまでの道のりが見えることで、ユーザーの「あとどれくらい入力すればいいの？」という不安を解消します。
プログレスバー
ファイルのダウンロードやアップロードなどの進捗状況を視覚的に伝えるためのパーツです。
ローディングスピナーと違い処理に時間のかかる際に使用します。
その他
アコーディオン
見出しをタップすると、その下に隠れていた詳細情報が縦にスライドして展開・格納されるパーツです。
「よくある質問（FAQ）」や、長くなりがちな規約・仕様の確認画面などで、画面をスッキリ整理するために使用されます。
右側に「∨」や「＋」などのアイコンを置き、開閉できることを明示するのが基本です。
まとめ
モバイルアプリのUIパーツには、それぞれ「ユーザーが直感的に操作できるための共通認識（メンタルモデル）」が存在します。
パーツの役割を正しく理解し、適切な場面で使い分けることが、使いやすくいアプリ開発をするための第一歩です。
ぜひデザイン制作やアプリ開発の参考にしてみてください！