目次／情報設計・仕様設計／仕様設計

UI設計（ワイヤーフレーム/プロトタイプ作成）

項目番号 028 ／最終更新 2026-10-01

10秒でわかる！要点まとめ

「お絵描き」ではなく「情報の優先順位」を決める論理的なパズル
Figma等のツール進化により、静止画ではなく「動く紙芝居」での合意形成が主流に
ここでの指示が曖昧だと、デザインで悩み、エンジニアリングでバグを生む

1. 概要：画面の「レイアウト」と「挙動」を可視化する

UI（ユーザーインターフェース）設計とは、決定したサイトマップやシナリオを元に、具体的な画面上の情報配置や機能の動きを設計図として書き起こす業務です。

一般的に、モノクロで要素の配置のみを示したものを「ワイヤーフレーム（骨組み）」、画面遷移やボタンのアニメーションなど実際の動きをシミュレーションできるようにしたものを「プロトタイプ（試作品）」と呼びます。ビジュアルデザイン（色や装飾）を入れる前の段階で、使い勝手や情報の過不足を検証し、制作チームやクライアントと合意形成を図るための最重要ドキュメントです。

2. なぜ重要なのか：修正コストを「1/10」に抑える

家を建てる時に、いきなり壁紙を選び始める人はいません。まずは間取り（ワイヤーフレーム）を決めます。なぜなら、壁を作った後に「やっぱりキッチンを移動したい」と言うと、解体工事が必要になるからです。

Web制作も同じで、デザインやコーディングが終わった後に「ボタンの位置を変えたい」となると、多大な修正コストが発生します。まだ線画の状態であれば、数秒で修正が可能です。プロジェクト後半での手戻りを防ぎ、スムーズな進行を実現するために、この段階で「仕様の抜け漏れ」や「使いにくさ」を徹底的に潰しておく必要があります。

3. 実務のポイント：色は使わず「注釈」で語る

実務で優れたUI設計を行うためのポイントは、デザインの領域を侵さないことと、エンジニアリング実装への配慮です。

グレースケールで作る：中途半端に色をつけると、クライアントが「赤色は好きじゃない」といったデザインの議論を始めてしまい、肝心のレイアウトや機能の議論ができなくなります。情報の優先度を「グレーの濃淡」だけで表現するのが鉄則です。
アノテーション（注釈）の徹底：図形を置くだけでなく、「このタイトルは最大20文字」「リストが0件の時は非表示」「クリックするとモーダルが出る」といった詳細な挙動ルールを文字で書き込みます。これがエンジニアへの実装指示書となります。
スマホファースト：PC画面から作り始めると、要素を詰め込みすぎてスマホに入り切らなくなります。スマホ版のレイアウトを先に、あるいは同時に考えることで、情報の取捨選択が厳密になります。

4. スキルアップのヒント：「Figma」をディレクターも使う

かつてはPowerPointやExcelが主流でしたが、現在は「Figma」が業界標準ツールです。Figmaを活用してチームでワイヤーフレームを作り、プロトタイプ機能で画面遷移を確認できるようになることが必須スキルになりつつあります。

また、Googleの「Material Design」やAppleのガイドラインを読み、ハンバーガーメニュー、カルーセル、アコーディオンといった「UIパターンの定石」を知ることも重要です。車輪の再発明をせず、既存の優れたパターンを適切に組み合わせる構成力が求められます。