社員が効率的に作業を進めやすい作り込みが必要。効率化だけでなく、デザイン性も求められる｜第3回「業務システムのUIについて考える」

ネットニュースやSNSなどでもよく目にするようになった「UI」という言葉。C向けシステムとは大きく異なる業務システム開発においても、UIが大きな役割を担っています。では、業務システム・システム開発とUIはどのような関係なのか、第三回は「業務システムのUIについて考える」をテーマに学んでいきたいと思います。

効率的に作業を進めやすい画面作り

——詳しく知らない方も多いと思うので、まずは「UI」について簡単な説明をお願いします。

UIはUser Interface（ユーザーインターフェース）の略で、簡単にいうと“画面”です。最近、UIやUXの言葉をよく耳にすると思うんですけど、元々はUIという言葉だけでしたが、例えば、ユーザーが画面を操作すると、ぬるぬる動くアニメーション的な要素も出てきました。それによって、ユーザーに体感を与えることを「UX」と言います。

ただ、業務システムにおいてUXはあまり関係ありません。どちらかと言うと、UXはユーザーに楽しんでもらう要素、業務システムは業務を効率的に回すためのシステムになるのでUIのほうが大切になってきます。

——「業務システム開発は特定のユーザーしか使わないのでC向けのシステムとは大きく異なる」と第一回でおっしゃっていましたが、業務システムのUIにおいても同じことが言えるのですね。

そうですね。第一回の時にもお話しましたが、ECサイトやSNSといったC向けシステムはいろんな人が触るので初見の人にも分かりやすい画面作りにすることが大切です。

でも、業務システムというのは基本的に企業の社員（オペレーター）が使用するシステムで毎日同じ人が使います。そのため、分かりやすい画面作りというよりも、とにかく効率的に作業を進めやすい画面を作ることが一番大事です。

例えば、業務システムの画面がムチャクチャだったり、使いづらかったりすると作業効率が落ちます。業務システムは日々の仕事に関わるものなので、ほんの少しの作業でも時間を取られると毎日コストがかかってしまうんです。

例えば、入力時間が10%でも多くかかってしまうと、毎日の積み重ねで年間何百万円もの人件費になることがあります。そういう意味では、いかに早くスピーディーに入力できる画面作り、そういうUIを作り込めるかどうかが重要です。

——個人的な意見で恐縮ですが、UIといえばWebデザイナーが担当するものばかりだと思っていました。

全てをWebデザイナーにお任せするということはありませんが、Webデザイナーと一緒に画面作りを行うこともあります。サーバーサイドのプログラムが得意なプログラマーの人は割とUIが苦手ということが結構ありますので……。

Webデザイナーがデザインを作り、それを構築していくのがプログラマーという感じです。詳しく説明すると、さらに役割分担は細かく分かれています。

——細かく分かれているとは？

Webデザイナーが描いた絵をフロントエンジニアがHTMLやJavaScriptにして動きを作り、サーバー側のプログラムをバックエンド担当のエンジニアが作るという3人体制（Webデザイナー・フロントエンジニア・バックエンド担当のエンジニア）が一般的です。

プログラマーだけで作るよりも、デザインやレイアウトセンスのよいWebデザイナーの方を入れて作ったほうが、入力しやすくなり、オペレーターのモチベーションも上がります。

また、業務システムにおけるUIは、入力効率化のためにマニアックな工夫が許されます。予算との兼ね合いもありますが、業務システムのUIは作業の効率化を目指してガンガン作り込んでいくのが特徴です。

業務システムのUIで押さえておきたい5つの要素

——業務システムのUI、画面作りのポイントを教えてください。

全部で以下の5つがあります。

1つ目は「コードでの入力」です。

これは前にお話したことでもありますが、例えば、マウスでクリックしてプルダウン（※1）を開き、その中から選ぶという作業をするだけでも時間の無駄になってしまいます。でも、コードをしっかりと覚えておけばその作業が省けます。業務システムを開発する際も、コードを求められるクライアントは結構多いです。例えば、出荷はA、入荷状況はBなど、会社独自で使っているコードもたくさんあります。やっぱりコードを設定しておいたほうが、一段と作業しやすくなります。

（※1：あらかじめ決まった選択肢の中から選ばせる表示方法。）

——コードの入力は、業務システムにおいて大事な要素なのですね。

そして2つ目は「画面をいっぱいに使って良い」ことです。

普通のユーザーが使うECサイトなど、自分の名前や住所を入れるところはだいたい縦スクロールで入力していくと思います。ゆっくり入力するときは縦スクロールでも構いませんが、業務システムの場合はできるだけスクロール数を減らすために、ひと画面で一気に見られるようにするべきです。

あと、画面サイズも会社によっては決めることが多いです。あらかじめ画面サイズが決まっていれば、そのサイズに合わせて画面レイアウトを作ります。古い端末だと横サイズが狭く、横スクロールをしなければならないときもありますが、業務システムにおいて横スクロールは絶対にNGです。

——その理由は？

横スクロールが出てしまうと、作業効率が格段に落ちるからです。だからこそ、そうならないように、最初に画面サイズをお伺いしてから画面を作り込んでいきます。

ただ、正直な話、作るのはとても大変なことでして……。後で場所を入れ替えることを考えると、画面いっぱいに配置するよりも縦画面で配置したほうが楽なんです。

なので、クライアントの要望をお伺いしながら、程よいバランスを見つけて作り込んでいくことが大事になってきます。「ここは後から直すと大変になります」としっかり伝えておかないと、後でトラブルになってしまうこともあるので。

開発会社にとっては毎回同じような仕事をやっているので当たり前と思っていることでも、クライアント側にとっては初めてで分からないことが多いので、弊社では詳しく説明し大切なところはきちんとお伝えしています。

——なるほど。画面作りにおいてもクライアントとのコミュニケーションが重要になってくるというわけですね。

これも効率化に繋がりますが、画面作りの3つ目のポイントとして「タブでの移動、ショートカットキーなどの利用」があります。

とにかくマウスを使うと遅くなるので、“カーソルが当たってタブを押すと次に飛ぶ”というように作ります。そこをしっかりと作り込んでおかないと、普段使わないような入力欄に飛んでしまうからです。そこを制御し、必要項目だけにカーソルが飛ぶようにチューニングしていきます。

例えば、項目をたくさん入力するところがあっても普段使うのは限られた項目だけというケースがあります。必要項目だけにしっかりと飛ぶように、業務システムのUIで設計をしてプログラマーが実装しなければなりません。

あと、先ほど、独自のコードが作れるとお話しましたが、ショートカットキーについても独自のものを作ることができます。

——4つ目の「ひらがな、カタカナ、大文字小文字の統一」ですが、こちらはどういうことなのでしょうか。

例えば、顧客のフリガナを入力するとき、ひらがなで入力すべきところをカタカナにしてしまい、再度入力しなければならなくなったということがあります。ECサイトでも登録時にエラーになり、入力し直したという方は多いのではないでしょうか。

——それはよくあります！ エラーになるたびに登録が面倒くさくなって、登録を諦めこともしばしば……。

そこを自動的に変換するようシステムのほうで設定しておけば、入力し直すという二度手間が発生しません。業務システムでそういう設定をしておくと、間違えてもきちんと正しく変換されるので作業の効率化に繋がります。

——そういう意味では、最後の5つ目も重要ですね。

はい。最後の5つ目「フォーカスの制御」に関しては先ほど少しお話しましたが、必要項目のタブキーにフォーカスが当たるよう制御していくことです。

入力した文字を間違えた場合、その文字を消去するために「|ビーム（※2）」で一文字ずつ消去するのが一般的だと思うんですけど、業務システムだとその手間が惜しいです。なので、カーソルが当たった瞬間に全ての文字が選択されている状態にする。そうすれば、いきなり文字を打ってもすぐに修正できるというわけです。そういう細かい積み重ねが、業務システムにおいてはとても大事になってきます。

（※2：たてビーム。「｜」の形状をしているカーソルのこと。）

業務が楽しく捗りやすいデザインに

——業務システムのUIについて、細かい積み重ねが大事になるというお話でしたが、最近は少し変わってきているところもあるとか……。

細かい工夫はもちろん、最近はデザイン性も大事になってきました。やっぱり見やすい画面というのは間違いを防ぎますし、逆にガチャガチャなっている画面ではよく分からなくなります。

前述したように、業務システムは毎日使うシステムなので、見えづらく汚い画面だと社員のやる気もなくなってしまう。ストレスを軽減するという意味でも美しい画面、美しいUIが求められてきています。

——業務システムのUIにおける美しいデザインとは、どのような感じなのでしょうか。

そうですね……クライアントの業務内容などで異なりますが、たとえば英会話教室での業務システムだと、会員情報・家族・問い合わせ・受講履歴などがすぐ閲覧できるようにタブで分けていたり、それぞれのタブを開くとひと目で必要な情報が見られるよう画面いっぱいに細かく表示したりするなどです。

特に、お客さまからの要望があった訳ではなくても、メニューの一つのカテゴリーをクリックするだけで、その中の子メニューが横からシュッと出てきて選択できるなど、あちこちの画面に飛ぶ必要がない工夫や日々の業務が楽に楽しくなるような工夫をしています。

——スクロールしなくてもひと画面で情報が見られるのは、確かに整理整頓された美しい画面ですね。

そうですね。細かいところでいうと、タブの角を丸くしたり余白を作ったりするのも工夫のひとつです。業務システムはスピードや作業の効率化を目指して開発しますが、このように画面のデザインにも配慮することで、より使いやすく業務が捗るシステムになります。

開発会社の中には「これは無理です」「できません」と言うところもありますが、大抵のことはやればできるんです。業務システムは端末やブラウザも固定できますが、C向けシステムだけ開発してきた方だと知らなかったり、そこまで考えられなかったりすることもあります。

まとめ

第3回「業務システムのUIについて考える」をテーマにお話してきましたが、いかがでしたでしょうか。

業務システムにおけるUIは、社員が効率的に作業が進みやすい画面にするための作り込みが非常に重要なことだと分かりました。画面を作り込む際には、以下のポイントにも注目しなければなりません。

そして、クライアントとの打ち合わせをしっかりと重ね、予算内でどういうことができるのかを明確に伝えるのが大切とのこと。特に、最近はデザイン性も求められているので、より作業が捗りやすい画面作りがポイントになるというお話が印象的でした。

さて、次回は「システム開発の属人化を解消する方法」をテーマにお話を伺います。なぜシステム開発では、属人化（業務や進捗情報など特定人物しか把握していない状況）を解消しなければならないのか、属人化のデメリットと併せて解説するのでぜひお見逃しなく！