ワークフローサンプル: 第591話：入力画面を工夫して、業務カイゼンに繋げよう！

毎日利用する業務システムでは、入力インタフェース（入力画面）がわかりやすいかどうか、使いやすいかどうかは利用者にとってとても重要です。

ワークフローシステムにおいても、
・「何を入力したら良いのかわからない」
・「入力例やフォーマットがあるとわかりやすいのに」
・「せっかく入力したのに、入力エラーになったり、差し戻された」
・「人によって入力の仕方がバラバラで...」
といった声をよく聞きます。

そして、「出退勤の報告」「稟議の申請」「受注の報告」「問合に対する回答」などなど、、、日々の業務を思い返してみると、そこで発生する遅延や手戻りの多くは『上流工程における誤入力や不適切入力』が原因となっていることがほとんどです。

「業務改善」というと、業務フローの標準化やリソースの最適配置など大きな話になりがちですが、取り組む内容が大きくなればなるほど、その効果がでるまでに時間がかかってしまいます。一方で、「入力画面を工夫して、誤入力や不適切な入力を減らす」といったことは、日々の業務の中ですぐに取り組める小さな「業務改善」と言えるでしょう。小さなカイゼンを繰り返すことが、大きな成果にも繋がっていきます。

今回のワークフローサンプルでは、「入力例ボタン」のクリックで入力できる入力画面の工夫を紹介します。

［入力フォームのテストフロー］

[入力フォームのテストフロー：「1.入力テスト」画面]

入力画面を設計する際は、わかりやすい「データ項目名」を設定したり、入力説明の文章や入力例を記載しておく（入力ヒント）ことが基本となります。さらに、文字入力ではなく選択肢で選べるようにしたり、データ初期値を設定しておくことで、利用者の入力負荷は軽減されますし、入力データのバラツキを抑えることにもつながります。

その上で、入力支援を行うためのボタンを配置したり、入力チェックや他のデータ項目へのデータセットを行うようなスクリプトの利用を検討するのが良いでしょう。

Questetra の［入力ヒント］には任意の HTML／JavaScript を設定できますが、場合によっては「入力フォームの全体レイアウトを崩してしまう」等のトラブルになる可能性もあります。HTML／JavaScript の知識や経験のあるスタッフ自身が、自己責任においてメンテナンス可能な範囲で設定する必要があると言えます。
▼［入力ヒント］設定サンプル（HTML/JavaScript）：『サービス名』

例：<button type="button" id="btnConsultant_1">月額顧問料（月単位）</button>、
<button type="button" id="btnInstruct_1">講習会講師料（日単位）</button>、
<button type="button" id="btnDoc_1">ドキュメント作成費</button>
<script type="text/javascript">
jQuery('#btnConsultant_1').on('click',function(){
jQuery('input[name="data\\[1\\].input"]').val( "月額顧問料（月単位）" );
});
jQuery('#btnInstruct_1').on('click',function(){
jQuery('input[name="data\\[1\\].input"]').val( "講習会講師料（日単位）" );
});
jQuery('#btnDoc_1').on('click',function(){
jQuery('input[name="data\\[1\\].input"]').val( "ドキュメント作成費" );
});
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『見積価格』

例：<button type="button" id="btnS_2">（15年キャリア）820,000</button>、
<button type="button" id="btnA_2">（5年キャリア）452,000</button>、
<button type="button" id="btnB_2">（5年未満）339,000</button>

<script type="text/javascript">
jQuery('#btnS_2').on('click',function(){
jQuery('input[name="data\\[2\\].input"]').val( "820000" );
});
jQuery('#btnA_2').on('click',function(){
jQuery('input[name="data\\[2\\].input"]').val( "452000" );
});
jQuery('#btnB_2').on('click',function(){
jQuery('input[name="data\\[2\\].input"]').val( "339000" );
});
jQuery('input[name="data\\[2\\].input"]').parent().parent().css("background-color","#FFC0CB");
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『欠勤理由』

例：<button type="button" id="btn1_5">レジャーや家庭の都合など：私用（プライベート）</button>、
<button type="button" id="btn2_5">地域のイベントに参加する場合：私用（地域行事参加）</button>、
<button type="button" id="btn3_5">朝起きて腹痛だった場合：体調不良（腹痛）</button>、
<button type="button" id="btn4_5">子供発熱の場合：看病（子供）</button>

