Webサイトやアプリの画面を作るとき、いきなり色、写真、余白、アニメーションを決め始めると、肝心の「この画面で何をしてほしいのか」がぼやけることがあります。
その前段で使うのが ワイヤーフレーム です。ワイヤーフレームは、完成デザインではなく、画面の構成、情報の優先順位、ボタンやフォームの位置、画面間の導線を整理するための設計図です。
この記事では、ワイヤーフレームを「デザインが苦手な人向けのラフ案」としてではなく、チームで画面の役割をそろえるための実務資料として整理します。
ワイヤーフレームとは
ワイヤーフレームとは、Webサイトやアプリの画面を、線、箱、見出し、ボタン、入力欄などの簡単な要素で表した画面構成案です。
Figmaの解説では、ワイヤーフレームはWebサイトやデジタルプロダクトの骨組みを表す簡単な視覚ガイドとして説明されています。IxDFでも、最終デザインや高精度なプロトタイプに進む前に、早い段階で使いやすさの問題を見つけるための材料として位置づけられています。
大事なのは、ワイヤーフレームは「見た目をきれいにする資料」ではないという点です。
ワイヤーフレームで確認したいのは、たとえば次のようなことです。
- この画面の目的は何か
- ユーザーは最初に何を見るべきか
- どの情報を上に置き、どの情報を後ろに回すか
- 主要なボタンはどこに置くか
- 入力、確認、完了、エラーの流れは自然か
- PCとスマートフォンで構成が破綻しないか
色や装飾を入れる前だからこそ、構造そのものを話しやすくなります。
なぜデザイン前に作るのか
デザイン前にワイヤーフレームを作る理由は、見た目の議論に入る前に「画面で解決すること」を決めるためです。
完成に近いデザインを先に見せると、関係者の目は色、写真、フォント、余白に向きやすくなります。もちろんそれらも重要ですが、構成がずれている段階で見た目だけを整えても、あとから大きな手戻りになります。
ワイヤーフレームの段階なら、まだ変更コストが低い状態で次のような判断ができます。
| 見る観点 | 確認すること |
|---|---|
| 画面の目的 | 購入、問い合わせ、検索、登録、確認など、主目的が一つに絞れているか |
| 情報の優先順位 | ユーザーが判断に必要な情報から順に並んでいるか |
| 導線 | 次に押すボタンや戻る場所が迷わないか |
| 入力項目 | 本当に必要な項目だけになっているか |
| 状態 | 未入力、エラー、読み込み中、完了後の画面が考えられているか |
| 画面間のつながり | 一覧、詳細、編集、完了などの流れが途切れていないか |
つまり、ワイヤーフレームはデザイナーだけの資料ではありません。企画、開発、営業、サポート、運用担当者が「この画面で何を成立させるのか」を確認するための共通言語です。
ワイヤーフレームで決めること
ワイヤーフレームでは、画面の骨格に関わることを決めます。
| 決めること | 例 |
|---|---|
| 画面の役割 | 商品を探す画面、申し込み内容を確認する画面、管理者が状態を見る画面 |
| 情報のかたまり | 見出し、説明文、一覧、フォーム、注意書き、関連リンク |
| 配置の順番 | 重要な情報を上に置くか、比較表を先に見せるか |
| 操作 | 登録する、保存する、検索する、戻る、削除する |
| 状態 | 空の状態、エラー、読み込み中、成功、権限がない場合 |
| 画面遷移 | 次にどの画面へ進むか、戻ったときにどこへ戻るか |
特に業務システムや入力フォームでは、正常系だけでなく、エラーや未入力の状態を早めに置いておくと実装時の抜け漏れを減らせます。
ワイヤーフレームで決めすぎないこと
一方で、ワイヤーフレームの段階で決めすぎると、本来の目的から外れます。
| 決めすぎないこと | 理由 |
|---|---|
| ブランドカラー | 構成の議論が見た目の好みに寄りやすい |
| 正確なフォントや余白 | 高精度なデザイン作業に早く入りすぎる |
| 写真やイラストの最終選定 | 画像の印象に引っ張られて構造を見失いやすい |
| 細かなアニメーション | まずは画面の役割と導線を固める方が先 |
| ピクセル単位の位置合わせ | 実装やレスポンシブ調整で変わることがある |
ワイヤーフレームが少し粗いことには意味があります。粗いからこそ、関係者が「色が好みではない」ではなく「この情報は先に必要ではないか」と話しやすくなります。
プロトタイプやデザインカンプとの違い
ワイヤーフレームは、プロトタイプやデザインカンプと混同されやすい資料です。
| 種類 | 主な目的 | 作り込み |
|---|---|---|
| ワイヤーフレーム | 画面構成、情報の優先順位、導線を確認する | 低め |
| プロトタイプ | クリックや画面遷移など、操作感を確認する | 中から高 |
| デザインカンプ | 色、余白、タイポグラフィ、画像を含めた完成見た目を確認する | 高め |
ワイヤーフレームは、完成物に近いほど良いわけではありません。むしろ初期段階では、低精度のまま素早く直せることが価値になります。
実務で作るときの進め方
実務でワイヤーフレームを作るなら、最初からきれいな画面を目指すより、次の順番で考えると整理しやすくなります。
- 画面の目的を一文で書く
- ユーザーが判断に必要な情報を洗い出す
- 主要な操作と次の画面を決める
- 入力、確認、完了、エラーなどの状態を並べる
- スマートフォン表示で無理がないか確認する
- 関係者に見せて、見た目ではなく構成についてレビューする
たとえば問い合わせフォームなら、「問い合わせを送る画面」だけでなく、入力エラー、送信中、送信完了、戻る操作、個人情報の注意書きまで含めて考えます。
一覧画面なら、検索条件、並び替え、絞り込み、空の状態、権限がない場合、詳細画面への移動を見ます。
この段階で抜けが見つかれば、デザインや実装に入ってから直すよりずっと楽です。
失敗しやすい点
ワイヤーフレームでよくある失敗は、きれいに作ること自体が目的になることです。
- 実際のユーザーの目的を決めずに箱だけ並べる
- ボタンの文言や入力項目が仮のままでレビューする
- エラー、空状態、権限違いなどを考えない
- スマートフォン表示を後回しにする
- 関係者が色や装飾の話ばかりしてしまう
- 画面単体だけを見て、前後の導線を確認しない
特に注意したいのは、ワイヤーフレームを「デザイナーに渡す前の雑な下書き」と見てしまうことです。実際には、企画や要件のあいまいさを画面に出して、早めに直すための資料です。
AIやFigma、Canvaとの関係
ワイヤーフレームは、特定のツール名ではありません。紙、ホワイトボード、Figma、Canva、PowerPoint、AI生成ツールなど、どれで作っても構いません。
ただし、ツールごとに得意なことは違います。
FigmaはUI設計やチームでの画面レビューに向いています。Canvaは資料、SNS画像、プレゼンなどを素早く整える用途に向いています。AIを使ったデザイン支援では、初期案やスライド、LP案を速く出せる一方で、画面の目的や導線の妥当性は人間が確認する必要があります。
Claude DesignのようなAIデザイン支援については、Claude Designとは？AIでプロトタイプやスライドを作る機能を整理 で整理しています。Canvaの基本は Canvaとは？デザイン初心者でも資料・画像・動画を作れる理由 で解説しています。
このあたりの記事とワイヤーフレームの違いは、主語です。CanvaやClaude Designは「どう作るか」の道具の話です。ワイヤーフレームは「何をどの順番で見せるか」を決める設計の話です。
レビューで見るポイント
ワイヤーフレームをレビューするときは、見た目の好みよりも次を確認します。
- この画面の主目的が一目で分かるか
- ユーザーが次に何をすればよいか迷わないか
- 重要な情報が下に埋もれていないか
- 入力項目が多すぎないか
- エラーや空の状態が考えられているか
- 前後の画面と導線がつながっているか
- スマートフォンでも同じ目的を達成できるか
レビューの場では、「この色が好きか」よりも、「この順番で判断できるか」「この情報は先に必要か」「このボタン名で行動が分かるか」を話す方が効果的です。
まとめ
ワイヤーフレーム は、デザイン前に画面構成を整理するための設計図です。
完成デザインの代わりではなく、画面の目的、情報の優先順位、導線、入力項目、状態を早い段階で確認するために使います。見た目を作り込む前にワイヤーフレームを挟むと、関係者の認識がそろいやすくなり、デザインや実装に入ってからの大きな手戻りを減らせます。
実務では、きれいに描くことよりも、画面の役割を言語化し、必要な情報を並べ、前後の流れを確認することが大切です。ワイヤーフレームは地味な資料ですが、画面づくりの失敗を早い段階で見つけるための強い道具になります。
参考リンク
- Figma: What is wireframing? The complete guide
- Figma Blog: How to wireframe
- Interaction Design Foundation: What is Wireframing?