画面設計書の読み方

画面設計書は、ユーザーが操作する画面の見た目と動作を定義したドキュメントです。フロントエンド実装やテスト実施で必ず参照します。

画面設計書とは

役割

• 画面の**見た目（レイアウト）**を定義
• 各項目のデータ仕様を定義
• 入力チェックのルールを定義
• ボタン押下時の動作と遷移先を定義

いつ使うか

画面設計書の構成

よくある構成要素

読み方の流れ

flowchart TD
    A[1. 基本情報を確認] --> B[2. 画面概要で目的を理解]
    B --> C[3. レイアウトで見た目を把握]
    C --> D[4. 項目定義で詳細を確認]
    D --> E[5. 入力チェックを整理]
    E --> F[6. ボタン動作で処理フローを理解]
    F --> G[7. 備考で補足事項を確認]

【サンプル】画面設計書の実例

実際の画面設計書がどのようなものか、簡略化したサンプルで見てみましょう。

画面設計書サンプル：ユーザー登録画面

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
画面設計書
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■ 基本情報
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
画面ID      : SCR-001
画面名      : ユーザー登録画面
作成日      : 2024/01/15
更新日      : 2024/02/20
バージョン  : 1.2

■ 画面概要
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
新規ユーザーがアカウントを作成するための画面。
メールアドレス、パスワード、氏名を入力して登録する。

■ 画面レイアウト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┌─────────────────────────────────────────┐
│              ユーザー登録                │  ← ①タイトル
├─────────────────────────────────────────┤
│                                          │
│  メールアドレス *                        │  ← ②入力項目
│  ┌────────────────────────────────┐    │
│  │                                  │    │
│  └────────────────────────────────┘    │
│  ※半角英数字で入力してください           │  ← ③補足説明
│                                          │
│  パスワード *                            │
│  ┌────────────────────────────────┐    │
│  │ ●●●●●●●●                     │    │
│  └────────────────────────────────┘    │
│  ※8文字以上、英数字混合                  │
│                                          │
│  パスワード（確認） *                    │
│  ┌────────────────────────────────┐    │
│  │ ●●●●●●●●                     │    │
│  └────────────────────────────────┘    │
│                                          │
│  氏名 *                                  │
│  ┌────────────────────────────────┐    │
│  │                                  │    │
│  └────────────────────────────────┘    │
│                                          │
│  電話番号                                │  ← ④任意項目（*なし）
│  ┌────────────────────────────────┐    │
│  │                                  │    │
│  └────────────────────────────────┘    │
│                                          │
│      ┌─────────┐   ┌─────────┐         │
│      │  登録    │   │ キャンセル│        │  ← ⑤ボタン
│      └─────────┘   └─────────┘         │
│                                          │
└─────────────────────────────────────────┘

■ 項目定義
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

| No | 項目名 | 項目ID | データ型 | 桁数 | 必須 | 初期値 |
|----|--------|--------|----------|------|------|--------|
| 1 | メールアドレス | email | 文字列 | 256 | ○ | なし |
| 2 | パスワード | password | 文字列 | 64 | ○ | なし |
| 3 | パスワード（確認） | password_confirm | 文字列 | 64 | ○ | なし |
| 4 | 氏名 | name | 文字列 | 100 | ○ | なし |
| 5 | 電話番号 | phone | 文字列 | 15 | - | なし |

■ 入力チェック
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

| No | 項目名 | チェック内容 | エラーメッセージ |
|----|--------|--------------|------------------|
| 1 | メールアドレス | 必須チェック | メールアドレスを入力してください |
| 2 | メールアドレス | 形式チェック | メールアドレスの形式が正しくありません |
| 3 | メールアドレス | 重複チェック | このメールアドレスは既に登録されています |
| 4 | パスワード | 必須チェック | パスワードを入力してください |
| 5 | パスワード | 桁数チェック（8文字以上） | パスワードは8文字以上で入力してください |
| 6 | パスワード | 形式チェック（英数字混合） | パスワードは英字と数字を含めてください |
| 7 | パスワード（確認） | 一致チェック | パスワードが一致しません |
| 8 | 氏名 | 必須チェック | 氏名を入力してください |
| 9 | 電話番号 | 形式チェック | 電話番号の形式が正しくありません |

