基本設計(外部設計)の全体像 – 画面・帳票・IF設計の進め方

「要件定義書は書けるのに、基本設計で手が止まる…」

そんな悩みを抱えていませんか?

45歳のあなたは、20年のプログラマ経験で「作る力」は十分にあります。しかし、上流工程への転職を目指すとき、避けて通れないのが**基本設計(外部設計)**のスキルです。

「要件は理解できた。でも、それを画面・帳票・インターフェースにどう落とし込むのか?」——この問いに明確に答えられなければ、年収650万円以上の上流ポジションは遠のきます。

実は、基本設計には明確な型があります。その型を知り、手を動かして練習すれば、3ヶ月後には「外部設計ができるエンジニア」として面接で堂々と語れるようになります。

この記事では、画面設計・帳票設計・インターフェース設計の具体的な進め方を、実務経験20年の視点で体系的に解説します。完璧を目指す必要はありません。まずは「設計の全体像」を掴み、小さな設計書を1つ作ってみましょう。

---

第1章:なぜ今、基本設計(外部設計)なのか?

結論

基本設計は、上流工程への転職で最も評価されるスキルです。

理由

IT業界では、要件定義ができる人は多くても、それを具体的な設計書に落とし込める人は不足しています。特に40代の転職では、「プログラミング経験がある上流エンジニア」が求められます。なぜなら、実装の難しさを理解しているからこそ、実現可能で保守性の高い設計ができるからです。

基本設計(外部設計)とは、システムの外側から見える部分の設計——つまり、ユーザーが触れる画面、出力される帳票、他システムとの連携方法を定義する工程です。これができれば、ITコンサルタント、ソリューションアーキテクト、プロジェクトリーダーといった年収650万円以上のポジションが視野に入ります。

具体例

44歳でSIerのプログラマからITコンサルタントに転職したNさんは、こう語ります。

「面接で『基本設計の経験はありますか?』と聞かれ、『プログラマとして20年、画面の裏側を作ってきました。その経験を活かし、ユーザー視点での画面設計を学んでいます』と答えました。さらに、自主的に作成した画面設計書とIF設計書を見せたところ、『実装経験がある人の設計は信頼できる』と評価され、年収が520万円から680万円に上がりました」

基本設計のスキルは、あなたの20年の経験を上流工程で活かす橋渡しになるのです。

まとめ

基本設計は、プログラマ経験を持つあなたにとって、最も習得しやすい上流スキルです。今日から学習を始めることで、3ヶ月後には転職市場で評価される設計力が身につきます。

---

第2章:基本設計(外部設計)の3つの成果物とは?

結論

基本設計では、画面設計書・帳票設計書・インターフェース設計書の3つを作成します。

理由

基本設計の目的は、「ユーザーから見えるシステムの姿」を具体化することです。要件定義では「何が必要か」を言葉で定義しましたが、基本設計では「それをどう実現するか」を図と仕様書で示します。

この3つの成果物は、それぞれ異なる目的を持ちます:

1. 画面設計書:ユーザーが操作する画面のレイアウト、項目、操作フローを定義
2. 帳票設計書:システムが出力する帳票(レポート、請求書、証明書等)の形式を定義
3. インターフェース設計書:他システムとのデータ連携方法、APIの仕様を定義

この3つを正しく設計できれば、次の詳細設計(内部設計)やプログラミングがスムーズに進みます。

具体例

画面設計書の例:ログイン画面

• 画面ID: SCR-001
• 画面名: ユーザーログイン画面
• 入力項目: メールアドレス(必須、形式チェック)、パスワード(必須、8文字以上)
• ボタン: ログインボタン、パスワード再設定リンク
• エラーメッセージ: 「メールアドレスまたはパスワードが正しくありません」

帳票設計書の例:売上月次レポート

• 帳票ID: RPT-001
• 帳票名: 売上月次集計表
• 出力項目: 月、商品カテゴリ、売上金額、前年比
• 出力形式: PDF、Excel
• 出力タイミング: 毎月1日午前9時に自動生成

インターフェース設計書の例:在庫管理システム連携

• IF-ID: API-001
• 連携先システム: 在庫管理システム
• 連携方法: REST API (JSON形式)
• エンドポイント: POST /api/v1/inventory/update
• リクエスト項目: 商品ID、在庫数、更新日時

まとめ

