画面共通仕様とは、システムのすべての画面で守る決め事を1冊にまとめた設計書です。 ボタンの並び順、必須の示し方、メッセージの出る場所のように、画面ごとに決め直すと揺れてしまうルールをここに集めます。個別の画面設計書は「この画面だけの内容」に集中でき、レビューも短くなります。

この記事では、画面共通仕様書の目次と項目一覧を記入例つきで示し、テンプレートの全文を Markdown とタブ区切りで載せます。題材は架空の「社内の備品予約システム」です。二重送信防止と数値の書式は、短いコードを動かして結果を確かめています。

確認環境:Ubuntu 24.04 / Chromium 141.0.7390.37(Playwright 1.56.0 で操作)/ Python 3.11.15(確認日 2026-10-05)。アクセシビリティの記述は WCAG 2.2 日本語訳(W3C 勧告 2024-12-12 の翻訳)を開いて確認しました。

この記事の結論

  • 画面共通仕様に書くのは「2画面以上に当てはまるルール」。1画面だけの内容は個別の画面設計書に書く。
  • 目次は10章が基本:レイアウト、ボタン、必須表示、入力制御、メッセージ、確認ダイアログ、書式、二重送信防止、タイムアウト、0件表示。
  • 各ルールは「場面・決め事・記入例・例外の扱い」の4列で書くと、読む人が迷わない。
  • 個別の画面設計書には「共通仕様 3.2 に従う」と番号で参照を書く。同じ文章を写さない。
  • 例外は共通仕様の側に一覧で残す。どの画面がどのルールから外れるかを1か所で追える。

画面共通仕様書の目次と項目一覧の早見表

章 項目 決めること 記入例
1 適用範囲 対象の画面、対象の端末とブラウザ、例外の扱い 全画面。例外は 12 章の一覧に書く
2 レイアウト ヘッダー・メニュー・本文・フッターの配置、画面幅、見出しの階層 ヘッダー固定、左メニュー、本文の最小幅 1280px
3 ボタン配置と並び順 位置、並び順、ラベルの言葉、主ボタンの数 画面下部の右寄せ。左から「戻る」「一時保存」「登録」
4 必須表示 必須の示し方、任意の示し方、凡例 ラベルの後ろに「必須」の文字。色だけで示さない
5 入力制御 文字種、桁数、前後の空白、IME、初期フォーカス、Tab の順 前後の空白は取り除く。Tab は左上から右下へ
6 メッセージ表示位置と種別 種別(エラー・警告・情報・完了)、出す場所、消えるタイミング 項目エラーは項目の直下、完了は画面上部に 5 秒
7 確認ダイアログ 出す操作、文言の型、ボタンの並びと初期フォーカス 削除は必ず確認。初期フォーカスは「キャンセル」
8 日付と数値の書式 日付、時刻、数値の桁区切り、小数、端数処理、単位、空の表示 2026/10/05、1,234,567、空は「-」
9 二重送信防止 画面側の制御、サーバー側の制御、押したあとの表示 押したらボタンを無効化し「登録中…」と表示
10 タイムアウト セッションの時間、事前の知らせ、切れたあとの動き、入力中の内容 無操作 30 分。5 分前に延長の案内
11 0件表示 検索 0 件、初期状態、読み込み中、取得エラーの表示 「条件に合う備品はありません」と条件の見直し案
12 例外一覧 共通ルールから外れる画面と理由 ログイン画面はメニューを表示しない

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

(記載例)出典:株式会社RJC「画面共通仕様の書き方|UI設計ガイドライン項目一覧と記入例」

画面共通仕様・個別の画面設計書・デザインシステムの違い

3つは「どの範囲のことを」「誰のために」書くかで分かれます。

