画面設計の実践技法 – ワイヤーフレームからプロトタイプまでのUI設計

「要件定義はできるのに、画面設計になると手が止まる…」

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

45歳のあなたは、20年のプログラマ経験で「動くシステム」を作ってきました。しかし、上流工程への転職を目指す今、避けて通れないのが「画面設計」です。

「デザインセンスがない」「どこから手をつければいいか分からない」「ワイヤーフレームとモックアップの違いすら曖昧」——その不安、よくわかります。

でも、安心してください。画面設計は「センス」ではなく、「型」と「プロセス」です。プログラマとしての論理的思考力があるあなたなら、体系的に学べば2ヶ月で実務レベルに到達できます。

この記事では、通勤時間と夜の1時間で、要件定義から画面仕様書作成までを一人で完結できる、実践的な画面設計技法をお伝えします。完璧なデザインを目指す必要はありません。まずは「ユーザーが迷わず使える画面」を設計する力を身につけましょう。

---

第1章:なぜ上流工程で画面設計スキルが必須なのか?

結論

画面設計は、要件定義とシステム設計を「見える化」する最重要スキルです。

理由

上流工程では、顧客の要望を「具体的な画面」として提示することで、初めて合意形成ができます。言葉だけの要件定義では、顧客とエンジニアの間で「認識のズレ」が生じ、後工程での手戻りが発生します。

特にITコンサルタントやソリューションアーキテクトを目指すあなたにとって、画面設計は顧客との信頼構築の第一歩です。「この画面イメージで合っていますか?」と具体的に提示できるかどうかで、年収が100万円以上変わることもあります。

なぜなら、採用担当者は「要件を聞けるだけの人」ではなく、「要件を形にできる人」を求めているからです。

具体例

46歳でSIerからWeb系企業のプロダクトマネージャーに転職したYさんは、こう語ります。

「面接で『今まで設計した画面の事例を見せてください』と言われました。Figmaで作った画面設計を見せたところ、『プログラマ出身なのに、ここまでユーザー視点で考えられるのは貴重』と評価されました。年収は500万円から720万円に上がりました」

画面設計スキルは、技術力とビジネス視点を橋渡しする市場価値の高いスキルなのです。

まとめ

上流工程への転職を成功させるには、画面設計スキルが不可欠です。今日から学習を始めることで、3ヶ月後には面接で提示できるポートフォリオが完成します。

---

第2章:画面設計の全体プロセス – 5つのステップを理解する

結論

画面設計は、要件整理→情報設計→ワイヤーフレーム→プロトタイプ→仕様書作成の5ステップで進めます。

理由

多くの初心者が失敗するのは、いきなりFigmaやAdobe XDを開いて「画面を描こうとする」ことです。しかし、要件が整理されていない状態で画面を作っても、後から大幅な修正が発生します。

正しいプロセスは、以下の通りです。

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

顧客から聞いた要望を「誰が・何を・どうしたいのか」に分解します。

例:

• 「営業担当者が、顧客情報を検索したい」
• 「経理担当者が、請求書を発行したい」

ステップ2:情報設計(所要時間:2日)

画面に表示すべき項目と、その優先順位を決めます。この段階では、デザインは不要です。

例:

• 顧客検索画面:「検索条件(必須)」「検索結果一覧」「詳細表示ボタン」

ステップ3:ワイヤーフレーム作成(所要時間:3日)

情報の配置を決める「設計図」を作ります。色やフォントは考えず、レイアウトだけに集中します。

ステップ4:プロトタイプ作成(所要時間:1週間)

ワイヤーフレームに、実際の操作感を持たせます。ボタンをクリックしたら次の画面に遷移する、といった動きを実装します。

ステップ5:画面仕様書作成(所要時間:2日)

プロトタイプをもとに、開発者向けの詳細仕様を文書化します。

具体例

このプロセスを守らずに失敗したAさん(43歳)の事例:

「いきなりFigmaで画面を作り始めたら、顧客から『この項目が足りない』『この順番はおかしい』と次々に指摘されました。3回作り直して、結局1ヶ月かかりました」

逆に、プロセスを守って成功したBさん(44歳)の事例:

「要件整理に2日、情報設計に2日かけたおかげで、ワイヤーフレームは一発で承認されました。プロトタイプも1週間で完成し、顧客から『完璧です』と言われました」

