ワイヤーフレーム は、Webサイトやアプリの画面を作る前に、情報の配置、導線、ボタンやフォームの位置、画面の目的を整理するための設計図です。英語では wireframe と書きます。
完成デザインのように色、写真、細かな余白、装飾を作り込むのではなく、線、箱、見出し、ボタン、入力欄などの簡単な要素で画面の骨格を表します。建物でいう間取り図に近く、見た目の印象よりも「どこに何を置くか」「ユーザーは次に何をすればよいか」を確認するために使います。
まず押さえたいポイント
- デザイン前に画面構成を整理するための資料
- 色や装飾よりも、情報の優先順位と導線を見る
- 企画、デザイン、開発、運用の認識合わせに使える
- 紙、ホワイトボード、Figma、Canva、PowerPointなど、作る道具は固定されない
- 完成形に近づけすぎると、構造の議論がしにくくなることがある
どんな場面で使うか
ワイヤーフレームは、新しいWebサイト、LP、業務システム、管理画面、問い合わせフォーム、アプリ画面などを作るときに使われます。特に、画面の目的や操作の流れがまだ曖昧な段階で役立ちます。
たとえば問い合わせフォームなら、入力項目、注意書き、送信ボタン、確認画面、完了画面、入力エラーをどのように見せるかを先に整理できます。一覧画面なら、検索条件、並び替え、詳細画面への導線、空の状態、権限がない場合の表示などを確認できます。
プロトタイプやデザインカンプとの違い
ワイヤーフレームは、画面の構造を確認するためのものです。プロトタイプはクリックや画面遷移などの操作感を確認するもの、デザインカンプは色、余白、画像、タイポグラフィを含めた完成見た目を確認するものです。
この違いを混同すると、初期段階なのに見た目の好みばかり議論したり、逆に完成デザインに必要な細部をいつまでも決められなかったりします。ワイヤーフレームでは、まず画面の目的、情報の順番、主要な操作、状態を確認することが大切です。
実務で見るポイント
実務では、ワイヤーフレームを見ながら「この画面の主目的は何か」「ユーザーが次に押す場所は分かるか」「重要な情報が下に埋もれていないか」「入力項目は多すぎないか」「エラーや空状態を考えているか」を確認します。
きれいに作ることよりも、あとで大きな手戻りになりそうな認識違いを早めに見つけることが目的です。詳しい進め方は、ワイヤーフレームとは？デザイン前に画面構成を整理する理由 で解説しています。