観点 画面共通仕様 個別の画面設計書 デザインシステム
範囲 1つのシステムの全画面 1つの画面 複数のシステムや製品
中身 動きと表示の横断ルール 項目、イベント、遷移、その画面のメッセージ 色、文字、余白、部品の見た目と使い方
主な読み手 設計者、開発者、テスト担当 その画面の開発者、テスト担当 デザイナー、フロントエンド開発者
書く時期 基本設計の最初 共通仕様のあと システムをまたいで育てる
形 1冊の設計書(章と表) 画面ごとの設計書 部品カタログとコード
変えたときの影響 全画面 その画面 採用しているすべてのシステム

どこに書くかを迷ったときの基準です。

条件 書く先
2画面以上に当てはまる動きや表示のルール 画面共通仕様
その画面にしか無い項目、ボタン、チェック 個別の画面設計書
色コード、文字の大きさ、余白、部品の形 デザインシステム(無ければ共通仕様の付録)
共通ルールどおりだが、念のため画面設計書にも書きたい 書かずに「共通仕様 n 章に従う」と参照する
共通ルールから外れる 共通仕様の例外一覧に画面 ID と理由を書き、画面設計書からも参照する
メッセージの ID と文言 メッセージ一覧。共通仕様には出す場所と種別のルールだけを書く
項目ごとのチェック内容 入力チェック仕様。共通仕様にはチェックの時機とエラーの見せ方だけを書く

画面共通仕様を書く手順

手順 やること できあがるもの
1 代表的な画面を3種類選ぶ(一覧、登録・編集、詳細) 対象画面のメモ
2 3種類の画面を並べ、同じ場面で揺れそうな点を拾う 論点の一覧
3 論点を章に割り当て、「場面・決め事・記入例・例外の扱い」で書く 共通仕様の初版
4 決め事に番号を振る(3.1、3.2 …) 参照できる番号
5 個別の画面設計書のひな形に「共通仕様に従う章」の欄を作る 画面設計書のひな形
6 画面を設計しながら、外れる画面を例外一覧に足す 例外一覧
7 変更したら版と変更点を残し、影響する画面を洗い出す 改版履歴

決め事の文は「〜する」と言い切ります。「原則として」「なるべく」と書くと、読む人ごとに判断が分かれます。外れる場合があるなら、例外一覧に画面 ID で書きます。

画面共通仕様書のテンプレート全文(記入例つき)

そのまま貼って使える Markdown です。備品予約システムを題材に記入してあります。

# 画面共通仕様書

| 項目 | 内容 |
|---|---|
| システム名 | 備品予約システム |
| 文書 ID | UI-COMMON-001 |
| 版 | 1.0(2026-10-05) |
| 作成者 / 承認者 | 山田 / 佐藤 |

## 1. 適用範囲

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 1.1 | 対象の画面 | 利用者向け・管理者向けの全画面に適用する | 画面 ID が SC で始まる画面すべて | 12 章に書く |
| 1.2 | 対象の環境 | 対象の端末、ブラウザ、画面幅を決める | PC、Chromium 系ブラウザの最新版、幅 1280px 以上 | なし |
| 1.3 | 優先順位 | 個別の画面設計書と食い違うときの扱いを決める | 例外一覧に載っていれば画面設計書、無ければ共通仕様 | なし |

## 2. レイアウト

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 2.1 | 全体の構成 | ヘッダー、メニュー、本文、フッターの位置を固定する | 上にヘッダー、左にメニュー、右に本文 | ログイン画面はヘッダーのみ |
| 2.2 | ヘッダー | 表示する内容を決める | システム名、ログイン中の氏名、ログアウト | なし |
| 2.3 | 画面タイトル | 本文の先頭に画面名を1つ表示する | 「備品一覧」「備品の登録」 | なし |
| 2.4 | 項目の並び | ラベルと入力欄の位置関係を決める | ラベルは入力欄の上、左ぞろえ | 検索条件は横並び |
| 2.5 | 一覧 | 列の並び、既定の並び順、1ページの件数を決める | 既定は更新日時の新しい順、20 件 | なし |
| 2.6 | パンくず | 表示する階層を決める | トップ > 備品一覧 > 備品の登録 | トップ画面は表示しない |