■ ボタン動作
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

| ボタン名 | ボタンID | 動作 | 遷移先 |
|----------|----------|------|--------|
| 登録 | btn_register | 入力チェック→API呼び出し→登録処理 | 登録完了画面（SCR-002） |
| キャンセル | btn_cancel | 確認ダイアログ表示→トップへ戻る | トップ画面（SCR-000） |

■ 処理シーケンス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【登録ボタン押下時】
1. 画面で入力チェック実行（No.1,2,4,5,6,7,8,9）
2. エラーがあれば該当項目にエラーメッセージ表示
3. エラーがなければAPI呼び出し（POST /api/users）
4. API側で重複チェック（No.3）
5. 登録成功→登録完了画面へ遷移
6. 登録失敗→エラーメッセージ表示

■ 備考
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- パスワードは入力中もマスク表示（●）する
- 登録ボタンは必須項目が全て入力されるまで非活性
- 更新履歴：v1.1 電話番号項目追加、v1.2 パスワード確認追加

読むときのチェックポイント

よくある疑問と確認ポイント

Q: 「必須項目が全て入力されるまで非活性」とは？

実装方法の確認が必要です。

• リアルタイムでチェックするのか
• フォーカスアウト時にチェックするのか
• 空文字かどうかだけ見るのか

→ 不明なら先輩に確認しましょう。

Q: 「メールアドレスの重複チェック」はいつ行うか？

処理シーケンスを見ると「API側で」とあるので、サーバー側で実施します。

• 画面側：形式チェックまで
• サーバー側：重複チェック

Q: パスワード確認欄の入力チェックはどう実装する？

入力チェックNo.7「パスワードが一致しません」でエラーにします。

• パスワード欄と確認欄を比較
• 不一致なら確認欄にエラー表示

画面設計書でよくある落とし穴

質問例：画面設計書について確認するとき

画面設計書SCR-001について確認させてください。

項目定義No.5の電話番号について、
「形式チェック」とありますが、許容するフォーマットを教えてください。
- ハイフンあり：03-1234-5678
- ハイフンなし：0312345678
- 括弧あり：03(1234)5678

どの形式を許容しますか？

【実践】画面設計書から実装を考える

サンプルの画面設計書から、実際にどう実装するかを考えてみましょう。

ステップ1：HTMLの構造を決める

項目定義を見て、HTMLのフォーム構造を決めます。

<form id="registerForm">
  <!-- No.1: メールアドレス（必須、256文字） -->
  <div class="form-group">
    <label for="email">メールアドレス <span class="required">*</span></label>
    <input type="email" id="email" name="email"
           maxlength="256" required>
    <span class="hint">半角英数字で入力してください</span>
    <span class="error" id="email-error"></span>
  </div>

  <!-- No.2: パスワード（必須、64文字） -->
  <div class="form-group">
    <label for="password">パスワード <span class="required">*</span></label>
    <input type="password" id="password" name="password"
           maxlength="64" required>
    <span class="hint">8文字以上、英数字混合</span>
    <span class="error" id="password-error"></span>
  </div>

  <!-- No.3: パスワード確認（必須） -->
  <div class="form-group">
    <label for="password_confirm">パスワード（確認） <span class="required">*</span></label>
    <input type="password" id="password_confirm" name="password_confirm"
           maxlength="64" required>
    <span class="error" id="password_confirm-error"></span>
  </div>

  <!-- No.4: 氏名（必須、100文字） -->
  <div class="form-group">
    <label for="name">氏名 <span class="required">*</span></label>
    <input type="text" id="name" name="name"
           maxlength="100" required>
    <span class="error" id="name-error"></span>
  </div>

  <!-- No.5: 電話番号（任意、15文字） -->
  <div class="form-group">
    <label for="phone">電話番号</label>
    <input type="tel" id="phone" name="phone"
           maxlength="15">
    <span class="error" id="phone-error"></span>
  </div>

  <div class="button-group">
    <button type="submit" id="btn_register">登録</button>
    <button type="button" id="btn_cancel">キャンセル</button>
  </div>
</form>

ステップ2：バリデーションを実装する

