入力しやすいレイアウト

項目の数は少ないのに、なぜか入力しにくい。その原因は、並べかたにあるかもしれません。

入力画面の使いやすさは、項目の数だけでは決まりません。並べ方で、同じ項目でも、書きやすさが大きく変わります。

並べる順番の考えかた

仕事の順番に合わせる

現場で作業する順番に、項目を並べます。点検なら「設備を確認 → 日付 → 点検者 → 各部の確認 → 異常の有無 → 備考」のように、作業の流れに沿います。

作業の流れに沿った並びは、次のとおりです。

設備を確認→日付→点検者→各部の確認→異常の有無→備考

たとえば、こんな画面です。設計の画面で、項目に「1. 設備番号」「2. 点検実施日」「3. 点検者」と番号がふられ、作業の順に並んでいます。

• 中央の「基本情報」が、見出し付きのまとまり（セクション）です。
• 項目の左に番号が付き、作業の順番を示しています。

紙の帳票があるなら、まず近づける

現場の人が使い慣れた紙の並びに近づけると、移行の抵抗が減ります。紙の並びが、そもそも使いにくいなら、見直しの機会にします。

大事なものを上に

必須の項目、毎回入力する項目を上に、たまにしか使わない項目は下に置きます。

まとまりを作る

項目が10個を超えると、ひとかたまりでは見づらくなります。関連する項目を、見出し付きのまとまり（セクション）に分けます。

セクションの例	含む項目
基本情報	設備番号、点検日、点検者
点検結果	各部の確認、測定値
異常の記録	不具合の内容、写真
確認	上長の確認

見出しがあると、今どこを入力しているかがわかり、迷いません。長いフォームでは、タブやページで分ける方法もあります。

• 点検の入力画面
  • 基本情報
    • 設備番号
    • 点検日
    • 点検者
  • 点検結果
    • 各部の確認
    • 測定値
  • 異常の記録
    • 不具合の内容
    • 写真
  • 確認
    • 上長の確認

入力した画面では、見出しの下に項目が並び、ラベルは左に置かれています。

• 見出し「基本情報」の下に、まとまった項目が並びます。
• ラベルが左にあり、紙の点検表に近い並びです。

細かい工夫

ラベルの位置

ラベル（項目の名前）は、入力欄の上に置くのが、基本です。左に置くと、紙の申込書のような並びになり、画面が広いときには見やすいですが、スマホでは上に戻したほうが読みやすくなります。

余白とつめぐあい

詰め込みすぎると読みづらく、ゆったりしすぎると、スクロールが長くなります。入力の数が多いときは「コンパクト」、手袋で押すような現場の画面では「ゆったり」というように、使う場面で選びます。

一行に並べすぎない

横に何列も並べると、視線が動いて疲れます。同じ種類の短い項目（郵便番号と都道府県など）だけを、横に並べます。

• 項目が、作業の順番に並んでいる
• 毎回入れる項目が、上にある
• 10個を超えたら、見出し付きに分けた
• 現場の人に使ってもらい、手が止まる場所を見た

まとめ

• 並べる順番は、仕事の順番と、使い慣れた紙に近づける
• 項目が増えたら、見出し付きのまとまりに分ける
• ラベルの位置、余白、つめぐあいを、使う場面に合わせて選ぶ
• 現場で使ってもらい、手が止まる場所を見て直す

Formia でやるなら

フォームデザイナーでは、真ん中の画面が、入力する人が見る姿とほぼ同じように表示されます。右側で「ルック」（スタンダード・カード・紙の様式など）、「詰め具合」（コンパクト・ふつう・ゆったり）、「ラベルの位置」（上・左）を選べます。セクションやタブでの区切りも、画面の下から追加できます（フォームデザイナー、セクションとレイアウト、パーツのライブラリ）。

関連する記事

• 入力項目を絞る
• スマホで入力する前提で作る
• 試作して現場で試す