見える化エンジンの大規模リニューアル

見える化エンジンの

大規模リニューアル

見える化

エンジンの

大規模

リニューアル

見える化エンジンは、顧客の声を社内に届けるためのプラットフォームです。

多様なデータソースを取得し、専門的な分析や情報共有を通じて、

全社的に「顧客体験フィードバック」を提供します。

見える化エンジンは、顧客の声を社内に

届けるためのプラットフォームです。

多様なデータソースを取得し、

専門的な分析や情報共有を通じて、

全社的に「顧客体験フィードバック」

を提供します。

User Menu

User Menu

User Menu

Navigation

Navigation

Navigation

私の役割

2022年8月から2023年12月にかけて、見える化エンジンのUI/UXデザインを全面的にリニューアルし、デザインシステムを構築しました。

これにより、より直感的で使いやすいインターフェースを実現し、誰もがスムーズに利用できる

優れたユーザー体験を提供しています。


長年多くのユーザーに利用されてきたプロダクトの進化に、自分のデザインで貢献できたことは、私にとって大きな喜びです。

ブランドの新たな顔を形づくるこのプロジェクトに携われたことを、非常に貴重な経験となりました。

2022年8月から2023年12月にかけて、見える化エンジンのUI/UXデザインを全面的にリニューアルし、デザインシステムを構築しました。

これにより、より直感的で使いやすいインターフェースを実現し、誰もがスムーズに利用できる優れたユーザー体験を提供しています。


長年多くのユーザーに利用されてきたプロダクトの進化に、自分のデザインで貢献できたことは、私にとって大きな喜びです。

ブランドの新たな顔を形づくるこのプロジェクトに携われたことを、非常に貴重な経験となりました。

刷新の目標

当初、単なるUIの刷新という要望を受けましたが、実際にシステムを操作し、深く調査する中で、表面的な見た目だけを変えるのでは不十分だと感じました。

システムの実際の動きや構造を深く理解する中で、もっと根本的な改善ができることに気づきました。

そこで、私は単純なUI変更ではなく、コア機能を維持しつつ、ユーザーに寄り添ったソリューションに改造する必要があると考えました。
そのために、システムを何度も操作し、動きを深く理解し、時間をかけて学びました。
新しいデザインでは、ユーザーがより自然に、スムーズに操作できる体験を目指しました。

高いレベルの目標

直感的なインターフェースを通じて、ユーザーが素早く必要な情報を見つけられるようにし、不要なクリックや操作ステップを削減する。

ユーザーの業務効率向上

既存の操作ロジックとの互換性を確保し、既存ユーザーの適応コストを低減する

一貫性のある操作ロジックの確立

一貫したデザイン言語やビジュアルスタイルを通じて、ブランドの認識度を向上させる。

ブランドイメージの強化

ME

それでは、これらの目標をどのように実現したのか?

高いレベルの目標を実現するために、私はいくつかの問いを立てました。

  1. ターゲットユーザーは誰か?

  2. ゼロからデザインを始めるには、何をすべきか?

  3. 良いリデザインとはどのようなものか?

これらの問いを明確にするため、私はユーザー視点に立ち返って深く考察し、それぞれの側面を詳細に分解しながら解決策を見出していきました。

今回は、主に見える化エンジンのメイン画面に関する改造プロセスについて説明します。

デザインプロセス

デザインプロセス

ターゲットユーザー像

刷新を行うにあたり、新しいデザインのニーズや重要なポイントを明確化するため、ターゲットユーザーを以下の3つの特徴で想定しています。

・既存ユーザー

・新規ユーザー

・幅広い年齢層(20代~60代)

・既存ユーザー

・新規ユーザー

・幅広い年齢層(20代~60代)

これらのターゲットユーザーを考慮すると、既存ユーザーが慣れ親しんだ操作性を維持しながら、新規ユーザーにとっても直感的に使いやすいデザインを実現することが重要になります。

そこで、以下の2つの視点から刷新ポイントを洗い出しました。

01

01

Point

操作性の向上

01

