フレームワーク活用ガイドひとことで言うと#
色やビジュアル要素を排除し、画面の「レイアウト」「情報の優先順位」「要素の配置」だけに集中して設計する線画の設計図。家を建てる前の設計図面と同じで、見た目より「構造」を先に固める。
押さえておきたい用語#
- ローファイ（Lo-Fi）
- 低精度のワイヤーフレームのこと。紙とペンで5分で描く。要素の大まかな配置と方向性の確認に使う。
- ミッドファイ（Mid-Fi）
- 中精度のワイヤーフレームを指す。FigmaやXDで実寸サイズに起こす。関係者との合意形成用に使う。
- ファーストビュー
- ページを開いたときにスクロールせずに見える領域のこと。必須要素がこの範囲に収まっているかが重要な判断基準。
- グレースケール
- 色を使わず白〜灰〜黒の濃淡だけで表現する方法のこと。ワイヤーフレームでは色の議論を避けるためにグレースケールで作る。
- インタラクション注釈
- ボタンを押した後の遷移先やアニメーションなど、画面の動的な振る舞いをテキストで補足する説明である。
ワイヤーフレーミングの全体像#
こんな悩みに効く#
- いきなりデザインカンプを作り始めて、後から構造を変更するハメになる
- 関係者との認識合わせに時間がかかる
- デザインレビューで「ここにボタンが欲しい」など構造的な指摘が出て手戻りが多い
基本の使い方#
ワイヤーフレームを描く前にこの画面で何を達成するかを明確にする。
- この画面のゴール（例：ユーザーが商品を比較して1つ選ぶ）
- ユーザーがこの画面に到達する前の文脈（どこから来たか）
- この画面の次のアクション（どこへ行くか）
1画面1ゴールが理想。複数のゴールがある場合は画面を分けることを検討する。
画面に必要な要素を書き出して優先順位をつける。
- 必須: この画面にないとタスクが完了できない要素
- 重要: あると便利だが、なくてもタスクは完了できる要素
- あれば嬉しい: 余裕があれば入れたい要素
優先順位が高い要素ほど、画面の上部・中央に配置する。ファーストビュー（スクロールせずに見える範囲）に必須要素が収まるかが重要な判断基準。
ローファイ（低精度）: 紙とペンで5分。四角と線だけ。チーム内のブレスト用。
- 要素の大まかな配置と優先順位を確認
- 複数案を素早く比較できる
- 「これでいいか？」の確認に使う
ミッドファイ（中精度）: FigmaやXDで30分〜1時間。実寸サイズ。関係者との合意形成用。
- 実際のグリッドに沿ったレイアウト
- ダミーテキスト（実際に近い文字量）
- インタラクション（ボタンを押すとどこに遷移するか）の注釈
色は使わずグレースケールで作成。色があると「この青は…」と見た目の議論が始まってしまう。
具体例#
状況: 月間200万PVの求人サイトをリニューアル。検索結果画面の離脱率が68%と高く、「条件に合う求人が見つからない」という声がユーザーテストで多数。
画面の目的: ユーザーが条件に合う求人を見つけて詳細ページに進む
要素リスト（優先順位順）:
- 必須: 検索結果一覧（社名、職種、給与、勤務地）、絞り込みフィルター
- 重要: 検索条件の表示・変更、件数表示、ソート機能
- あれば嬉しい: お気に入り保存、類似求人のおすすめ
ローファイ（紙で5分）:
[検索バー]
[フィルター: エリア / 職種 / 給与]
件数「120件」 並び替え[新着順 ▼]
[求人カード] 社名 / 職種 / 給与 / 勤務地 / [詳細→]
[求人カード] ...
[求人カード] ...
[ページネーション 1 2 3 ... 10]ミッドファイでの検証:
- 12カラムグリッドにフィルター（3カラム）と結果一覧（9カラム）を配置
- 求人カードは実際の文字量（「株式会社〇〇 | Webエンジニア | 年収500〜700万円 | 東京都渋谷区」）でサイズ感を確認
- モバイル版: フィルターは上部のアコーディオンに格納
離脱率68%→41%。ワイヤーフレーム段階で「サイドバーのフィルターがモバイルで使いにくい」と気づき、上部アコーディオンに変更した判断が効いた。
状況: 従業員50名のBtoB SaaS企業。管理画面のダッシュボードに情報を詰め込みすぎて、初回ログイン時の離脱率が45%。「何を見ればいいかわからない」というフィードバックが多い。
画面の目的: ユーザーが「今日やるべきこと」を30秒以内に把握する
Before（改善前）: 15個のウィジェットが並び、KPI・グラフ・通知・タスク・設定が混在
ワイヤーフレームでの再設計:
| 優先度 | 要素 | 配置 |
|---|---|---|
| 必須 | 「今日のタスク」3件以内 | ファーストビュー中央 |
| 必須 | 重要アラート（1件のみ最優先表示） | ファーストビュー上部 |
| 重要 | KPI 3指標（売上・顧客数・解約率） | ファーストビュー右側 |
| あれば嬉しい | 週次トレンドグラフ | スクロール下部 |
| あれば嬉しい | お知らせ・更新情報 | フッター |
ローファイで3案を比較:
- A案: タスクを左、KPIを右の2カラム
- B案: タスクを全面、KPIは折りたたみ
- C案: アラートを最上部に固定、その下にタスクとKPIを横並び
→ ユーザーテスト（5名）でC案の「30秒以内で把握率」が最も高い（A案40%、B案60%、C案80%）
初回ログイン離脱率45%→18%、開発後の手戻りゼロ。ビジュアルデザインの前に3案を比較テストしておくと、この差が生まれる。
状況: 人口5万人の地方自治体。子育て支援情報がPDFと紙のチラシでしか提供されておらず、スマホで閲覧できない。担当職員（非デザイナー）がWordPress でサイトを立ち上げることに。
画面の目的（トップページ）: 保護者が「自分に使える支援」を3タップ以内で見つける
ローファイ（A4用紙に手書き、10分）:
[ヘッダー: ○○市 子育てナビ]
[検索: 何をお探しですか？]
[子どもの年齢で探す]
[0歳] [1-2歳] [3-5歳] [小学生]
[カテゴリで探す]
[お金の支援] [預ける] [健診・相談] [イベント]
[よく見られている情報 TOP3]
1. 児童手当の手続き
2. 保育園の空き状況
3. 乳幼児健診の日程
[お問い合わせ: TEL / LINE]検証のポイント:
- 子育て中の保護者5名に紙のワイヤーフレームを見せて「児童手当の情報にたどり着けるか」をテスト
- 5名中4名が「年齢→0歳→お金の支援」のルートで到達
- 1名が「検索バー」を使ったが、検索ワードが「手当」ではなく「もらえるお金」だったため、検索キーワードの類義語設定が必要と判明
電話問い合わせ月120件→45件。A4用紙に10分で描いたワイヤーフレームと保護者5名のテストで情報設計の80%は固められた。デザインツールは必須ではない。
やりがちな失敗パターン#
- ワイヤーフレームにこだわりすぎて時間を使いすぎる — 完璧なワイヤーフレームを目指すと本末転倒。ローファイは5分、ミッドファイは1時間を目安にする
- ダミーテキストが非現実的 — 「テスト」「あああ」だと文字量の検証ができない。実際に近い長さのテキストを入れる
- 関係者にローファイを見せて細部を議論してしまう — ローファイは「方向性の確認」用。「ボタンの位置が3px右」のような議論はミッドファイ以降でやる
- 色をつけてしまう — ワイヤーフレームに色を使うと、構造の議論が「この色は…」というビジュアルの議論にすり替わる。グレースケールを厳守することで構造に集中できる
まとめ#
ワイヤーフレーミングは 「構造を先に固め、見た目は後から」 の原則を実践する設計手法。ローファイで方向性を決め、ミッドファイで合意を取り、そこからビジュアルデザインに進む。この順序を守るだけで手戻りが激減し、チーム全体のデザインプロセスが効率化される。