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