基本設計の3つの成果物を理解すれば、「何を作るべきか」が明確になります。次章では、これらをどう作るかを具体的に解説します。

---

第3章:基本設計の進め方 – 5つのステップ

結論

基本設計は、要件の整理→設計方針→詳細化→レビュー→承認の5ステップで進めます。

理由

多くの人が基本設計で迷うのは、どこから手をつけるべきか分からないからです。しかし、基本設計には明確な順序があります。この順序を守れば、迷わず設計を進められます。

具体例

ステップ1:要件定義書の整理(所要時間:1日)

要件定義書から、以下を抽出します:

• ユーザーが行いたい操作(ユースケース)
• システムが提供すべき機能
• 出力すべき帳票
• 連携すべき外部システム

作業のコツ:Excel等で一覧表を作り、要件ごとに「画面が必要」「帳票が必要」「IF連携が必要」とチェックを入れます。

ステップ2:設計方針の決定(所要時間:半日)

以下の方針を決めます:

• 画面のUI/UXの方向性(例:シンプル優先、モバイル対応必須)
• 帳票の出力形式(PDF、Excel、CSV等)
• インターフェースの通信方式(REST API、SOAP、バッチ連携等)

作業のコツ:過去の類似システムがあれば、その設計方針を参考にします。ない場合は、業界のベストプラクティスを調査します。

ステップ3:詳細化(所要時間:2〜3週間)

各設計書を具体的に作成します:

• 画面設計書:ワイヤーフレーム作成→項目定義→操作フロー定義
• 帳票設計書:サンプルレイアウト作成→出力項目定義→出力条件定義
• IF設計書:連携シーケンス図作成→データ項目定義→エラー処理定義

作業のコツ:まず主要な画面・帳票・IFを1つずつ作成し、レビューを受けてから残りを作成します。

ステップ4:レビュー(所要時間:1週間)

以下の観点でレビューします:

• 要件漏れがないか
• 実装可能か
• ユーザビリティに問題がないか
• セキュリティリスクがないか

作業のコツ:プログラマ経験者として、「この設計で実装できるか」を自問自答します。

ステップ5:承認と次工程への引継ぎ(所要時間:数日)

顧客・プロジェクトマネージャーの承認を得て、詳細設計チームに引き継ぎます。

まとめ

この5ステップを守れば、基本設計は計画的に進められます。まずは小さなシステム(例:社内ツール)で練習してみましょう。

---

第4章:画面設計の基本 – ユーザー目線で考える

結論

画面設計の本質は、「ユーザーが迷わず操作できること」です。

理由

プログラマとして長年働いてきたあなたは、「機能を実装すること」に慣れています。しかし、画面設計では「ユーザーがどう使うか」を最優先に考える必要があります。

優れた画面設計の3原則:

1. シンプル:必要最低限の項目だけを配置
2. 直感的:説明なしで操作方法が分かる
3. 一貫性:画面間で操作方法が統一されている

具体例

悪い画面設計の例:顧客情報入力画面

• 全ての項目が1画面に詰め込まれている(スクロールが長い)
• 必須項目と任意項目の区別が不明確
• エラーメッセージが「入力エラー」だけで、何が間違っているか分からない

良い画面設計の例:顧客情報入力画面

• 基本情報・連絡先・請求先の3ステップに分割(ウィザード形式)
• 必須項目に赤い※マークを表示
• エラーメッセージが「郵便番号は7桁の数字で入力してください」と具体的

画面設計の実践手順

1. ワイヤーフレーム作成:手書きまたはFigma等のツールで配置を検討
2. 項目定義:各項目の名称、型、必須/任意、バリデーションルールを定義
3. 操作フロー定義:ボタンを押したら何が起こるかをフローチャートで記述

まとめ

画面設計では、「自分がユーザーだったら」という視点が不可欠です。プログラマ経験を持つあなたなら、実装の難しさを理解した上で、ユーザーに優しい画面を設計できます。

【画面設計におすすめのツール】

• Figma:ワイヤーフレームからプロトタイプまで作成できる業界標準ツール(無料プランあり)
• Notion:画面設計書の項目定義やレビュー結果をチーム共有できます

---

第5章:帳票設計の基本 – 見やすさと運用性のバランス

結論

帳票設計では、「誰が、いつ、何のために使うか」を明確にすることが最重要です。

理由

