ボタンUIデザインのおすすめパターン：プライマリ・セカンダリ・FABの使い分け

ボタンはアプリにおけるユーザーアクションの出発点です。適切に設計されたボタンはユーザーを次のステップへ自然に誘導し、コンバージョンを高めます。本記事では、モバイルアプリのボタンUIデザインの種類・使い分け・実装のポイントを解説します。

ボタンの階層：プライマリ・セカンダリ・テキスト

1画面に複数のボタンがある場合、視覚的な重要度の差（ヒエラルキー）をつけることが重要です。

プライマリボタン（最重要アクション）

画面で最も重要なアクション（購入する・登録する・次へ）に使用します。1画面に1つが原則です。

• 特徴：ブランドカラーの塗りつぶし、コントラスト比の高い白テキスト
• サイズ：高さ44〜56dp、画面幅いっぱい（フルワイド）または中央配置
• 角丸：4〜16px（ブランドによって調整）

セカンダリボタン（補助的なアクション）

プライマリアクションの代替または補完的な操作（ログインを続ける・スキップ）に使用します。

• 特徴：アウトライン（枠線）またはグレー塗りつぶし
• プライマリより視覚的に控えめなデザイン

テキストボタン（最も目立たない）

重要度が最も低いアクション（キャンセル・詳細を見る）に使用します。

• 特徴：背景なし、テキストのみ（ブランドカラーまたはグレー）
• アンダーラインを付けるかどうかはデザインシステムによる

破壊的アクションのボタンデザイン

削除・退会・リセットなどの取り消せない操作のボタンは、視覚的に「危険」であることを伝える設計が必要です。

• カラー：レッド系（#E53935、#D32F2F など）
• 確認ダイアログとの組み合わせを必須にする
• 「本当に削除しますか？」の確認後に初めて実行

タップ領域の設計

視覚的なボタンのサイズが小さくても、タップ領域（ヒットエリア）は最低44×44px以上を確保することがApple HIG・Material Designの共通ガイドラインです。パディングで調整してタップ精度を向上させます。

特に誤タップが起きやすい密集したレイアウトでは、ボタン間の余白を16px以上確保することで誤操作を防ぎます。

ボタンの状態（States）

ボタンには以下の状態があり、それぞれ視覚的なフィードバックが必要です。

• デフォルト：通常の表示状態
• ホバー（デスクトップ）：背景色をわずかに変化
• プレス：タップ時に縮小（scale: 0.96）または色を暗く
• フォーカス：キーボードナビゲーション時の枠線
• ディセーブル：グレーアウト、透明度50%程度
• ローディング：送信中にスピナーアイコンを表示

アイコン付きボタン

アイコンをボタンに組み合わせることで、視認性と直感性が向上します。

• アイコンはテキストの左側が一般的（例：🛒カートに追加）
• アイコンのサイズはテキストと同等（18〜24px）
• アイコンのみのボタン（ToolTipを必ず付ける）

FATボタン（フルワイドボタン）のトレンド

国内のモバイルアプリでは、画面幅いっぱいに伸びた「フルワイドボタン」が主流です。これは親指が届きやすく、誤タップが少ないという実用上の利点があります。ただし同じ画面に複数のフルワイドボタンを配置すると視覚的に重くなるため、最多でも2ボタンまでとすることを推奨します。

まとめ

ボタンは「ユーザーのアクションを誘発する最重要UIパーツ」です。視覚的な重要度の差・タップ領域・フィードバックアニメーションを適切に設計することで、ユーザーが迷わず操作できるアプリを実現できます。UI ZUKANのギャラリーには多様なボタンデザイン事例が収録されています。ぜひ参考にしてください。