実用的な画面設計書テンプレートをつくってみた
はじめに
Web開発の現場で「画面設計書、どうやって書けばいいの？」という声をよく聞きます。特に新人エンジニアや小規模チームでは、きちんとした設計書のテンプレートがなくて困ることも多いですよね。
そこで今回は、実際の開発現場で使える実用的な画面設計書テンプレートを作成してみました！
📝 なぜ画面設計書が必要なのか
作成前に感じていた課題
デザイナーとエンジニアの認識齟齬が発生しがち
仕様変更時の影響範囲が把握しにくい
レビュー時に観点が統一されていない
新メンバーが仕様を理解するのに時間がかかる
画面設計書があることのメリット
認識統一: チーム全体で画面仕様の共通理解
品質向上: 設計時点での仕様の抜け漏れ防止
効率化: 開発・テスト工程での参照資料として活用
保守性: 後から見ても理解しやすいドキュメント
🛠️ 作成したテンプレートの特徴
1. 段階的な構成
全体方針 → 共通仕様 → 画面別詳細 → 非機能要件
この流れで、大枠から詳細へと段階的に仕様を定義できるようにしました。
2. 表形式での整理
項目を表形式にすることで、レビュー時の観点を統一。特に以下の項目は表形式が効果的でした：
工夫したポイント 理由 カラーパレット表 デザイナーとの色指定の齟齬を防止 表示項目一覧表 バリデーション仕様の抜け漏れ防止 操作仕様表 画面操作の仕様を明確化
3. 画面遷移図の可視化
Mermaid記法を使って、画面遷移を視覚的に表現：
graph LR
A[ログイン画面] --> B[ダッシュボード]
B --> C[ユーザー一覧]
B --> D[設定画面]
C --> E[ユーザー詳細]
💡 作成時に工夫したポイント
1. レスポンシブ対応を標準化
現代のWeb開発では必須のレスポンシブ対応を、設計段階から考慮できるように：
PC（1200px以上） → タブレット（768-1199px） → SP（767px以下）
2. アクセシビリティ要件を明記
WCAG AA準拠を標準として、以下の項目をチェックリスト化：
コントラスト比 4.5:1以上
キーボード操作対応
スクリーンリーダー対応
alt属性の適切な設定
3. エラーハンドリングを体系化
よく漏れがちなエラー仕様を、表形式で整理：
エラー種別 発生条件 表示メッセージ 対処方法 バリデーションエラー 必須項目未入力 「この項目は必須です」 該当項目にフォーカス システムエラー API通信失敗 「一時的なエラーが発生しました」 リトライボタン表示
🎯 実際に使ってみた結果
Before（テンプレート使用前）
画面仕様の確認に毎回1時間程度
デザイナーとの認識齟齬で手戻り発生
レビューの観点がバラバラ
After（テンプレート使用後）
画面仕様の確認時間が20分程度に短縮
事前の認識合わせで手戻りが大幅減少
レビューの観点が統一され、品質向上
📊 チームからのフィードバック
😊 好評だった点
デザイナー: 「デザインカンプだけでは伝わらない部分が明確になった」
エンジニア: 「実装時の迷いが減って開発効率が上がった」
PM: 「仕様変更時の影響範囲が把握しやすくなった」
🤔 改善が必要だった点
初回作成時は少し時間がかかる
プロジェクトに応じたカスタマイズが必要
更新タイミングのルール化が重要
🔧 カスタマイズのコツ
プロジェクト規模別の使い分け
小規模プロジェクト: 画面別仕様を簡略化
中規模プロジェクト: 標準テンプレートをそのまま活用
大規模プロジェクト: セキュリティ要件などを追加
技術スタック別の調整例
React: コンポーネント設計の項目を追加
Vue.js: Vuex状態管理の仕様を記載
モバイルアプリ: OS別のガイドライン対応を明記
🚀 今後の改善予定
Ver.2.0で追加予定の機能
[ ] Figmaとの連携項目
[ ] Storybookとの対応表
[ ] API仕様との関連付け
[ ] テストケースとの紐付け
運用面での改善
[ ] 作成時間短縮のためのスニペット集
[ ] レビューチェックリストの自動生成
[ ] Notionテンプレート版の作成
📝 実際のテンプレート構成
<details> <summary>詳細なテンプレート構成（クリックで展開）</summary>
1. 文書管理セクション
バージョン管理
改版履歴
承認フロー
2. 全体方針
デザインコンセプト
技術要件
パフォーマンス要件
3. 共通仕様
カラーパレット
タイポグラフィ
ボタン・フォーム仕様
4. 画面別仕様
画面概要
表示項目
操作仕様
画面遷移
エラーハンドリング
5. 非機能要件
レスポンシブ対応
アクセシビリティ
パフォーマンス
</details>
💭 まとめ
今回作成した画面設計書テンプレートは、実際の開発現場での課題を解決することを重視して設計しました。
特に効果があった点
チーム間のコミュニケーション向上
設計品質の底上げ
開発効率の向上
使用時のポイント
プロジェクトの規模に応じてカスタマイズ
定期的な見直しとアップデート
チーム全体での運用ルール策定
テンプレート
# 画面設計書
## 1. 文書情報
| 項目 | 内容 |
|------|------|
| 文書名 | 画面設計書 |
| バージョン | 1.0 |
| 作成日 | 2025/08/10 |
| 作成者 | [作成者名] |
| 承認者 | [承認者名] |
| 対象システム | [システム名] |
## 2. 改版履歴
| バージョン | 改版日 | 改版者 | 改版内容 |
|------------|--------|--------|----------|
| 1.0 | 2025/08/10 | [作成者名] | 初版作成 |
## 3. 概要
### 3.1 目的
本文書は、[システム名]の画面設計に関する仕様を定義し、開発チーム間での認識統一を図ることを目的とする。
### 3.2 対象範囲
- 対象画面：[対象画面の範囲]
- 対象デバイス：[PC/スマートフォン/タブレット等]
- 対象ブラウザ：[サポート対象ブラウザ]
## 4. 全体方針
### 4.1 デザインコンセプト
- [デザインの基本方針]
- [ユーザビリティの考慮事項]
- [アクセシビリティ対応]
### 4.2 技術要件
- フロントエンド技術：[使用技術スタック]
- レスポンシブ対応：[対応方針]
- パフォーマンス要件：[読み込み時間等の要件]
## 5. 共通仕様
### 5.1 画面構成要素
#### 5.1.1 ヘッダー
- ロゴ配置
- ナビゲーションメニュー
- ユーザー情報表示エリア
- ログアウトボタン
#### 5.1.2 フッター
- コピーライト表示
- 利用規約・プライバシーポリシーへのリンク
- 会社情報
#### 5.1.3 サイドバー
- メインナビゲーション
- サブメニュー
- 折りたたみ機能
### 5.2 カラーパレット
| 用途 | カラーコード | 使用箇所 |
|------|-------------|----------|
| プライマリ | #007bff | メインボタン、リンク |
| セカンダリ | #6c757d | サブボタン |
| 成功 | #28a745 | 成功メッセージ |
| 警告 | #ffc107 | 警告メッセージ |
| エラー | #dc3545 | エラーメッセージ |
| 背景 | #ffffff | ページ背景 |
| テキスト | #333333 | 本文テキスト |
### 5.3 フォント仕様
| 要素 | フォントサイズ | フォントウェイト | 行間 |
|------|---------------|------------------|------|
| h1 | 32px | bold | 1.2 |
| h2 | 28px | bold | 1.3 |
| h3 | 24px | bold | 1.4 |
| 本文 | 16px | normal | 1.6 |
| キャプション | 14px | normal | 1.4 |
### 5.4 ボタン仕様
#### 5.4.1 プライマリボタン
- サイズ：高さ44px、最小幅120px
- 背景色：#007bff
- テキスト色：#ffffff
- 角丸：4px
- ホバー時：背景色を10%暗く
#### 5.4.2 セカンダリボタン
- サイズ：高さ44px、最小幅120px
- 背景色：transparent
- ボーダー：1px solid #007bff
- テキスト色：#007bff
- ホバー時：背景色#007bff、テキスト色#ffffff
### 5.5 フォーム仕様
#### 5.5.1 入力フィールド
- 高さ：44px
- ボーダー：1px solid #ced4da
- 角丸：4px
- フォーカス時：ボーダー色#007bff
- プレースホルダー色：#6c757d
#### 5.5.2 バリデーション
- エラー表示：フィールド下部に赤文字で表示
- 必須項目：ラベル右側に赤色アスタリスク(*)表示
## 6. 画面別仕様
### 6.1 [画面名1]
#### 6.1.1 画面概要
- **画面ID**: SCR001
- **画面名**: [画面名]
- **URL**: /[path]
- **画面種別**: [一覧/詳細/登録/編集/削除]
#### 6.1.2 画面構成
```
+----------------------------------+
| ヘッダー |
+----------+----------------------+
| | |
| サイド | メインコンテンツ |
| バー | |
| | |
+----------+----------------------+
| フッター |
+----------------------------------+
```
#### 6.1.3 表示項目
| 項目名 | 表示名 | 形式 | 必須 | バリデーション |
|--------|--------|------|------|----------------|
| [項目1] | [表示名1] | [テキスト/数値/日付等] | ○/× | [バリデーション内容] |
| [項目2] | [表示名2] | [テキスト/数値/日付等] | ○/× | [バリデーション内容] |
#### 6.1.4 操作仕様
| 操作 | 操作方法 | 実行条件 | 実行後の動作 |
|------|----------|----------|--------------|
| [操作1] | [ボタンクリック等] | [条件] | [動作内容] |
| [操作2] | [ボタンクリック等] | [条件] | [動作内容] |
#### 6.1.5 画面遷移
```mermaid
graph LR
A[前画面] --> B[当画面]
B --> C[次画面1]
B --> D[次画面2]
```
#### 6.1.6 エラーハンドリング
| エラー種別 | 発生条件 | 表示メッセージ | 対処方法 |
|------------|----------|----------------|----------|
| [エラー1] | [条件] | [メッセージ] | [対処法] |
| [エラー2] | [条件] | [メッセージ] | [対処法] |
### 6.2 [画面名2]
（上記と同様の構成で記載）
## 7. レスポンシブ対応
### 7.1 ブレークポイント
| デバイス | 幅 | 対応内容 |
|----------|-------|----------|
| PC | 1200px以上 | フル機能表示 |
| タブレット | 768px〜1199px | サイドバー折りたたみ |
| スマートフォン | 767px以下 | ハンバーガーメニュー |
### 7.2 スマートフォン対応
#### 7.2.1 ナビゲーション
- ハンバーガーメニュー実装
- タップ領域最小44px確保
#### 7.2.2 フォーム
- 入力フィールドのサイズ調整
- 仮想キーボード表示時のレイアウト対応
## 8. アクセシビリティ対応
### 8.1 WCAG準拠レベル
- 対象レベル：AA
### 8.2 対応項目
- alt属性の適切な設定
- キーボード操作対応
- コントラスト比の確保（4.5:1以上）
- スクリーンリーダー対応
## 9. パフォーマンス要件
### 9.1 読み込み時間
- 初回読み込み：3秒以内
- ページ遷移：1秒以内
### 9.2 最適化項目
- 画像圧縮・最適化
- CSS/JSの最小化
- キャッシュ活用
## 10. 備考・注意事項
### 10.1 開発時の注意点
- [開発時の注意事項]
### 10.2 運用時の注意点
- [運用時の注意事項]
## 11. 関連資料
- ワイヤーフレーム：[ファイル名]
- デザインカンプ：[ファイル名]
- システム設計書：[ファイル名]
- API仕様書：[ファイル名]
---
**文書終了**
