WebアプリのUI/UX開発にあたっては、基本的に三菱電機側がデザインを担当し、MESW側がソフトウエアの開発・実装を担当するというスキームが築かれていました。つまり、静止画・文字ベースのデザイン仕様書に基づいて動作や遷移を実装していくわけです。そこでは当然、認識や解釈の差異が生じる場合があります。その結果、実際に操作性や動作を確認するステークホルダーの動作確認段階で、多くの「手戻り工程」が発生していました。ステークホルダーの動作確認という最終段階に差し掛かったタイミングでの手戻りは、双方のストレスになるばかりではなく、本番稼働の遅延を招きかねません。喫緊な課題でしたが、改善を図るためには、デザイナーとエンジニア、ステークホルダー間の意思疎通を円滑化する仕組みが必要でした。

その突破口を拓くために、2023年5月1日から社内の小集団活動で共通に利用できるツールの調査・検討をスタート。三菱電機側がAdobe XDというWebデザイン制作ツールを使用していたことから、これを実際に触りながら詳細に検証したところ、「プロトタイプ機能」というローコードでアプリ画面を作成し、端末上で動作確認できる機能に活路を見いだすことができました。それを契機に、小集団活動はさらに活気づきます。具体的に「手戻り工数40%削減」を目標に掲げ、効果測定を行っていきました。

「効果測定を行うためには、比較対象が必要です。そこで、今までの指摘件数、手戻り工数と対策時の指摘件数、手戻り工数を比較しました」（砂原氏）

効果測定の結果は、指摘件数はほぼ変わらなかったものの、人月ベースでの総手戻り工数は大幅に削減され、早々に約40%削減という目標を達成することができました。その理由としては、プロトタイプによるレビューを通じて、フロントローディングを実施できたことがあげられます。フロントローディングとは、上流の企画・設計段階に多くの作業や負荷を集中させて後工程での不具合の発生を防ぐ手法。初期段階からプロジェクト内で共通認識を形成できたことが起点となりました。また、必要に応じて販売部門など、ステークホルダーにプロトタイプ時点で評価してもらい、フィードバックを得られたことも大きな要因の一つです。

なお、件数は変わらなかったものの、指摘の内容は大きく変わりました。設計段階に立ち返らなければならないような重大な指摘は激変し、UI/UXの質を向上させるための工夫やアイデアが増えたといいます。

手戻り工数の大幅削減を達成した小集団活動は、さらなる一歩を踏み出すことにしました。Adobe XDと並行して、選択肢をコラボレーション型インタフェースデザインツールとして世界のデファクトスタンダードとなりつつあるFigmaというツールを活用することを決断しました。

なかでも注目したのは、Figmaが有する多彩なコラボレーション機能、そしてクラウド連携の可能性でした。「これらを有効活用できれば単に工数を削減するだけではなく、その先にある協働環境の在るべき姿を追求できる」と考え、数か月後にはプロジェクトとしての取り組みを新たにスタートさせました。

「蓄積したUI/UXデザインの資産を部品化できるという点で、Figmaは新たなスポットライトをあててくれました。部品として流用できれば当然、開発工数はさらに圧縮され、品質も担保できます。また、コラボレーションでは、業務の標準化が重要なテーマとなります。これもFigmaを共通言語とすることで属人化を防ぎ、UI/UXデザインの品質向上に寄与できることが判りました」（砂原氏）

なお、Webアプリ開発では基本的に、要件定義・設計・開発・製造・テストといった計画を事前に決めて、フェーズ単位で順番に完結させていくウォーターフォール型の開発手法を採用しています。進捗管理を徹底できるからですが、一方で仕様変更や手戻りが発生すると対応が難しく、コスト・時間が増大するという問題も指摘されています。

そこで注目されているのが、アジャイル型の開発です。計画を柔軟に変えながら進行させるため、手戻りリスクが減り、開発期間を短縮できるとされています。ただし、方向性にブレが生じやすいため、開発プロジェクトには高いコミュニケーション能力と自律性が求められます。

UI/UXデザイン開発工程で、この二律背反した課題の解決を図ることもプロジェクトの命題の一つでした。言い換えれば、UI/UXデザイン開発におけるプロセスの一部をアジャイルライクにすることです。その点で「Figma」は、履歴一覧から付箋やメモなどを参照したり、設計情報を閲覧するなど、様々なコラボレーション支援機能を有しています。その結果、より密度の高い情報共有とシームレスな協働作業を基軸とする並行作業が可能になりました。

Figmaの効果は、三菱電機が提供する業務用空調管理ツールの Webアプリ開発プロジェクトでも実証されています。同開発プロジェクトに「Figma」活用のトライアルを依頼。本プロジェクトの支援体制のもとに適用したところ、部品化によるプロセスの統合、標準化に伴う並行作業などが進み、UI/UX開発がこれまで以上にスムーズに進めることができました。

この実績を踏まえて、今後は三菱電機を中心にユースケースが増えていくことが予想されます。そこを見越して、砂原氏はすでに次の構想を見据えています。

実はFigmaは、AWSが提供するフロントエンド構築ツール「AWS Amplify Studio」と高い親和性を有しています。例えば、Figma で構築された設計をAmplify Studioのコンポーネントである「React」に変換することで、コードを自動生成することが可能です。また、デザイナーとエンジニアの垣根を低くする一元化されたワークフローにより、コラボレーションの質的向上も期待されます。

「ソリューション技術部ではクラウド開発も行っています。私もWebアプリの開発だけではなく、クラウドの開発にも従事しています。また、会社の支援を受けてAWSの認定資格も取得しました。Figmaで作成したデザインをAmplify Studioと連携させてコードを自動生成する方法に着眼できたのも、その見識があったからです。その一方で、技術は常に進化し続けていますので、次なる構想への準備を進めています」（砂原氏）

その一つが、生成AIとのリンケージです。当然ながら、蓄積されていくUI/UXデザインの成果やドキュメントは、独自のナレッジといっても過言ではありません。生成AIのLLM（大規模言語モデル）が、これらのナレッジにアクセスして自身の知識と組み合わせて回答を生成できれば、ハルシネーションを減らし、回答精度を高めることができます。このようにLLMが外部のデータソースから関連情報を検索して併せて回答を生成する技術はRAG（Retrieval-Augmented Generation：検索拡張生成）と呼ばれ、すでに確立されつつあります。実際に砂原氏も社内文書をターゲットにRAGを構築した経験があるだけに、その可能性に是非ともチャレンジしてみたいといいます。

このように、自発的な勉強会や小集団活動が盛んなMESWには、若い人材が積極的に新しい技術を試し、それをビジネスとして本格化させていくという文化が根付いているようです。砂原氏はMESWの魅力を「BtoCからBtoBまで領域が広く、選択肢が豊富」と語りますが、それぞれの領域で若い力がビジネス変革を加速させている様子は、本プロジェクトからも伺うことができます。

商標について

• ・Adobe XDは、米国およびその他の国におけるAdobe社の登録商標または商標です。
• ・Figmaは、Figma, Inc.またはその関連会社の登録商標または商標です。