画面項目定義書の書き方｜項目一覧テンプレートと属性・桁数の記入例

画面項目定義書とは、画面にある項目を1行ずつ並べ、種別・入出力・型・桁・必須・初期値などを決めておく表です。 1行が「この項目をどう作り、どう確かめるか」の単位になるので、列の意味をそろえて、迷わず埋められる書き方にしておくことが大切です。

この記事は、項目1行の書き方に絞ります。列ごとの書き方の早見表、部品の種類ごとに書くべき属性の対応表、架空の備品管理システムの4画面（検索・一覧・登録・詳細）を計55行記入した例を載せます。さらに、定義表から HTML の入力属性（maxlength・required・pattern など）を作る Python のコードと、その HTML をブラウザで開いて判定を確かめた結果を示します。

確認環境：Ubuntu 24.04、Python 3.11.15、Playwright 1.56.0 で起動した Chromium 141.0.7390.37（ヘッドレス）。ブラウザでの判定結果は、この Chromium で確かめたものです。

画面項目定義書の列の早見表

1行に書くのは「その項目だけで決まること」です。 2つ以上の項目にまたがるチェック（開始日が終了日より前、など）や、ボタンを押したあとの処理の流れは、別の表に書いて項目IDで参照します。

項目一覧のテンプレート

Markdown の表です。

### 画面ID 画面名

| 項目ID | 項目名 | 種別 | I/O | 型 | 桁 | 必須 | 初期値 | 活性条件 | 取得元 | 編集仕様 |
|---|---|---|---|---|---|---|---|---|---|---|
| | | | | | | | | | | |

表計算ソフトに貼れるタブ区切りです。複数の画面を1枚にまとめられるよう、先頭に画面IDの列を置いています。

画面ID    項目ID    項目名 種別  I/O 型   桁   必須  初期値 活性条件    取得元 編集仕様

列ごとの値の決め方

種別：部品の種類を決まった語で書く

I/O：入力・表示・両方を3つの値で書き分ける

型と桁：文字の種類と長さを分けて書く

桁は、保存先の列の桁と合わせます。 画面で60文字まで入るのに保存先が40文字、というずれは、項目定義の「桁」と「取得元」を横に並べて確かめると見つかります。

必須・初期値・活性条件：条件があるときの書き方

取得元と編集仕様：出どころと見せ方を分ける

部品の種類別：書くべき属性の対応表

種別によって、埋める列と「－」にしてよい列が決まります。◎は必ず書く、○は当てはまるときに書く、－は対象外です。

ボタンは活性条件が、ラベルは編集仕様が中心になります。入力の部品は左から右まで全部の列を埋める、と覚えておくと書き漏れが減ります。

記入例：備品管理の4画面

社内の備品を管理する架空のシステムで、検索・一覧・登録・詳細の4画面を記入した例です。

EQP010 備品検索（検索条件）：12行

EQP020 備品一覧（検索結果）：13行

EQP030 備品登録（新規・変更）：14行

EQP040 備品詳細：16行

4画面をまとめたタブ区切り（表計算ソフト用）

上の55行を1つにまとめたものです。この内容を screen_items.tsv として保存すると、次の節のコードの入力になります。