## 3. ボタン配置と並び順

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 3.1 | 位置 | 画面を進めるボタンは本文の下部に右寄せで置く | 登録、更新、検索 | 一覧の行ごとの操作は行の右端 |
| 3.2 | 並び順 | 左から「戻る・取り消す系」「補助」「主ボタン」の順に置く | 戻る / 一時保存 / 登録 | なし |
| 3.3 | 主ボタン | 1画面に主ボタンは1つにする | 塗りつぶしは「登録」だけ | なし |
| 3.4 | ラベル | 動詞で書き、同じ操作は同じ言葉にする | 登録、更新、削除、検索、戻る | 「OK」「はい」は使わない |
| 3.5 | 削除などの操作 | 主ボタンから離して置き、見た目を変える | 画面左下に枠線だけの「削除」 | なし |
| 3.6 | 押せない状態 | 押せない理由が分かるようにする | 権限が無い操作はボタンを表示しない | なし |

## 4. 必須表示

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 4.1 | 必須の示し方 | ラベルの後ろに文字で示す | 備品名 必須 | なし |
| 4.2 | 色 | 色だけで必須を示さない | 赤い文字に加えて「必須」と書く | なし |
| 4.3 | 任意の項目 | 何も付けない | 備考 | なし |
| 4.4 | 条件つきの必須 | 条件を補足文で示す | 「状態が修理中のときは必須」 | なし |

## 5. 入力制御

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 5.1 | 初期フォーカス | 画面を開いたときの位置を決める | 最初の入力欄 | 一覧は検索条件の先頭 |
| 5.2 | Tab の順 | 左上から右下へ、見た目の順にする | 入力欄 → ボタン | なし |
| 5.3 | 前後の空白 | 保存の前に取り除く | 「 A-001 」→「A-001」 | パスワードは取り除かない |
| 5.4 | 全角と半角 | 英数字の扱いを決める | 半角に変換して保存 | 備考はそのまま |
| 5.5 | 桁数 | 上限を超える入力の扱いを決める | 入力はできるが、エラーで知らせる | なし |
| 5.6 | チェックの時機 | いつ項目をチェックするかを決める | 入力欄を離れたときと、登録を押したとき | なし |
| 5.7 | Enter キー | 入力欄で Enter を押したときの動きを決める | 検索条件では検索、登録画面では何もしない | なし |
| 5.8 | 選択肢 | 件数による部品の使い分けを決める | 5 件以下はラジオボタン、それ以上はプルダウン | なし |

## 6. メッセージ表示位置と種別

| No | 種別 | 出す場面 | 出す場所 | 消えるタイミング | 記入例 |
|---|---|---|---|---|---|
| 6.1 | 項目エラー | 入力内容に直すところがある | 項目の直下 | 直して入力欄を離れたとき | 備品名を入力してください。 |
| 6.2 | 画面エラー | 項目に結び付かない問題 | 本文の上部 | 次の操作をしたとき | ほかの人が先に更新しました。画面を読み込み直してください。 |
| 6.3 | 警告 | 続けられるが確認が要る | 本文の上部 | 閉じるボタン | 返却予定日を過ぎた予約が 2 件あります。 |
| 6.4 | 情報 | 知らせるだけ | 本文の上部 | 閉じるボタン | 10/12 は棚卸しのため予約できません。 |
| 6.5 | 完了 | 操作が終わった | 画面上部の通知 | 5 秒後。閉じるボタンも付ける | 備品を登録しました。 |
| 6.6 | システムエラー | 処理を続けられない | エラー画面 | なし | 時間をおいてもう一度お試しください。(問い合わせ番号 E-20261005-0012) |

