徹底解剖！　SaaSのUI／UX

“アプリUIあるある”な6つのNGアイコン　見積り・経費精算SaaSを例に専門家が解説（2/2 ページ）

公開 2022年06月20日 07時03分

更新 2022年06月23日 13時58分

著者

川村将人

[ITmedia]

印刷する連載新着通知を受け取る Googleで優先するソースとして追加

OK例

アイコンのスタイルを統一する

　アイコンのスタイルが統一できており、見やすく使いやすい印象になりました。スタイルが統一できていると、ユーザーは余計なことに注意を割く必要がなくなるので、システムの利用負荷を減らせます。

　統一したポイントは、以下の3つです

アイコンのサイズを統一
角張ったタイプのアイコンに統一
白抜きアイコンに統一

　ちなみに、アイコンのサイズは全ての箇所で統一すべきとは限りません。「Sサイズは16px、Mサイズは20px」のようにシステム全体でルールを作って使い分けることもあります。

　ブックマークアイコンはON／OFFの機能があるため、塗りつぶしをON、白抜きをOFFで表現しています。

文字モチーフはアイコンと分かる形にする

　見積金額の「i」アイコンに囲みを入れました。こうすると、文章と隣り合っていても文字とアイコンの差が分かりやすくなります。文字アイコンは基本的に使用しないほうがよいですが、例外として挙げられるのは「 i = 情報」や、テキストエディタなどに使われる「B＝太字」「I＝斜体」のアイコンなどです。これらの文字アイコンは、これまでの歴史の中でユニバーサルになっているものなので、例外的に使用できます。

アイコンの意味を文字情報で補記する

　アイコンにラベルやツールチップを追加し、具体的な機能や検索対象を分かるようにしました。

　アイコンだけでは正確な意味は伝わらないことが多いので、文字情報もセットでつけるのが良いでしょう。意味が不明なアイコンを減らしユーザーの不安を解決してあげると、使いやすいシステムに一歩近づきます。

機能をもつアイコンの周りを枠で囲う

　「取引先」の虫眼鏡アイコンが操作部だと示すため、外枠を追加しました。これで、クリックして操作する場所だというのがユーザーに伝わるようになります。

一般的に認知しやすいアイコンを使う

　赤い削除ボタンについているアイコンを、一般的なゴミ箱アイコンに変更しました。これで、アイコンを見て誰でも削除だと分かり、誤認を防げます。

ラベルで意味が分かればアイコンは使わない

　右上の「保存」「複製」ボタンは、すでに文字で機能が説明できており、意味も明確です。ボタンラベルを見れば迷わず操作できます。フロッピーや重なった書類アイコンがあっても、文字だけの場合と受け取る情報はほとんど変わらないので、アイコンは使わないでも良いでしょう。

　例外として、「削除」のように重要なアクションを行うボタンなどは、ユーザーの注意を喚起するために文字とアイコンを併用することをおすすめします。

　アイコンは使いやすい画面を作る上で便利な反面、無作為に使用すると画面の煩雑さや操作のつまづきにつながるリスクもあります。今回紹介したことも踏まえて、効果的なアイコンの使い方を考えてみましょう。

著者紹介：川村将人（かわむらまさひと）

株式会社ベイジのWebアプリ担当ディレクター。B2B SaaSや業務システムの情報設計やプロジェクト管理を行う。過去には日系コンサルティング企業で大規模業務システム構築に関わり、業務コンサルティングを担当。UIデザイン改善では、実際の業務に根ざしたユーザビリティの改善提案を得意とする。

印刷する

SpecialPR

徹底解剖！　SaaSのUI／UX

SaaSにとって、UI／UXは使いやすさを高め、ユーザーの満足度を保つ重要な要素の一つ。しかし、人数も予算も少ないと、UI／UXの分析に回せるリソースが限られるかもしれない。本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジが、SaaSにありがちなUIデザインの問題を実例を交えて解説する。

連載新着通知を受け取る

この連載の記事をもっと見る