帳票(レポート)は、システムが出力する「成果物」です。しかし、多くの設計者が陥る罠は、「全ての情報を詰め込みすぎる」ことです。

優れた帳票設計の3原則:

1. 目的特化:1つの帳票には1つの目的だけ
2. 視認性:重要な情報が一目で分かる
3. 運用性:出力タイミング、保存先、権限管理を考慮

具体例

悪い帳票設計の例:売上レポート

• 月次・四半期・年次の全てのデータが1つの帳票に混在
• フォントサイズが小さく、高齢の管理職が読めない
• 出力時刻が不定期で、いつのデータか分からない

良い帳票設計の例:売上月次レポート

• 月次専用の帳票として分離
• 重要な数値(売上合計、前年比)を太字・大きめフォントで強調
• 毎月1日午前9時に自動生成され、管理職のメールに送付

帳票設計の実践手順

1. 目的の明確化:この帳票を誰が、どんな判断に使うのか
2. サンプルレイアウト作成:ExcelやGoogleスプレッドシートで見本を作成
3. 出力仕様の定義:出力タイミング、形式(PDF/Excel/CSV)、配布方法を決定

まとめ

帳票設計では、「作りやすさ」よりも「使いやすさ」を優先します。ユーザーにヒアリングし、本当に必要な情報だけを盛り込みましょう。

【帳票設計におすすめのツール】

• Excel(Microsoft 365):帳票のサンプルレイアウト作成に最適
• Notion:帳票の仕様書や出力条件を整理できます

---

第6章:インターフェース設計の基本 – システム間連携を制する

結論

インターフェース設計では、**「どのタイミングで、どのデータを、どう渡すか」**を明確にします。

理由

現代のシステムは、単独で動くことはほとんどありません。他システムとのデータ連携(インターフェース、略してIF)が必須です。しかし、IF設計が曖昧だと、本番稼働後にトラブルが多発します。

優れたIF設計の3原則:

1. 明確性:連携するデータ項目、形式、タイミングが明確
2. エラー処理:連携失敗時の対応が定義されている
3. 拡張性:将来の仕様変更に対応できる設計

具体例

悪いIF設計の例:在庫管理システム連携

• 「在庫データを連携する」としか書かれていない
• データ形式(JSON? XML? CSV?)が不明
• 連携失敗時の処理が未定義

良いIF設計の例:在庫管理システム連携

• 連携方式:REST API (JSON形式)
• エンドポイント:POST https://api.example.com/inventory/update
• リクエスト項目:
  • productId (string, 必須):商品ID
  • quantity (integer, 必須):在庫数
  • updatedAt (datetime, 必須):更新日時
• レスポンス:
  • 成功:200 OK + {“status”: “success”}
  • 失敗:400 Bad Request + {“error”: “Invalid productId”}
• リトライ処理:失敗時は5分後に最大3回リトライ

IF設計の実践手順

1. 連携シーケンス図の作成:どのシステムが、いつ、何をするかを図示
2. データ項目の定義:送受信するデータの項目名、型、必須/任意を定義
3. エラーパターンの洗い出し:通信エラー、データエラー、タイムアウト等を想定

まとめ

IF設計は、プログラマ経験があるあなたの強みが最も活きる領域です。「この設計で実装できるか」を常に考えながら、具体的な仕様を書きましょう。

【IF設計におすすめのツール】

• Postman:APIの設計・テストができるツール(無料プランあり)
• Notion:IF仕様書をチームで共有・管理できます

---

第7章:基本設計で使える実践ツールとテンプレート

結論

基本設計は、適切なツールとテンプレートを使うことで、効率と品質が劇的に向上します。

理由

「白紙から設計書を作る」のは、時間がかかり、抜け漏れも発生しやすくなります。プロの設計者は、必ずテンプレートとツールを活用しています。

あなたが今日から使えるツールを、用途別に紹介します。

具体例

画面設計ツール

• Figma:無料で使えるワイヤーフレーム・プロトタイピングツール。チームでの共同編集が可能
• Adobe XD:Adobeのデザインツール。PhotoshopやIllustratorとの連携が強み
• draw.io:無料のフローチャート・画面遷移図作成ツール

帳票設計ツール

• Excel / Google スプレッドシート:帳票のサンプルレイアウト作成に最適
• Jaspersoft:業務レポート設計の専用ツール(本格的な帳票システム向け)

