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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. MAKE DESIGN EASY
    

    View Slide

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

    View Slide

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

    View Slide