ワイヤーフレームとは
ワイヤーフレームとは、Webサイトやアプリの画面について、どこに何を置くかという構成を、線や箱だけで簡単に描いた設計図です。色や写真、細かなデザインは加えず、情報の並びと操作の流れだけに集中して描きます。
見た目を作り込んでから「そもそも必要な項目が足りない」と気づくと、やり直しが大きくなります。骨組みの段階で内容を確認できれば、修正のコストを小さくできます。
名称は、針金（ワイヤー）で作った骨組みのような図という意味に由来します。
仕組み・ポイント
ワイヤーフレームに盛り込む主な要素は次のとおりです。
| 要素 | 内容 |
|---|---|
| 情報の優先順位 | 重要な情報ほど目立つ位置に置く |
| 部品の配置 | 見出し、入力欄、ボタン、一覧などの位置 |
| 画面間の移動 | どのボタンでどの画面へ進むか |
| 状態の違い | 入力エラー、データがない状態、読み込み中など |
作り方は、紙に手描きするものから、専用のツールまで多様です。最初は粗くても構いません。細部の見た目に議論が逸れないよう、あえて装飾を省くことが目的に合っています。 最初に主要な画面だけを描き、全体の流れを確認してから、必要な画面を追加していきます。
ワイヤーフレームを複数の案で描き比べると、議論が具体的になります。一つの案だけを見せると、そのまま承認されがちですが、複数案があれば「この部分はこちらが良い」と選び取れます。
実務での使い方・具体例
架空の例として、新しい会員登録の流れを検討します。担当者は、入力画面、確認画面、完了画面の三つを手描きのワイヤーフレームにして、関係者に見せます。すると、営業担当から「会社名の入力欄が必要」、運営担当から「確認メールの案内を完了画面に置きたい」という意見が出ました。
画面のデザインに入る前であれば、これらの変更は数分で反映できます。さらに、利用者役の人に紙の画面を見ながら操作の流れを試してもらうと、迷いやすい箇所も事前に発見できます。
作成した後は、画面ごとの目的と、画面から次に進む操作を一覧表にまとめておくと、デザインや開発へ引き継ぐ際の確認が容易になります。変更の履歴も残しておくと、議論の経緯を追えます。
作成の際は、実際の文言や数字に近い内容を入れておくと、情報量の多さによる配置の問題にも早く気づけます。見出しや説明文が長くなったときの崩れも、この段階で確認できます。
判断のチェックポイント
- 画面で達成してほしい目的が、一つに絞られているか
- 最も重要な情報や操作が、目立つ位置にあるか
- 入力エラーやデータがない場合の画面を考えたか
- 画面からの移動先が、すべて決まっているか
- 関係者が見て、足りない項目を指摘できる状態か
- 見た目の議論に流れないよう、装飾を省いているか
よくある誤解と注意点
- 完成形のデザインではない：色や装飾の議論は後に回し、構成に集中します。
- 作るだけでは確認にならない：関係者や利用者の意見を聞いて初めて役立ちます。
- 細かく描きすぎない：作り込むと修正が億劫になり、本来の目的を損ないます。
- 画面だけで終わらせない：画面間の移動や例外の状態も確認します。
- モックアップと混同しない：見た目の具体化は、次の段階で行います。
関連用語
- モックアップ：見た目まで具体化する次の段階
- UI・UX（ユーザーインターフェース・ユーザー体験）：画面設計の背景にある考え方
- 画面設計書：画面の仕様を詳しくまとめた文書
- 画面遷移図：画面間の移動をまとめた図
Otsumuに相談できること
画面の骨組みを描く前に、利用者が何を達成したいのかを決めておくと、必要な画面が絞られます。Otsumuでは、検証に必要な最小限の画面構成を、事業の仮説と合わせて整理する場面をお手伝いできます。
MVP開発のご支援内容もご覧いただけます。進め方に迷う段階であれば、30分の無料相談でお話しください。
執筆：Otsumu株式会社 ／ 編集日 2026.10.04