産業機器ならではのHMI UX/UI改善。複雑な操作を現場目線で整理する画面設計ノウハウ

セミナー概要
生産設備や建設機械、医療機器、検査・分析装置などの産業機器において、現場が迷わず扱える「操作画面（HMI）の使いやすさ」は、誤操作を防ぎ稼働率を維持するための極めて重要な要素です。

技術の成熟により基本性能での差別化が難しくなる中、優れた操作性によるUX（ユーザー体験）の向上は「選ばれる理由」となる強力な製品競争力になります。

しかし、産業機器の画面改善は、単に見た目を整えるだけでは現場が求める「使いやすさ」を実現できません。機械の物理的な挙動や現場環境を踏まえ、「ハードウェアとソフトウェアの役割分担」という観点から、ユーザー体験全体を組み立てる必要があります。

本セミナーでは、産業機器のHMI設計を手がけてきたデザイナーが、ハードとソフトの役割分担から考えるUXの視点と、現場で本当に使いやすいUIの設計アプローチを解説します。

産業機器の特性上どうしても複雑になりがちな操作画面を、現場目線でどう整理し、再構築すべきか。改善前後のビフォーアフター画面を交えて具体的にご紹介します。さらに、「なぜその改善が必要なのか」という根拠を社内で論理的に説明するためのヒントもお持ち帰りいただけます。

こんな方におすすめ
・産業機器・専用端末の製品企画・設計・開発に関わる方
・操作画面の改善を進めたいが、どこから手をつけるべきか悩んでいる方
・新任者や人の入れ替わりが多い現場のため、学習コストが少ない操作画面にしたい方
・「現場での使いやすさ」を、他社と差別化する新たな製品競争力にしたい方
・機器の操作UIを、現場環境を踏まえたUXまで設計したい方

主な内容
・「なぜか使いにくい」が生まれる背景と、産業機器ならではの課題（物理操作・現場環境）
・現場の業務フローとトラブルから、真の課題を見つけ出すアプローチ
・ハードウェアとソフトウェアの役割分担から考えるUX設計
・【デモ実演】産業機器の多数の操作を整理するビフォーアフター
・自社製品へ応用できるHMI設計のポイント

Transcript

