オフショア開発事例〜グローバルエンターテイメント企業基幹システムをreactを活用したUI刷新

 

 

プロジェクト概要

　１０年以上前に開発された基幹システム（コンテンツ情報登録）において、利用するユーザーから画面操作の使い辛さについての多くの苦情がありUI全面改修することになりました。主に若手スタッフがユーザーの中心であり、ユーザーフレンドリーなモダンなUIをreact×SPAによって実現すること、同時に、基幹システムとして登録業務を精緻に実現できることの両立が求められました。

 

当社担当フェーズ

要件定義支援、技術検証、プロトタイピング、フロントエンド開発、API開発、UIUXデザイン

 

当社体制

日本側：PMO、ブリッジSE、UXUIデザイナー

ベトナムオフショア側：ブリッジSE、reactエンジニア、 APIエンジニア

 

利用技術

言語：フロントエンド：React 

　　　バックエンド：Java、Oracle Database

 

開発の特徴

　従来のシステムから、大きく画面構成を変更するため、スマホやタブレットでも使いやすく、見やすいUIにするだけでなく、従来の登録作業を漏れなく正確に行えることが必須の条件であったため、既存システムの調査や、連携システムのインターフェース調査に多くの時間を要しました。

また、お客様でも初めてreactを導入するプロジェクトでもあり、バックエンドAPIとの連携において、期待通りの動作が実現できるのか、技術検証も必要となりました。

また、社内スタッフの利用ユーザーにとって、本当に使いやすいのか、これまでの業務が問題なく、実現できるのか、という点も非常に重要なため、プロトタイピングフェーズを設け、完全設計前に主要画面を実際に操作頂き、フィードバックも得ながら、慎重に進めていきました。

開発自体は全てオフショアチームで行いつつも、ユーザーインタビューや、要件定義を担当する顧客チームとの折衝などは、日本サイドのPMO、ブリッジSEが担当し、上流工程を日本側で、下流工程をベトナム側で進めました。

 

開発上の課題と対応策

　本プロジェクトにおいて当社が取り組んだ重要なテーマについて以下に整理します。

ReactによるSPA、及びデザインコンポーネント化

　Reactをフロントエンドに採用し、SPA(Single Page Application)という、画面遷移のない、1画面でのUIを構築しました。

また、UIの各部品が画面・コンテンツ単位で不整合が生じないよう、デザイン作成から部品・コンポーネント化を実施しました。

参考）Reactコンポーネント化の流れ（当社作成）

プロトタイプによるUI、技術検証

　詳細設計に着手する前に、プロトタイピングフェーズを設け、想定するアーキテクチャ構成（クラウド＋API＋フロントエンドUI）を主要画面を対象に実装し、問題なく動作するかの技術検証、並びに、実際の想定ユーザーにも触って頂き、使いやすくなっているかについて直接のフィードバックを得ました。

業務フローの精緻化

　あくまで既存システムのUI刷新のため、既存業務フローを精緻に理解し、新フローでの変更点も明確にし、詳細設計において、新ＵＩにおいてもこれまで通りの業務が問題なく遂行できるかを慎重に進めました。

UIUXデザインへのデザイナー・エンジニアによる提案
　受領した画面のワイヤーフレームは、精緻な画面設計ではなかったため、当社のUIUXデザイナーにより各画面デザイン並びに、全体のデザインガイドラインを作成するとともに、詳細UIに関しては、エンジニアにより随時アイデアを提示しながら最適化を実施しました。

 

当社オフショア開発について

　当社のオフショア開発では、reactの他にも、vue、また、Next.js、Nuxt.js、TypeScriptといった最新のフロントエンド言語・フレームワークに、対応することができます。

また、詳細画面設計からの実装だけでなく、要件定義レベルから、当社ディレクター＆デザイナーにより最適なUIUXデザインを提案させて頂くこともできます。

さらには、AWS、Firebaseなどのクラウド、サーバレスインフラ構築、APIまで、シームレスでのアプリケーション開発を支援させて頂きます。是非お気軽にお問合せください。