今回は、開発現場で基本設計書（画面仕様書）を作成する中で悩んだ点を、メモ形式でまとめました。この記事を読むことで、初心者でも基本設計書(画面仕様書)に書く内容と書き方がわかるようになると思います！
基本設計書(画面仕様書)
基本設計書（画面仕様書）にはシート別に下記の内容を記載していきます。
| シート名 | 内容 |
|---|---|
| 1. 改訂履歴 | 改訂日、改訂者、改訂内容など。履歴として必ず記載します。 |
| 2. 画面レイアウト | 画面の構成図（ワイヤーフレーム、スケッチ、ツール画像など） |
| 3. 画面仕様書 | 各UI部品の仕様（項目名称、項目種類、属性、桁数、書式、必須、説明など）を記載します。 |
| 4. 入力制御仕様（任意） | 入力チェック内容 （必須チェック、桁数制限、形式チェックなど） |
開発現場によって異なるとは思いますが、基本はExcelで作成することが多いかと思います。この記事では基本となる、改訂履歴〜画面仕様書について説明したいと思います。
改訂履歴
| No | 改訂日 | 作成者 | 改訂内容 |
|---|---|---|---|
| 1 | 2025/5/31 | 平野 | 【顧客管理画面】 新規作成 |
改訂履歴シートには誰が・いつ・どんな変更を加えたかを記録します。
画面レイアウト
画像取得元：kintone 調達・購買チームでの利用イメージ
※画面レイアウトシートの説明のため使わせていただいています
画面レイアウトシートには下記の内容を記載します。
| 項目名 | 説明 |
|---|---|
| 画面ID / 名称 | システムで一意になる画面IDと名称を記載。CM001 / 顧客管理 |
| 画面の概要 / 目的 | この画面で何を行うのか、主な機能や用途の説明（例：ユーザー情報の検索・一覧表示・編集など） |
| 画面レイアウト | ワイヤーフレームやUI設計図の貼り付ける |
| 遷移 | この画面にどこから遷移してきたか（遷移元）、またはどの画面へ遷移するか（遷移先）を記載。遷移図との連携を意識 |
| 備考 | 補足情報や特殊な制御・注意点などがあれば記載 |
画面仕様書
画面仕様書シートは、画面レイアウトの内容に対して項目名称、項目種類、属性、桁数、形式、必須、説明などを記載していきます。
| No | 項目名称 | 項目種類 | 属性 | 桁数 | 書式 | 必須 | 説明 |
|---|---|---|---|---|---|---|---|
| 1 | レコード番号 | ラベル | 9 | 10 | 登録時に自動連番で採番される。編集不可。 | ||
| 2 | 作成者 | アイコン ラベル | X | 50 | 氏名＋アイコン | アイコンから選択。 | |
| 3 | 作成日時 | ラベル | N | 19 | YYYY-MM-DD hh:mm | 登録時の日時を自動設定。編集不可。 | |
| 4 | 更新者 | アイコン ラベル | X | 50 | 氏名＋アイコン | 更新時のユーザーアイコンから選択。 | |
| 5 | 更新日時 | ラベル | N | 19 | YYYY-MM-DD hh:mm | ||
| 6 | 顧客名 | テキスト | X | 50 | ○ | 会社・法人名などを入力。 | |
| 7 | 部署名 | テキスト | X | 50 | ○ | 所属部署名を入力。 | |
| 8 | 担当者名 | テキスト | X | 50 | ○ | 担当者のフルネームを入力。 | |
| 9 | 郵便番号 | テキスト | 9 | 7 | XXXXXXX | ○ | ハイフンなしで入力。 |
| 10 | 住所 | テキスト | X | 100 | ○ | 番地・建物名も含めて入力可。 | |
| 11 | TEL | テキスト | X | 13 | XXX-XXXX-XXXX | ○ | 半角ハイフン含む形式。 |
| 12 | FAX | テキスト | X | 13 | XXX-XXXX-XXXX | 半角ハイフン含む形式。 | |
| 13 | メールアドレス | テキスト | X | 100 | 英数記号を含むメール形式で入力。 |
項目名称
項目名称は、画面に表示している項目名を記載します。
項目種類
項目種類は、画面に表示されているものがどんなものなのかを記載します。
| 項目種類 | 説明 |
|---|---|
| 🏷️ ラベル | 画面に表示される文字列。入力不可。 |
| ✏️ テキスト | 1行の文字入力欄。名前や住所、金額など自由に入力できる入力項目。 |
| 📝 テキストエリア | 複数行の文字入力欄。備考などに使用。 |
| ☑️ チェックボックス | 複数選択が可能な入力項目。 |
| 🔘 ラジオボタン | 選択肢から1つだけ選べるボタン。 |
| 🔽 ドロップダウン（セレクトボックス） | リストから1つ（または複数）選択する形式。 |
| 🔘 ボタン | クリック操作で処理を実行するボタン。 |
| 🔗 リンク | リンクのついた文字列をクリックした時に、他画面や外部ページに遷移するための項目。 |
| 👤 アイコン | アイコンをクリックした時に、他画面や外部ページに遷移するための項目。 |
属性
属性は、どんな種類のデータが入るのかを明確にするために記載します。
| 属性 | 意味 | 一般的な定義 |
|---|---|---|
| 9 | 半角数字（整数） | 数字のみ（0〜9） |
| N | 数値（符号・小数点あり） | 小数点やマイナス符号も含む数字形式（Numeric） |
| X | 文字列（何でも） | 文字・記号・数字を含めた全ての文字 |
※上記の表が一般的な定義になるみたいですが、開発現場によって異なります
桁数
桁数は、画面に表示される最大文字数。またはバイト数で記載します。
| 単位 | 説明 | 一般的な使い分け |
|---|---|---|
| 文字数（=文字単位） | 見たままの1文字あたりを数える。例：「あ」=1、「A」=1 | UIや画面仕様書でよく使われる。 |
| バイト数（=データ量） | 文字コードに応じて1文字あたりのサイズが変わる。例：「A」=1バイト、「あ」=2～3バイト | データベースや通信フォーマット設計で多い。 |
書式
書式はシステムが出力するデータや表示する情報の形式を定義するために記載します。
| 書式の種類 | 書式 | 用途 | 補足 |
|---|---|---|---|
| 日付 | YYYY/MM/DD | 登録日、誕生日など | YYYY-MM-DD などもあり |
| 日時 | YYYY/MM/DD hh:mm | 更新日時、予約日時など | 秒付き → YYYY/MM/DD hh:mm:ss |
| 数値（整数） | 9 または 99999 | 金額、ID、在庫数など | 桁区切りなしが一般的 |
| 数値（小数） | 9.99 または #,##0.00 | 割合、価格など | 小数点以下の桁数も指定 |
| 通貨 | ¥1,000 / $1,000.00 | 金額表示 | 通貨記号＋カンマ区切り |
| 郵便番号 | 999-9999 | 住所入力 | ハイフンの有無を指定することも |
| 電話番号 | 000-0000-0000 | 連絡先 | 固定・携帯で異なるパターン |
| メール | aaa@example.com | メールアドレス | 形式チェックが必要 |
| パスワード | 英数字8〜16文字 | ユーザー認証 | 文字種（英数・記号など）指定あり |
| カナ | 全角カタカナ | フリガナ | 半角不可など制限あり |
| コード | A001, C-1234 | 商品コードなど | 英数字＋記号の組み合わせあり |
※これも開発現場によって異なります。私が今いる開発現場は、数値の書式にはZZZやZZ9を使用しています。
Z：ゼロ抑制（ゼロを空白にする）数値がない場合は空白になります。
9：ゼロ埋めあり（常に数値桁として表示される）値がない場合は0になります。
必須
必須は入力時に必須で登録しないといけないものに、○をします。また、条件付き必須※は△で記載することもあります。
※条件付き必須はある特定の条件で必須になるものです
| 項目 | 条件 | 必須 |
|---|---|---|
| メールアドレス | 常に | ○（必須） |
| 電話番号 | 「連絡方法」で「電話」を選んだ場合 | △（条件付き必須） |
説明
説明は、備考として必要に応じて記載します。
まとめ
基本設計書は要件定義のあとに作成する資料で、プロジェクトや現場によってフォーマットや書き方に違いがあります。私自身、初めて書くときにかなり悩んだので、この記事が「とりあえずどんなふうに書けばいいのか？」のヒントになればうれしいです！
コメント