ボタン (GUI)

グラフィカルユーザーインターフェイス (GUI) におけるボタンは、現実世界における押しボタンと同様に、ユーザーが「押す」ことで何らかの操作を行なうためのコンピュータ画面上の表現である。GUIにおける基本的な部品（ウィジェット）のひとつとして、ウィジェット・ツールキットには標準的に用意されている。一般には現実世界の物理的なボタンを模した立体感のある形状（スキューモーフィックデザイン）であったり、矩形や角丸矩形の境界線（ボーダー）を持っていたりすることが多いが、中には単なるアイコン表現がボタンの役割を果たす場合もあり、このようなものも機能分類に従い通常はボタンと呼称する。「コマンドボタン」と呼ばれることもあるCommand Buttons in Windows 7 - Win32 apps | Microsoft Docs。

 概要 
ボタンはアイコンと同様の、機能のグラフィカルな表現である。かなりのバリエーションがあり、全てに共通する特徴を挙げるのは難しいが、アイコンとの主な違いは
 OSごと、スキンごとに調和のとれたデザインを持つ
 固定配置であり、ドラッグ操作で移動できない
 単一クリックあるいはタップで動作する
などを基本とする。

物理的スイッチと異なり、GUIボタンの動作はその上でマウスボタンを押した時ではなく、離した時に判定される。これは誤ってクリックしたボタンを動作させないようマウスカーソルを判定範囲から外してからリリースできるようにするための処置である。ボタンにキーボードフォーカスが設定されている場合はキーボードのリターンキー（エンターキー）やスペースキーなどでクリック動作を代替できる。ボタンにフォーカスが設定されていない場合でもエンターキーによって押下されるボタンは「デフォルトボタン」（既定のボタン）と呼ばれる。

 ボタンの種類 
ボタンには機能に応じて次のような種類がある。

 プッシュボタン
 最も一般的なボタンであり、一回のクリックごとに定められた何らかのアクションを起動する。
 ラジオボタン
 複数の選択肢の中で択一を行なうものをラジオボタンと呼ぶ。語源は古いラジオの局番選択と動作が似ているためである。
 トグルボタン
 押すたびに状態が遷移するボタン。

このほか、複数のボタンからなるコントロール（スピンボタン）や、長く押し続けるとメニューを表示するボタンなどがある。

なお、ラジオボタンと類似するチェックボックスや、ウインドウのメニューは通常ボタンとは呼ばれない。ただし、チェックボックスとラジオボタンとトグルボタンはいずれもクリックあるいはタップすると状態が変わるなど、動作的な共通点が多く、実装上はあまり違いがないことも多い。

Microsoft WindowsのWin32コモンコントロールでは、スタイル属性にBS_PUSHLIKEフラグを設定することで、ラジオボタンやチェックボックスの外観をプッシュボタンのようにすることもできるButton Styles (Winuser.h) - Win32 apps | Microsoft DocsStyles Used by MFC | Microsoft Docs。Windows Presentation Foundation (WPF) やWindows UI Library (WinUI) では、CheckBoxやRadioButtonの基底クラスとして、ToggleButtonが用意されているToggleButton Class (System.Windows.Controls.Primitives) | Microsoft DocsToggleButton Class (Windows.UI.Xaml.Controls.Primitives) - Windows UWP applications | Microsoft Docs。Visual Basic for Applications (VBA) のユーザーフォームにはToggleButtonコントロールがあるトグルボタンのプロパティ - Excel VBA。通常のプッシュボタンは、押している間のみ外観が変化し、離すと元の状態に戻るが、トグルボタンは押し込まれたままになる。

Androidの標準ウィジェットでは、CheckBox, RadioButton, Switch, ToggleButtonのスーパークラスとしてCompoundButtonが用意されているCompoundButton  |  Android Developers。

ボタン上に、押下によって動的に変化するラベル（キャプション）やアイコンを配置して何らかの状態を表示することもできる。例えばメディアプレーヤー系のアプリケーションで、再生／一時停止ボタンの切り替えによく使われているトグルボタン（トグルスイッチ）とは - IT用語辞典 e-Words。しかしこの場合、ボタンのラベルやアイコンが現在の状態を表しているのか、それとも逆にボタンを押すことによってその状態になることを示しているのかは明確な取り決めが存在せず、どちらの意味であるかは個別のアプリケーションソフトウェアまたはOSなどによって異なる可能性があり、非常に紛らわしい状態を切り替えるボタンのデザイン | ゲームUIネットトグルボタン (toggle button)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典。マイクロソフト社はWindowsユーザーエクスペリエンスガイドラインにて、コマンドボタンは状態の設定に使うのではなく、操作の開始のみに使うことを推奨している。状態ごとにトグルボタンを個別に用意して並べるケースであっても、カラースキームを反転するだけではどちらがアクティブ状態であるかが分からないので、文字の太さや彩度・明度を変えるなどの配慮が必要となるトグルボタンが混乱を招く理由 | UX MILK。

BluetoothやWi-Fi、機内モードなどの有効／無効 (ON/OFF) を変更するUIの場合、無効 (OFF) の場合はグレー、有効 (ON) の場合は色付きで表示することで、ON/OFFを表現するトグルボタンを設けるケースもあるiPhoneのコントロールセンターを使用する/カスタマイズする - Apple サポート (日本)Android スマートフォンで設定をすばやく変更する - Android ヘルプ[Windows 10] Bluetooth機能をオン／オフにする方法 | Sony JP。ただし、色で状態を表す場合はユーザーの色覚多様性に配慮して、彩度や色相だけではなく明度も併せて変更するなどの配慮が必要となる。ON/OFF設定のUIでは、チェックボックスやトグルボタンの代わりに、状態を表す円形や矩形が左右に移動するトグルスイッチが利用されるケースもあるトグルスイッチのガイドライン – U-Site。なお、トグルスイッチはあくまでON/OFFの設定に使うべきであり、それ以外の二者択一の設定に使うべきではないトグルスイッチの誤用をやめよう | UX MILK。トグルスイッチも適切にデザインしないと、トグルボタン同様に混乱を招いてユーザビリティを損なってしまうその機能はオンかオフか？ トグルスイッチが招く混乱とは | UX MILK。

 脚注 

 関連項目 
 ウィジェット (GUI)
 ラジオボタン
 チェックボックス
 スピンボタン
 録音録画再生機器のボタン

Category:ウィジェット