徹底解剖！　SaaSのUI／UX

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

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

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

著者

川村将人

[ITmedia]

印刷する連載新着通知を受け取る

連載：徹底解剖！　SaaSのUI／UX

　本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。

　第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。

　アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。

　今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと、効果的な使い方を学んでいきましょう。

NG例

　この見積り編集画面は、すでに作成した見積りの情報を編集・削除するためのものです。取引先や見積日をはじめ、見積りの明細項目を編集できます。複製して別の見積りを作成したり、この見積りをブックマークしておいて後で参照しやすくしたりする機能も備えています。

　この画面の中には、アイコン使用上のルールに反した部分がいくつも存在しています。せっかくのアイコンを活用しきれていない原因はどこにあるか、分かるでしょうか。ポイントは、全部で6つあります。

アイコンのスタイルが統一できていない

　アイコンのスタイルを統一できているかに注目しましょう。ここでいうスタイルとは以下を指します。

アイコンのサイズ
アイコンの丸み、角張り具合
白抜きアイコン、または塗りつぶしアイコン

　左上のブックマークアイコン、日付入力フォームのカレンダーアイコン、画面下部のプラスアイコンなどがありますが、それぞれのスタイルが一致していません。スタイルが統一できておらずバラバラだと見た目に緩急がつかず、情報の重要度も分かりにくくなります。その結果重要なアイコンが目につかなかったり、どこから操作すべきか迷ってしまいスムーズに操作できないことにつながります。

　アイコンのスタイルはアプリケーション全体を通して、特別な事情がない限り統一しましょう。

　ただし、アイコンはON／OFFの状態を塗りつぶし／白抜きで表現することがあります。意図した表現の場合は統一する必要はありません。

文字を単体でアイコンとして使用している

　見積金額の「i」アイコンのように、文字単体のアイコンは通常テキストと見分けがつきにくくなります。基本的に使用を避けたほうが良いでしょう。

アイコンに内容補記がない

　タイトル横や品名の下に、文字の補足がなく単体で使われているアイコンがあります。アイコンをどう解釈するかは人によって異なるので、文字情報で補足しないと誤認する可能性があります。もしスペースの関係などでアイコンを単体で使う場合は、カーソルを合わせたときにツールチップ（注釈）を出し意味を補足するなどの工夫をしましょう。このアイコンを押すと何が起こるのか、ユーザーに伝えられるとより親切です。

操作できるかどうかが分からない

　「取引先」の項目に虫眼鏡アイコンを置いていますが、アイコンだけではクリックして使う操作部なのか、何かの補足情報としてのアイコンなのかが分かりません。

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

　赤い削除ボタンに使われているアイコンは、紙が破れたような不思議なモチーフです。文書の破棄をイメージしてのアイコンでしょうが、一般的なシステムにおける削除のシーンでこのようなアイコンは見かけません。アイコンのモチーフは一般的によく使われており類推しやすい、ユニバーサルなものを使用しましょう。

不要な箇所でアイコンを使用している

　アイコンは情報を補うことができてこそ効果を発揮します。

　文字を見れば意味が明確に分かる箇所の場合では、わざわざアイコンを使うと情報過多になりユーザーの直感的な操作を妨げてしまいます。伝わりやすさが変わらない場合は、無理にアイコンを付けて情報を増やすのは避けましょう。

　これら6つの問題点を改善した例が、次の図です。

次ページへこのUIの正解は？　OK例をチェック

印刷する

SpecialPR

徹底解剖！　SaaSのUI／UX

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

連載新着通知を受け取る

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