今どきのSaaSのUIを操作した後に自社の業務システムのUIを見て、「昔ながらのデザインだな」と感じることはありませんか。かつては「業務システムには洗練されたUIは不要」という考えが主流だったため、歴史の長い業務システムのUIやUXがいまいちであっても仕方ない面があります。
しかし、技術の進歩に伴い、UIやUXに対する考え方はどんどん発展しています。現在は、業務システムであってもUIやUXを重視することで様々なメリットがあることがわかってきました。
そこで、この記事では”レガシーな”UIをどのようにモダンなUIにアップデートしていくか、i3DESIGNデザイナーの実体験をもとにリニューアルの手順や注意点を紹介します。
レガシーなUIのままだとどんな問題があるのか
生成AIの登場により、デジタルとリアルの融合はますます進んでいます。このような環境において、プロダクトをレガシーなUIのまま放置することは、企業にとって深刻な課題をもたらす可能性があります。
デジタルネイティブ世代の台頭に伴う市場との乖離
デジタルネイティブ世代（現在の20代前後）は、10代の頃からスマートフォンなどの直感的な操作に慣れ親しんでいます。そのため、複雑な操作が必要であったり、メンタルモデルに反した挙動をしたり、といったレガシーなUIに対しては違和感や使いづらさを感じやすいでしょう。
このような若い世代が抱く違和感や使いづらさを放置しておくことは、短期的にも長期的にもリスクとなります。
- 短期的なリスク
自社の若手社員がレガシーなUIに対して違和感を抱いていると、プロダクトに対する自信を持ちづらくなります。機能面では優れているとわかっていても、内心で「自分だったらこの製品は使わないな」と感じていては自社に対する愛着や誇りを持つことはできません。
この自信のなさが、モチベーションの低下や業務効率の低下につながる可能性があります。
- 長期的なリスク
現在のデジタルネイティブ世代は、10〜20年後には30〜40代となり、社内で発言力を持つ存在になっていきます。今の市場でシェアが取れている製品であっても、操作感やユーザー体験を重視するデジタルネイティブ世代が顧客企業の意思決定者となったタイミングで、他社の製品に切り替えられてしまうかもしれません。
また、プロダクトのレガシーなUIを放置していることで、企業としてUI/UXに投資をしない方針であると見なされます。そのような印象を持たれてしまうと、先進的な企業と見なされにくくなり、人材採用やIRにもネガティブな影響があるでしょう。
管理・運用コストの増大
レガシーUIを維持し続けることは、ユーザー体験の問題だけでなく、運用面でも大きなデメリットをもたらします。
- 保守・更新の困難さ
- 長年にわたって積み重ねられた古いコードベースやデザインパターンは、新たな機能追加や修正を行う際の障壁となります。デザインシステムやガイドラインが整備されていない場合、UI要素の一貫性が失われ、変更の影響範囲の予測が難しくなります。この結果、単純な修正作業でも予想外の不具合が発生するリスクが高まります。
- 運用コストの増大
- レガシーUIを維持することは、隠れたコストを抱え続けることでもあります。例えば、古い技術スタックへの対応のための特殊な知識を持つ人材の確保、ブラウザの新バージョンへの対応、セキュリティ脆弱性への対処などが挙げられます。また、直感的でないUIによってユーザーサポートへの問い合わせが増加し、サポートコストの上昇につながります。
- ドキュメント不足と知識の属人化
- レガシーなUIは、設計当初の意図や背景が十分に文書化されていないことが多く、プロダクトに関する知識がベテラン社員など特定の人物に依存する傾向があります。このような属人化は、人材の流動時にナレッジが失われるリスクを高め、長期的なシステム安定性を脅かします。
これらの運用面の問題は時間とともに複雑化し、最終的には「技術的な負債」として蓄積されていきます。その結果、サービスの維持が難しくなり、最悪の場合はプロダクトを自社の製品ラインナップから外さなくてはならない事態につながっていくかもしれません。
UIリニューアルの進め方
UIのリニューアルは、歴史の長いプロダクトであるほど難易度が高くなります。既存のUIに慣れているユーザーや開発者側は現状を変えることに対し前向きではない場合が多いでしょう。現状を放置することによるリスクとリニューアルの必要性をしっかりと社内に伝えていく必要があります。
UIのリニューアルは、大きく以下の3つのフェーズに分けて進めていくのがおすすめです。
フェーズ1：現状の問題点を可視化する
フェーズ1では、現状のUIにどのような課題があるかを分析し、社内にリニューアルの必要性を浸透させていくことに注力します。
具体的な手段としては、以下のような方法が考えられます。
- ユーザーインタビュー
ユーザーのリアルな意見は大きなインパクトを持ちます。このとき、既存のユーザーにインタビューをすると問題点が出てきづらいため、競合プロダクトを使っているユーザーや、まだプロダクトを利用したことがない若年層を対象にすると良いでしょう。（将来的にはユーザーになると考えられる層だとベターです）
- エキスパートレビュー
UIデザインの専門家に、現状のプロダクトの課題の分析を依頼します。ユーザーインタビューよりも被験者を探す費用や時間がかからないため、迅速に実施することができます。また、専門家に依頼することで、課題の優先度や改善方法まで具体的なアドバイスをもらえるのもメリットです。
エキスパートレビューについてはこちらの記事も参考にしてみてください。🔽
エキスパートレビューとは？意味や観点、ヒューリスティック分析・ユーザビリティテストとの違いを解説
フェーズ2：理想の姿を具体化する
フェーズ2は、現在のプロダクトからいったん離れ、理想のUI/UXを追求してみます。現実的な制約を度外視して理想の姿を具体化することで、リニューアルによってプロダクトがどれぐらい魅力的になるのかを実体験として感じてもらうのが目的です。
実施にあたっては、特定の機能に関する操作フローに限定し、プロトタイプを作成します。このフェーズでのプロトタイプはFigma等のデザインツールを利用するビジュアルプロトタイプか、簡易的な開発まで行うテクニカルプロトタイプが適しています。
各プロトタイプの違いについては以下の記事で紹介しています🔽
最小限の機能で最大の価値を生み出す：MVP開発でのプロトタイプ作成のポイント
プロトタイプの作成後は、社内のステークホルダーに操作してもらうだけでなく、フェーズ1と同様にユーザーインタビューを実施して客観的な評価をもらうのも効果的です。
フェーズ3：実際のリニューアルの内容・範囲を検討する
フェーズ1,2を通じてリニューアルの重要性が社内に十分に伝わったら、いよいよ具体的な内容・範囲を検討し、計画を立てていきます。
リニューアルの規模が大きければ大きいほど、ユーザーへの配慮が必要になります。リニューアルにかけられる期間・金額・体制、スピード感などを現実的に考慮し、現状と理想の間の落とし所を決めていきましょう。
当然、社内のステークホルダーが多い分、時間がかかることが予想されますが、フェーズ1,2を通じてリニューアルの必要性がしっかりと共有されていれば、着実に進んでいくはずです。
改修したい箇所が多岐にわたる場合、一度のリニューアルですべてを対象とするのではなく、段階的に行うことでリスクを分散させることができます。
レガシーなUIをリニューアルするときの注意点
UIリニューアルを成功に導くためには、以下の点に特に注意を払う必要があります。
段階的に進める
ユーザーが多いプロダクトほど、リニューアルの影響は大きくなります。現在のUIに慣れているユーザーにとっては、たとえ良い変化であっても「変化」そのものがネガティブに捉えられることもあるでしょう。
ネガティブな反応はある程度は避けられないものではありますが、段階的にリニューアルを進めることで、ユーザーに対してプロダクトの方針を示し、「変化すること」に慣れてもらうことができます。また、社内においても、ユーザーからの問い合わせに対する回答のテンプレート化など、対応プロセスをブラッシュアップしていけるメリットもあります。
段階の切り分け方は、以下の要素を踏まえて考えると良いでしょう。
- 機能としての重要度（影響を与えるユーザーの数）
- 技術的な難易度、かかる時間
- リニューアル前後の変化量
効果測定の方法を決めておく
UIリニューアルを実施する目的は、現状のUIを維持することによる潜在的なリスクを低減し、プロダクトの競争力を高めていくことです。その目的が達成できたかどうかを測定するための手法をあらかじめ決めておきましょう。
効果測定は短期的な指標だけでなく、中長期的な視点も含めて多角的に行うことが重要です。具体的には、以下のような指標が考えられます。
- 定量的な評価
- 操作時間：特定のタスク完了までにかかる平均時間を計測し、リニューアル前後で比較する
- エラー率：ユーザーが操作中に発生するエラーの頻度を追跡し、改善しているかを確認する
- ユーザー満足度：アンケート調査やNPS（Net Promoter Score）などの指標を用いて、定期的に満足度を測定する
- 間接的な評価
- 従業員満足度：社内ユーザーを対象としたアンケートやインタビューを実施し、自社プロダクトに関する愛着や満足度の変化を追跡する
- 研修効率：新入社員がプロダクトの操作を習得するまでにかかる平均時間を計測し、教育コストの変化を評価する
- サポート問い合わせ数：UIに関する問い合わせ件数の変化を追跡し、ユーザーの自己解決率が向上しているかを確認する
- 長期的な価値の評価
- 保守性・拡張性：開発者からコードの可読性や機能追加の容易さに関するフィードバックを収集し、技術的負債の削減効果を評価する
- ブランドイメージ：顧客や市場からの評判、SNSでの言及内容などを分析し、企業イメージへの影響を追跡する
- 競合優位性：業界内での位置づけや、競合製品と比較した際の優位点がリニューアルによってどう変化したかを評価する
社内にリニューアルのノウハウを蓄積する
リニューアルプロジェクトの進捗や成果は、社内で積極的に共有しましょう。体系的に知見を蓄積し共有することで、組織全体のデザイン力向上につながります。また、将来的に技術革新が進んだ場合に、再びレガシーなUIになってしまう事態の防止にも役立ちます。
ノウハウ蓄積により、具体的に以下のような効果が期待できます。
- 知見の体系的蓄積
- リニューアルの過程で得られた発見や解決策を文書化することで、組織の知的資産として残せます。特に成功事例だけでなく、試行錯誤の過程や断念した選択肢についても記録しておくと貴重な参考資料になります。
- 設計意図の文書化
- デザインの設計思想や意思決定の背景を明確に文書化することで、暗黙知の属人化を防ぎます。これにより、レガシーUIが生まれる主要因（「なぜそのデザインになったのか誰も分からない」状態）を根本から解消できます。
- 継続的改善の基盤構築
- 設計プロセスや標準、ガイドラインを整備することで、小規模・頻繁なアップデートが可能な環境を整えられます。これにより、大規模リニューアルの必要性自体を減らすことができます。
- 組織全体への波及効果
- こうした活動は他部門にも刺激を与え、全社的なデザイン最適化の機運を高めます。複数の部門が同じデザイン原則に基づいて製品開発を行うことで、ユーザー体験の一貫性も向上します。
たとえ今すぐに目に見える変化につながらなくても、このようなプロセスの共有と知見の蓄積は、組織のデザイン文化を構築する上で不可欠な投資です。将来的に同様のプロジェクトが発足した際には、今回のリニューアルで構築した知見やプロセスが強力な基盤となるでしょう。
まとめ
レガシーUIのリニューアルは、単なる見た目の刷新ではなく、企業の競争力強化と業務効率化のための重要な投資です。本記事で紹介した手順や注意点を参考に、自社のシステムに合わせた最適なリニューアル計画を立てていただければ幸いです。
ユーザー体験の向上は、従業員満足度の向上だけでなく、企業の長期的な成長にも貢献します。今後のデジタル化がさらに進む中で、UIリニューアルの重要性は一層高まっていくことでしょう。
アイスリーデザインではロジカルで納得感のある設計を意識し、モバイルアプリ、SaaSプロダクト、業務アプリケーションやECサイトなど幅広いプロダクトのUI/UXデザインを提供しています。
既存プロダクトのデザイン改修を、まずは現状把握から始めたいという方もお気軽にお問い合わせください。ユーザーインタビューやエキスパートレビューなど、プロジェクトに応じた最適な手法をご提案させていただきます。
i3DESIGNで実施した過去のリニューアルプロジェクトでは、このフェーズで2つのプロトタイプを作成したケースがあります。業務システムの、とある機能を設定する操作フローを対象としたプロトタイプに対し、以下のように変化の度合いが異なる2つのバリエーションを用意しました。
変化の幅がある2種類のプロトタイプを作成することで、どれほどドラスティックな変化を求めるかを議論しやすくなり、次のフェーズでリニューアルの内容や範囲を検討しやすくなります。