女性向けエンジニアスクール
3秒でわかる
配色や画像を省いて、何をどこに置くかだけを描いた画面の設計図。作り込む前に、構成と導線の是非を関係者と確かめるために使います。
もう少し詳しく
どういうものか
ワイヤーフレームは、画面の骨組みだけを描いた設計図です。色、写真、フォント、余白の微調整といった見た目の要素をあえて省き、どこに何を置くか、要素の優先順位はどうか、どこを押すと次に何が起きるか、だけを表します。線と四角と文字で描くため、線画（ワイヤー）の枠組みという名前が付いています。
作る道具は問いません。Figma のような専用ツールでも、紙とペンでも、四角を並べただけの HTML でも成立します。
なぜ必要か
見た目まで作り込んでから「この項目はここではない」と言われると、色や余白の調整もやり直しになります。骨組みだけの状態なら、並べ替えも削除も数分で済みます。手戻りの単価が安いうちに構成の合意を取るのが目的です。
もうひとつは、議論が見た目に流れるのを防ぐ効果です。配色が入っていると人はまず色の感想を言います。線画にしておくと、情報の並び順や導線といった、本来この段階で決めるべきことに話題が集まります。
具体例
+--------------------------------------------------+
| [ロゴ] 検索窓 [ログイン] |
+--------------------------------------------------+
| |
| 見出し (1行で価値を伝える) |
| 説明文 2〜3行 |
| [ 無料ではじめる ] |
| |
+--------------------------------------------------+
| 機能A | 機能B | 機能C |
| 短い説明 | 短い説明 | 短い説明 |
+--------------------------------------------------+
| 利用者の声 (カード3枚 / 横スクロール) |
+--------------------------------------------------+
| フッター 会社情報 / 規約 / 問い合わせ |
+--------------------------------------------------+要素の重なりや押せる場所が伝われば十分で、線の太さや文字の大きさを揃える必要はありません。押したあとの遷移先を矢印で書き添えると、画面単体ではなく流れとして検討できます。
つまずきやすいところ
いちばんの失敗は、ワイヤーフレームを作り込みすぎることです。色を付け、影を付け、実際の写真をはめ込んだ時点で、それはワイヤーフレームではなくデザインカンプになり、直すのが惜しくなります。灰色の四角のまま止めておくのが正解です。
もうひとつは、ダミーテキストで埋めてしまうことです。意味の無い文字列で埋めると、実際の商品名が長い場合に折り返して崩れる、といった問題が見つかりません。実際に入りうる最長と最短の文字数を入れておくと、後で効いてきます。
スマートフォンの幅を後回しにするのもよくある順序の誤りです。狭い画面のほうが制約が強く、優先順位を決めざるを得ないため、先に描くと構成の判断が早くなります。
似た用語との違い
| 語 | 段階 |
|---|---|
| ワイヤーフレーム | 骨組みだけ。配置と優先順位を決める |
| モックアップ | 配色や書体まで入った完成イメージ |
| プロトタイプ | 実際に押して画面が動く。操作感を検証する |
| サイトマップ | 画面ではなく、ページ同士のつながりを表す図 |
