ワイヤーフレームの作り方｜システム開発で要件を可視化する方法

ワイヤーフレームとは

ワイヤーフレームは、Webサイトやアプリの「設計図」です。色やデザインの装飾を一切排除し、画面の構成要素（テキスト、画像、ボタン、フォーム等）の配置と構造だけを示します。

なぜワイヤーフレームが必要か

作るタイミング

要件定義の後、UIデザインの前。つまり「何を作るか」が決まった段階で、「どう見せるか」を考えるためにワイヤーフレームを作ります。

ワイヤーフレームの3つの精度レベル

Lo-Fi（ラフスケッチ）

紙とペンで描くレベル。四角い枠と簡単な文字だけで画面構成を表現。5分で1画面描けるため、アイデア出しの段階で最適。

Mid-Fi（中精度）

Figma等のツールで作成。実際のテキスト量に近いダミーテキスト、画像プレースホルダー、ボタンのサイズ感を表現。開発者への指示書として使用。

Hi-Fi（高精度）

実際のテキスト、アイコン、正確なサイズ・余白で作成。デザインカンプの一歩手前。色・フォント以外はほぼ最終形。

基本的な作り方

Step 1: サイトマップの作成

全画面の一覧と遷移関係を整理。トップページを起点に、どのページからどのページに遷移するかをツリー構造で表現。

Step 2: 画面ごとの要素洗い出し

各画面に必要な要素をリストアップ：

• ヘッダー（ロゴ、ナビゲーション）
• メインコンテンツ（テキスト、画像、動画等）
• サイドバー（関連リンク、バナー等）
• CTA（ボタン、フォーム）
• フッター（会社情報、リンク）

Step 3: レイアウトの作成

要素を画面上に配置。以下のルールに従う：

• F型パターン: ユーザーの視線は左上→右→左下に流れる
• 重要な要素は上部に: ファーストビュー（スクロールなしで見える範囲）に重要情報
• 余白を恐れない: 詰め込みすぎは可読性を低下させる
• グリッドシステム: 12カラムグリッドで整列

Step 4: インタラクションの注記

ワイヤーフレームだけでは伝わらないインタラクション（クリック時の動作、バリデーション等）を注記で補足。

おすすめツール

よくある失敗パターン

失敗①: デザインに踏み込みすぎる

ワイヤーフレームの段階で色やフォントにこだわると、デザイナーの裁量を奪い、後工程で混乱します。ワイヤーフレームは必ずグレースケールで作成してください。

失敗②: テキストをすべてダミーにする

「ああああ」「テキストが入ります」では、実際のコンテンツ量が分かりません。できる限り実際に近いテキスト量で作成してください。

失敗③: モバイルを無視する

PC版だけ作って「モバイルはレスポンシブで」と丸投げするパターン。スマホの画面サイズでレイアウトが成立するか、ワイヤーフレーム段階で確認してください。

失敗④: 1人で作って見せない

ワイヤーフレームは関係者全員（発注者、デザイナー、エンジニア）でレビューするためのものです。作ったらすぐに共有し、フィードバックをもらってください。

まとめ

• ワイヤーフレームは「設計図」。デザイン前に画面構成を確定するためのもの
• Mid-Fi精度が最もコスパ良好（Lo-Fiは不十分、Hi-Fiは過剰）
• グレースケールで作成し、色やフォントは触らない
• 作ったらすぐに関係者に共有し、フィードバックをもらう
• FigmaかWhimsical（無料）で十分作成可能

ワイヤーフレーム作成・UI設計のご相談は、お問い合わせからお気軽にどうぞ。