ボタン (GUI)
グラフィカルユーザーインターフェイス (GUI) におけるボタンは、現実世界における押しボタンと同様に、ユーザーが「押す」ことで何らかの操作を行なうためのコンピュータ画面上の表現である。GUIにおける基本的な部品（ウィジェット）のひとつとして、ウィジェット・ツールキットには標準的に用意されている。一般には現実世界の物理的なボタンを模した立体感のある形状（スキューモーフィックデザイン）であったり、矩形や角丸矩形の境界線（ボーダー）を持っていたりすることが多いが、中には単なるアイコン表現がボタンの役割を果たす場合もあり、このようなものも機能分類に従い通常はボタンと呼称する。「コマンドボタン」と呼ばれることもある[1]。
概要
[編集]ボタンはアイコンと同様の、機能のグラフィカルな表現である。かなりのバリエーションがあり、全てに共通する特徴を挙げるのは難しいが、アイコンとの主な違いは
などを基本とする。
物理的スイッチと異なり、GUIボタンの動作はその上でマウスボタンを押した時ではなく、離した時に判定される。これは誤ってクリックしたボタンを動作させないようマウスカーソルを判定範囲から外してからリリースできるようにするための処置である。ボタンにキーボードフォーカスが設定されている場合はキーボードのリターンキー（エンターキー）やスペースキーなどでクリック動作を代替できる。ボタンにフォーカスが設定されていない場合でもエンターキーによって押下されるボタンは「デフォルトボタン」（既定のボタン）と呼ばれる[2][3]。
ボタンの種類
[編集]ボタンには機能に応じて次のような種類がある。
- プッシュボタン
- 最も一般的なボタンであり、一回のクリックごとに定められた何らかのアクションを起動する。
- ラジオボタン
- 複数の選択肢の中で択一を行なうものをラジオボタンと呼ぶ。語源は古いラジオの局番選択と動作が似ているためである。
- トグルボタン
- 押すたびに状態が遷移するボタン。
このほか、複数のボタンからなるコントロール（スピンボタン）や、長く押し続けるとメニューを表示するボタンなどがある。
なお、ラジオボタンと類似するチェックボックスや、ウインドウのメニューは通常ボタンとは呼ばれない。ただし、チェックボックスとラジオボタンとトグルボタンはいずれもクリックあるいはタップすると状態が変わるなど、動作的な共通点が多く、実装上はあまり違いがないことも多い。
Microsoft WindowsのWin32コモンコントロールでは、スタイル属性にBS_PUSHLIKEフラグを設定することで、ラジオボタンやチェックボックスの外観をプッシュボタンのようにすることもできる[4][5]。Windows Presentation Foundation (WPF) やWindows UI Library (WinUI) では、CheckBoxやRadioButtonの基底クラスとして、ToggleButtonが用意されている[6][7]。Visual Basic for Applications (VBA) のユーザーフォームにはToggleButtonコントロールがある[8]。通常のプッシュボタンは、押している間のみ外観が変化し、離すと元の状態に戻るが、トグルボタンは押し込まれたままになる。
Androidの標準ウィジェットでは、CheckBox, RadioButton, Switch, ToggleButtonのスーパークラスとしてCompoundButtonが用意されている[9]。
ボタン上に、押下によって動的に変化するラベル（キャプション）やアイコンを配置して何らかの状態を表示することもできる。例えばメディアプレーヤー系のアプリケーションで、再生／一時停止ボタンの切り替えによく使われている[10]。しかしこの場合、ボタンのラベルやアイコンが現在の状態を表しているのか、それとも逆にボタンを押すことによってその状態になることを示しているのかは明確な取り決めが存在せず、どちらの意味であるかは個別のアプリケーションソフトウェアまたはOSなどによって異なる可能性があり、非常に紛らわしい[11][12]。マイクロソフト社はWindowsユーザーエクスペリエンスガイドラインにて、コマンドボタンは状態の設定に使うのではなく、操作の開始のみに使うことを推奨している[13]。状態ごとにトグルボタンを個別に用意して並べるケースであっても、カラースキームを反転するだけではどちらがアクティブ状態であるかが分からないので、文字の太さや彩度・明度を変えるなどの配慮が必要となる[14]。
BluetoothやWi-Fi、機内モードなどの有効／無効 (ON/OFF) を変更するUIの場合、無効 (OFF) の場合はグレー、有効 (ON) の場合は色付きで表示することで、ON/OFFを表現するトグルボタンを設けるケースもある[15][16][17]。ただし、色で状態を表す場合はユーザーの色覚多様性に配慮して、彩度や色相だけではなく明度も併せて変更するなどの配慮が必要となる。ON/OFF設定のUIでは、チェックボックスやトグルボタンの代わりに、状態を表す円形や矩形が左右に移動するトグルスイッチが利用されるケースもある[18]。なお、トグルスイッチはあくまでON/OFFの設定に使うべきであり、それ以外の二者択一の設定に使うべきではない[19]。トグルスイッチも適切にデザインしないと、トグルボタン同様に混乱を招いてユーザビリティを損なってしまう[20]。
脚注
[編集]- ^ Command Buttons in Windows 7 - Win32 apps | Microsoft Docs
- ^ “デフォルトボタンの設定 - ボタンの作成(JButtonクラス) - Swing”. www.javadrive.jp. 2016年1月16日閲覧。
- ^ “Button.IsDefault Property (System.Windows.Controls)” (英語). docs.microsoft.com. Microsoft Docs. マイクロソフト. 2022年2月6日閲覧。
- ^ Button Styles (Winuser.h) - Win32 apps | Microsoft Docs
- ^ Styles Used by MFC | Microsoft Docs
- ^ ToggleButton Class (System.Windows.Controls.Primitives) | Microsoft Docs
- ^ ToggleButton Class (Windows.UI.Xaml.Controls.Primitives) - Windows UWP applications | Microsoft Docs
- ^ トグルボタンのプロパティ - Excel VBA
- ^ CompoundButton | Android Developers
- ^ トグルボタン（トグルスイッチ）とは - IT用語辞典 e-Words
- ^ 状態を切り替えるボタンのデザイン | ゲームUIネット
- ^ トグルボタン (toggle button)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
- ^ “Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > コマンド ボタン”. docs.microsoft.com. Microsoft. 2015年7月3日時点のオリジナルよりアーカイブ。2016年1月16日閲覧。 “状態の設定にはコマンド ボタンを使いません。代わりにラジオ ボタンやチェック ボックスを使います。コマンド ボタンは操作を開始するためだけに使います。”
- ^ トグルボタンが混乱を招く理由 | UX MILK
- ^ iPhoneのコントロールセンターを使用する/カスタマイズする - Apple サポート (日本)
- ^ Android スマートフォンで設定をすばやく変更する - Android ヘルプ
- ^ [Windows 10] Bluetooth機能をオン／オフにする方法 | Sony JP
- ^ トグルスイッチのガイドライン – U-Site
- ^ トグルスイッチの誤用をやめよう | UX MILK
- ^ その機能はオンかオフか？ トグルスイッチが招く混乱とは | UX MILK
関連項目
[編集]| コマンド入力 | |
|---|---|
| データ入出力 | |
| 表示 |
|
| コンテナ | |
| ナビゲーション | |
| 特殊ウィンドウ | |
| 関連項目 | |
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