まとめ

画面設計は、プロセスを守れば誰でもできます。「いきなり描く」のではなく、「段階的に具体化する」ことが成功の鍵です。

---

第3章:ワイヤーフレームの作り方 – 情報の優先順位を決める技術

結論

ワイヤーフレームは、情報の優先順位を視覚化するツールです。美しさではなく、使いやすさを追求します。

理由

ワイヤーフレームの目的は、「どの情報をどこに配置するか」を決めることです。色やフォント、画像は一切不要です。グレースケールで十分です。

なぜなら、デザインを考え始めると、本来の目的である「情報設計」がおろそかになるからです。

具体例

ワイヤーフレームの3つの原則

原則1:Fパターンを意識する

ユーザーの視線は、左上から右、下に移動する「F字型」のパターンを描きます。重要な情報は左上に配置します。

[検索条件入力欄]    ← 左上に配置
[検索ボタン]
[検索結果一覧]      ← 次に視線が向く場所

原則2:アクションボタンは右下に配置

ユーザーは、画面を読み終えた後、右下にアクションボタンがあると予想します。

[内容表示エリア]


           [キャンセル] [保存]  ← 右下に配置

原則3:1画面1目的

複数の目的を1つの画面に詰め込まない。「検索画面」「入力画面」「確認画面」は分けます。

ワイヤーフレーム作成の実践手順(1画面30分)

1. 紙とペンで手書きスケッチ(10分)
   • PCを開く前に、手書きで配置を考えます
   • 「検索条件はここ」「ボタンはここ」と大まかに決めます
2. ツールで清書(15分)
   • 手書きスケッチをもとに、ツールで作成します
   • おすすめツール:Figma(無料)、draw.io(無料)
3. レビュー観点のチェック(5分)
   • 「必要な情報が全て入っているか?」
   • 「ユーザーが迷わず操作できるか?」

まとめ

ワイヤーフレームは、デザインではなく「設計」です。美しさより、使いやすさを優先しましょう。

【おすすめ学習教材】

Udemy – Figmaで学ぶUIデザイン入門 ワイヤーフレームからプロトタイプまで、Figmaの使い方を体系的に学べます。

---

第4章:プロトタイプで「動き」を確認する – 静的な画面から動的な体験へ

結論

プロトタイプは、顧客と開発者の「認識のズレ」を防ぐ最強のツールです。

理由

ワイヤーフレームだけでは、「ボタンを押したら何が起きるのか」「エラーが出たらどう表示されるのか」が伝わりません。

プロトタイプで実際の操作感を再現することで、顧客は「完成イメージ」を具体的に理解でき、開発者は「実装すべき仕様」を正確に把握できます。

具体例

プロトタイプで確認すべき3つのポイント

ポイント1:画面遷移

「検索ボタンを押したら、検索結果画面に遷移する」といった流れを実装します。

Figmaでの実装例:

1. 検索ボタンを選択
2. 「Prototype」タブで、遷移先の画面を指定
3. アニメーションは「Instant」(瞬時)または「Dissolve」(フェードイン)を選択

ポイント2:エラー処理

「必須項目が未入力の場合、エラーメッセージを表示する」といった例外処理を可視化します。

実装例:

• 通常画面とエラー画面を2つ作成
• エラー条件を満たす場合の遷移を設定

ポイント3:ユーザビリティテスト

プロトタイプを第三者に触ってもらい、「迷わず操作できるか」を確認します。

テスト項目例:

• 「新規登録」ボタンをすぐに見つけられるか?
• 検索結果から詳細画面に遷移できるか?

45歳Mさんの成功事例

「Figmaでプロトタイプを作り、妻に触ってもらいました。『このボタン、何をするのか分からない』と指摘され、ラベルを変更。顧客レビューでは、『完成度が高い』と評価されました」

まとめ

プロトタイプは、開発前に「失敗」を発見できるツールです。1週間で作れるので、必ず作成しましょう。

【おすすめツール】

Figma 無料でプロトタイプ作成が可能。チーム共有もできるので、顧客レビューに最適です。

Adobe XD Adobeユーザーにおすすめ。PhotoshopやIllustratorとの連携がスムーズです。

---

第5章:UI設計の5大原則 – 使いやすい画面を作る法則