入力チェック欄を見て、JavaScriptでバリデーションを実装します。

// 画面設計書の「入力チェック」をもとに実装
function validateForm() {
  let isValid = true;
  clearErrors();

  // No.1: メールアドレス - 必須チェック
  const email = document.getElementById('email').value;
  if (!email) {
    showError('email', 'メールアドレスを入力してください');
    isValid = false;
  }
  // No.2: メールアドレス - 形式チェック
  else if (!isValidEmail(email)) {
    showError('email', 'メールアドレスの形式が正しくありません');
    isValid = false;
  }

  // No.4: パスワード - 必須チェック
  const password = document.getElementById('password').value;
  if (!password) {
    showError('password', 'パスワードを入力してください');
    isValid = false;
  }
  // No.5: パスワード - 桁数チェック（8文字以上）
  else if (password.length < 8) {
    showError('password', 'パスワードは8文字以上で入力してください');
    isValid = false;
  }
  // No.6: パスワード - 形式チェック（英数字混合）
  else if (!hasLetterAndNumber(password)) {
    showError('password', 'パスワードは英字と数字を含めてください');
    isValid = false;
  }

  // No.7: パスワード確認 - 一致チェック
  const passwordConfirm = document.getElementById('password_confirm').value;
  if (password !== passwordConfirm) {
    showError('password_confirm', 'パスワードが一致しません');
    isValid = false;
  }

  // No.8: 氏名 - 必須チェック
  const name = document.getElementById('name').value;
  if (!name) {
    showError('name', '氏名を入力してください');
    isValid = false;
  }

  // No.9: 電話番号 - 形式チェック（任意項目だが入力時はチェック）
  const phone = document.getElementById('phone').value;
  if (phone && !isValidPhone(phone)) {
    showError('phone', '電話番号の形式が正しくありません');
    isValid = false;
  }

  return isValid;
}

// ヘルパー関数
function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function hasLetterAndNumber(str) {
  return /[a-zA-Z]/.test(str) && /[0-9]/.test(str);
}

function isValidPhone(phone) {
  // ハイフンあり・なし両対応（設計書で確認が必要）
  return /^[\d-]+$/.test(phone);
}

ステップ3：ボタン動作を実装する

ボタン動作欄を見て、イベントハンドラを実装します。

// 登録ボタン押下時
document.getElementById('btn_register').addEventListener('click', async (e) => {
  e.preventDefault();

  // 1. 画面で入力チェック実行
  if (!validateForm()) {
    return;  // エラーがあれば処理中断
  }

  // 2. API呼び出し
  try {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(getFormData())
    });

    if (response.ok) {
      // 5. 登録成功 → 登録完了画面へ遷移
      window.location.href = '/register-complete';  // SCR-002
    } else {
      // 6. 登録失敗 → エラーメッセージ表示
      const error = await response.json();
      showApiError(error);
    }
  } catch (error) {
    showError('form', 'システムエラーが発生しました');
  }
});

// キャンセルボタン押下時
document.getElementById('btn_cancel').addEventListener('click', () => {
  // 確認ダイアログ表示
  if (confirm('入力内容が破棄されます。よろしいですか？')) {
    // トップへ戻る
    window.location.href = '/';  // SCR-000
  }
});

ステップ4：備考の特殊動作を実装する

備考欄を見て、追加の動作を実装します。

// 備考：必須項目が全て入力されるまで登録ボタン非活性
function updateButtonState() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const passwordConfirm = document.getElementById('password_confirm').value;
  const name = document.getElementById('name').value;

  const allFilled = email && password && passwordConfirm && name;
  document.getElementById('btn_register').disabled = !allFilled;
}

// 各必須項目にイベントリスナーを設定
['email', 'password', 'password_confirm', 'name'].forEach(id => {
  document.getElementById(id).addEventListener('input', updateButtonState);
});

// 初期状態でボタンを非活性に
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn_register').disabled = true;
});

関連ドキュメント

• 設計書・仕様書の読み方 - 設計書全般の読み方
• 詳細設計書の読み方 - 詳細設計書全般
• 処理設計書の読み方 - 対になるバックエンド側の設計書
• API仕様書の読み方 - API連携の実装