画面ID    項目ID    項目名 種別  I/O 型   桁   必須  初期値 活性条件    取得元 編集仕様
EQP010  E010-01 備品番号    テキスト    I   半角英数    10  －   空   常時  画面入力    前方一致で検索。英小文字は大文字に変換
EQP010  E010-02 備品名 テキスト    I   全角半角    60  －   空   常時  画面入力    部分一致で検索。前後の空白を除く
EQP010  E010-03 分類  選択  I   コード 2   －   未選択（すべて）    常時  categories.category_code    選択肢は分類名を表示、コード順
EQP010  E010-04 設置場所    選択  I   コード 3   －   未選択（すべて）    常時  locations.location_code 選択肢は場所名を表示、コード順
EQP010  E010-05 購入日（開始） 日付  I   日付  10  －   空   常時  画面入力    YYYY-MM-DD。この日以降を検索
EQP010  E010-06 購入日（終了） 日付  I   日付  10  －   空   常時  画面入力    YYYY-MM-DD。この日以前を検索
EQP010  E010-07 状態  チェック    I   コード 1   －   「利用可」「貸出中」がON   常時  区分値 equipment_status    複数選択。1つもONでなければすべてを対象
EQP010  E010-08 貸出可のみ   チェック    I   真偽  1   －   OFF 常時  画面入力    ONのとき貸出可の備品だけを検索
EQP010  E010-09 表示件数    選択  I   数値  3   ○   20  常時  固定値 20・50・100   1ページに表示する行数
EQP010  E010-10 検索ボタン   ボタン －   －   －   －   －   常時  －   押すと入力チェックのあと備品一覧を表示
EQP010  E010-11 クリアボタン  ボタン －   －   －   －   －   常時  －   すべての条件を初期値に戻す
EQP010  E010-12 新規登録ボタン ボタン －   －   －   －   －   登録権限があるとき（無ければ非表示）  －   押すと備品登録を新規モードで開く
EQP020  E020-01 検索結果件数  ラベル O   数値  6   －   －   －   検索結果の件数 3桁区切り＋「件」。0件のときは「該当する備品がありません」
EQP020  E020-02 行選択 チェック    I   真偽  1   －   OFF 状態が「廃棄済」以外の行    画面入力    ヘッダのチェックで表示中の行をまとめてON・OFF
EQP020  E020-03 備品番号    リンク O   半角英数    10  －   －   －   equipment.equipment_no  押すと備品詳細を開く
EQP020  E020-04 備品名 ラベル O   全角半角    60  －   －   －   equipment.equipment_name    30文字を超える分は「…」で省略。全文はツールチップ
EQP020  E020-05 分類  ラベル O   全角半角    20  －   －   －   categories.category_name    コードではなく名称を表示
EQP020  E020-06 設置場所    ラベル O   全角半角    30  －   －   －   locations.location_name コードではなく名称を表示
EQP020  E020-07 購入日 ラベル O   日付  10  －   －   －   equipment.purchase_date YYYY/MM/DD。中央寄せ
EQP020  E020-08 購入金額    ラベル O   数値  9   －   －   －   equipment.purchase_amount   3桁区切り、右寄せ。未入力は「－」
EQP020  E020-09 状態  ラベル O   コード 1   －   －   －   equipment.status_kbn    1:利用可 2:貸出中 9:廃棄済 の名称を表示
EQP020  E020-10 貸出可 ラベル O   真偽  1   －   －   －   equipment.lendable_flg  真は「○」、偽は空欄。中央寄せ
EQP020  E020-11 更新日時    ラベル O   日時  16  －   －   －   equipment.updated_at    YYYY/MM/DD HH:MM
EQP020  E020-12 ページ送り   リンク －   －   －   －   1ページ目   前・次のページがあるとき    －   「前へ」「次へ」とページ番号
EQP020  E020-13 CSV出力ボタン    ボタン －   －   －   －   －   検索結果が1件以上のとき    －   検索条件に合う全件を出力（表示中のページだけではない）
EQP030  E030-01 備品番号    ラベル O   半角英数    10  －   新規：「（登録時に採番）」 変更：登録済みの値 －   equipment.equipment_no  変更できない
EQP030  E030-02 備品名 テキスト    I/O 全角半角    60  ○   新規：空 変更：登録済みの値  常時  equipment.equipment_name    前後の空白を除く
EQP030  E030-03 分類  選択  I/O コード 2   ○   新規：未選択 変更：登録済みの値    常時  equipment.category_code 選択肢は categories の分類名、コード順
EQP030  E030-04 型番  テキスト    I/O 半角英数ハイフン    30  －   新規：空 変更：登録済みの値  常時  equipment.model_no  英小文字は大文字に変換して保存
EQP030  E030-05 購入日 日付  I/O 日付  10  ○   新規：当日 変更：登録済みの値 常時  equipment.purchase_date YYYY-MM-DD。当日まで
EQP030  E030-06 購入金額    数値  I/O 数値  9   －   新規：空 変更：登録済みの値  常時  equipment.purchase_amount   範囲 0〜999999999。単位は円
EQP030  E030-07 数量  数値  I/O 数値  3   ○   新規：1 変更：登録済みの値  常時  equipment.quantity  範囲 1〜999
EQP030  E030-08 設置場所    選択  I/O コード 3   ○   新規：未選択 変更：登録済みの値    常時  equipment.location_code 選択肢は locations の場所名、コード順
EQP030  E030-09 管理者メール  テキスト    I/O メール 254 －   新規：ログイン者のメール 変更：登録済みの値  常時  equipment.manager_email メールアドレスの形式
EQP030  E030-10 貸出可 チェック    I/O 真偽  1   －   新規：ON 変更：登録済みの値 常時  equipment.lendable_flg  －
EQP030  E030-11 貸出日数の上限 数値  I/O 数値  2   △   新規：7 変更：登録済みの値  貸出可がONのとき   equipment.max_lend_days 範囲 1〜30。貸出可がONのとき必須
EQP030  E030-12 備考  テキストエリア I/O 全角半角    200 －   新規：空 変更：登録済みの値  常時  equipment.note  改行可
EQP030  E030-13 登録ボタン   ボタン －   －   －   －   －   常時  －   押すと入力チェックのあと確認メッセージを出して登録
EQP030  E030-14 戻るボタン   ボタン －   －   －   －   －   常時  －   入力途中の値があれば確認メッセージを出して前の画面へ
EQP040  E040-01 備品番号    ラベル O   半角英数    10  －   －   －   equipment.equipment_no  －
EQP040  E040-02 備品名 ラベル O   全角半角    60  －   －   －   equipment.equipment_name    省略せず全文を表示。長いときは折り返す
EQP040  E040-03 分類  ラベル O   全角半角    20  －   －   －   categories.category_name    名称を表示
EQP040  E040-04 型番  ラベル O   半角英数ハイフン    30  －   －   －   equipment.model_no  未入力は「－」
EQP040  E040-05 購入日 ラベル O   日付  10  －   －   －   equipment.purchase_date YYYY/MM/DD
EQP040  E040-06 購入金額    ラベル O   数値  9   －   －   －   equipment.purchase_amount   3桁区切り＋「円」。未入力は「－」
EQP040  E040-07 数量  ラベル O   数値  3   －   －   －   equipment.quantity  3桁区切り
EQP040  E040-08 設置場所    ラベル O   全角半角    30  －   －   －   locations.location_name 名称を表示
EQP040  E040-09 状態  ラベル O   コード 1   －   －   －   equipment.status_kbn    名称を表示。「廃棄済」は赤字
EQP040  E040-10 貸出可 ラベル O   真偽  1   －   －   －   equipment.lendable_flg  真は「貸出可（上限 N 日）」、偽は「貸出不可」。N は max_lend_days
EQP040  E040-11 備考  ラベル O   全角半角    200 －   －   －   equipment.note  改行をそのまま表示。未入力は「－」
EQP040  E040-12 登録者・登録日時    ラベル O   全角半角    40  －   －   －   equipment.created_by, created_at    「氏名 YYYY/MM/DD HH:MM」
EQP040  E040-13 更新者・更新日時    ラベル O   全角半角    40  －   －   －   equipment.updated_by, updated_at    「氏名 YYYY/MM/DD HH:MM」
EQP040  E040-14 変更ボタン   ボタン －   －   －   －   －   登録権限があり、状態が「廃棄済」以外のとき   －   押すと備品登録を変更モードで開く
EQP040  E040-15 廃棄ボタン   ボタン －   －   －   －   －   登録権限があり、状態が「利用可」のとき －   確認メッセージのあと状態を「廃棄済」にする
EQP040  E040-16 戻るボタン   ボタン －   －   －   －   －   常時  －   備品一覧へ戻る（検索条件とページを保つ）