既存ユーザー、新規ユーザーともに、

直感的かつスムーズな操作を可能にする。

操作フローをシンプルに設計し、

すぐに使い始められるようにする。

視認性の向上

02

デザインスタイルやUIコンポーネントの

作成において、アクセシビリティ(視認性/

可読性)に配慮する。

幅広い年齢層が快適に利用できる

視覚デザインを実現する。

ユーザージャーニーマップ

ターゲットユーザー像は設定していましたが、旧バージョンに関する問題点や改善要望がほとんど届いていない状況でした。そのため、いきなり大規模なユーザビリティテストを実施するのは現実的ではないと判断しました。

そこで、私は解決策として、デザイナーであると同時に「見える化エンジン」を初めて操作するユーザーとして、実際のマニュアル操作や操作トレーニングを行いました。


その結果、ユーザージャーニーマップを作成し、現在のソリューションにおけるユーザー体験の課題を深く掘り下げていきました。

02

02

フェーズ

状況

課題

思考/

感情曲線

新しいプロジェクトの

追加方法を知りたかった

追加したプロジェクトが

表示された

全てのプロジェクトが

直感的に見えた

スムーズに次の画面へ

遷移できた

メイン画面を開く

無事にプロジェクトを

追加

複数のプロジェクトを

追加

見える化メニューを

開く

ボタンが多すぎて、プロジェクトを追加する方法が全然わからない。

文字が小さく、カラーも薄いため、読みづらい。

操作の流れや動線が不明確。

新しく追加したプロジェクトがはっきり見える。

編集や削除などの操作が分かりやすい。

プロジェクトの情報が明確に把握できる。

簡単にプロジェクトの位置を移動できない。

該当のプロジェクトを検索できない。

単にプロジェクトを見るだけでは、それをクリックして開けるという認識がない。

ヒントやホバー表示が必要。

各操作ボタンが

シンプルで直感的

周りの同僚に聞いてみた

マニュアルを閲覧

素早くプロジェクトの

ソートを変更したかった

プロジェクトが多い時に、

該当の項目を検索できなかった

考えずにそのまま画面

を開いた

仕方なく適当にボタンを

クリックしてみた

プロジェクトに関する

情報がわかりやすかった

プロジェクトの順番を

変更するのが難しかった

どのボタンをクリックすれば

いいのか全くわからなかった

ユーザージャーニーマップから見ると、問題は主に2つのブロックに集中していました。


まず、ボタンの数が多く、動線が不明瞭であるため、ユーザーが目標とする操作に素早くたどり着けないという点です。

また、既に追加されたプロジェクトにおける細かな操作性への配慮が不足していました。


次に、全体的に視認性が低いという点です。

課題と改善ニーズの整理

ユーザージャーニーマップの分析により、以下のような課題が整理しました。

03

ホーム画面のメニュー階層が不明瞭

1階層目・2階層目・3階層目のボタンの

導線がわかりにくて、直感的に操作しづらいです。

不要な機能を削除

特に、使用頻度が低く、余計な操作を増やす原因となっていたメニューの折りたたむ機能を廃止します。

ボタンの配置が混在

コア機能のボタン、操作ボタン、設定ボタンなどが配置が不明確で、機能グループごとのまとまりがありません。

視認性の低さ

全体的に文字やボタンが過小、可読性や操作性に影響を与えています。

左側のフォルダツリーの操作性問題

操作ボタンの配置や役割が不明瞭で、目的の機能を素早く見つけにくいです。

PROBLEM

刷新前の問題

Before

したがって、刷新する際には以下のニーズを考慮する必要があります。

主要機能を視覚的に優先表示

主要機能を視覚的に優先表示

ボタンの配置が整理する

ボタンの配置が整理する

コア機能の強調とボタン配置の最適化

コア機能の強調とボタン配置の最適化

1

ユーザーが迷わない直感的なナビゲーション

ユーザーが迷わない直感的なナビゲーション

コンテンツ/機能単位で明確な区分け

コンテンツ/機能単位で明確な区分け

機能ごとの明確な設計

