---

---

近年、SaaSプロダクトにおいてもUIデザインが重要視されています。

SaaSが増加した結果、機能に優れたSaaSがあっても、UIデザインが優れていないと顧客満足度が下がり、ユーザー離れが進むようになっているからです。

本記事では、SaaSプロダクトにおけるUIデザインの考え方やポイントについて解説します。

SaaSプロダクトにおいてUIデザインが重要な理由

UI（＝ユーザーインターフェース）とはユーザーとプロダクトの接点を指します。そのUIをより向上させるためのデザインがUIデザイン。優れたUIデザインはユーザーがプロダクトを使用する体験（＝UX）を向上させることにつながります。

UI UXは、特にtoC向けのサービス・プロダクトにおいて重要とされてきましたが、昨今ではtoB向けが多いSaaSでも重要とされてきています。

SaaSにおいて、なぜUIデザインが重要なのか、その理由を見ていきましょう。

顧客満足度向上によるLTVの向上

優れたUIデザインによって、ユーザーがストレスなくSaaSを使えることはUXの向上に貢献し、結果的に顧客満足度の向上につながります。

SaaSの継続利用において、顧客満足度は非常に重要な要素です。顧客満足度が上がれば、継続利用のみではなく、アップグレードやアップセルなど、さらなるSaaSの活用・投資にもつながります。一方で、顧客満足度が低ければ解約率が上昇してしまうでしょう。

LTV（顧客生涯価値）の向上は、いかにユーザーに継続利用してもらい、アップセルで単価を高くできるかにかかっています。LTVにおいて重要な指標である顧客満足度の向上に向けて、UIデザインは継続的に改善していきましょう。

SaaSプロダクトの運用コストの削減

ユーザーがSaaSを利用する上で、「使い方が分からない」など疑問や不明点が生じることがあります。そのため、導入時のトレーニングやカスタマーセンターの設置など、ユーザーがスムーズに利用するための仕組みを作っている会社も多いでしょう。

優れたUIデザインによってユーザーがスムーズに利用できれば、疑問点を減らし、自ら学習して解決できる環境を整えてくれます。

その結果、導入トレーニングの時間短縮、カスタマーセンターへの問い合わせの削減など、SaaSを運用する上での労力やコストを削減できるようになります。

プロダクトの拡張や改修の効率化

一貫性のあるUIデザインを実現できていれば、プロダクトの拡張や改修する際の作業工程を効率化できます。

特に、デザインシステムを構築しているかどうかは重要です。デザインシステムによって、ボタン・アイコン・フォントなどSaaSを構成する要素が一貫して整理されていれば、プロダクト拡張や改修に関わるデザイン業務の労力を減らせます。

SaaSプロダクトにおけるUIデザイン設計のポイント

ここからは、SaaSのUIデザインを設計する上でどのようなことを意識するべきかを解説していきます。

自社のUIデザインを評価する上でもぜひ参考にしてください。

ユーザーを理解し、ユーザー視点での設計

UIデザインは、「特定のユーザー」に対して、使いやすいことが重要です。例えば、経理部門が使うSaaSであれば、経理担当にとって、建築業界が使うSaaSであれば、現場の人にとって使いやすい設計であれば良いということです。

SaaSの機能の中で、どの機能をどの順序で、どのくらいの頻度で使うのかが分かると、その頻度や導線に合った設計ができるようになります。

そのため、まずは、自社のSaaSのユーザーへの理解を深めていきましょう。業務フローや利用シーンをイメージできる程度に理解していくことが重要です。その上で、ユーザー視点で使いやすい設計を目指していきましょう。

デザインシステムの構築

SaaSのUIにおいて、デザインの一貫性は非常に重要です。SaaS内で、ボタン、メニュー、バーなどWebサイトを構成するパーツのデザインがバラバラだと、ユーザーの混乱を招く恐れがあります。

この一貫性を保つためにはデザインシステムの構築が有効です。デザインシステムとは、プロダクトをより良いものとするためのルールやツールを連携した形でまとめたものを指します。

前章でも解説したように、SaaSは拡張や改修を繰り返すことでより良くしていくプロダクトです。デザインシステムを活用することで、誰が作業しても一貫したデザインにすることができるだけでなく、その後の拡張や改修にかかる工数も削減できます。

デザインシステムについてより詳しく知りたい方はこちらもご覧ください。

初心者でも直感的に使える設計

SaaSは、多くの人が使うツールですが、その中には、まだ操作したことのない初心者の方もいます。

そのようなユーザーでも直感的に使える設計にしておくことで、導入にかかるトレーニングなどのコストを削減できますし、ストレスなく使えることで顧客満足度も向上するでしょう。

