基本設計と詳細設計の違いを爆速で理解する！

現場で使える実例と図解で完全整理

こんにちは！
今回は、「基本設計」 と 「詳細設計」 って何が違うの？というところを、
自分の勉強がてらまとめてみました！

現場では当たり前に使われるこの2つの言葉ですが、実際に「何がどこまでが基本設計で、どこからが詳細設計なのか？」ってけっこう混乱しがち…。
なので、エンジニア・PM・デザイナーの人たちとも共通認識が持てるように、
自分なりに調べたことをできるだけわかりやすく・具体的に・サクッと読めるようにまとめてみました！

設計とは？ざっくり全体フロー

開発現場では、次のような流れで設計を進めます：

要件定義：何を作る？（目的や仕様の合意）
基本設計（外部設計）：どんな画面・機能で実現するか
詳細設計（内部設計）：どうやって作るか（実装仕様）
実装・テスト：作って動作確認

設計とは「開発のレシピ」。ちゃんと作っておかないと後で炎上します！

基本設計 vs 詳細設計の違いまとめ表

項目	基本設計（What）	詳細設計（How）
🎯 目的	作るものの全体像を示す	実装のために具体化する
👤 対象	クライアント / PM / デザイナー	エンジニア / 実装担当
🧱 粒度	機能・画面レベル	項目・処理レベル
🧾 成果物	画面構成、画面遷移図、業務フロー	入出力項目一覧、バリデーション仕様、API定義など

具体例で理解しよう！ToDo登録画面の設計

基本設計（ざっくり）

項目	内容
画面名	ToDo登録画面
機能	ToDo名＋締切日を入力して保存
必須項目	ToDo名、締切日
保存後	ToDo一覧に表示される

🔹 詳細設計（具体的）

項目名	ID	入出力	種別	型	必須	制限・備考
ToDo名	`title`	入力	テキスト	`string`	○	最大32文字
締切日	`deadLine`	入力	日付	`string (yyyy-mm-dd)`	○	初期値: 今日
エラーメッセージ	`errorMessage`	出力	テキスト	`string`	-	バリデーション失敗時に表示

詳細設計の「画面入出力項目一覧」の作り方

ポイント	解説
名前は画面のラベルと一致させる	例：「ToDo名」などUIに表示される文字をそのまま使う
IDはコードに合わせる	例：`title` や `deadLine` など camelCaseで統一
必須は `○` または `✓` で明記	バリデーション要件として明示
データ型を明記	例：`string` / `number` / `boolean` / `date`など
初期値や制限も書く	例：`maxLength: 32` / `default: 今日の日付` など

どっちに分類される？判断のしかた

判断ポイント	基本設計	詳細設計
項目の型・制限が書かれている？	❌	✅
それだけで実装できるか？	❌	✅
クライアントと合意を取るためのもの？	✅	❌
バリデーションや初期値がある？	❌	✅

結論：画面入出力項目一覧は「詳細設計書」にあたります！

理解チェッククイズ！

基本設計と詳細設計の違いを「目的」「対象者」「粒度」で説明してください。
詳細設計において deadLine にはどんな情報を書きますか？
設計のどの段階でバリデーション仕様を書くべき？理由は？

まとめ

設計書は「誰のために、どこまで書くか」が超重要！
画面入出力項目一覧は詳細設計の一部として、エンジニアが迷わず実装できる状態にするのが目的！
曖昧な設計は炎上の元。仕様は具体的に、明確に！