SIer/情シス向け「ITとデザインは仲良し！」シリーズ 第14回 2022/8/25 製造業のシステムの UX/UIデザイン改善事例

2 工学系の大学を卒業後、デザインやアートを学ぶ。 ブランディング会社でロゴやブランドのデザイン、国立大学でのデザイン研究・ 教育などに携わった後、現在のデジタル系のデザイン分野へ。 情報のデザインを中心に、UXUIデザインやインタラクションデザインが専門。 Fixelでは数多くの企業システムの企画・デザイン・開発に携わっている。 自己紹介 清水 良介 Ryosuke Shimizu

3 Case 1 計測装置 Case 2 半導体製造装置 Case 3 半導体ウェハ搬送装置 Case 4 自動はんだ付け装置 本日ご紹介する事例

｢AI×UX/UI」を駆使した 新ソフトウェア開発 Case 1

5 電子機器に対する電磁波の影響を計測 をする装置の分析アプリケーション これまで経験則で分析し対応していた ものを、AIを利用し業務効率化できる 新製品として売り出したい 新しいコンセプトと機能を、分かりや すく操作しやすいデザインにしたい プロジェクトの概要 計測装置 ｢AI×UX/UI」を駆使した新ソフトウェア開発 画像はイメージです

6 ◇ UXデザインの必要性は理解しているが、詳しいデザイナーが社内に不在 ◇ 専門的な業務製品なので、そこを理解して進められるデザイン会社がいるか わからない ◇ すでに計測装置を制御する「計測アプリ」はあるので、 そのアプリとの関連性・一貫性は考慮したい ◇ プラットフォームはWindowsアプリケーション 課題や考慮すべきポイント

7  UX分析は簡易的に行い、ワイヤーフレーム検討に多くの時間をさいた。  全部の機能は（工数的に）詳細まで検討できなかったが、画面遷移など全体構成は整理した。  ビジュアルデザインは主要画面に絞って仕上げた。  フロントエンド実装も主要画面のみ。WPFで行い、バックエンドとの繋ぎこみはお客様が行った。 プロジェクトの進め方 期間：約3ヶ月 ※最初のみ対面で会議を行い、その後はオンラインで進行

8 ※業務に関連する主要なペルソナは3人。その3人を中心にユーザー視点でTo-Beのシナリオを描いていった。 検討プロセスの詳細 UXデザインの手法を用い、既存業務や新しいアプリケーションを導入した時の流れを分析

9 検討プロセスの詳細 UXデザインの手法を用い、既存業務や新しいアプリケーションを導入した時の流れを分析 ※3人の業務がどう繋がり、どこで既存製品と新製品の接点があるかを整理していった

10  新しいアプリケーションを導入 したときに必要となる、概念や 情報を整理し構造化  既存製品で取得できる情報と このアプリケーションで管理で きる情報の関係を把握  適切なUI操作・表示ができるよ う画面検討の前に、実装仕様面 についてもお客様のエンジニア とすり合わせを行った 検討プロセスの詳細 ユーザーが意識したい情報と、実装上必要な情報構造の関係を整理

11  検討プロセスの詳細 新アプリケーションの画面例

12 計測機器や既存の関連アプリのデータとどう連動させるか。 全体の業務フローに自然に馴染み使えるかを考慮した。 ｢開発リーダー」「開発メンバー」「品質保証」の 各ペルソナがどう関連して全体の業務が完了するかを整理。 その上で、ペルソナのインサイトにあった機能やUIを最適化 した。 UX分析を行いTo-Beのジャーニーマップを作成したことで、 当初考えてないようなユーザー視点での業務を支援する機能 が具体的に見えた。 ※計測したデータをまとめる「レポート機能」が必要とわかった プロジェクト成果とデザインのポイント

13 ウェブサイトのお客様インタビューもご覧ください

半導体生産装置の 制御パネルのUX/UI改善 Case 2

15 半導体生産装置の制御パネルを、 使いやすく分かりやすいUIに改善したい 今まではエンジニアが機能主体でUIを 作っていたが、デザインの専門家に依頼 してUXの向上と、開発効率や展開しやす さなど運用面も考慮した作りに変えたい プロジェクトの概要 半導体生産装置 制御パネルのUX/UI改善 画像はイメージです

16 ◇ 複雑で機能も多いので、主要な部分から少しずつ変えていきたい ◇ タッチパネル操作、クリーンルームでの環境光など特殊条件を考慮 ◇ 装置特有の国際規格のガイドラインを踏まえてUIデザインが必要 ◇ ディスプレイは4:3モニタから、16:9のワイドモニターへ大きくなる ◇ アラーム時の対応など、 装置の状態把握や装置の停止を確実にできるようにしたい ◇ 海外でも使用するので、UI表示の多言語対応は必要 ◇ プラットフォームは、Windowsアプリケーション 課題や考慮すべきポイント

17  現行の機能や仕様を把握しながら、簡易UX分析を同時行い、適切なUIを検討していった。  一度に全機能の見直しをせず、優先度をつけ重要な部分から改善を行なっている。  画面展開していった時に、UIの見た目と操作性の一貫性を保てるよう、 UIコンポーネントやUIパターンを整理しながら設計し直した。  オンライン会議を定期的に行い、機能の把握、UX分析をして、 Figmaでワイヤーフレームやビジュアルデザインを少しずつ詰めていった。 プロジェクトの進め方 期間：約3〜4ヶ月 × 3フェーズ ※最初のみ訪問し実物確認を行い、その後はオンラインで進めた