4画面を並べると見えること

同じ「購入日」でも、検索では範囲の入力（I・任意）、一覧では YYYY/MM/DD の表示（O）、登録では当日までの入力（I/O・必須）と、画面ごとに I/O・必須・編集仕様が変わります。 項目定義を画面ごとに書く理由はここにあります。

定義表からHTMLの入力属性へ落とす

項目定義の列は、HTML の入力要素の属性にほぼそのまま対応します。

定義表を読んでHTMLを作るPython

screen_items.tsv から、指定した画面の入力項目を HTML にします。標準ライブラリだけで動きます。

"""画面項目定義（TSV）から、入力項目の HTML を作る。

使い方: python3 gen_html.py screen_items.tsv EQP030 > eqp030.html
"""
import csv
import html
import re
import sys
from datetime import date

PATTERN = {                      # 型（文字種）-> pattern 属性
    "半角英数": "[0-9A-Za-z]+",
    "半角英数ハイフン": "[0-9A-Za-z\\-]+",
}


def attrs(d):
    return "".join(f' {k}' if v is True else f' {k}="{html.escape(str(v))}"'
                   for k, v in d.items())


def to_html(r):
    kind, name = r["種別"], r["取得元"].split(".")[-1]
    a = {"id": r["項目ID"], "name": name}
    if r["必須"] == "○":
        a["required"] = True
    if r["I/O"] == "O":
        return f'<output id="{r["項目ID"]}"></output>'
    if kind == "テキスト":
        a["type"] = "email" if r["型"] == "メール" else "text"
        a["maxlength"] = r["桁"]
        if r["型"] in PATTERN:
            a["pattern"] = PATTERN[r["型"]]
        return f"<input{attrs(a)}>"
    if kind == "テキストエリア":
        a["maxlength"] = r["桁"]
        return f"<textarea{attrs(a)}></textarea>"
    if kind == "数値":
        a["type"] = "number"
        m = re.search(r"範囲 (\d+)〜(\d+)", r["編集仕様"])
        if m:
            a["min"], a["max"] = m.group(1), m.group(2)
        a["step"] = 1
        m = re.search(r"新規：(\d+)", r["初期値"])
        if m:
            a["value"] = m.group(1)
        return f"<input{attrs(a)}>"
    if kind == "日付":
        a["type"] = "date"
        if "当日まで" in r["編集仕様"]:
            a["max"] = date.today().isoformat()
        if "新規：当日" in r["初期値"]:
            a["value"] = date.today().isoformat()
        return f"<input{attrs(a)}>"
    if kind == "選択":
        return (f'<select{attrs(a)}><option value="">選択してください</option>'
                f'<option value="01">（マスタから取得）</option></select>')
    if kind == "チェック":
        a["type"], a["value"] = "checkbox", "1"
        if "新規：ON" in r["初期値"]:
            a["checked"] = True
        return f"<input{attrs(a)}>"
    if kind == "ボタン":
        t = "submit" if r["項目名"].startswith("登録") else "button"
        return f'<button id="{r["項目ID"]}" type="{t}">{r["項目名"][:-3]}</button>'
    raise ValueError(f"種別 {kind} の変換が決まっていません")