機能ごとの明確な設計

2

優先順位を明確

優先順位を明確

重要度や使用頻度の低い機能は収納されている

重要度や使用頻度の低い機能は収納されている

2

3

UIの一貫性維持

UIの一貫性維持

会社の他ソリューションデザインシステムの一貫性を損なわないよう

会社の他ソリューションデザインシステムの一貫性を

損なわないよう

4

04

04

04

UIUX刷新の詳細

そのため、新デザインを通じて旧バージョンの課題点やユーザーの潜在的なニーズを解決し、直感的で操作しやすいデザインによって、

ユーザーに優れた体験を提供しました。

そのため、新デザインを通じて旧バージョンの課題点やユーザーの潜在的なニーズを解決し、直感的で操作しやすいデザインによって、ユーザーに優れた体験を提供しました。

After

ロゴカラーをプライマリーコンポーネントカラーとして使用する。

機能により、「プロジェクトを作成」「プロジェクト一覧」「各種情報」に明確に分ける。

ユーザー情報とナビゲーションを統一して整理する。

After

ロゴカラーをプライマリーコンポーネントカラーとして使用する。

機能により、「プロジェクトを作成」「プロジェクト一覧」「各種情報」に明確に分ける。

ユーザー情報とナビゲーションを統一して整理する。

After

ロゴカラーをプライマリーコンポーネントカラーとして使用する。

機能により、「プロジェクトを作成」「プロジェクト一覧」「各種情報」に明確に分ける。

ユーザー情報とナビゲーションを統一して整理する。

「フォルダ名で検索」を追加し、フォルダ数が多い場合でも検索できるようにする。

「フォルダ名で検索」を追加し、フォルダ数が多い場合でも検索できるようにする。

操作ボタンを上部にて移動して整理する。

操作ボタンを上部にて移動して整理する。

「フォルダツリー」を折りたためようにする。

「フォルダツリー」を折りたためようにする。

プロジェクトをドラッグ&ドロップできる。

プロジェクトをドラッグ&ドロップできる。

「プロジェクトを作成」はデータ取得と分析ができる機能をまとめる。

「プロジェクトを作成」はデータ取得と分析ができる機能をまとめる。

「各種情報」はプロジェクト自体と関係ない情報や設定などをまとめる。

「各種情報」はプロジェクト自体と関係ない情報や設定などをまとめる。

「プロジェクト一覧」は作成済みファイルをこちらで並んで整理できる。

「プロジェクト一覧」は作成済みファイルをこちらで並んで整理できる。

テーブルの下に

ページャーを追加する。

テーブルの下に

ページャーを追加する。

検索ボックスを追加し、

プロジェクト数が多い場合でも検索できるようにする。

検索ボックスを追加し、

プロジェクト数が多い場合でも検索できるようにする。

デザインフィードバック

操作フローの明確化により、新規ユーザーでも初回ログイン時から3分以内に目的操作(プロジェクトを作成)に到達できる設計を実現しました。

これにより、利用中の迷いを防ぐ構造となり、結果としてサポートへの依存度を下げ、業務効率の向上に貢献すると考えています。

既存画面の遷移数と比較した社内検証では、ユーザーが目的の情報に到達するまでのステップ数が平均で約30%削減されたと試算しています。

※現時点では、大規模なユーザー調査やログ分析は実施できておりませんが、この削減は操作ステップの構造改善に基づいた定性的な推定です。

05

05

06

06

既存ユーザーからの評判

シンプルでわかりやすくなりました。

シンプルでわかりやすくなりました。

UI・デザインがリニューアルされていて、驚きました。

デザインもシンプルでかわいらしい雰囲気になり素敵ですね。

UI・デザインがリニューアルされていて、驚きました。

デザインもシンプルでかわいらしい雰囲気になり素敵ですね。

07

07

他の刷新された画面

見える化メニュー該当画面

ダイアログボックス仕様

プロジェクト設定該当画面

コメント閲覧該当画面

@SHU GYOSEN Portfolio2025

xqianzhou88@gmail.com