3-10.複雑な業務画面をどう使いやすくするか。SPAと非同期処理によるモダンUI/UXのアプローチ

どれだけデータ設計が美しくても、毎日触る画面が使いにくければ、システムは現場に嫌われ、Excelに逃げられる。旧システムがそうだったように。第10回は、次期システムの「顔」——UI/UXの設計思想を書く。基本方針(前シリーズ)に「UI/UXの向上」を掲げた、その具体化だ。

UIを“作る”技術は、まさにコモディティ化の最前線だ。SPAの骨格も、画面のコンポーネントも、AIに任せれば速く組める。だからこそ問われるのは「どんな見た目を作るか」ではない。「現場の仕事の流れをどう理解し、どこで遷移を減らし、どの通知をどれだけ強くするか」——自社の業務を知る者にしか下せない、UXの本質的な判断だ。

Before:画面遷移の迷路と、待たされる計算

旧システムの操作感は、業務システムにありがちなものだった。一つの仕事を終えるために画面をいくつも行き来する。受注を入力しながら顧客情報を確認したければ別画面へ遷移し、また戻る。遷移のたびに入力中の状態が失われる不安があり、現場は紙にメモしてから入力する——システムのために手作業が増える皮肉が起きていた。計算も待たされた。価格や数量を変えるたびに「再計算ボタン」を押し、画面が更新されるのを待つ。一覧の表示も重く、ベテランほど「システムを開かずに済む方法」に習熟していった。使われないシステムはこうして作られる。

After その1:SPAという土台

次期システムはSPA(Single Page Application)として構築する。従来のWebシステムは操作のたびにページ全体を読み込み直す。SPAは最初に画面の骨格を読み込み、以後は必要なデータだけをサーバーと非同期にやり取りして、画面の必要な部分だけを書き換える。体感は「Webページの閲覧」ではなく「アプリケーションの操作」に近くなる。第1回の「Chromeブラウザのみで完結するモダンWebシステム」の中身がこれだ。インストール不要というデプロイの利便性と、専用アプリ並みの操作感。その両立がSPAで可能になった。

After その2:一画面で完結させる——サイドパネルとタブ

UI設計の中心原則は、画面遷移を減らし、一つの仕事を一画面で完結させることだ。受注入力の途中で顧客の過去履歴を見たければ、画面を離れるのではなくサイドパネルが横から開く。複数の関連情報を行き来したければ画面内のタブで切り替える。入力中の状態は保たれたまま、必要な情報が手元に来る。「遷移」を「展開」に置き換える、と言ってもいい。人間の作業記憶は画面が切り替わるたびに失われる。情報のほうが作業者のもとへ来る設計は、ミスを減らし、入力の心理的負荷を下げる。第3回のドラフト機能と合わせて、「営業が使ってくれる入力画面」をここで完成させる。この「どの情報を、どの仕事のどの瞬間に手元へ寄せるか」は、現場の動きを知らなければ設計できない。コンポーネントを並べる手段ではなく、業務の理解が効く。

After その3:非同期処理による「待たせないプレビュー」

SPAの真価は非同期処理による即時の計算プレビューに出る。見積画面で樹種やサイズを変えると、単価や面積の計算結果がその場で更新される。再計算ボタンは無い。納期のシミュレーションも、条件を変えれば即座に答えが返る(第6回のATPがここに繋がる)。「入力→確定→結果を見る」だった操作が「動かしながら結果を見る」に変わる。これは単なる快適さではない。営業が顧客の目の前で、仕様を変えながら価格と納期をその場で示せる——操作の速度が、商談の質に直結する。複雑な仕様を扱う商売ほど、この差は大きい。

After その4:アラートとトーストの使い分け

通知設計も地味だが重要なUXだ。業務の重要度に応じて通知の強さを使い分ける設計にした。取り返しのつかない操作やガバナンス上の警告——生産中の受注を変更しようとした(第3回のロック制御)、与信の上限に触れた——は、アラート(警告ダイアログ)で作業を一度止めて確認を求める。一方、保存の完了や処理の成功といった「知らせたいが止めたくない」情報は、トースト通知(画面の隅に数秒出て消える)で流す。すべてをダイアログにすると現場は「OKを押す機械」になり、本当に重要な警告も読まれなくなる。すべてをトーストにすると重大な見落としが起きる。強い通知は、強い理由があるときだけ。 通知の設計とは、システムが現場の注意力をどう使わせてもらうかの設計だ。

使いやすさは「思想」から生まれる

UI/UXの議論は、ともすれば色やボタンの形の話に矮小化される。だが本質は違う。画面遷移を減らすのも、待たせないのも、通知を使い分けるのも、根っこにあるのは現場の時間と注意力を奪わないという一つの思想だ。旧システムからExcelへの逃避は、現場の怠慢ではなく、システムが現場の時間を奪っていたことへの合理的な反応だった。次期システムはその逆を行く。画面を作る手段が安く速くなるほど、何を本質と定めて作るかが、使われるシステムと使われないシステムを分ける。

次回は、いよいよこのシリーズの核心——この複雑なシステムを「どう作るか」。開発の常識を変えるAI駆動開発(AIDD)を契約に盛り込んだ話を書く。

評決ではなく、レンズを。

UIを作る手段はAIで横並びになります。だからこそ、現場の仕事の流れをどう理解し、どこで遷移を減らし、どの通知を強くするか——業務を知る者にしか下せないUXの本質が、使われるシステムを分けます。

AIで「作る」はコモディティになります。手段が横並びになるほど、散らばった知識の“点と点”をつなぎ、自社の本質——何を、どの基準で選び、どう活かすか——を見極める力が問われます。私はアトムビットとして、その見極めを特定ベンダーに肩入れしないフラットな評価軸でお渡しします。売るのは「どれが一番か」という評決ではなく、「あなたの制約でどう選ぶか」というレンズです。最終選定と結果責任は発注者にあります。

選定とAIDDレディネスの要点を1枚にした無料の「評価軸チェックシート」を配布中です。

▶ 無料で受け取る:https://atomb.it/lens?utm_source=note&utm_medium=article&utm_campaign=s3