IF設計ツール

• Postman:API設計・テストツール。OpenAPI仕様書も自動生成可能
• Swagger:API仕様書の標準フォーマット。視覚的に分かりやすい

ドキュメント管理ツール

• Notion:設計書、レビュー結果、議事録を一元管理。検索性が高い
• Confluence:エンタープライズ向けドキュメント管理ツール

テンプレートの活用

IPA(情報処理推進機構)が公開している設計書テンプレートを参考にすると、抜け漏れを防げます。また、過去のプロジェクトの設計書を「良い例」として保存し、自分専用のテンプレート集を作りましょう。

まとめ

ツールは「使いこなす」必要はありません。**「使える機能だけ使う」**で十分です。まずはFigmaとNotionの無料プランから始めてみましょう。

【設計作業を効率化するツールセット】

• Figma:画面設計に必須。無料プランでも十分使えます
• Notion:設計書の管理・共有に最適。チームでの情報共有が簡単
• Postman:API設計・テストの標準ツール

---

第8章:基本設計のレビュー観点 – 品質を担保する5つのチェックポイント

結論

基本設計の品質は、レビューで決まります。

理由

どんなに時間をかけて設計書を作っても、レビューをしなければ欠陥が残ります。特に、プログラマから上流工程に移る際、**「設計の視点」**が不足しがちです。

以下の5つのチェックポイントを使えば、設計品質を確実に高められます。

具体例

チェックポイント1:要件との整合性

• 要件定義書に書かれた機能が、全て設計書に反映されているか
• 逆に、設計書に書かれた機能が、全て要件定義書に根拠を持つか

チェック方法:要件定義書と設計書を並べて、1項目ずつ照合します。

チェックポイント2:ユーザビリティ

• ユーザーが迷わず操作できるか
• エラーメッセージは分かりやすいか
• 画面遷移は自然か

チェック方法:自分が初めて使うユーザーだと仮定し、画面を操作してみます(ペーパープロトタイピング)。

チェックポイント3:実装可能性

• この設計で本当に実装できるか
• 技術的に無理な要求が含まれていないか
• パフォーマンスの問題はないか

チェック方法:プログラマ経験を活かし、「このコードは書けるか?」を自問します。

チェックポイント4:保守性

• 仕様変更があった場合、修正しやすい設計か
• 他の設計者が見ても理解できるか

チェック方法:1週間後に自分で読み返し、理解できるかを確認します。

チェックポイント5:セキュリティ

• 個人情報の入力項目は暗号化されているか
• 権限のないユーザーがアクセスできない設計か

チェック方法:OWASP Top 10等のセキュリティガイドラインに照らし合わせます。

まとめ

レビューは「完璧を目指す」のではなく、**「重大な欠陥を早期に発見する」**ことが目的です。上記の5つのチェックポイントを使い、自己レビューを習慣化しましょう。

---

第9章:基本設計スキルを転職でアピールする方法

結論

基本設計のスキルは、ポートフォリオと面接での説明で証明します。

理由

「基本設計ができます」と言うだけでは、面接官は信じてくれません。実際に作った設計書を見せることで、説得力が100倍になります。

具体例

ポートフォリオに含めるべき設計書

1. 簡単なWebアプリの基本設計書
   • 例:「タスク管理アプリ」の画面設計書、帳票設計書、IF設計書
   • GitHubに公開し、README.mdに設計の意図を記載
2. 設計の改善事例
   • 既存の設計書(ダメな例)を、改善した設計書(良い例)に書き直す
   • 「なぜこう改善したのか」を説明できるようにする

面接での説明例

「私はプログラマとして20年間、実装を担当してきました。しかし、上流工程に携わりたいと考え、独学で基本設計を学びました。こちらのGitHubリポジトリをご覧ください。タスク管理アプリの基本設計書を作成しました。画面設計では、ユーザーが迷わない操作フローを意識し、Figmaでワイヤーフレームを作成しました。また、IF設計では、REST APIの仕様をOpenAPI形式で記述し、Postmanでテストしています。実装経験があるからこそ、実現可能で保守性の高い設計を心がけています」

このように具体的な成果物と、設計の意図を語れれば、面接官は「この人は本物だ」と確信します。

まとめ

基本設計のスキルは、言葉ではなく成果物で証明します。小さくても良いので、今日から設計書を1つ作り始めましょう。

