2.各部品の詳細と使用例

ここでは、前ページに記載した各部品の機能について以下のように5つに分類し、使用例とともに説明していきます。

(1)実行系部品……ユーザーが操作するとシステム上で処理が実行される部品
⇒ボタン
(2)入力系部品……ユーザーがキーボード等を使用して文字や数値を入力する部品
⇒テキストボックス、複数行のテキストボックス
(3)選択系部品……ユーザーが複数の選択項目の中から選択することで回答する部品
⇒リストボックス、ドロップダウンリスト、チェックボックス、ラジオボタン
(4)入力と選択の混合部品……直接入力と、項目選択の2パターンで回答できる部品
⇒コンボボックス
(5)状態遷移系部品……ユーザーが操作するたびに数値や状態等を変化させる部品
⇒トグルボタン、スライダー、スピンボタン

(1)実行系部品

ボタン

ボタンをクリック（もしくはタップ）することで、何らかの操作が実行されます。
基本的にボタンに表示されている文字列は実行したい操作を表しています。
（例えば「保存」ボタンを押すと入力した内容で保存される、等）

(2)入力系部品

テキストボックス

番号：

1行のテキスト（文字列や数値等）を入力および編集ができるボックス（長方形の領域）のことです。
名前や電子メールアドレスといった、比較的少ない情報を入力するときに使います。

複数行のテキストボックス

メッセージ内容：

テキストを複数行にわたって入力および編集ができるボックスのことです。
お問い合わせ内容やコメントといった、比較的多い情報を入力するときに使います。
ボックスの右下をクリック＆ドラッグすることでサイズを変更することができます。

(3)選択系部品

リストボックス

ファイル選択：

複数行のボックスの中に選択項目がリスト表示されており、その中から1つ、もしくは複数の項目をクリック（もしくはタップ）することで選びます。
1つの質問に対し、当てはまる項目を1つ、もしくは複数選択する時に使います。
基本的に選んだ項目は背景色が変わり、選択された状態が分かるようになっています。
Windowsで複数選択する方法は、キーボードの「Ctrlキー」または「Shiftキー」を押しながら各項目をクリックします。

ドロップダウンリスト

ステータス：

1行のボックスをクリックするとボックスの上や下に選択項目がリスト表示され、その中から1つを選択することができます。
1つの設定や質問に対し、当てはまる項目を1つ、もしくは複数選択する時に使います。
テキストボックスのようにも見えますが、テキストを入力したり編集したりすることはできません。

チェックボックス

使用デバイス： パソコン スマートフォン タブレット その他

各項目の横にある小さい四角いボックス内にチェックを入れて選択をします。
1つの質問に対し、当てはまる項目を1つ、もしくは複数選択する時に使います。
また、オプションのON/OFF等、1つの設定に対する選択肢が2つの場合にも用いられます。
基本的に選択していないときは空で、選択するとチェックマークやバツ印が付きます。
チェックボックスの中には空白、チェックマーク、バツ印の3状態を選べるタイプもあります。

ラジオボタン

形状： 角形 丸形 その他

各項目の先頭にある小さな円形のボタンにチェックを入れて選択します。
複数の選択項目の中から、1つだけ項目を選択する場合に使います。
ラジオボタンの状態は、選択状態（円内部に小さい丸）または未選択状態（空）の2種類です。
他のボタンを選択すると、それまで選択されていたボタンは自動的に解除され未選択状態になります。

(4)入力と選択の混合部品

コンボボックス

得意先：  

ドロップダウンリストと、1行のテキストボックスの組み合わせでできています。
ドロップダウンリストのようにクリック（もしくはタップ）すると選択項目がリスト表示され、中から1つを選択することができます。
また、テキストボックスのように、任意のテキストを直接入力、編集することも可能です。

(5)状態遷移系部品

トグルボタン

詳細項目を表示する：

1つの設定項目について選択肢が2つのみの場合（「ON/OFF」や「YES／NO」等）に使います。
基本的に楕円形のボタンの中に丸い“つまみ”があり、クリック（もしくはタップ）する度につまみが左右にスライドし選択状態が交互に切り替わります。
ユーザーが変更した後、即時に変更が有効になるような設定に対して使用されます。

スライダー

サイズ：

水平または垂直方向のトラック（線）に沿って“つまみ”をクリック＆ドラッグ等で動かし、一定の範囲から値を選択できます。
明るさや音量の調整等、連続的な値に対して設定したい時に使用します。
なお、Webサイトのトップ画像などで使われるスライドショー（複数の画像を順番に表示する機能）もスライダーと呼ばれるので混同しないようにご注意ください。

スピンボタン

個数：

数値が入るボックスの中の値に対し増減を指定するための、ボックスに付属する2つのボタンのことです。
例えばボックスの左右に［＋］［－］ボタンをつけたり、ボックスの右側に［▲］［▼］ボタンをつけたりして、ボタンを押すことでボックス内の数値を変更できるようにします。
テキストボックスと組み合わせることで、ボタンでの操作だけでなく直接数値を入力することも可能になります。