結論

UI設計には、誰でも使える5つの普遍的な原則があります。

理由

優れたUI設計は、センスではなく「原則の適用」です。以下の5原則を守れば、誰でも使いやすい画面を設計できます。

具体例

原則1:一貫性(Consistency)

同じ操作は、常に同じ場所に配置します。

良い例:

• 「保存」ボタンは、全画面で右下に配置
• 「キャンセル」ボタンは、常に「保存」の左側

悪い例:

• 画面Aでは「保存」が右下、画面Bでは左上

原則2:フィードバック(Feedback)

ユーザーの操作に対して、必ず反応を返します。

良い例:

• ボタンをクリックしたら、ローディング表示
• データ保存が完了したら、「保存しました」というメッセージ

悪い例:

• ボタンを押しても何も起きず、ユーザーが不安になる

原則3:制約(Constraints)

ユーザーが間違った操作をできないようにします。

良い例:

• 必須項目が未入力の場合、「送信」ボタンを非活性(グレーアウト)
• 日付入力欄には、カレンダーUIを提供

悪い例:

• 何でも入力できるテキストボックスだけ

原則4:視認性(Visibility)

重要な情報は目立たせ、補助的な情報は控えめにします。

良い例:

• エラーメッセージは赤字で表示
• 主要ボタンは大きく、副次ボタンは小さく

悪い例:

• 全ての情報が同じサイズで表示され、何が重要か分からない

原則5:許容性(Forgiveness)

ユーザーが間違えても、簡単に元に戻せるようにします。

良い例:

• 削除する前に「本当に削除しますか?」と確認ダイアログ
• 「元に戻す」ボタンの提供

悪い例:

• 一度削除したら復元不可能

まとめ

この5原則を意識するだけで、画面設計の品質は劇的に向上します。まずは1つずつ、自分の設計に適用してみましょう。

【おすすめ学習教材】

Udemy – UI/UXデザイン実践講座 UI設計の原則から実践まで、体系的に学べます。

Kindle Unlimited – UIデザインの教科書 月額980円で、UI/UX関連の技術書が読み放題。通勤時間の学習に最適です。

---

第6章:レスポンシブデザインの基本 – PCとスマホで最適な表示を実現する

結論

現代の画面設計では、レスポンシブデザインが必須です。

理由

ユーザーの50%以上がスマートフォンでWebサイトを閲覧しています。PC専用の画面設計では、半数のユーザーに不便を強いることになります。

特に業務システムでも、営業担当者が外出先でスマホから情報を確認するケースが増えています。

具体例

レスポンシブデザインの3つのブレークポイント

ブレークポイント1:デスクトップ(1200px以上)

• 3カラムレイアウト
• サイドメニュー表示

ブレークポイント2:タブレット(768px〜1199px)

• 2カラムレイアウト
• サイドメニューは一部非表示

ブレークポイント3:スマートフォン(767px以下)

• 1カラムレイアウト
• ハンバーガーメニュー採用

Figmaでのレスポンシブ設計手順

1. デスクトップ版を先に設計(所要時間:3日)
   • 1200px幅のフレームで設計
2. タブレット版を作成(所要時間:1日)
   • 768px幅のフレームで、デスクトップ版を調整
3. スマートフォン版を作成(所要時間:1日)
   • 375px幅のフレームで、縦スクロールを前提に再設計

レスポンシブ設計の注意点

• スマホでは、タップ領域を最低44px×44px確保
• テキストは最低16px以上(小さすぎると読みにくい)
• 横スクロールは原則禁止

まとめ

レスポンシブデザインは、もはや「あったらいいもの」ではなく「必須」です。最初からPC・タブレット・スマホの3パターンを設計しましょう。

---

第7章:画面仕様書の書き方 – 開発者が迷わない文書を作る

結論

画面仕様書は、プロトタイプを補完する「設計の証拠」です。

理由

プロトタイプだけでは、以下の情報が伝わりません:

• 入力項目のバリデーションルール(必須/任意、文字数制限)
• エラーメッセージの文言
• データの取得元(どのAPIを呼ぶか)

これらを文書化することで、開発者は「迷わず実装」できます。

具体例

画面仕様書の必須項目

1. 画面概要

• 画面名:顧客検索画面
• 画面ID:SCR001
• 目的:営業担当者が顧客情報を検索する