分かりやすいアイコンのデザインや、シンプルなメニュー設計など、ユーザーの混乱を防ぎ、目的の機能や操作までシンプルに到達できる設計がポイントとなります。さらに、フォントサイズや背景色とのコントラストなど、長時間使う上で疲れにくい視覚情報の整備もしておきましょう。

また、ユーザーの操作に対して適切なフィードバックを返す設計も初心者にとっては重要です。例えば、保存ボタンを押した際に「保存しました」などの通知がないと、本当に保存できたのかという不安を抱く恐れがあります。

そのようなことがないように、ユーザーの行動に対して、適切なフィードバックが返ってくるように設計すると良いです。

UIデザインにおけるアイコンについて、さらに詳しく知りたい方はこちらもご覧ください。

ユーザーが学習できる環境

ユーザーがSaaSについて疑問や不明点が生じた際に、その都度カスタマーセンターに問い合わせするのは、ユーザーにとってもストレスですし、カスタマーセンターの運用コストの増加にもつながります。

そのため、ユーザーが自立して学習できる環境を整えておくことも、SaaSの設計をする上で重要です。

例えば、FAQの設置やヘルプ機能を充実させることは代表的な施策といえます。また、AIのチャットボット機能を活用して、ユーザーが疑問点や不明点に対して即時に回答を得られる仕組みを作ることも有効です。

デバイスや役割ごとに最適化された設計

SaaSは役割によって利用する機能や管理権限が異なることが多々あります。その際に、自分の役割で利用する機能のみが表示・操作できる状態になっていることも優れたUIデザインのポイントといえるでしょう。

不要な機能や表示をなくすことで、ユーザーの混乱を防ぎ、よりシンプルで使いやすくなるからです。

同様の理由で、デバイスによって表示するアイコンやメニューを変えておくことも重要です。

例えば、営業部署向けのSaaSの場合、外出先のスマホでは顧客情報や営業履歴の閲覧、会社に戻ってPCで使うときはデータの管理や日報の入力といったように、状況によって利用する機能が異なることがあります。

ユーザーの業務フローや利用するシーンを理解して、デバイスごとに合った設計を行っていきましょう。

シンプルさを保ったカスタマイズの余地

SaaSは、既存のプロダクトをそのまま使うユーザーもいれば、自社に合ったカスタマイズを求めるユーザーもいます。ユーザーごとの個別の要望に応えることで、顧客満足度の向上や顧客単価のアップにつながるため、こうした余地は残しておくべきです。

しかし、カスタマイズした結果、複雑なUIデザイン設計になってしまうと利便性が失われてしまいます。熟練者や一定の役割しか利用しないカスタマイズ機能は、メニューの奥の階層に設置するなど、あくまで誰もが使えるシンプルさを保ったまま、カスタマイズするようにしましょう。

SaaSプロダクトのUIデザイン改善の進め方

ここでは、SaaSのUIデザイン改善はどのように進めていくのか、ステップごとに解説していきます。

1.現状評価と課題把握

まずは、SaaSの現状評価を行い、課題を把握しましょう。

社内の開発チームによる評価だけでなく、アンケート調査などのユーザーからの声や、ヒューリスティック分析による専門家の評価を知ることも重要です。さまざまな視点から現状評価を行い、課題を抽出しておきましょう。

UXに関するリサーチやヒューリスティック分析について詳しく知りたい方はこちらもご覧ください。

2.ペルソナ策定・市場調査

実際に施策の実行やデザイン設計をする前に、ペルソナの策定と市場調査を進めます。

ペルソナ策定は自社のSaaSのユーザー像を明確にする上で必要な工程です。すでに策定している場合でも、変更がないか見直しておきましょう。サービスの使い方や業務フローに変化が起きているかどうかも確認しておくとよいです。

また、市場調査でUIデザインの傾向をつかむことは課題解決に必要な施策やデザインを考える上で有効です。例えば、AIによるチャットボット機能は、昨今、多くの企業が取り入れており、説明がなくとも利用できるユーザーが増えています。自社のサービスに取り入れてもユーザーの抵抗感はないため、有効な解決策の一つとなるでしょう。

これらを行った上で、課題解決の優先順位や施策・デザインの方向性を決めていきます。

ペルソナについて詳しく知りたい方はこちらもご覧ください。

3.プロトタイプ作成

改善の方向性が決まったらプロトタイプを作成していきます。

SaaSはデザインだけではなく機能の利便性も重要なため、ワイヤーフレームではなくプロトタイプを作成することが望ましいです。

プロトタイプについて詳しく知りたい方はこちらもご覧ください。

4.テストと評価

プロトタイプを作成したら、テストを行い、課題が解決できているかを評価をします。