def main(path, screen_id):
    with open(path, encoding="utf-8", newline="") as f:
        rows = [r for r in csv.DictReader(f, delimiter="\t")
                if r["画面ID"] == screen_id]
    print('<!doctype html>\n<html lang="ja">\n<meta charset="utf-8">')
    print(f"<title>{screen_id}</title>\n<form id=\"f\">")
    for r in rows:
        tag = to_html(r)
        if r["種別"] == "ボタン":
            print(f"  {tag}")
        else:
            print(f'  <p><label for="{r["項目ID"]}">{r["項目名"]}</label> {tag}</p>')
    print("</form>\n</html>")


if __name__ == "__main__":
    main(sys.argv[1], sys.argv[2])

python3 gen_html.py screen_items.tsv EQP030 > eqp030.html

出力された eqp030.html です（2026-10-05 に実行したので、購入日の初期値と上限がその日付になっています）。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>EQP030</title>
<form id="f">
  <p><label for="E030-01">備品番号</label> <output id="E030-01"></output></p>
  <p><label for="E030-02">備品名</label> <input id="E030-02" name="equipment_name" required type="text" maxlength="60"></p>
  <p><label for="E030-03">分類</label> <select id="E030-03" name="category_code" required><option value="">選択してください</option><option value="01">（マスタから取得）</option></select></p>
  <p><label for="E030-04">型番</label> <input id="E030-04" name="model_no" type="text" maxlength="30" pattern="[0-9A-Za-z\-]+"></p>
  <p><label for="E030-05">購入日</label> <input id="E030-05" name="purchase_date" required type="date" max="2026-10-05" value="2026-10-05"></p>
  <p><label for="E030-06">購入金額</label> <input id="E030-06" name="purchase_amount" type="number" min="0" max="999999999" step="1"></p>
  <p><label for="E030-07">数量</label> <input id="E030-07" name="quantity" required type="number" min="1" max="999" step="1" value="1"></p>
  <p><label for="E030-08">設置場所</label> <select id="E030-08" name="location_code" required><option value="">選択してください</option><option value="01">（マスタから取得）</option></select></p>
  <p><label for="E030-09">管理者メール</label> <input id="E030-09" name="manager_email" type="email" maxlength="254"></p>
  <p><label for="E030-10">貸出可</label> <input id="E030-10" name="lendable_flg" type="checkbox" value="1" checked></p>
  <p><label for="E030-11">貸出日数の上限</label> <input id="E030-11" name="max_lend_days" type="number" min="1" max="30" step="1" value="7"></p>
  <p><label for="E030-12">備考</label> <textarea id="E030-12" name="note" maxlength="200"></textarea></p>
  <button id="E030-13" type="submit">登録</button>
  <button id="E030-14" type="button">戻る</button>
