ボタンデザインの完全ガイド：種類・状態・サイズ・アクセシビリティの設計

ボタンはUIにおいて最も頻繁に使われるインタラクティブ要素です。クリック・タップというユーザーの意思を受け付ける入口であり、アプリの使いやすさを決定する重要なコンポーネントです。本記事では、ボタンの種類・状態・サイズ・アクセシビリティを網羅した設計ガイドを解説します。

ボタンの種類と使い分け

プライマリボタン（Primary Button）：

画面・セクションで最も重要なアクションに使います。1ページあたり1〜2つまでが基本です。塗りつぶし（ソリッド）スタイル・ブランドカラーで目立つデザイン。「購入する」「送信」「登録する」など。

セカンダリボタン（Secondary Button）：

プライマリほど重要でないが存在を示したいアクションに使います。アウトライン（枠線のみ）スタイル・プライマリより控えめな色。「キャンセル」「後で」「詳しく見る」など。

テキストボタン（Text/Ghost Button）：

最も控えめなスタイル。テキストリンクに近い見た目。「スキップ」「もっと見る」「編集」など補助的なアクションに使います。

アイコンボタン（Icon-only Button）：

テキストなしのアイコンだけのボタン。ツールバー・ナビゲーション・アクションメニューで使います。必ず aria-label でアクション名を提供します。

フロートアクションボタン（FAB）：

画面右下に固定表示される丸いプライマリボタン。Material Designの代表的なパターンで、最も重要なアクション（追加・作成・共有）に使います。

ボタンの状態設計

デフォルト（Default）：

通常の状態。アクション可能であることを示すデザイン。

ホバー（Hover）：

デスクトップのマウスオーバー時。背景色をやや暗くするか、シャドウを加えてインタラクティブであることを示します。CSSトランジション（150〜200ms）でスムーズに変化させます。

フォーカス（Focus）：

キーボードナビゲーション・タブキーでのフォーカス時。明確なフォーカスリング（outline）を表示します。outline: 2px solid currentColor または box-shadow でデザインを維持しながらフォーカスを示します。CSSで outline: none にするとキーボードユーザーが操作困難になるため禁止です。

アクティブ（Active）：

クリック・タップ中の状態。少し押し込まれた印象（transform: scale(0.98)・背景を暗く）でフィードバックします。

ローディング（Loading）：

クリック後、処理中の状態。ボタン内にスピナーを表示し、再クリックを防ぐためにdisabledにします。「送信中...」のようにテキストも変更するとユーザーに状態が明確に伝わります。

無効（Disabled）：

操作できない状態。透明度を下げる（opacity: 0.4〜0.5）・グレーアウトするなどで視覚的に非活性を表現します。cursor: not-allowed で操作できないことを示します。なお、重要なアクションのボタンを長期間disabledにするより、なぜ操作できないかをツールチップ等で説明する設計が推奨されます。

ボタンのサイズ設計

サイズのバリエーション：

• Small: 高さ 28〜32px / パディング 上下4〜6px 左右10〜12px
• Default: 高さ 36〜44px / パディング 上下8〜10px 左右16〜20px
• Large: 高さ 48〜56px / パディング 上下12〜14px 左右24〜28px

タッチターゲット最小サイズ：

モバイルのタッチターゲットは最低44×44px（iOS HIG推奨）または48×48dp（Material Design推奨）を確保します。視覚的なボタンサイズが小さい場合も、padding や透明な当たり判定領域で最小サイズを担保します。

フルワイドスボタン：

モバイルのフォーム・モーダルでは幅100%のフルワイドボタンを採用することが多く、画面幅に合わせた大きなタッチターゲットが操作しやすさを向上させます。

ボタンのタイポグラフィ

フォントウェイト：

ボタンラベルは Medium（500）または Semibold（600）が視認性と質感のバランスが取れています。Regular（400）では押せる要素としての認識が薄まります。

テキストの大文字化：

Material Design以前は「PURCHASE」のようにすべて大文字にするパターンがありましたが、可読性の観点から現在は「Purchase」のようにセンテンスケース（最初だけ大文字）が主流です。

アクセシビリティ

色だけに頼らない：

ボタンが有効・無効・エラー状態であることを色のみで表現しないようにします。アイコン・テキストを組み合わせて状態を伝えます。

ロールの明示：

HTMLの タグを使えば role="button" は不要ですが、

や をボタンとして使う場合は role="button" と tabindex="0" を設定します（可能な限り避けることを推奨）。

まとめ

ボタンは「クリックできる」ことを視覚的に伝え、操作結果を即座にフィードバックする重要なUIコンポーネントです。種類・状態・サイズ・アクセシビリティを体系的に設計することで、あらゆるユーザーが迷わず操作できるボタンが完成します。UI ZUKANではボタンコンポーネントの実装例を多数掲載しています。

ブログ一覧に戻る