ユーザビリティテストなど、自社メンバー以外の声を聞くことも有効です。テストで抽出された課題を改善して、実装していきます。

ユーザビリティテストについて、詳しく知りたい方はこちらもご覧ください。

5.改善サイクルの構築

SaaSは、定期的に改善していくことが重要です。ユーザーの業務フローやタスクに必要な機能は変化していきますし、UIデザインの流行も変化があるためです。

その時々に合ったUIデザインを設計できるよう、定期的にユーザー調査やヒューリスティック分析などの評価をして改善していくサイクルを構築しておきましょう。

SaaSプロダクトのUI改善を実施した事例

弊社ニジボックスでもSaaSのUI改善をサポートした事例があります。どのようなステップで改善していったのか、実際の事例も参考にしてください。

株式会社ユーフォリア：スポーツ選手のコンディション管理ソフト 「ONE TAP SPORTS」デザインプロトタイプ制作支援

クライアント課題

株式会社ユーフォリア様（以下、ユーフォリア様）は、スポーツ選手のコンディション管理サービス「ONE TAP SPORTS」の新たな展開を計画されていました。今後の事業展開を見越しユーザー層を拡大すべく、より手軽にサービスを使ってもらうための施策をご検討されていました。

1.課題整理と要件定義

まず、ターゲットユーザーの本サービスを使う上での課題を、ユーフォリア様と議論を重ねながら整理し、その課題をどのように解決していくのかについて検討いたしました。

議論の中で、特に新規のユーザー層に本サービスを使ってもらうため、選手側の「入力のしやすさ」とスタッフ側の「サービスの使いやすさ」を向上させることを本プロジェクトの目的として設定しました。

目的を達成するため、新しく追加する機能やUIを作成する上でのコンセプトなどを固めていきました。

2.プロトタイプ作成

プロトタイプを作成するにあたり、ユーフォリア様は社内にデザイナーを配置されていないことから、これまで提供してきたサービスのUIは、ユーザーにとって使いにくいものになっているのではないかという点を課題に感じておられました。

今回のプロジェクトではFigmaというプロトタイプ制作ツールを使用し、リアルタイムでデザインの制作状況を可視化し、常に進行状況の共有やフィードバックができるようにしました。

これによりコミュニケーションのスピードが加速し、最短のUI制作期間でプロトタイプを完成させることができました。

また、ツールによって簡易的に動くものを作成し、画面の挙動など細かい部分についても同時に検討することで、実現性の高いプロトタイプを目指しました。

成果：ONE TEAMでのデザイン制作

ニジボックスはクライアントと1つのチームとして、プロダクトに対する思いを共有しながら制作を進めていくことを常に心がけております。

今回ご相談いただいたユーフォリア様は、スタートアップ企業ならではのスピード感のある制作を求められておりました。

時間に制約がある中で、両社が納得のいくプロダクトを制作するために、お互いに考えていることや意見は些細なことでも共有し、目線をそろえていくことを第一に考えながら進行いたしました。

何度も打ち合わせを重ねる中で、率直な意見交換を意識し続けた結果、チームとしてスピード感のある意思決定を行える関係性を構築することができました。

また、ユーフォリア様からサービスのユーザー像について詳しく伺い、行動を可視化するジャーニーマップの作成や、アウトプットのUIをブラッシュアップさせていただきました。このことで、「制作者だけではなく、ユーザーにとっても使いやすいサービス」ということを常に意識しながらのプロジェクト進行を実現し、約3カ月のプロジェクト期間を経て、無事にプロトタイプが完成しました。

引用：株式会社ユーフォリア　スポーツ選手のコンディション管理ソフト 「ONE TAP SPORTS」デザインプロトタイプ制作支援｜株式会社ニジボックス

まとめ

今回は、SaaSプロダクトにおけるUI改善の重要性や改善のポイントを解説してきました。

SaaSにとってのUIデザインは、LTVの向上や解約率にも大きく影響し、事業売り上げや利益にも関係する重要なポイントです。まずは、自社のSaaSのUIデザインがどうなっているのか評価し見直しをすることからぜひ始めてみてください。

ニジボックスでも、SaaSのUI改善や評価のサポートを行っています。UIデザインは自社内だけでは気づきにくいところもあるため、第三者からの声を取り入れることが重要です。

評価・改善・テスト・実装のプロセスで必要なフェーズに応じたサポートが可能です。自社だけでは難しいというプロセスがあれば、以下フォームより、ぜひご相談ください。

また、ニジボックスのUX UIデザインのご支援事例の一端や、ニジボックスがクライアント課題に伴走する中で磨き上げてきたUXデザインのプロセスを資料として紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください。