column

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

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

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

社員が効率的に作業を進めやすい作り込みが必要。効率化だけでなく、デザイン性も求められる|第3回「業務システムの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は、社員が効率的に作業が進みやすい画面にするための作り込みが非常に重要なことだと分かりました。画面を作り込む際には、以下のポイントにも注目しなければなりません。

  • コードでの入力
  • 画面をいっぱいに使う
  • タブでの移動、ショートカットキーなどの利用
  • ひらがな、カタカナ、大文字小文字の統一
  • フォーカスの制御


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

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

この記事の監修者

島田 徹

株式会社プラムザ 代表取締役

一橋大学 経済学部卒 / システムコンサルタント
1998年 に 28歳 で起業 / 現役のシステムエンジニア / ものづくりの第一線で活躍中
業務システムの開発実績は 200件 以上

authority

株式会社プラムザは、開発実績25年・取引企業数300社のシステム開発会社です。さまざまな業種・業界で使用されるオリジナルのシステム構築を得意としています。

システム開発の依頼をご検討されている方は、ザックリした内容でも問題ありませんので、まずはお気軽にお問い合わせください。

|まずはお気軽にご連絡ください|

無料相談・お問い合わせする

OTHERS

マンガで分かる国内ラボ型開発/OLナナちゃんのシステム開発奮闘記

2023.8.25

マンガで分かる国内ラボ型開発/OLナナちゃんのシステム開発奮闘記

MORE

SOLUTION

プラムザではお客様のご要望に合わせて、一般的な受託開発(ラボ型開発や一括請負開発)のほか専門的な各種ソリューションを提供しています。
お客様のビジネスや課題をヒアリングしたうえで、課題解決に最適な方法をトータルサポートいたします。

国内ラボ型開発

国内ラボ型開発

国内ラボ開発を自信を持って提案します!システム担当者さま必見!嬉しいプロマネ+スゴいチームと一緒にはじめてみませんか?

国内ラボ型開発

ZOOM連携開発

ZOOM連携開発

プラムザはZOOM社が認定している提携開発パートナーです。お客様がご利用の既存システムにZOOM機能を連携させる事が可能です。

ZOOM連携開発

PRIME ORDER

ZOOM連携開発

本格的なアジャイル開発の手法を取り入れた開発フロー。プロジェクトに合わせて選べる4種類のサブスクリプション形式の開発サービスです。

PRIME ORDER

一括請負

一括請負

お客様が要望するシステムをゼロから開発します。要件定義からリリースまでを順番通りに進行するオーソドックスな開発サービスです。

一括請負

ノーコード開発

ノーコード開発

OSSを活用したノーコードツールによるシステム開発サービスです。従来の開発手法より1/2~1/3程度のコストカットが可能です。

ノーコード開発

COVER365

COVER365

AWS特化型の運用保守サービスです。24時間365日の有人セキュリティ監視や、サイバー攻撃などのトラブル発生時の即時対応まで可能です。

COVER365

CONTACT

今使ってる業務システムを作り直したい

今使ってる業務システムを作り直したい

他社の見積もりが高くて困っている

他システムと連携したい

といった、ザックリな内容でもOKです。

|まずはお気軽にご連絡ください|

無料相談・お問い合わせする

無料相談・お問い合わせする
プライバシーマーク(Pマーク)

当社は、認定個人情報保護団体の対象事業者となっており
「プライバシーマーク(Pマーク)」の認証を取得しております。

© 2023 plumsa Inc. All rights reserved.