<script type="text/javascript">
jQuery('#btn1_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "私用（プライベート）" );
});
jQuery('#btn2_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "私用（地域行事参加）" );
});
jQuery('#btn3_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "体調不良（腹痛）" );
});
jQuery('#btn4_5').on('click',function(){
jQuery('input[name="data\\[5\\].input"]').val( "看病（子供）" );
});</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『稟議概要』『予算区分』

頻出：<button type="button" id="btnExhibit_78">（予算内の展示会出展）</button>、
<button type="button" id="btnProcurement_78">（想定外の備品調達）</button>

<script type="text/javascript">
jQuery('#btnExhibit_78').on('click',function(){
jQuery('input[name="data\\[7\\].input"]').val( "Cloudエキスポ出展に関連する外注" );
jQuery('input[name="data\\[8\\].selects"][value="1"]').prop('checked', true);
});
jQuery('#btnProcurement_78').on('click',function(){
jQuery('input[name="data\\[7\\].input"]').val( "故障に伴うパソコンの購入" );
jQuery('input[name="data\\[8\\].selects"][value="3"]').prop('checked', true);
});
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『稟議理由』

<span style='color:#ff0000;'>※要点を押さえ、箇条書きで記入すること</span><br>
文例：<button type="button" id="btnReasonA_9">（パソコンの故障）</button>、
<button type="button" id="btnReasonB_9">（人員増に伴う急な追加）</button>、

<script type="text/javascript">
jQuery('#btnReasonA_9').on('click',function(){
var myReason = "";
myReason += "運搬中の落下(2015年12月)によりモニタ外部出力が破損している\n";
myReason += "2013年1月の購入から3年以上が経ち最新OSの動作に支障がある\n";
myReason += "D社は最安値とはなっていないが、他社の差額は小さく、使い慣れた従来シリーズ機とする";
jQuery('textarea[name="data\\[9\\].input"]').val( myReason );
});
jQuery('#btnReasonB_9').on('click',function(){
var myReason = "";
myReason += "想定を超える注文を受け、対応アルバイトを30人増員する\n";
myReason += "予備パソコンは20台しかなく、10台の追加が必要となった\n";
myReason += "（D社は最安値かつ最短納期となっている）";
jQuery('textarea[name="data\\[9\\].input"]').val( myReason );
});
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『契約開始月』

<button type="button" id="btnThisMon_11">今月</button>、
<button type="button" id="btnNextMon_11">来月</button>

<script type="text/javascript">
jQuery('#btnThisMon_11').on('click',function(){
var myToday = new Date();
var y = myToday.getFullYear();
var m = myToday.getMonth() + 1; // Jan: 0
if (m < 10) { m = '0' + m; }
jQuery('input[name="data\\[11\\].input"]').val( y + "-" + m );
});
jQuery('#btnNextMon_11').on('click',function(){
var myToday2 = new Date();
myToday2.setDate(1);
myToday2.setMonth(myToday2.getMonth() + 1);
var y2 = myToday2.getFullYear();
var m2 = myToday2.getMonth() + 1; // Jan: 0
if (m2 < 10) { m2 = '0' + m2; }
jQuery('input[name="data\\[11\\].input"]').val( y2 + "-" + m2 );
});
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『契約終了月』

<button type="button" id="btnOneYear_12">→１年契約</button>、
<button type="button" id="btnTwoYear_12">→２年契約</button>

<script type="text/javascript">
jQuery('#btnOneYear_12').on('click',function(){
var myDateStr = jQuery('input[name="data\\[11\\].input"]').val();
var myStartMon = new Date( myDateStr + "-01");
var myEndMon = new Date();
myEndMon.setMonth( myStartMon.getMonth() + 11 );
var y = myEndMon.getFullYear();
var m = myEndMon.getMonth() + 1; // Jan: 0
if (m < 10) { m = '0' + m; }
jQuery('input[name="data\\[12\\].input"]').val( y + "-" + m );
});
jQuery('#btnTwoYear_12').on('click',function(){
var myDateStr = jQuery('input[name="data\\[11\\].input"]').val();
var myStartMon = new Date( myDateStr + "-01");
var myEndMon = new Date();
myEndMon.setMonth( myStartMon.getMonth() + 23 );
var y = myEndMon.getFullYear();
var m = myEndMon.getMonth() + 1; // Jan: 0
if (m < 10) { m = '0' + m; }
jQuery('input[name="data\\[12\\].input"]').val( y + "-" + m );
});
</script>

＜データ項目一覧画面＞