1. NC DC O n li ne S emi n ar 産業機器ならではのHMI UX/UI改善。 複雑な操作を現場目線で整理する画面設計ノウハウ NCDC株式会社 2026 / 11 / 04
2. お客様の現場で、こんな場面はありませんか ベテランがいない日。機械が止まった。 マニュアルがない どのボタンを押して いいのか分からない 押して機械が動いたら どうなるのか分からない 2 手が止まる
3. 講師紹介 UX/UIデザイナー 南部 枝李 装置・機器とつながる業務システムの画面を、UX設計からUIデ ザインまで担当。 装置の実データを画面に表示し、操作や分析につなげる設計に 携わってきた。 建設、分析機器、測量、印刷機など、さまざまな業種の現場の UXを整理。 3
4. デジタルテクノロジーとUXデザインで 社会を創造する Digital Society Enabler. AIやセンシング、クラウドといった先進技術とデザインの力を 駆使し、 よりよい生活や働く環境を社会に提供する──。 そんな価値創造に挑戦する企業のパートナーとして、 NCDCはお客さまと共に「一歩先の社会」を実現していきます。 4
5. サービス・プロダクトの二軸による価値提供 • • 多様な強みをお客さまごとのニーズに応じて、柔軟にお客様へ提供。 多様なプロジェクトを通じて見極めた「共通課題」に対しては、製品やパッケージ化したサービス を提供。 Professional Services お客さまごとのニーズに 応じたソリューションを One to Oneで提供 Synergy Product Services 共通の課題を解決する 製品・サービスを 市場に幅広く展開 AWSアドバンストティア サービスパー トナー AWS Lambdaパートナー NCDCの強み デジタル戦略 , AI , IoT , データ活用 , モダンアーキテクチャ , 内製化支援推進AWSパートナー アジャイル , 内製化支援 , UX/UIデザイン , プロダクトマネジメント  SORACOMソリューションパートナー 5
6. デジタルビジネス立ち上げを一元的にサポート • • デジタルビジネスに必要な企画から開発まで、一元的に提供しています。 スモールスタートでの検証から、本開発・継続的な改善までサポートします。 ユーザ視点を大切にした アイデア・企画 6 モックやプロトタイプ の開発・検証 システム・アプリ開発 継続的な改善 ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ワークショップを中心とした合 理的なプロセスで、ビジネスモ デルの検討からUXデザインまで、 迅速に行います。 関係者が多数いる場合の組織横 断 、 会 社 横 断の フ ァ シ リ テー ションも得意です。 新規性の高いプロジェクトで はMVP（Minim um Viable Product）を用いた検証を行 うなど、目的に応じて段階的 な開発を企画します。早い段 階でモックやプロトタイプを 用意してユーザの評価を確認 します。 ユーザとのタッチポイントとなる各種デバイス のフロントエンドデザインから、クラウドサー ビスを駆使したバックエンドの開発まで。多様 なテクノロジーをインテグレーションします。 AI / IoT モバイル・ウェブ アプリ開発 クラウドインテグレーション システムアーキテクチャコンサルティング など
7. HMIとは HMI(Human Machine Interface)は、人間と機械が情報をやり取りするための手段や、 その装置・システムの総称である 駅の券売機 車のカーナビ・メーター 家庭の洗濯機 行き先と枚数を選ぶ 機械 運賃を示し、切符を出す 目的地を入れ、速度を見る 機械 経路を案内し、警告を出す コースを選び、開始を押す 機械 残り時間と終了を知らせる 人 人 人 本日扱うのは、これと同じ仕組みの産業機器(工作機械など)のHMIです。 7
8. 本日のテーマと流れ 使いやすさの差は、機能の数ではなく、複雑な操作を整理して組み立てる設計の差になる 本日のテーマ 複雑になりがちな 操作画面を、 現場目線で どう整理するか 1 2 3 4 デモでは、多数の操作を整理するビフォーアフ ターを見ます。 5 8 背景と課題 産業機器の画面が使いにくくなる理由 課題の見つけ方 ペルソナ・ジャーニーマップなど4つの手法 デモ 操作の整理と、ハードとの連動を見る 自社への応用 6つのポイントと、改善の根拠 まとめ・質疑応答 ご相談の例と、質疑応答
9. 「なぜか使いにくい」が生まれる背景 産業機器ならではの課題(物理操作・現場環境) 9
10. 操作画面を使いやすくするメリット 使いやすさとは不慣れな人の学習コストが低いことと、安心して操作できること 機器の購入の決め手にもなりえる 新任者がすぐ動ける 例えば 例えば 製造現場は、派遣・短期の人の入れ替わりが多い。 操作に慣れるまで3日かかれば、その間の教育と稼働 が無駄になる。 営業時間外の緊急稼働では、普段触らない管理職が急 遽操作することがある。ベテランがいなくても、直感 的に対応できる画面が要る。 効果 初日から戦力になり、教育コストが下がる 効果 障害時の復旧が円滑になる 操作性の本当の価値 10 非常時もマニュアルなしで動ける
11. Webとの違い Webとの違いは操作が機械の動きとして現れる点にあり、画面と機械を一体で設計する 産業機器ならではのUX/UI Web Webやアプリ 画面を操作すると、 画面が変わる。 影響は画面の中で完結する。 11 機械が実際に動く 画面やボタンの操作で、 機械が動く。 結果は取り返しにくい。 画面の外にも操作がある 非常停止・扉などの 物理操作がある。 止めても、すぐには 止まらない。
12. 現場の環境 手袋・油・視認距離・騒音や光などの環境条件は、画面作りの際に考慮する 手袋 12 油・水滴 視認距離 騒音・光 起きること 小さなボタンが押せな い。細かい操作ができ ない 起きること 触っていないのに 反応する 起きること パネルから離れると、 数値が読めない 起きること 音が聞こえない、 まぶしくて見えない 設計での配慮 高さのある大きなボタ ン、音声入力 設計での配慮 間隔を空け、 誤タッチに強くする 設計での配慮 大きな文字や絵で 状態を見せる 設計での配慮 色と形で伝える (音に頼らない)
13. 使いにくさの原因 見えている 症状 見えてない 原因 非常時にあわてる 新任者が迷う 問い合わせが多い UXの設計が 立てられていないこと 操作の整理・優先順位 物理操作との連動 現場環境の前提 機能が多いのは、避けられません。 役割分担の設計 13 問題は、画面の古さではなく
14. 現場の業務フローとトラブルから、 真の課題を見つける 工作機械を例に、4つの手法で課題の仮説を立てる 14
15. 4つの手法 仮説の段階では、人・時間・場面・業務の4視点を使い分ける必要がある 1 2 3 4 ペルソナ 「誰が・どんな環境で」使うのかを決めます。 ジャーニーマップ 「いつ」困るのかを、時間の流れで見つけます。 使いにくさの 原因を、 言葉にする ユースケース 「どの場面」から直すかを、頻度とリスクで決めます。 業務フロー 画面の外の物理操作も含めて、流れを確かめます。 ※実際の案件では、現場の観察とヒアリングで確かめます。 15 ここから立てる仮説 誰が・いつ・どの場面で、 何に困るのかです。
16. 題材の工作機械 物理で操作するもの 2 1 3 4 1 非常停止 2 サイクルスタート 3 フィードホールド 4 送り速度ダイヤル・扉のロック 画面で操作するもの 4 タッチパネル 段取り・運転・復旧 の操作を、手袋のまま 押す 16 ※架空の機器です。
17. ペルソナ 誰が・どんな環境で使うかを、具体的な1人に決めることが目的。文字やボタンの大きさ、 通知の方法の基準になる 働く環境 ペルソナ 森田 大輔(26歳) 機械オペレーター 入社2年目。 ベテランの小林さん(52歳)が休み の日は、一人で機械を担当。 17 ゴム手袋のまま操作 油・クーラントの水滴 1.5〜2m離れて確認 機械の音で通知が聞こえ ない 職場の状況 ベテランが休みの日は、新人と派遣の2人で回す職場 森田さんの願い 「先輩がいない日でも、迷わず、止めずに加工したい」
18. 現場で起きたトラブル 課題の出発点として、現場で実際に起きた困りごとを押さえることが目的 加工中にアラームが出た 森田さんの声 表示の意味が、分かりませんでした。 「どこを見て、何を すればいいのか、 分かりませんでした」 非常停止を押した 扉がいつ開くか、分からず待ちました。 復旧にかかった時間 復旧に40分かかった 手順が分からず、電話で確認しました。 40 分 1ロット分の納期が遅れました。 18
19. ジャーニーマップ 1日の流れの中で気持ちが落ちる場面を特定することが目的である。落差が最大なのは非 常停止から復旧である 9:00 10:30 14:10 14:30 段取り 運転中 異常・非常停止 復旧 良い 迷い 不安 焦り 苛立ち 悪い 操作が多く、どれを押す か迷います。 19 離れると状態が読めず、 不安になります。 アラームの意味が分から ず、非常停止を押します。 扉がいつ開くか、手順が 分からず待ちます。
20. ユースケース 場面を頻度とリスクで整理し、画面で直す優先順位と、ハードとの役割分担を決めること が目的である リスク 高 画面が受け持つ3つ 1 日々の操作 非常停止・扉ロック まれ・最高リスク 上ほど危険 → ハードで 守る 異常からの復旧 月数回・高リスク 低 3 障害時の次の一手を示す 段取り・加工開始 毎日・中リスク 工具交換・調整 週数回・中リスク 低 20 2 状態の見える化 右ほど毎日 → 画面で直す ハードが守る 状態の確認 毎日・低リスク 頻度 高 → 非常停止、インターロック、 電源の遮断。
21. 業務フロー 画面の外の物理操作まで含めて、物理と画面が行き来する箇所を確かめることが目的であ る。連動が必要な箇所が見つかる ワーク取付 工具設定 物理 加工開始 画面 運転の見守り 画面+物理 画面 ワーク取出 物理 異常が起きたとき 21 非常停止を押す 停止・扉が開く 原因を確認する 解除して再開 物理 画面+物理 画面 画面+物理
22. 立てた仮説 4つの手法から、使いにくさの原因を4点に言語化できる。どれも画面の古さではなく、 設計の不在が原因である 1 22 2 3 4 操作が未整理 環境を前提にしない 物理と連動しない 手順が分からない 操作が多く、どれを 押すか迷う。 手袋・油・2m。小 さな文字とボタンで は、押せず読めない。 非常停止の後、いつ 止まり、いつ扉が開 くのか分からない。 復旧の手順が見つか らず、電話で確認し た。 出どころ ジャーニーマップ 出どころ ペルソナの環境 出どころ トラブルと業務フロー 出どころ 先月のトラブル デモで見る シーン1 デモで見る シーン2 デモで見る シーン3 デモで見る シーン4
23. 【デモ】多数の操作を整理するビフォーアフター 架空の工作機械「MX-300」と、オペレーターの森田さん 23
24. 4つのシーン 森田さんの1日を4つの場面で追う。右端の番号は、後半で整理する6つのポイントとの対 応である シーン 24 ビフォー(課題) アフター(改善) ポイント 1 段取り〜運転開始 20個の操作が、同じ見た目 で並びます。 開始を固定し、仕分けて9 個だけ出します。 1 5 2 運転中に離れて見る 状態が小さな数値で、2mで は読めません。 大きな状態帯と、機械の絵 で見せます。 3 5 3 異常→非常停止 押しても、画面は「運転 中」のままです。 停止処理中・あと18秒と、 扉を連動します。 2 4 4 復旧 手順が4階層の奥で、コード だけです。 復旧ガイドで、物理操作は 絵で案内します。 6 2
25. シーン1 ビフォー 20個の操作が同列に並ぶため、経験の浅い人は今押すべきボタンに迷う 1 1 2 ① 20個が、同じ大きさ・同じ色。よく使う操作と、ほぼ使わ ない操作が混在 2 ビフォー 操作が整理されていない ※架空の画面です。 25 ② 開始・一時停止・中止も、他と同じ見た目。物理のスター トとの関係も出ない
26. 整理の5ステップ 全部を並べず、場面ごとに「いま要る操作」だけを出すことが、整理の基本 26 STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 棚卸し 仕分け 場面で分ける 重みを付ける 確かめる 画面と物理の操作 を、すべて書き出 します。 画面に必要か、物 理に任せるか、不 要かを分けます。 段取り・運転中・ 異常時など、使う 場面で分けます。 頻度とリスクで、 固定・大きく・奥 にしまうを決めま す。 経験の浅い人に、 手袋のまま触って もらいます。 例:20個 例:物理2・外す3 例:段取り6・手動5 例:開始は固定 例:迷わず押せるか
27. 20個の仕分け 20個を6区分に仕分けると、常時見えるのは固定3と段取り6の計9個に絞れる ※操作名は架空の例 20個 ビフォー:20個が同じ見た目で並ぶ の操作 固定する 3個 加工開始・一時停止・加工中止 段取り 6個 原点復帰・工具交換・工具登録・ワーク 測定・ワーク座標設定・プログラム選択 手動操作 5個 手動送り・主軸正転・主軸停止・クー ラント入・クーラント切 別画面へ 1個 プログラム編集(下部ナビの「プログ ラム」へ) 常時見えるのは 27 固定3+段取り6=9個 物理に任せる 2個 手動5は別タブへ。残りは、別画 面・物理・削除にします。 外す・統合 3個 ドア開・ドア閉(物理ボタンで) 画面更新(自動化)・早送り(統合)・主 軸逆転(保守画面へ)
28. シーン1 アフター 開始・一時停止・中止は固定し、段取りの6個だけを大きく出す。手動操作は別タブに退 避させる 段取りタブ(6個)+固定3個 機械側(画面の外) 28 手動操作タブ(5個)は、必要なときだけ 表示灯は緑(運転可)。機械の緑のスタートボタンでも、開始できます
29. シーン2 ビフォー 運転中の状態が小さな数値の羅列で、2m離れると読み取れない 1 ① 状態は、小さな文字と 数字の羅列。どれが大事 か、ひと目で分からない 2 ② 2m先から見たイメー ジ(縮小・ぼかし)。数字 は読めない 1 29
30. シーン2 アフター 大きな状態帯と機械の絵により、手袋や油のある環境でも、状態をひと目で把握できる 1 1 2 2 状態帯 →ポイント3 大きな文字と色で、 運転中かどうかを示します。 2 3 2 絵と形 →ポイント3 主軸の回転はゲージ、クーラントは液面。 機械の動きに近い形で見せます。 3 3 大きな数字 →ポイント5 2m先でも読める、 72pxの数字です。 運転中(10:30)。機械から2m離れて見る 機械側(画面の外) 30 機械の上の表示灯も緑。画面の状態帯と同じ色で、遠くからでも運転中と 分かる
31. シーン3 ビフォー 非常停止の後も画面が「運転中」のままで、機械に何が起きているか把握できない 1 1 2 ① 状態は、小さな文字で「ALM」と出るだけ。あと何秒で止 まるかも出ない 2 ビフォー 物理操作と連動していない ※架空の画面です。 31 ② 「ドアはロック中です」とだけ。いつ開くのかは書かれて いない
32. シーン3 アフター 受付・停止処理中・停止完了を、扉のロックや表示灯・音と連動して示し、待ち時間の不 安を解消する ①受け付けた ②停止処理中 ③停止完了 機械:非常停止を押す 画面:受け付けたと示す 機械:主軸が減速する 画面:あと18秒と扉の状態 機械:主軸停止、ロック解除 画面:赤で、扉を開けられる →ポイント2 機械側 32 表示灯 赤 点灯 ブザー 鳴る →ポイント2 機械側 表示灯 赤 点灯のまま ブザー鳴る・扉ロック中 →ポイント4 機械側 表示灯 赤 点灯 ブザー 止む・扉 解除
33. シーン3 アフター(光・音・色 ) 状態ごとに、画面の色・機械の表示灯・通知音をそろえ、UXが決めてハード担当に仕様 として渡す 状態 画面の状態帯 機械の表示灯 運転中 緑 緑 点灯 なし 非常停止の受付〜停止処理中 赤 赤 点灯 鳴る(補助) 停止完了 赤 赤 点灯のまま 止む 復旧ガイド 黄 黄 点灯 なし 色の意味:緑=運転可 / 黄=注意 / 赤=停止・危険 / 青=指示(物理ボタンの色とそろえる) 光や音の出し方は、ハード側の仕様。基準や規格は、機器ごとに要確認。 33 通知音
34. シーン4 ビフォー 復旧手順が4階層の奥にあり、経験の浅い人は電話で確認するしかない 1 1 2 ① 画面の階層は4つ。ここにたどり着くまでが長い 2 3 ② 一覧は、コードと説明だけ。手順は見つからない 3 ビフォー 手順が分からない ※架空の画面です。 34 ③ 対処は「取扱説明書P.142参照」だけ。物理操作の場所も 出ない
35. シーン4 アフター 次にやることを1つずつ示し、物理操作は機械の絵で位置を示す。経験の浅い人でも一人 で復旧できる 機械側 表示灯は黄 (復旧待ち) 非常停止は 赤いボタン 位置は右の絵 35
36. デモのまとめ 整理・連動・環境への配慮・手順の提示で、先月40分かかった復旧も、経験の浅い人が 一人でできるようになる ビフォーの課題 アフターで解消されたこと 操作が未整理 開始を固定し、20個を仕分けて、 今使う9個だけを大きく出します。 物理と連動しない 停止の受付・処理中・完了と、 扉の状態が、画面に出ます。 環境を前提にしない 72px以上のボタンと、 2m先で読める文字と絵にします。 手順が分からない 復旧ガイドが次にやることを示し、 物理操作は絵で位置を案内します。 森田さんの願い 先輩がいない日でも、迷わず、止めずに加工したい。先月40分かかった復旧が、一人でできる。 36
37. 今日から応用できるHMI設計のポイント 画面を点検し、改善の根拠を見つける 37
38. 6つのポイント デモから導いた6つの視点であり、規格や既存理論の引用ではなく、弊社の整理である 1 操作を整理する 2 不要な操作を削り、流れでまとめ、 開始・停止は固定します。 3 機械に近い見せ方 物理操作・光・音と連動させ、 いま何が起きているかを伝えます。 4 回転・液面・開閉など、 状態を絵や形で見せます。 5 現場環境で使える 手袋・油・水滴・遠目でも、 押せて、読めます。 38 機械の動きと連動 色に安全の意味を 赤・黄・緑・青の意味をそろえ、 物理ボタンと合わせます。 6 次にやることを示す 経験の浅い人でも、 次にやることが分かります。
39. 改善の根拠 改善の根拠は、数字・記録・同条件の比較の3点で、社内に説明しやすい 数字にする 39 現場を記録する 復旧にかかった時間、停止 時間、問い合わせの件数を、 数字にします。 操作の動画・写真と、現場 の環境(手袋・距離・音)を 残します。 例:復旧40分 → 目標15分 例:2m離れて、読めなかった 同じ条件で比べる 改善の前後を、同じ人・同 じ場面で比べます。 例:経験の浅い人が、1人で復 旧できたか
40. 本日のまとめ 使いやすさは設計できる対象であり、まず1画面を点検することが改善の第一歩になる 1 原因は、設計にある 「使いにくい」は、画面の古さではなく、整理と優 先順位が設計されていないことです。 3 役割分担と連動を考える ハードはリスクを守り、画面は日々の操作を支えま す。2つを連動させます。 40 2 現場から課題を見つける 業務フローとトラブルから、誰が・いつ・どこで困 るかを言葉にします。 4 貴社の画面を点検する 6つのポイントで確認し、できていない点を見つけ ます。
41. ご相談の例 貴社の事情をヒアリングしたうえで、既存基盤の活用から内製化まで柔軟に対応できる ご相談の例 41 弊社の対応 Delphi・C言語など既存基盤の まま、デザインを刷新できるか 可能です。最適なUX/UIのために、 技術選定から見直す支援もできます。 開発基盤はそのままで、 画面デザインだけ変えたい 可能です。既存技術のまま、 デザインだけ刷新した実績もあります。 今後の新しい画面は、 自社で作れるようにしたい デザインシステムやガイドラインを 整えることで、内製化が可能です。 ご相談は こちら 産業機器の UX/UIデザイン サービスページ