</form>
</html>

定義表の「桁 60・必須 ○」が maxlength="60" と required に、「型 半角英数ハイフン」が pattern に、「範囲 1〜999」が min と max になっています。

活性条件と条件付き必須はスクリプトで書く

「貸出可がONのとき活性」「貸出可がONのとき必須」のように、ほかの項目の値で変わる条件は、属性だけでは表せません。数行のスクリプトで切り替えます。

// 活性条件「貸出可がONのとき」：属性だけでは書けないので、数行のスクリプトで切り替える
const lendable = document.getElementById("E030-10");
const maxDays = document.getElementById("E030-11");
function applyEnable() {
  maxDays.disabled = !lendable.checked;   // 非活性
  maxDays.required = lendable.checked;    // 必須「△」＝貸出可がONのとき必須
}
lendable.addEventListener("change", applyEnable);
applyEnable();

ブラウザで判定を確かめた結果

eqp030.html に上のスクリプトを読み込ませて Chromium で開き、値を入れたときの判定（入力要素の validity の各フラグ）と、送信される値（FormData の内容）を Playwright から読み取りました。

--- 1. 開いた直後
form.checkValidity() = False
備品名     値=''            valid=False valueMissing
分類       値=''            valid=False valueMissing
購入日     値='2026-10-05'  valid=True
数量       値='1'           valid=True
設置場所   値=''            valid=False valueMissing
--- 2. 桁（maxlength）
備品名に70文字をキー入力      値=（60文字）   valid=True
備考にスクリプトで300文字     値=（300文字）  valid=True
--- 3. 文字種（pattern）
型番 ab_12   値='ab_12'  valid=False patternMismatch
型番 AB-12   値='AB-12'  valid=True
--- 4. 数値の範囲（min・max・step）
数量 0       値='0'      valid=False rangeUnderflow
数量 1000    値='1000'   valid=False rangeOverflow
数量 1.5     値='1.5'    valid=False stepMismatch
数量 12      値='12'     valid=True
number に maxlength=3   値='12345'  valid=True
--- 5. 日付とメール
購入日 翌日          値='2026-10-06'  valid=False rangeOverflow
購入日 2026-10-01    値='2026-10-01'  valid=True
メール taro              値='taro'  valid=False typeMismatch
メール taro@example.com  valid=True
--- 6. すべて入力して送信される値
form.checkValidity() = True
[["equipment_name","あ…（60文字）"],["category_code","01"],["model_no","AB-12"],["purchase_date","2026-10-01"],["purchase_amount",""],["quantity","12"],["location_code","01"],["manager_email","taro@example.com"],["lendable_flg","1"],["max_lend_days","7"],["note",""]]
--- 7. 貸出可をOFFにする（活性条件）
貸出日数の上限 disabled = True
[["equipment_name","あ…（60文字）"],["category_code","01"],["model_no","AB-12"],["purchase_date","2026-10-01"],["purchase_amount",""],["quantity","12"],["location_code","01"],["manager_email","taro@example.com"],["note",""]]
--- 8. readonly と disabled
readonly の値は送信される: True / disabled の値は送信される: False