18 ※画面例は実際のものをもとに加工してあります 検討プロセスの詳細 専門的な内容を理解した上で、一般的なユーザビリティの視点で使いやすさを向上 Before After

19 検討プロセスの詳細 デザインガイドラインを整備し、今後の画面展開時に一貫性を保てるようにした

20 利用者視点で業務分析をすることで、機能の関係性や優先 度が理解しやすい形に整理できた 画面構成やナビゲーションなど基本構造が整理できたため、 主要機能の画面から順番に改善していく進め方が可能に なった。 UIデザインと並行して、デザインガイドラインを整備して いるため、各フェーズが進むごとに基本形が整理でき、一 貫性を保ったまま効率的にUI改善が可能になった。 プロジェクト成果とデザインのポイント

半導体ウェハ搬送装置の UX/UI改善 Case 3

22 社内にデザイナーがおらずエンジニアがUIを 考えてきた。競合製品と差別化を図るために UIの見た目だけでなく、UXも向上させたい。 複雑化している実装を、フロントとバックエ ンドを分けていきたい。 将来的にはフロントはWeb技術でつくり、マ ルチプラットフォーム化にして遠隔制御など もしやすい構造にしたい。 装置に備え付けのタッチパネルモニタ。 グローブをはめた手で操作するためドラッグ ができない。 プロジェクトの概要 半導体ウェハ搬送装置のUX/UI改善 画像はイメージです

23  一度に全画面の改善は行わず、重要な部分から UI改善を行なっている。  UX分析は簡易的に行い、ワイヤーフレーム検討 に多くの時間をさいた。  お客様はWPFが初めてだったので、簡単な実装 レクチャーを行うなど、フロントエンド実装を お客様で展開できるよう支援させていただいた。 プロジェクトの詳細 期間：約6ヶ月 × 2フェーズ ※オンライン会議のみで進行 Before After ※画面例は実際のものをもとに加工してあります

24 オペレータや設定するエンジニアにとって「装置の状態 （＝ステータスや何が起こっているか）」が瞬時にわかる ことが重要だった。 複数の情報があっても、視覚的に判別しやすいように情報 構造を整理し、配色や表示形式を最適化しデザインした。 装置のタッチパネルの制約や、クリーンルームやグローブ をして使うなど環境・状況にあわせて、ボタンサイズや操 作方法などUIを最適化した。 プロジェクト成果とデザインのポイント

自動はんだ付け装置の 制御パネルUX/UI改善 Case 4

26 装置に組み込まれた制御アプリを 分かりやすくし操作性を高めたい 4:3モニタから24インチワイドモニターになる ので、一覧性を高めて業務効率も向上したい 海外の競合製品より魅力的なUIにしたい 製品のバリエーション（製造ラインの数やヒー ターの数が違うもの）に対応できるよう、可変 UIにしたい プロジェクトの概要 自動はんだ付け装置の制御パネルUX/UI改善 画像はイメージです

27  UX分析は簡易的に行い、業務と装置のオブジェクト分析し、 ユーザーが操作したい情報とその構造を明確にした  ワイヤーフレーム検討に多く時間をさき、適切な情報の見せ方、 操作の流れを見つけてから、ビジュアルデザインを行った  検討の各段階で、海外の現場に詳しい担当者や責任者に確認し、 フィードバックをいただきながら詰めていった プロジェクトの詳細 期間：約4.5ヶ月 ※オンライン会議のみで進行 UX分析のあと情報設計を行う ※各画像はイメージです ワイヤーフレーム検討 ビジュアルデザイン検討

28 本生産中はアラームがない限りはあまりモニタを見ない。 少し遠くから見ても様子がわかるようにした。 装置の状態（装置内のヒーターがどう温度変化しているの か、設定値と現在値はどうなっているか等）を、視覚的に 把握しやすい形でビジュアライズした。 ホーム画面を、オペレータが見る「Overview」モードと、 エンジニアが詳細を見る「Detail」モードに分け、情報過 多や情報不足にならないようにした。 プロジェクト成果とデザインのポイント

29 Case 1 計測装置 Case 2 半導体製造装置 Case 3 半導体ウェハ搬送装置 Case 4 自動はんだ付け装置 製造業システムのUX/UI改善事例

30 基本はUXデザインの手法で進めていき、ユーザー視点でアプリケーション設計を行う 業務フローや製品との接点もその中で整理できるので、作ったあとで使いづらいとか、 根本的にこういう機能が必要だったということが起こりにくい。 業務や製品の専門的な知識・仕様は、 現場視察やマニュアル、お客様へのヒアリングで把握して進めている デザインプロセスは、毎週の定例でFigmaで作った中間成果物を見ながら進めるので、 ブラックボックス化しない（仕様の齟齬、機能や考慮漏れが発生しにくい） 全てをデザインしなくても、部分的に徐々につくる進め方も可能。 デザインガイドラインを整備することで、今後の拡張時にエンジニアだけでも ある程度デザイン品質を保って、機能拡張できる基盤ができあがる。 本日のまとめ

MAKE DESIGN EASY

MAKE DESIGN EASY Q&A SIer/情シスのデザインパートナー

MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました！ アンケート記入のお願い