- 6.7 項目エラーが複数あるときは、本文の上部に件数を出し、最初のエラー項目にフォーカスを移す。
- 6.8 色に加えて、種別ごとのアイコンと見出しの文字で区別する。
- 6.9 文言と ID はメッセージ一覧で管理し、この章には場所と種別のルールだけを書く。

## 7. 確認ダイアログ

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 7.1 | 出す操作 | 元に戻せない操作にだけ出す | 削除、一括更新、予約の取り消し | 登録・更新では出さない |
| 7.2 | 文言の型 | 「何を」「どうするか」を1文で書く | 備品「プロジェクター A」を削除します。よろしいですか。 | なし |
| 7.3 | ボタン | 左にやめる、右に実行。実行は動詞で書く | キャンセル / 削除する | なし |
| 7.4 | 初期フォーカス | やめる側に置く | キャンセル | なし |
| 7.5 | 入力途中での移動 | 変更があるときだけ確認する | 入力した内容は保存されません。移動しますか。 | なし |
| 7.6 | 閉じ方 | Esc キーと枠の外のクリックの扱いを決める | Esc はキャンセルと同じ。枠の外は何もしない | なし |

## 8. 日付と数値の書式

| No | 対象 | 表示 | 入力 | 記入例 |
|---|---|---|---|---|
| 8.1 | 日付 | YYYY/MM/DD | カレンダーまたは直接入力 | 2026/10/05 |
| 8.2 | 日時 | YYYY/MM/DD HH:MM(24 時間) | 日付と時刻を分けて入力 | 2026/10/05 09:05 |
| 8.3 | 曜日 | 一覧では日付の後ろにかっこで付ける | なし | 2026/10/05(月) |
| 8.4 | 期間 | 開始と終了を「〜」でつなぐ | 開始 ≦ 終了を確かめる | 2026/10/05 〜 2026/10/07 |
| 8.5 | 整数 | 3 桁ごとにカンマ、右ぞろえ | カンマなしでも受け付ける | 1,234,567 |
| 8.6 | 負の数 | 先頭にマイナス | 同じ | -1,234,567 |
| 8.7 | 小数 | 桁数と端数処理を決める | 桁数を超えたらエラー | 1,234.50(小数 2 桁、四捨五入) |
| 8.8 | 割合 | 小数 1 桁と % | 数字だけを入力 | 25.6% |
| 8.9 | 単位 | 入力欄の右に付ける | なし | 3 台 |
| 8.10 | 値が無い | 記号を決める | なし | - |
| 8.11 | 長い文字 | 省略の仕方を決める | なし | 30 字を超えたら「…」。全文はマウスを載せて表示 |

## 9. 二重送信防止

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 9.1 | 画面側 | 登録・更新・削除のボタンは、押したら応答が返るまで無効にする | ラベルを「登録中…」に変える | 検索は対象外 |
| 9.2 | 応答が返ったあと | エラーなら有効に戻す | 入力エラーのときは「登録」に戻す | なし |
| 9.3 | サーバー側 | 同じ要求を2回受けても1回分だけ処理する | 画面ごとの一度きりのトークンを照合する | なし |
| 9.4 | 戻るボタン | 完了後にブラウザで戻ったときの動きを決める | 完了画面へ移動させ、再送信が起きない形にする | なし |

## 10. タイムアウト

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 10.1 | 時間 | 無操作で切れるまでの時間を決める | 30 分 | なし |
| 10.2 | 事前の知らせ | 切れる前に知らせ、延長できるようにする | 5 分前にダイアログを出し「延長する」で続けられる | なし |
| 10.3 | 切れたあと | 移動先とメッセージを決める | ログイン画面へ。「一定時間操作が無かったため、ログアウトしました。」 | なし |
| 10.4 | 入力中の内容 | 残すかどうかを決める | 残さない。10.2 の案内で保存を促す | 申請画面は一時保存から再開できる |
| 10.5 | 通信の待ち時間 | 応答を待つ上限と表示を決める | 30 秒で打ち切り、6.2 の画面エラーを出す | 帳票の出力は 120 秒 |