（空白の数と一部の値の表示は、読みやすいように整えています。）

結果から、項目定義を書くときに役立つ点をまとめます。

MDN の input 要素のリファレンスにも、maxlength が対象とする type は text・search・url・tel・email・password であること、disabled の入力は送信されないこと、ブラウザ側の入力チェックはサーバーに正しい値が届くことを約束するものではないので、サーバー側でも確かめることが書かれています。

画面項目定義書のチェックリスト

よくある質問

Q. 項目定義は画面ごとに書きますか、項目ごとにまとめますか？ A. 画面ごとに書きます。同じ項目でも、検索・一覧・登録・詳細で I/O・必須・編集仕様が変わるためです。型と桁のように画面をまたいで同じになる部分は、データ項目辞書やテーブル定義と突き合わせてそろえます。

Q. 入力チェックはどこまで項目定義に書きますか？ A. その項目だけで決まること（型、桁、必須、範囲）までを書きます。項目どうしの関係や、データベースを見て判定するチェック、エラーメッセージの文言は、入力チェックの仕様として別の表に書き、項目IDで結び付けます。

Q. 「桁」は全角を2と数えますか？ A. 保存先に合わせます。保存先の列が文字数で長さを決めているなら文字数、バイト数で決めているならバイト数で書き、表の注記に「桁は文字数」と1行入れておきます。なお HTML の maxlength が数える単位は、MDN では UTF-16 のコード単位と説明されています。

Q. 表計算ソフトとMarkdownのどちらで書きますか？ A. 列が多いので、記入と並べ替えは表計算ソフトが向いています。差分を確かめたいときや、この記事のようにコードから読みたいときは、タブ区切りのテキストで保存しておくと扱いやすくなります。

まとめ

• 画面項目定義書は、項目ID・項目名・種別・I/O・型・桁・必須・初期値・活性条件・取得元・編集仕様の11列で、項目1行の作り方と確かめ方を決める表です。
• 種別ごとに埋める列が決まります。 入力の部品は全列、ボタンは活性条件、ラベルは取得元と編集仕様が中心です。
• I/O は I・O・I/O の3つ、必須は ○・△・－ の3つで書き、条件は編集仕様に書きます。
• 初期値は新規と変更で分け、活性条件は非活性と非表示を書き分けます。
• 定義表の桁・必須・型・範囲は、maxlength・required・pattern・min／max に対応し、タブ区切りの定義表から HTML を作れます。
• ブラウザで確かめると、数値に maxlength が効かない、OFF のチェックと非活性の項目は送信されないといった点が見え、編集仕様に書くべきことがはっきりします。

参考・出典

• MDN Web Docs「input: The HTML Input element」 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。