ボタン (GUI)

GUI におけるボタン

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

概要

ボタンはアイコンと同様の、機能のグラフィカルな表現です。かなりのバリエーションがあり、全てに共通する特徴を挙げるのは難しいですが、アイコンとの主な違いは以下の点が挙げられます。

OSごと、スキンごとに調和のとれたデザインを持つ
固定配置であり、ドラッグ操作で移動できない
単一クリックあるいはタップで動作する

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

ボタンの種類

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

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

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

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

Microsoft WindowsのWin32コモンコントロールでは、スタイル属性に`BS_PUSHLIKE`フラグを設定することで、ラジオボタンやチェックボックスの外観をプッシュボタンのようにすることもできます。Windows Presentation Foundation (WPF) やWindows UI Library (WinUI) では、`CheckBox`や`RadioButton`の基底クラスとして、`ToggleButton`が用意されています。Visual Basic for Applications (VBA) のユーザーフォームには`ToggleButton`コントロールがあります。通常のプッシュボタンは、押している間のみ外観が変化し、離すと元の状態に戻りますが、トグルボタンは押し込まれたままになります。

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

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

BluetoothやWi-Fi、機内モードなどの有効／無効 (ON/OFF) を変更するUIの場合、無効 (OFF) の場合はグレー、有効 (ON) の場合は色付きで表示することで、ON/OFFを表現するトグルボタンを設けるケースもあります。ただし、色で状態を表す場合はユーザーの色覚多様性に配慮して、彩度や色相だけではなく明度も併せて変更するなどの配慮が必要となります。ON/OFF設定のUIでは、チェックボックスやトグルボタンの代わりに、状態を表す円形や矩形が左右に移動するトグルスイッチが利用されるケースもあります。なお、トグルスイッチはあくまでON/OFFの設定に使うべきであり、それ以外の二者択一の設定に使うべきではありません。トグルスイッチも適切にデザインしないと、トグルボタン同様に混乱を招いてユーザビリティを損なってしまう。

ボタン (GUI)

GUI におけるボタン

概要

ボタンの種類

関連項目