## 11. 0件表示

| No | 場面 | 決め事 | 記入例 | 例外の扱い |
|---|---|---|---|---|
| 11.1 | 検索して 0 件 | 表の枠は残し、表の中に文と次の手がかりを出す | 条件に合う備品はありません。条件を変えて検索してください。 | なし |
| 11.2 | まだ 1 件も無い | 最初の操作へ案内する | 備品はまだ登録されていません。「備品を登録」から追加できます。 | なし |
| 11.3 | 検索する前 | 一覧を出すかどうかを決める | 条件なしで全件を表示する | 件数が多い履歴画面は検索後に表示 |
| 11.4 | 読み込み中 | 表示を決める | 表の位置に「読み込み中…」 | なし |
| 11.5 | 取得できなかった | 0 件と区別して表示する | 一覧を取得できませんでした。「再読み込み」を押してください。 | なし |
| 11.6 | 件数の表示 | 0 件のときも件数を出す | 0 件 | なし |

## 12. 例外一覧

| 画面 ID | 画面名 | 外れるルール | 内容 | 理由 |
|---|---|---|---|---|
| SC-001 | ログイン | 2.1 | メニューとパンくずを表示しない | ログイン前のため |
| SC-014 | 利用履歴 | 11.3 | 検索するまで一覧を表示しない | 件数が多いため |
| SC-020 | 予約申請 | 10.4 | 一時保存した内容から再開できる | 入力項目が多いため |

## 改版履歴

| 版 | 日付 | 変更点 | 影響する画面 |
|---|---|---|---|
| 1.0 | 2026-10-05 | 初版 | 全画面 |

項目一覧のタブ区切り版

表計算ソフトで管理する場合は、次をそのまま貼り付けられます。

No  章   場面  決め事 記入例 例外の扱い
1.1 適用範囲    対象の画面   利用者向け・管理者向けの全画面に適用する    画面IDがSCで始まる画面すべて    12章に書く
2.1 レイアウト   全体の構成   ヘッダー、メニュー、本文、フッターの位置を固定する   上にヘッダー、左にメニュー、右に本文  ログイン画面はヘッダーのみ
3.1 ボタン 位置  画面を進めるボタンは本文の下部に右寄せで置く  登録、更新、検索    一覧の行ごとの操作は行の右端
3.2 ボタン 並び順 左から戻る・取り消す系、補助、主ボタンの順に置く    戻る/一時保存/登録  なし
3.3 ボタン 主ボタン    1画面に主ボタンは1つにする  塗りつぶしは「登録」だけ    なし
4.1 必須表示    必須の示し方  ラベルの後ろに文字で示す    備品名 必須  なし
4.2 必須表示    色   色だけで必須を示さない 赤い文字に加えて「必須」と書く なし
5.3 入力制御    前後の空白   保存の前に取り除く   前後の空白を除いて「A-001」    パスワードは取り除かない
5.6 入力制御    チェックの時機 いつ項目をチェックするかを決める    入力欄を離れたときと、登録を押したとき なし
6.1 メッセージ   項目エラー   項目の直下に出す    備品名を入力してください。   なし
6.5 メッセージ   完了  画面上部の通知に出し、5秒後に消す   備品を登録しました。  なし
7.1 確認ダイアログ 出す操作    元に戻せない操作にだけ出す   削除、一括更新、予約の取り消し 登録・更新では出さない
7.4 確認ダイアログ 初期フォーカス やめる側に置く キャンセル   なし
8.1 書式  日付  YYYY/MM/DD で表示する    2026/10/05  なし
8.5 書式  整数  3桁ごとにカンマ、右ぞろえ   1,234,567   なし
8.7 書式  小数  桁数と端数処理を決める 1,234.50(小数2桁、四捨五入) なし
9.1 二重送信防止  画面側 押したら応答が返るまでボタンを無効にする    ラベルを「登録中…」に変える  検索は対象外
9.3 二重送信防止  サーバー側   同じ要求を2回受けても1回分だけ処理する    一度きりのトークンを照合する  なし
10.1    タイムアウト  時間  無操作で切れるまでの時間を決める    30分 なし
10.2    タイムアウト  事前の知らせ  切れる前に知らせ、延長できるようにする 5分前にダイアログを出す    なし
11.1    0件表示    検索して0件  表の枠は残し、文と次の手がかりを出す  条件に合う備品はありません。  なし
11.5    0件表示    取得できなかった    0件と区別して表示する 一覧を取得できませんでした。  なし

個別の画面設計書からの参照の書き方

個別の画面設計書には、共通仕様の文章を写さず、番号で参照します。外れる点だけを文章で書きます。

## 共通仕様との関係(SC-014 利用履歴)

| 共通仕様の章 | 扱い | 補足 |
|---|---|---|
| 2 レイアウト | 従う | |
| 3 ボタン配置と並び順 | 従う | |
| 6 メッセージ表示位置と種別 | 従う | |
| 8 日付と数値の書式 | 従う | |
| 11 0件表示 | 11.3 のみ例外 | 検索するまで一覧を表示しない(共通仕様 12 章に記載) |
書き方 読む人が受け取ること
画面設計書に共通ルールを全文写す 共通仕様を変えたとき、写した先がそろわなくなる
「共通仕様 3.2 に従う」と番号で書く 1か所を直せば全画面に伝わる
例外を画面設計書にだけ書く どの画面が外れているかを横断して調べにくい
例外を共通仕様の 12 章にも書く 例外の数と理由を1枚で見られる

二重送信防止の決め事を動かして確かめる

9 章の「押したらボタンを無効にする」が、続けて押した場合と Enter キーの場合にどう働くかを、対策なし・ボタンの無効化・送信中フラグの3通りで比べました。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>二重送信防止の確認</title>
<form id="f">
  <label>備品名 <input name="name" value="プロジェクター A"></label>
  <button id="save" type="submit">登録</button>
</form>
<p id="count">送信回数: 0</p>
<script>
  // mode: none = 対策なし / disable = ボタンを無効化 / flag = 送信中フラグ
  const mode = new URLSearchParams(location.search).get('mode') || 'none';
  const form = document.getElementById('f');
  const btn = document.getElementById('save');
  let sent = 0;
  let sending = false;

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (mode === 'flag' && sending) return;   // 送信中は受け付けない
    sending = true;
    if (mode === 'disable') {
      btn.disabled = true;                     // 押せない状態にする
      btn.textContent = '登録中…';
    }
    sent++;                                    // ここでサーバーへ送る
    document.getElementById('count').textContent = '送信回数: ' + sent;
  });
</script>
</html>

Playwright でボタンを2回続けて押し、そのあと入力欄で Enter を押します。

// run.mjs(npm i playwright@1.56.0 のあと node run.mjs)
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';
const browser = await chromium.launch();
console.log('Chromium', browser.version());
const base = pathToFileURL(process.cwd() + '/form.html').href;
for (const mode of ['none', 'disable', 'flag']) {
  const page = await browser.newPage();
  await page.goto(base + '?mode=' + mode);
  await page.dblclick('#save', { force: true });          // ボタンを2回続けて押す
  const afterClick = await page.textContent('#count');
  await page.focus('input[name=name]');
  await page.keyboard.press('Enter');                      // 入力欄で Enter
  const afterEnter = await page.textContent('#count');
  console.log(mode.padEnd(8), '| 2回クリック後:', afterClick, '| さらに Enter 後:', afterEnter);
  await page.close();
}
await browser.close();
Chromium 141.0.7390.37
none     | 2回クリック後: 送信回数: 2 | さらに Enter 後: 送信回数: 3
disable  | 2回クリック後: 送信回数: 1 | さらに Enter 後: 送信回数: 1
flag     | 2回クリック後: 送信回数: 1 | さらに Enter 後: 送信回数: 1

