“アプリUIあるある”な6つのNGボタン 人事SaaSを例に専門家が解説：徹底解剖！ SaaSのUI／UX（2/2 ページ）

なかなか問題点を直しにくいSaaSのUI／UX。人事SaaSのUIを模して作ったサンプルを基に、専門家がSaaSのUIにありがちな問題点とその改善方法を解説する。

[天野謙作，ITmedia]

　適切な実装はできていましたか？　「こんな画面なんか見たことある」と全体の印象でざっくり捉えず、UIの見た目、情報構造、機能間の関係、ラベルなど、複数の観点から細かく検討していくことがよりよいUIデザインにつながります。今は自分で問題点に気付けなくても、事例を学びながら見るべきポイントと正解を知見として蓄積していきましょう。

　これらの問題を全てクリアしたボタンUIの改善例がこちらになります。

OK例

ボタンの見た目で優先度をつける

　情報に優先度をつけ、何のための画面なのか分かりやすくしましょう。ボタンの種類はPrimary（主要ボタン）、Secondary（サブボタン）、Tertiary（三次ボタン）の3種類があると、おおよその画面で優先度づけをカバーできます。

　Primaryは1画面の中に1〜2個に留め、その他はサブ機能としてSecondary以降を使います。Tertiaryは画面の中で限定的な項目に対する機能（サンプルでは「メール作成」）や、「戻る」「キャンセル」などのネガティブな機能で用いると効果的です。

情報の切り替えにはボタンを使わない

　表示情報の切替えなどはタブ形式で見せた方がその遷移先の情報イメージがつきやすいです。「提出書類」のようにタブ切り替えではなく同一画面に情報を載せてしまう方法もあります。

アクションに応じてボタンの位置を決める

　ボタンの配置は操作タイミング・前後関係・作用する項目を意識して整理すると、ユーザーの意識とそろい機能の認識がしやすくなります。例えば、内容の変更を伴わない「印刷」「操作履歴」のような機能は画面上部に、内容の変更に関わる「編集」「削除」などは画面下部に。ブラウザの前後移動を意識し「戻る」は左に。メール項目固有の機能はメールの近くに配置するとよいでしょう。

危険なボタンが分かるようにする

　「削除」など注意が必要なボタンは赤字にします。赤字を認識しにくいユーザーでも分かるようにアイコンもつけるとより効果的です。

今使えないボタンは見せない

　「採用」「合否通知」など、現状のステータスで機能しないボタンは非表示にします。ただし、業務によってはこれから先で必要になる機能が見えていた方がいい場合もあります。ステータスが変わると使えるようになることを伝えたいなら、非活性ボタン（表示はするが押せないボタン）を採用しましょう。

ボタンを押すとできることを正しくラベルで表現する

　「すべての情報を印刷」「この応募者を削除」など、機能の対象を明確化すると、ユーザーが機能をイメージしやすくなります。「メール送信」を「メール作成」というラベルに変更し、ボタンの先でできることとのズレをなくしましょう。いきなりメールが送信されないことがユーザーに伝わり、気軽に機能を使ってもらいやすくなります。

　画面がボタンでいっぱいになってしまった時はこのような視点で整理し、ぐっと使いやすい機能の実現を目指しましょう。

著者紹介：天野謙作（あまのけんさく）

株式会社ベイジのフロントエンドエンジニアとしてWebアプリのUI実装を行う。複数の業務システム開発の経験があり、開発工程だけでなくクライアントの既存システムのユーザビリティ評価にも精通。よく使用するJavaScriptフレームワークはAngularで、ユーザーの使いやすさに配慮したフロントエンド実装を得意とする。