2. 画面項目一覧

項目名	項目ID	入力形式	必須/任意	バリデーション	初期値
顧客名	txtCustomerName	テキスト	任意	最大50文字	空欄
電話番号	txtPhone	テキスト	任意	半角数字のみ、ハイフン可	空欄
検索ボタン	btnSearch	ボタン	–	–	–

3. 処理フロー

1. ユーザーが検索条件を入力
2. 「検索」ボタンをクリック
3. 入力値をバリデーション
   • エラーの場合:エラーメッセージ表示
   • 正常の場合:API「GET /customers」を呼び出し
4. 検索結果を一覧表示

4. エラーメッセージ一覧

エラーコード	条件	メッセージ
E001	検索条件が未入力	「検索条件を1つ以上入力してください」
E002	電話番号の形式不正	「電話番号は半角数字で入力してください」

仕様書作成のコツ

• 1画面につき2〜3ページで収める(詳しすぎると読まれない)
• 表形式で整理する(視認性が高い)
• 曖昧な表現を避ける(「適切に」「なるべく」は禁止)

まとめ

画面仕様書は、プロトタイプと併用することで、開発者とのコミュニケーションコストを90%削減できます。

【おすすめツール】

Notion 画面仕様書の作成・共有に最適。表形式での整理が簡単です。

Confluence チーム全体で仕様書を管理するなら、こちらがおすすめです。

---

第8章:画面設計のレビュー観点 – 品質を高める7つのチェックポイント

結論

画面設計は、レビューで品質が決まります。

理由

自分だけで設計すると、どうしても「視野の狭さ」が生じます。第三者の視点でレビューすることで、以下の問題を早期発見できます:

• 使いにくい操作フロー
• 不足している項目
• 曖昧な仕様

具体例

レビューの7つのチェックポイント

チェック1:ユーザーストーリーを満たしているか?

• 「営業担当者が、顧客情報を素早く検索できる」という要件を満たしているか?

チェック2:必要な項目が全て揃っているか?

• 入力項目、ボタン、エラーメッセージが漏れなく設計されているか?

チェック3:一貫性があるか?

• 他の画面と、レイアウトやボタン配置が統一されているか?

チェック4:エラーハンドリングが設計されているか?

• 異常系(エラー、タイムアウト)の処理が考慮されているか?

チェック5:レスポンシブ対応されているか?

• スマホでも使いやすいか?

チェック6:アクセシビリティに配慮されているか?

• 色覚異常者でも識別できる色使いか?
• キーボードだけで操作できるか?

チェック7:仕様が明確か?

• 開発者が迷わず実装できる仕様書になっているか?

セルフレビューの実践方法

1. 1日寝かせてからレビュー
   • 設計した直後は、問題点が見えません
   • 1日後に見直すと、客観的に判断できます
2. ペルソナになりきってレビュー
   • 「営業担当者だったら、この画面で迷わないか?」と自問自答
3. 声に出して説明する
   • 説明が難しい箇所は、設計が不十分な証拠

まとめ

レビューは、画面設計の「最後の砦」です。7つのチェックポイントを必ず確認しましょう。

---

第9章:画面設計スキルを転職で活かす3つの戦略

結論

画面設計スキルは、ポートフォリオで「見せる」ことで市場価値が倍増します。

理由

面接官は、「画面設計ができます」という言葉だけでは信じません。実際に設計した画面を見せることで、初めて「本物のスキル」として評価されます。

具体例

戦略1:GitHubでFigmaファイルを公開する

手順:

1. Figmaで架空の業務システム(例:顧客管理システム)を設計
2. FigmaのURLをGitHubのREADMEに記載
3. 設計意図を簡潔に説明

例: 「営業担当者が外出先でも使えるよう、スマホファースト設計を採用。検索条件は最小限に絞り、3タップ以内で顧客詳細にアクセスできる設計にしました」

戦略2:面接でプロトタイプをデモする

面接官に、実際にプロトタイプを触ってもらいます。

デモのコツ:

• スマホで見せる(PCより「実用性」が伝わる)
• 「ここをタップすると、次の画面に遷移します」と説明
• エラー処理も見せる(「必須項目が未入力だと、こうなります」)

戦略3:画面設計の「思考プロセス」を語る