対策なしでは、2回のクリックと Enter で合計3回送られました。ボタンの無効化と送信中フラグは、どちらも1回に収まっています。送信ボタンが無効のあいだは、入力欄で Enter を押しても送信は起きませんでした。

この確認は画面側の制御だけを見ています。通信のやり直しや別のタブからの送信は画面側では止められないので、9.3 のサーバー側の決め事と組み合わせて書きます。

数値と日付の書式を計算で確かめる

8 章の記入例は、Python で同じ形になることを確かめた値です。

from decimal import Decimal, ROUND_HALF_UP, ROUND_DOWN
from datetime import datetime

print(f"{1234567:,}", f"{-1234567:,}", f"{1234.5:,.2f}", f"{0.256:.1%}")
for v in ["0.5", "1.5", "2.5", "2.675"]:
    d = Decimal(v)
    q = Decimal("1") if v != "2.675" else Decimal("0.01")
    print(v, "round():", round(float(v), 0 if v != "2.675" else 2),
          "四捨五入:", d.quantize(q, ROUND_HALF_UP),
          "切り捨て:", d.quantize(q, ROUND_DOWN))
dt = datetime(2026, 10, 5, 9, 5, 7)
print(dt.strftime("%Y/%m/%d"), dt.strftime("%Y/%m/%d %H:%M"),
      dt.strftime("%Y-%m-%d"), "月火水木金土日"[dt.weekday()])
1,234,567 -1,234,567 1,234.50 25.6%
0.5 round(): 0.0 四捨五入: 1 切り捨て: 0
1.5 round(): 2.0 四捨五入: 2 切り捨て: 1
2.5 round(): 2.0 四捨五入: 3 切り捨て: 2
2.675 round(): 2.67 四捨五入: 2.68 切り捨て: 2.67
2026/10/05 2026/10/05 09:05 2026-10-05 月

Python の round() は 0.5 を 0、2.5 を 2 にしました。10 進数で四捨五入を指定した結果(1 と 3)とは違います。共通仕様の 8.7 には「四捨五入」「切り捨て」のどれかを言葉で書き、画面とサーバーで同じ結果になる計算方法を使うことまで決めておくと、表示のずれを防げます。

アクセシビリティの基準と結び付ける

共通仕様の決め事は、WCAG 2.2 の達成基準を根拠にできるものがあります。今回開いて確かめた2つを示します。

共通仕様の項目 WCAG 2.2 の達成基準 内容(日本語訳から)
4.2 必須を色だけで示さない、6.8 種別を色だけで分けない 達成基準 1.4.1 色の用途(レベル A) 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段としては使用されていない
10.2 切れる前に知らせ、延長できるようにする 達成基準 2.2.1(レベル A) コンテンツによって設定される各時間制限について、解除・調整・延長などの事項のうち少なくとも一つを満たすこと

決め事の横に根拠の番号を書いておくと、「なぜこのルールか」を聞かれたときに説明しやすくなります。

確かめて分かったこと

  • 対策なしのフォームは、2回のクリックで2回送られた。さらに Enter でもう1回送られ、合計3回になりました。
  • 送信ボタンを無効にすると、Enter キーでの送信も起きなかった。ボタンの無効化だけで、クリックと Enter の両方を1回に収められました。
  • 送信中フラグでも同じ結果になった。ボタンの見た目を変えない場合は、押したことが伝わる表示(「登録中…」など)を別に決める必要があります。
  • 「四捨五入」と書くだけでは計算結果がそろわないことがある。Python の round() は 2.5 を 2 に、2.675 を 2.67 にしました。端数処理は言葉と計算方法の両方を書きます。
  • WCAG 2.2 のレベル A に、色だけに頼らないことと時間制限の調整が入っている。必須表示とタイムアウトの決め事は、この2つを根拠に書けます。

画面共通仕様のレビュー用チェック表

確認すること 見る章
対象の画面と環境、個別の画面設計書との優先順位が書いてある 1
ボタンの位置・並び順・ラベルの言葉が決まっている 3
必須とメッセージの種別が、色以外でも区別できる 4、6
メッセージの種別ごとに、出す場所と消えるタイミングがある 6
確認ダイアログを出す操作が限定されている 7
日付・数値・端数処理・値が無いときの表示が決まっている 8
二重送信防止に画面側とサーバー側の両方がある 9
タイムアウトの時間、事前の知らせ、入力中の内容の扱いがある 10
0件・読み込み中・取得できなかった場合が区別されている 11
すべての決め事に番号があり、例外一覧に画面 ID と理由がある 全体、12
決め事が「〜する」と言い切られている 全体

よくある質問

Q. 画面共通仕様とは何ですか? A. システムの全画面で守る動きと表示のルールをまとめた設計書です。ボタンの並び順、必須の示し方、メッセージの出る場所、書式、二重送信防止、タイムアウト、0件表示などを、番号つきの決め事として書きます。

Q. 画面共通仕様とデザインシステムの違いは何ですか? A. 画面共通仕様は1つのシステムの動きと表示のルールで、デザインシステムは複数のシステムで使う見た目と部品の決まりです。デザインシステムがある場合は、色や余白はそちらを参照し、共通仕様にはそのシステムでの動きの決め事を書きます。

Q. 画面共通仕様はいつ作りますか? A. 基本設計の最初、個別の画面設計書を書き始める前に作ります。代表的な画面を3種類ほど並べて初版を作り、画面を設計しながら例外一覧を足していく進め方が向いています。

Q. 共通仕様から外れる画面があるときはどう書きますか? A. 共通仕様の例外一覧に、画面 ID・外れるルールの番号・理由を書きます。個別の画面設計書には「11.3 のみ例外」のように番号で書き、両方から追えるようにします。

まとめ

  • 画面共通仕様は、2画面以上に当てはまるルールを集めた設計書。1画面だけの内容は個別の画面設計書に書く。
  • 目次はレイアウトから0件表示までの10章に、適用範囲と例外一覧を加えた形が基本。
  • 決め事は「場面・決め事・記入例・例外の扱い」で書き、番号を振る。
  • 個別の画面設計書は番号で参照し、同じ文章を写さない。
  • 二重送信防止は画面側とサーバー側の両方を書く。ボタンの無効化で、クリックと Enter の両方を1回に収められた。
  • 端数処理は言葉と計算方法をそろえる。標準の関数によって結果が変わる。

参考・出典

  • Web Content Accessibility Guidelines (WCAG) 2.2 日本語訳(ウェブアクセシビリティ基盤委員会)https://waic.jp/translations/WCAG22/ (1.4.1、2.2.1。2026-10-05 に確認)

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

(記載例)出典:株式会社RJC「画面共通仕様の書き方|UI設計ガイドライン項目一覧と記入例」

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

WE ARE HIRING

RJCで一緒に開発しながら、
成長を楽しみませんか?

RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください!

  • 127日年間休日
  • 12時間平均残業時間
  • 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ!

ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨(休暇 or 金一封)、11期連続の黒字決算。

ABOUT RJC RJCがどんな会社か知る 考え方、研修、働き方、福利厚生、社員の前職まで。RJCのことが丸わかり! RJC丸わかりページへ JOB DESCRIPTION 仕事内容・待遇を見てみる 仕事内容、給与・待遇、選考の流れ。経験者も未経験も!応募前に知りたいこと、まとめました! 募集要項を見る ENTRY エントリーする エントリーは1〜2分・履歴書不要です。まずは話を聞いてみたい、という方でも歓迎です! エントリーフォームへ

RJCで一緒に開発しながら、 成長を楽しみませんか?