~とある業務アプリ開発の打ち合わせにて~
受注登録ボタンの上に納期確定ボタンも付け足してほしいです
(ボタンなら、こうかな?)
その納期確定ボタンでは、どのようなことを実現したいんですか?
納期が決まっていなくても残しておきたいんです
(残す処理を行うボタン?)
納期確定する前に何か残したいものがあるんですか?
えーと、納期が決まる前に受注した内容を残しておきたくて
(あ!チェックボックスか!)
納期確定した後にチェックして、登録し直すということですね!
そうです!
上記のように、アプリ画面についての打ち合わせ等で、画面上の部品の呼び方で認識の違いがあり、困った経験はありませんか?
社内外で画面設計やGUIについて話し合う時、部品の名称についてメンバーが共通の知識を持っていないと、意見や要望が相手に正確に伝わらず、スムーズに意見交換ができないばかりか、誤認識が発生するといった問題が起きる可能性があります。
さらに、各種部品の機能や使い方を正しく理解していないと、適切な部品を選ぶことができず、ユーザーにとって使いづらいアプリになってしまいます。
本記事では、デスクトップアプリやWebアプリの画面上にある部品の中で、使用頻度が高い部品の名称と機能について、使用例も交えて説明していきます。
また、「リストボックス」と「コンボボックス」、「チェックボックス」と「ラジオボタン」等、似通っている部品の違いや使い分けについても解説していますので、部品選びに迷った際は是非ご活用ください。
なお、「アプリ画面の部品」全体を指す総称ですが、「コントロール」「ウィジェット」「インタフェース部品」「UIパーツ」等、人や場面によって異なる呼ばれ方をしています。
本記事では便宜的に「部品」と呼び方を統一し、「部品」は「ユーザーが操作できるもの」と定義した上で紹介させていただきます。
1.部品の概要と種類一覧
部品はユーザーがアプリを使用する上で、クリックしたり文字を入力したりと画面の中で直接操作を行う部分です。
ユーザーにとって分かりやすく使いやすいアプリを製作するためには、実現したい各機能に対し、どの部品を使用することが適切なのかをよく考えて画面設計を進めていく必要があります。
そのため、エンジニアはもちろん、クライアント側も含め、画面設計に関わる全ての人が部品について共通の認識を持っていることが理想です。
以下に、多くのアプリで頻繁に使用される部品について、名称と機能を一覧にしてまとめています。
なお、部品の名称については使用者や環境等によって様々な呼び名があり、厳密に「これが正解」というものは提示しておりませんので、あくまで参考として活用してください。
よく使われる名称 | 左記以外の他の名称 | 機能 |
---|---|---|
テキストボックス | テキストフィールド | 1行のテキストを入力、編集できる |
複数行の テキストボックス |
テキストエリア、テキストビュー | 複数行のテキストを入力、編集できる |
リストボックス | セレクトボックス | 複数行のボックス内に選択項目がリスト表示されており、中から1つもしくは複数の項目を選べる |
ドロップダウンリスト | ドロップダウンメニュー、プルダウン リスト(メニュー、ボタン)、セレクトボックス、編集不可のコンボボックス | 1行のボックスをクリックすると複数の選択項目がリスト表示され、中から1つの項目を選択できる |
コンボボックス | 編集可能なセレクトボックス | リストボックスまたはドロップダウンリストと、1行のテキストボックスを組み合わせたもの |
チェックボックス | ー | 1つの設定や機能について、複数の項目を選択できる |
ボタン | コマンドボタン、システムボタン | ボタンをクリックすることで、何らかの操作が実行される |
ラジオボタン | オプションボタン | 複数の選択項目から必ず1つの項目を選択する |
トグルボタン | トグルスイッチ、スイッチ、トグル | ある設定したい項目について選択肢が2つのみの場合に使う |
スライダー | レンジスライダー | 水平または垂直方向のトラックに沿ってつまみを動かすことで値を選択できる |
スピンボタン | ステッパー | 数値が入るボックスの中の値に対し、2つのボタンで増減を指定する |