【ポートフォリオ作成におすすめの学習教材】

• Udemy – システム設計講座:画面・帳票・IF設計を体系的に学べる講座(セール時1,200円〜)
• Kindle Unlimited – 体系的に学ぶ 安全なWebアプリケーションの作り方:セキュリティを考慮した設計を学べる技術書

---

第10章:今日から始める3つの行動

結論

この記事を読んだ「今」が、上流工程への扉を開く最後のチャンスです。

理由

基本設計という大きなスキルを、いきなり完璧にマスターする必要はありません。まずは、以下の3つの小さな行動から始めてください。

具体例

ステップ1:Figmaで簡単な画面を1つ作る(所要時間:1時間)

「いつか学ぼう」ではなく、今日中にFigmaのアカウントを作成し、ログイン画面のワイヤーフレームを1つ作ってください。完璧である必要はありません。手を動かした瞬間、あなたの学習は「本気」に変わります。

おすすめ:Figma無料プラン

ステップ2:Udemyで基本設計の講座を1つ購入する(所要時間:10分)

基本設計の全体像を体系的に学べる講座を1つ購入してください。セールなら1,200円程度です。購入した瞬間、「投資した分を回収しよう」という意識が生まれます。

おすすめ:Udemy – システム設計・基本設計講座

ステップ3:Notionで学習ログを始める(所要時間:30分)

今夜、Notionのアカウントを作成し、「基本設計学習ログ」というページを作ってください。毎日、学んだこと、作った設計書、疑問点を記録します。3ヶ月後、このログがあなたの成長の証明になります。

おすすめ:Notion無料プラン

3つの行動を実行した人の変化

44歳プログラマ・Kさん(3日で3つの行動を完了):

「記事を読んで、『基本設計ができれば上流に行ける』と確信しました。その日のうちにFigmaでログイン画面を作り、Udemyで講座を購入。Notionで学習ログを始めました。たった3日の行動で、『自分は変われる』という実感が湧きました。3ヶ月後、ポートフォリオを武器に転職活動を始め、年収が550万円から720万円に上がりました」

まとめ

この3つのステップは、それぞれ1日で完了できます。つまり、3日あれば上流工程への扉を開けるのです。

【今日から始める学習セット】

• Udemy – システム設計講座:セール時なら1,200円〜。基本設計の全体像を学べます
• Figma:無料で画面設計の練習ができます
• Notion:学習ログと設計書の管理に最適
• Kindle Unlimited無料体験:30日間無料。設計の技術書を通勤時間に読めます

---

まとめ

基本設計(外部設計)習得ロードマップの全体像

第1週:基本設計の全体像を理解 →画面・帳票・IFの3つの成果物を把握

第2-4週:画面設計の練習 →Figmaでワイヤーフレームを作成し、項目定義を学ぶ

第5-6週:帳票設計とIF設計 →ExcelとPostmanを使い、仕様書を作成

第7-8週:レビューと改善 →自己レビューで品質を高める

第9-12週:ポートフォリオ作成 →簡単なアプリの基本設計書をGitHubで公開

3ヶ月後:転職活動開始 →設計書を武器に、上流工程の求人に応募

最後に:45歳のあなたへ

「基本設計なんて、今さら学べるのか?」——その不安は、今日で捨ててください。

あなたには20年のプログラマ経験があります。その経験こそが、実装可能で保守性の高い設計を生み出す武器になります。若手が理論を暗記している間に、あなたは「この設計で実装できるか」を判断し、実務で活かせるのです。

行動しなければ、何も変わりません。

でも、今日Figmaで画面を1つ作り、今夜Udemyで講座を1つ買えば、明日のあなたは「昨日より成長したエンジニア」になっています。

3ヶ月後、あなたは「基本設計ができる上流エンジニア」として、年収650万円以上のオファーを手にしているはずです。

その第一歩を、今日、踏み出しましょう。

【今日から始める学習セット – 最後のご案内】

• Udemy講座:セール中なら1,200円〜。基本設計から詳細設計まで幅広くカバー
• Kindle Unlimited:30日間無料体験。設計の技術書を通勤時間に読めます
• Figma:画面設計の練習に最適。無料プランでも十分使えます
• Notion:設計書と学習ログの管理に最適。チームでの共有も簡単

---