IT 技書の森

ワイヤーフレーム

UI の構造とレイアウトを低忠実度で表現する設計図で、開発前の合意形成に使用する

UI設計

ワイヤーフレームとは

ワイヤーフレーム (Wireframe) は、Web ページやアプリの画面構成を線と箱で表現する低忠実度の設計図である。色、フォント、画像などのビジュアルデザインを意図的に排除し、情報の配置・優先順位・画面遷移に集中する。

ワイヤーフレームの語源は、3D モデリングのワイヤーフレームレンダリング (骨格だけの表示) に由来する。建築でいう間取り図に相当し、「何をどこに置くか」を決めるための道具だ。

なぜビジュアルデザインの前に必要なのか

いきなり Figma で美しいデザインを作り始めるチームは多いが、これは非効率だ。理由は 3 つある。

  1. 手戻りコストが高い: 色やフォントまで作り込んだデザインを「レイアウトを変えたい」と言われると、作業の大半がやり直しになる。ワイヤーフレームなら数分で修正できる
  2. 議論がデザインに引きずられる: 美しいモックアップを見せると、ステークホルダーは「この色が気に入らない」「フォントを変えて」といった表層的なフィードバックに終始しがちだ。ワイヤーフレームなら情報設計の議論に集中できる
  3. 速度: ワイヤーフレームは 1 画面 10〜30 分で作れる。モックアップは数時間かかる

忠実度のレベル

レベル 内容 ツール 所要時間 用途
Lo-Fi 手書きスケッチ 紙とペン、ホワイトボード 5〜10 分/画面 アイデア出し、初期検討
Mid-Fi グレーボックスのレイアウト Figma, Balsamiq, Excalidraw 15〜30 分/画面 チーム内の合意形成
Hi-Fi 実際のデザインに近いモックアップ Figma, Sketch 2〜4 時間/画面 クライアントへの提示、実装仕様

実務では Lo-Fi → Mid-Fi → Hi-Fi の順に忠実度を上げていく。全画面を Hi-Fi まで作る必要はなく、主要な画面 (トップページ、一覧、詳細、フォーム) だけ Hi-Fi にし、残りは Mid-Fi で十分なことが多い。

ワイヤーフレームに含めるもの

  • ナビゲーションの構造 (ヘッダー、サイドバー、フッターの配置)
  • コンテンツの優先順位と配置 (ファーストビューに何を置くか)
  • インタラクション要素 (ボタン、フォーム、ドロップダウン) の位置とラベル
  • 画面遷移のフロー (どのボタンがどの画面に遷移するか)
  • レスポンシブの考慮 (モバイルとデスクトップで何が変わるか)

含めないもの

  • 色やブランディング (グレースケールで表現する)
  • 実際の画像やアイコン (プレースホルダーの箱で代替)
  • 細かいタイポグラフィ (フォントサイズの大小だけ示す)
  • アニメーションやトランジション (注釈で記述する)

エンジニアがワイヤーフレームを描くべき理由

「ワイヤーフレームはデザイナーの仕事」と思われがちだが、エンジニアが描くメリットは大きい。

  • 技術的制約を設計段階で反映できる: 「この UI は実装コストが高い」「API のレスポンス構造的にこのレイアウトの方が自然」といった判断を早期に組み込める
  • コンポーネント設計と並行できる: ワイヤーフレームを描きながら、React コンポーネントの分割やデータフローを頭の中で設計できる
  • デザイナーとの共通言語になる: エンジニアが描いたワイヤーフレームをデザイナーが Hi-Fi に仕上げる、という分業が効率的だ

アクセシビリティの早期検討

ワイヤーフレームの段階でアクセシビリティを検討しておくと、実装段階での手戻りが大幅に減る。

  • 見出し階層: h1 → h2 → h3 の論理的な階層をワイヤーフレームに注釈する
  • タブ順序: キーボードでのフォーカス移動順序を番号で示す
  • フォームラベル: 全入力フィールドにラベルが紐づいていることを確認する
  • 代替テキスト: 画像のプレースホルダーに alt テキストの方針を注釈する
  • ランドマーク: header, nav, main, footer の領域を明示する

これらは後から追加するのが難しい要素だ。レイアウトが確定してから「見出し階層がおかしい」と気づくと、HTML 構造の大幅な変更が必要になる。

ツールの選び方

ツール 特徴 適するケース
紙とペン 最速。道具不要 ブレインストーミング、1 対 1 の議論
Excalidraw 手書き風。無料。リアルタイム共同編集 リモートチームでの Lo-Fi ワイヤーフレーム
Balsamiq ワイヤーフレーム専用。意図的に粗い見た目 Mid-Fi。デザインに引きずられたくない場合
Figma 高機能。Lo-Fi から Hi-Fi まで対応 デザインシステムと連携する場合

個人的な推奨は、初期検討は Excalidraw、合意形成後は Figma に移行するフローだ。Excalidraw の手書き風の見た目が「これはまだ確定ではない」というメッセージを自然に伝えてくれる。

<!-- 低忠実度ワイヤーフレーム (HTML) -->
<div style="border: 2px solid #ccc; padding: 16px; max-width: 400px;">
  <div style="background: #eee; height: 40px; margin-bottom: 16px;">[ヘッダー]</div>
  <div style="background: #eee; height: 200px; margin-bottom: 16px;">[メインコンテンツ]</div>
  <div style="background: #eee; height: 40px;">[フッター]</div>
</div>

Figma / Excalidraw でワイヤーフレームを作成
→ チームでレビュー
→ 合意後にデザイン・実装

詳しくは関連書籍を参照。

関連用語