$30 off During Our Annual Pro Sale. View Details »

第14回_製造業のシステムのUX_UIデザイン改善事例を公開_Webinar20220825.pdf

Fixel Inc.
August 25, 2022

 第14回_製造業のシステムのUX_UIデザイン改善事例を公開_Webinar20220825.pdf

Fixel Inc.

August 25, 2022
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

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

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

    Shimizu
  3. 3 Case 1 計測装置 Case 2 半導体製造装置 Case 3 半導体ウェハ搬送装置

    Case 4 自動はんだ付け装置 本日ご紹介する事例
  4. 「AI×UX/UI」を駆使した 新ソフトウェア開発 Case 1

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

    「AI×UX/UI」を駆使した新ソフトウェア開発 画像はイメージです
  6. 6 ◇ UXデザインの必要性は理解しているが、詳しいデザイナーが社内に不在 ◇ 専門的な業務製品なので、そこを理解して進められるデザイン会社がいるか わからない ◇ すでに計測装置を制御する「計測アプリ」はあるので、 そのアプリとの関連性・一貫性は考慮したい ◇

    プラットフォームはWindowsアプリケーション 課題や考慮すべきポイント
  7. 7  UX分析は簡易的に行い、ワイヤーフレーム検討に多くの時間をさいた。  全部の機能は(工数的に)詳細まで検討できなかったが、画面遷移など全体構成は整理した。  ビジュアルデザインは主要画面に絞って仕上げた。  フロントエンド実装も主要画面のみ。WPFで行い、バックエンドとの繋ぎこみはお客様が行った。 プロジェクトの進め方

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

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

  10. 10  新しいアプリケーションを導入 したときに必要となる、概念や 情報を整理し構造化  既存製品で取得できる情報と このアプリケーションで管理で きる情報の関係を把握 

    適切なUI操作・表示ができるよ う画面検討の前に、実装仕様面 についてもお客様のエンジニア とすり合わせを行った 検討プロセスの詳細 ユーザーが意識したい情報と、実装上必要な情報構造の関係を整理
  11. 11  検討プロセスの詳細 新アプリケーションの画面例

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

    ※計測したデータをまとめる「レポート機能」が必要とわかった プロジェクト成果とデザインのポイント
  13. 13 ウェブサイトのお客様インタビューもご覧ください

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

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

    画像はイメージです
  16. 16 ◇ 複雑で機能も多いので、主要な部分から少しずつ変えていきたい ◇ タッチパネル操作、クリーンルームでの環境光など特殊条件を考慮 ◇ 装置特有の国際規格のガイドラインを踏まえてUIデザインが必要 ◇ ディスプレイは4:3モニタから、16:9のワイドモニターへ大きくなる ◇

    アラーム時の対応など、 装置の状態把握や装置の停止を確実にできるようにしたい ◇ 海外でも使用するので、UI表示の多言語対応は必要 ◇ プラットフォームは、Windowsアプリケーション 課題や考慮すべきポイント
  17. 17  現行の機能や仕様を把握しながら、簡易UX分析を同時行い、適切なUIを検討していった。  一度に全機能の見直しをせず、優先度をつけ重要な部分から改善を行なっている。  画面展開していった時に、UIの見た目と操作性の一貫性を保てるよう、 UIコンポーネントやUIパターンを整理しながら設計し直した。  オンライン会議を定期的に行い、機能の把握、UX分析をして、

    Figmaでワイヤーフレームやビジュアルデザインを少しずつ詰めていった。 プロジェクトの進め方 期間:約3〜4ヶ月 × 3フェーズ ※最初のみ訪問し実物確認を行い、その後はオンラインで進めた
  18. 18 ※画面例は実際のものをもとに加工してあります 検討プロセスの詳細 専門的な内容を理解した上で、一般的なユーザビリティの視点で使いやすさを向上 Before After

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

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

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

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

    グローブをはめた手で操作するためドラッグ ができない。 プロジェクトの概要 半導体ウェハ搬送装置のUX/UI改善 画像はイメージです
  23. 23  一度に全画面の改善は行わず、重要な部分から UI改善を行なっている。  UX分析は簡易的に行い、ワイヤーフレーム検討 に多くの時間をさいた。  お客様はWPFが初めてだったので、簡単な実装 レクチャーを行うなど、フロントエンド実装を

    お客様で展開できるよう支援させていただいた。 プロジェクトの詳細 期間:約6ヶ月 × 2フェーズ ※オンライン会議のみで進行 Before After ※画面例は実際のものをもとに加工してあります
  24. 24 オペレータや設定するエンジニアにとって「装置の状態 (=ステータスや何が起こっているか)」が瞬時にわかる ことが重要だった。 複数の情報があっても、視覚的に判別しやすいように情報 構造を整理し、配色や表示形式を最適化しデザインした。 装置のタッチパネルの制約や、クリーンルームやグローブ をして使うなど環境・状況にあわせて、ボタンサイズや操 作方法などUIを最適化した。 プロジェクト成果とデザインのポイント

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

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

    自動はんだ付け装置の制御パネルUX/UI改善 画像はイメージです
  27. 27  UX分析は簡易的に行い、業務と装置のオブジェクト分析し、 ユーザーが操作したい情報とその構造を明確にした  ワイヤーフレーム検討に多く時間をさき、適切な情報の見せ方、 操作の流れを見つけてから、ビジュアルデザインを行った  検討の各段階で、海外の現場に詳しい担当者や責任者に確認し、 フィードバックをいただきながら詰めていった

    プロジェクトの詳細 期間:約4.5ヶ月 ※オンライン会議のみで進行 UX分析のあと情報設計を行う ※各画像はイメージです ワイヤーフレーム検討 ビジュアルデザイン検討
  28. 28 本生産中はアラームがない限りはあまりモニタを見ない。 少し遠くから見ても様子がわかるようにした。 装置の状態(装置内のヒーターがどう温度変化しているの か、設定値と現在値はどうなっているか等)を、視覚的に 把握しやすい形でビジュアライズした。 ホーム画面を、オペレータが見る「Overview」モードと、 エンジニアが詳細を見る「Detail」モードに分け、情報過 多や情報不足にならないようにした。 プロジェクト成果とデザインのポイント

  29. 29 Case 1 計測装置 Case 2 半導体製造装置 Case 3 半導体ウェハ搬送装置

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

    ある程度デザイン品質を保って、機能拡張できる基盤ができあがる。 本日のまとめ
  31. MAKE DESIGN EASY

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

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