こんにちは。
前回は、**表と表をつなぐ「結合表」**について解説しました。
結合表を使うことで、複数のテーブルに保存されているデータを組み合わせ、より実用的な形で活用できるようになります。
まだブログ記事をご覧になっていない方は、ぜひこちらもご覧ください。
👉 【桐】結合表とは？テーブル同士をつないでデータを活用する仕組み
今回は、その結合表などでまとめたデータを、現場の担当者が使いやすい形で表示したり、入力したりするための**「フォーム」**についてご紹介します。
フォームというと、単なる入力画面というイメージを持つ方も多いかもしれません。
しかし、私が社内SE時代にフォームを使っていた目的は少し違いました。
もちろん、お客様の情報などを入力する画面として利用することもありましたが、それ以上に、利用者が迷わずプログラムを使えるようにするための**「操作パネル」**として活用することが多かったのです。
今回は、私がフォームをどのような考え方で設計していたのかをご紹介したいと思います。
フォームを使う目的は二つ
私がフォームを利用していた目的は、大きく分けると二つありました。
一つ目は、入力内容を整理し、必要な情報だけを入力してもらうことです。
もう一つは、プログラムを起動するためのボタンを配置することです。
プログラムを作ることはできます。
しかし、利用する人が迷ってしまえば、そのプログラムは使われなくなってしまいます。
そのため、現場の担当者が「何を入力して、どのボタンを押せばよいのか」が一目で分かる画面を意識して作成していました。
入力項目は担当者と一緒に決める
フォームを作るときは、最初から完成形を作ることはありませんでした。
まずは私の方で、大まかなレイアウトや入力項目を考えます。
その後、担当者と打ち合わせを行い、
- 「この項目は必要です。」
- 「この項目はいりません。」
- 「この場所にある方が入力しやすいです。」
といった意見を聞きながら、画面を仕上げていきました。
運用が始まってからも、業務内容が変われば不要になる項目もあります。
そのような場合は、項目を削除したり、新しい項目を追加したりしながら改善を続けていました。
フォームは、一度作って終わりではありません。
現場と一緒に育てていくものだと考えていました。
入力項目を整理するだけでミスは減る
送り状発行プログラムを例にしてみます。
送り状を印刷するためには、お客様のお名前、住所、郵便番号、電話番号など、必要最低限の情報が必要になります。
自由に入力できるようにしてしまうと、不要な情報まで入力されたり、入力する場所を間違えたりする可能性があります。
そこでフォームでは、
- お名前
- 郵便番号
- 住所
- 電話番号
というように、項目ごとにラベルと入力欄を配置しました。
利用者は画面に表示された順番に入力するだけです。
入力内容を整理することで、必要な情報だけを入力できるようになり、入力内容もある程度統一されるようになりました。
ボタンを押すだけでプログラムが動く
入力が終わったら、次は送り状を印刷します。
送り状は運送会社によってレイアウトが異なります。
そのため、フォームには利用している運送会社ごとに印刷ボタンを配置していました。
例えば、
- ヤマト運輸
- 佐川急便
- 日本郵便
といったように、利用する運送会社名をそのままボタンに表示します。
利用者は、お客様の情報を入力したあと、利用する運送会社のボタンを押すだけです。
すると、そのボタンに対応したプログラムが起動し、入力された情報を取得して、それぞれの送り状のレイアウトに合わせて印刷します。
また、印刷系や確認系など、ボタンの役割によって色を変えることもありました。
利用者が迷わず目的の操作を選べるようにするためです。
一番時間を掛けたのはレイアウト
フォームを作るうえで、一番時間を掛けていたのはレイアウトでした。
入力画面は、できるだけ大きく作成していました。
入力欄が見やすくなることで入力ミスを防ぎやすくなり、入力した内容もその場で確認しやすくなるためです。
一件ずつ内容を確認するカード形式の画面も、大きめに作ることが多くありました。
画面全体を見渡しやすくすることで、確認作業がしやすくなるからです。
一方で、一覧画面は必要以上に大きくしませんでした。
一覧画面の目的は、一件の内容をじっくり見ることではなく、複数のデータを比較したり、探したりすることです。
コンパクトなサイズにすることで、画面全体を見渡しやすくし、必要な情報を探しやすくしていました。
画面の役割によって、見せ方や大きさを変えることも、フォーム設計では大切なポイントでした。
TabキーとEnterキーにもこだわる
私が特にこだわっていたのが、TabキーとEnterキーの動きです。
まずは入力項目を見やすく並べ、そのうえで画面の流れに合わせて移動順を決めていました。
TabキーとEnterキーは、どちらを使っても同じ順番で入力できるように設定しています。
その理由は、キーボードからなるべく手を離さなくて済むようにするためです。
入力のたびにマウスへ持ち替えていては、小さな時間のロスが積み重なります。
キーボードだけで自然に入力を進められるようにすることで、作業効率も上がり、利用者も入力に集中できます。
こうした細かな部分は見落とされがちですが、毎日使うシステムだからこそ大切にしていました。
現場で使っている様子を見ることも大切
フォームを作ったあとは、何度も現場へ行き、担当者が実際に使っている様子を見ていました。
特に気にしていたのは、TabキーやEnterキーの動きです。
「思った通りに入力してもらえているかな。」とそんなことを考えながら見ていました。
ところが、こちらが想定していないところで担当者がマウスへ持ち替える場面があることもあります。
「ここは入力しにくいのかな。」、「次に移動する順番が分かりにくいのかな。」
そんなことを考えながら原因を探し、作業が終わったあとにTabキーやEnterキーの順番、ボタンの配置などを調整していました。
実際に使っている様子を見ることでしか分からないことは、意外と多かったように思います。
その結果、現場の方から「使いやすくなった」という言葉をいただけたときは、とてもうれしかったことを今でも覚えています。
おわりに
システム開発というと、プログラムを書くことに注目されがちです。
しかし、私が時間を掛けていたのは、利用者が毎日触れるフォームのレイアウトでした。
- 入力項目の並び方。
- ボタンの配置。
- TabキーやEnterキーの動き。
- 画面の大きさ。
一つひとつは小さな工夫かもしれません。
しかし、その積み重ねが「使いやすいシステム」につながります。
私は、システムはプログラムだけで完成するものではなく、利用者が迷わず使える画面まで含めて完成するものだと考えていました。
それが、社内SEとしてフォーム作りで一番大切にしていたことです。
今後は、実際の業務でどのように桐を活用していたのかや、現場で使いやすいシステムを作るために工夫していたことなども、実体験を交えながら深掘りしてご紹介していきます。
また、操作方法や最新情報を動画で学びたい方は、メーカーが運営している公式YouTubeチャンネルも参考になります。
👉 管理工学研究所公式YouTubeチャンネル「桐 おふぃしゃる」
https://www.youtube.com/@k3_kiri
公式では製品情報や操作方法、私のブログでは実際の業務での活用方法や運用経験など、それぞれ異なる視点で情報を発信しています。あわせてご覧いただくことで、桐をより深く理解していただけると思います。
ぜひ、今後の桐シリーズもご覧ください。
関連記事
👉 【桐】結合表とは？テーブル同士をつないでデータを活用する仕組み
👉 【元社内SE実録】「確認してください」では解決しない。誤配送を減らすため、送り状をバーコード対応にした話
👉 【元社内SE実録】「これで仕事が回せる。」その一言がうれしかった｜現場長の判断で作った発注管理表
「もしこの記事が役に立ったと感じたら、SNSでシェアしていただけると嬉しいです！」
その際、インスタグラムやX（Twitter）で**「フォロー」や「シェア」**してもらえると、次の記事を書く大きな励みになります！
他にもSEの裏話や便利なガジェットやちょっと一息つけるようなコラムも用意していますので、ぜひご覧ください。
コメント