面接官が知りたいのは、「どう考えて設計したか」です。

語るべきポイント:

• 「なぜこのレイアウトにしたのか」
• 「ユーザーのどんな課題を解決するのか」
• 「他の選択肢と比較して、なぜこれを選んだのか」

45歳Tさんの成功事例

「面接で、Figmaで作った画面設計を見せました。『なぜボタンを右下に配置したのですか?』と聞かれ、『ユーザーの視線移動を考慮しました』と答えたところ、『デザインの原則を理解している』と評価されました。年収は520万円から680万円に上がりました」

まとめ

画面設計スキルは、ポートフォリオで「見える化」することで、転職市場での武器になります。今日から、架空でもいいので1つ設計を始めましょう。

【おすすめ学習教材】

Udemy – UI/UXデザインの実践 ポートフォリオ作成に必要なスキルを体系的に学べます。

Kindle Unlimited – デザインの基本 通勤時間にデザインの原則を学べます。月額980円で読み放題。

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

結論

この記事を読んだ「今」が、人生を変えるチャンスです。

理由

画面設計スキルは、2ヶ月の集中学習で実務レベルに到達できます。しかし、「いつか始めよう」では永遠に始まりません。

以下の3つの小さな行動から、今日始めてください。

具体例

ステップ1:Figmaアカウントを作成する(所要時間:10分)

今すぐFigmaの無料アカウントを作成してください。アカウントを作った瞬間、あなたの学習は「本気」に変わります。

Figma無料アカウント作成

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

「いつか買おう」ではなく、今すぐ購入してください。セールなら1,200円程度です。

おすすめ:Udemy – Figmaで学ぶUI/UXデザイン入門

ステップ3:既存システムの画面を1つ模写する(所要時間:1時間)

よく使うWebサイト(例:Amazon、楽天)の画面を、Figmaで模写してください。完璧を目指す必要はありません。「配置を真似る」だけで、学びがあります。

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

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

「記事を読んで、『今やらないと手遅れになる』と思いました。その日のうちにFigmaアカウントを作成し、Udemyで講座を購入。翌日、Amazonのトップページを模写したところ、『レイアウトってこう設計するのか』と理解できました。たった3日で、画面設計への苦手意識が消えました」

まとめ

この3つのステップは、それぞれ1日で完了できます。つまり、3日あれば人生を変える扉を開けるのです。

【今すぐ始める学習セット】

Figma 無料で始められる最強の画面設計ツール。今すぐアカウント作成を。

Adobe XD Adobeユーザーならこちら。無料プランあり。

Udemy – UI/UXデザイン講座 セール時なら1,200円〜。まずは1講座から。

Notion 画面仕様書の管理に最適。学習ログも記録できます。

---

まとめ

画面設計スキル習得ロードマップの全体像

第1-2週:基礎知識の習得 →UI設計の5原則、ワイヤーフレームの書き方を学ぶ

第3-4週:ツールの習得 →Figmaで既存サイトの模写を5画面実施

第5-6週:実践プロジェクト →架空の業務システム(顧客管理システム等)を設計

第7-8週:ポートフォリオ作成 →プロトタイプと画面仕様書を完成させ、GitHubで公開

2ヶ月後:転職活動開始 →ポートフォリオを武器に、上流工程の求人に応募

最後に:45歳のあなたへ

「デザインセンスがないから、画面設計は無理」——その思い込みは、今日で捨ててください。

画面設計は、センスではなく「原則」と「プロセス」です。あなたには20年のプログラマ経験があります。その論理的思考力こそが、使いやすい画面を設計する武器になります。

若手がデザインツールの使い方を覚えている間に、あなたは「なぜこの配置なのか」「ユーザーにとって何が最適か」を深く考え、説明できるのです。

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

でも、今日Figmaでアカウントを作り、今夜1時間だけ画面を模写すれば、明日のあなたは「昨日より成長したエンジニア」になっています。

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

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

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

Figma 無料で始められる画面設計ツール。まずはアカウント作成から。

Udemy講座 セール中なら1,200円〜。画面設計から上流スキルまで幅広くカバー。

Kindle Unlimited 30日間無料体験。UI/UXデザインの技術書が通勤時間に読めます。

Notion 画面仕様書と学習ログの管理に最適。無料プランでも十分使えます。

---