業務系ツールを開発するときに気をつけたいこと

1. データ（情報）を削除させる場合は、ボタン一押しで削除できるようにしない。

ユーザーが誤ってデータを削除してしまうことを防ぐ。「削除してもよいですか」などのアラートを必ず出すようにする。また誤って削除してしまっても復活できるように、削除したデータは削除フラグを立てたり、ゴミ箱用DBに保存したりしておく。

2. フォームチェックなどシステムの制御にかかわる部分は、できる限りJavaScriptに頼らないようにする。

クライアント側はあくまでも利便性のため。予期せぬことは必ず発生するので、しっかりとサーバー側でもチェックを行うようにする。

3. リセットボタンは嫌われているけど、時と場合によっては大変重宝する。

検索キーワードは検索語も検索フォームに残しておくようにする場合が多いが、検索項目が多いと検索を繰り返す場合、キーワードを手動でひとつひとつ消していくのが面倒くさくなる。こういう場合「リセットボタン」があると便利。

4. 検索結果ページには、検索件数を必ず表示し、ページング、並び替え機能を実装する。

検索機能を実装する際に忘れがちな所となるが、検索件数は必ず表示させるようにする。絞り込みを行う上でも検索件数の表示は大事。それから優先順位的に後回しにされがちであるページングの機能や、並べ替え（ソート）の機能も使い勝手の向上のためしっかり実装しておく。実装していないと、後から必ず指摘される。

5. その検索フォームは部分一致検索なのか、前方一致検索なのか明記しておく。

業務によっては、部分一致検索が便利な場合、前方一致検索が便利な場合などがある。それに合わせて検索機能を実装するはずだが、実装するだけではなく、ちゃんとその旨をページ上に明記しておくことが大事。

6. 表記に英語は使わない。イケてなくてもわかりやすく日本語で。

英語表記は洗練された印象を与えるが、全てのユーザーに同一の意味として伝えることは難しい。またシステム用語がそのまま使われていたり、この場合もわからない人には伝わらない。英語に抵抗のある人もいる。しっかり意味を伝えるためには日本語で表記することが大事。例：アクション ⇒ 操作、ステータス ⇒ 状態、Next ⇒ 次のページへ

7. 自分では当たり前だと思っていることでも、相手はそう思わない。しっかりと文字で明示する。

例えば、顧客情報の一覧表示において、メールアドレスをクリックすると、詳細画面や編集画面が開くものがあったとする。しかしメールアドレスをクリックしたら、ユーザー全員が詳細画面が開くとは思わないはず。しっかり項目をつくり、そこに「詳細を確認する」ボタンや「編集する」ボタンを配置する。

8. 言葉、文言はすべてのページで同一の表記にする。

例えば、顧客情報の表記に関して、あるページでは「ID」、あるページでは「アカウント」となっていることがある。これだと同一のものなのかどうかわかりにくい。必ず同じツール上では表記を統一させる。

9. ボタンの表記はわかりやすい言葉で！「○○する」とする。

例えば、ボタンの表記が「検索」だけだと、極端な話、検索設定なのか、検索しないのか、「検索が何なのか」わからない場合もある。必ず「検索する」とする。もっと丁寧にするなら「○○を検索する」としてもいい。

10. マニュアルは読まないと思ってよい。

マニュアルを用意しても、読まれないことも多い。必ず画面上に「何のための画面」なのか、「何のための操作」なのか説明を加えておく。マニュアルを読まなくても、画面上の表記だけで業務が行えるようにしておく。

11.重要な箇所は大きさ、色などでうまく表現する。

重要な箇所の見せ方を工夫することで、大きく利便性を向上させることができる。操作すべき箇所、データの中でしっかりチェックすべき箇所、こういった部分を迷わず見つけられるようにしておく。

12. エラーメッセージは手を抜かない。

エラーメッセージも後回しにしがちであるが、エラーメッセージをしっかりわかりやすく記述しておくことで、ユーザーからの問い合わせも減らすことができるし、業務の効率化にもつながる。

13. 操作できる部分にカーソルを当てたら、必ずポインターに切り替わるようにする。

操作できる箇所を明確にする。クリックできるのか、できないのかよくわからないものがある。カーソルがポインターに変われば、そこがクリックできる場所であるということがすぐにわかる。

14. テーブルや表を使うときは、ボーダーと文字の距離に気をつける。隙間なくぴっちりくっついていると見づらい。

抽出したデータをテーブルや表を使って表示させることが多いが、ユーザーが最も目にする部分となるので、ここは丁寧に見やすくなるように作る。Webであればpadding、line-heightなどで微調整が大事。見やすい表は、ミスを減らす。

15. IE6対応は必須。クロスブラウザー対策を怠らない。SEOは気にする必要なし。

会社によっては未だにIE6を使っている所もある。どんなブラウザーでも動くように、そしてレイアウトが崩れないように。極端な話、どうしてもレイアウトがうまくいかない場合は、テーブルレイアウトでがちがちに固めてもいいし、W3C準拠違反も時として許される。

16. ime-modeは積極的に使う。

CSSで設定できるime-modeプロパティ。テキスト入力時のIMEの初期状態を指定。日本語、英語の切り替えの多い業務の効率化に大変役立つ。

17. メニューは全ページに共通のものをつける。

トップページがメニューになっていて、次のページに進むと、一旦トップページに戻らないと他のページにいけないようなやつがよくある。メニューのつけ方はいろいろ考えられるが、やはり全てのページで共通のメニューを表示させておくのが使い勝手の観点からもよい方法。

18. とにかく軽く作る！

ページのパフォーマンスはもの凄く大事。重いページほどいらいらするものなく、業務にかなりの支障を与える。軽くしてストレスの少ないページを作る。

19. 見栄えも大事！UIにも気を配る。

業務を少しでも楽しく前向きにやってもらうためには、洗練されたデザインと使い勝手のよいUIが備わっていること。特に毎日触れるものであるのなら、なおさらのこと。ユーザーの愛着のわくようなページを作る。

20. 「ログアウト」も忘れないように！

たまにログアウトできないものがある。ログアウトはセキュリティの観点からも必要なこと。後回しにされそうな部分ではあるが、忘れないようにログアウト機能を実装する。

以上、まだ考えたら思い浮かぶこともあると思いますが、とりあえずメモにあった20項目そのまま書いてみました。とにかく業務ツールを開発する際は、そのツールを使うユーザーのことを常に考えることが重要だと思っています。自分では大丈夫だろうと思って実装した機能でも、まったくその意図が伝わっていないケースが見受けられます。真摯であること、面倒くさがらないこと、それがよいツールを作る上で必要な姿勢だと思います。

それから技術的な部分で言えば、業務ツールはほぼフォームでできています。「フォームの設計」（CRUD）を制するものが、管理ツールを制するといっても過言ではありません。しっかりこの辺の技術を習得して使い勝手の良いツールを作っていきたいですね。