「トグルボタン」はWeb開発・アプリUI・Excelマクロ・日用品まで様々な場面で登場します。
本記事では、UIデザインにおけるトグルボタンの設計・HTML/CSSでの実装・VBAでのトグルボタン・100均で買えるスイッチ型グッズまで幅広く解説していきます。
トグルボタンとは「押すたびにON/OFFを切り替えるボタン型UIコンポーネント」である
それではまず、UIデザインにおけるトグルボタンの定義と役割を解説していきます。
トグルボタンの定義：1回クリック（タップ）でアクティブ（ON）状態になり、もう1回で非アクティブ（OFF）状態に戻るボタン。状態が視覚的に明確に区別される（色・影・枠の変化）ことが重要なUX要件。使用例：太字ボタン・ミュートボタン・フィルターの有効/無効・「お気に入り」ハートボタンなど。
UIデザインにおけるトグルボタンの設計原則
トグルボタンの設計で最も重要なのは状態の視覚的な明確さです。
アクティブ状態（ON）と非アクティブ状態（OFF）を色・輝度・枠線・テキストなど複数の視覚的手がかりで区別することで、ユーザーが現在の状態を一目で把握できます。
色だけで状態を区別するとカラーユニバーサルデザイン（色覚多様性）への対応が不十分になるため、色に加えてテキストラベルやアイコン変化でも状態を示すことが推奨されます。
HTML/CSSでのトグルボタン実装
HTMLとCSSでトグルボタンを実装する基本的な方法を示します。
HTML（チェックボックスを使ったトグルスイッチ）：
<label class=”toggle”>
<input type=”checkbox”>
<span class=”slider”></span>
</label>
CSSでinputを非表示にし、:checkedセレクタで状態を切り替えるスタイルを適用する方法が一般的。
JavaScriptでは要素に対して classList.toggle(‘active’) を使うと、クリックごとにクラスの追加・削除が切り替わり、トグルボタンの状態管理が簡単に実装できます。
ReactやVueでのトグルボタン実装
ReactではuseStateフックで状態を管理し、ボタンのクリックハンドラで状態を反転させます。
Reactでの実装例：
const [isActive, setIsActive] = useState(false);
return (
<button
className={isActive ? ‘active’ : ”}
onClick={() => setIsActive(!isActive)}
>
{isActive ? ‘ON’ : ‘OFF’}
</button>
);
shadcn/ui・Material UI・Tailwind UIなどのUIライブラリでは、アクセシビリティ（aria-pressed属性）対応済みのトグルボタンコンポーネントが提供されています。
VBAとExcelでのトグルボタン
続いては、ExcelのVBAにおけるトグルボタンの使い方を確認していきましょう。
ExcelフォームのトグルボタンコントロールとVBA
ExcelのVBAフォームにはToggleButton（トグルボタン）コントロールがあります。
ToggleButtonのValueプロパティが True（押された状態）・False（通常状態）を返すため、これを使ってマクロのON/OFFや表示・非表示の切り替えが実装できます。
VBAでのトグルボタン使用例：
Private Sub ToggleButton1_Click()
If ToggleButton1.Value = True Then
Rows(“5:10”).Hidden = False ‘ 行を表示
ToggleButton1.Caption = “行を隠す”
Else
Rows(“5:10”).Hidden = True ‘ 行を非表示
ToggleButton1.Caption = “行を表示”
End If
End Sub
行・列の表示/非表示切替・フィルターのON/OFF・グラフの表示切替など、Excelレポートのインタラクティブな操作に役立ちます。
100均で買えるトグルスイッチグッズ
100円ショップ（ダイソー・セリアなど）では、インテリア向けのトグルスイッチ型照明スイッチカバー・デコレーションスイッチ・フェイクスイッチなどのグッズが販売されていることがあります。
本物の電気配線とは関係なくアクセサリーとして使われるものが多く、レトロ・インダストリアルなインテリアスタイルに人気があります。
まとめ
本記事では、トグルボタンのUIデザイン原則・HTML/CSSとJavaScriptでの実装・Reactでの状態管理・ExcelのVBAでの活用・100均グッズまで解説してきました。
トグルボタンは「1回の操作で2値の状態を切り替える」シンプルで強力なUIパターンであり、状態の視覚的明確さとアクセシビリティ対応が良いトグルボタン設計の鍵です。
Webアプリ開発・Excelマクロ・インテリアデザインなど様々な文脈で活用できる知識として役立ててください。
