Webサイトやアプリの制作が始まると、色も写真もない、四角と線だけの資料が最初に共有されることがあります。それがワイヤーフレームです。

見た目が簡素なぶん「何を確認すればよいのか分からない」「デザインと何が違うのか」と迷う方も少なくありません。ところが、この段階で決めた内容は、その後のデザインや開発の土台になります。

この記事では、ワイヤーフレームとは何かという定義から、作る目的、構成要素、似た言葉との違い、種類、どこまで作るか、確認のポイントまでを整理してご紹介します。

この記事を読むと理解できること

• ワイヤーフレームとは何か、制作の流れのどこに位置づくのか

• ワイヤーフレームを作る目的と、省略したときに起こりやすいこと

• ワイヤーフレームを構成する主な要素

• モックアップ・プロトタイプ・デザインカンプとの違い

• 低忠実度と高忠実度という種類と、その使い分け

• ワイヤーフレームをどこまで作り込むべきかの判断軸

• 受け取ったワイヤーフレームを確認するときのポイント

ワイヤーフレームとは画面に何をどこに置くかを決める設計図

ワイヤーフレームとは、Webサイトやアプリの画面に、どの情報や機能を、どの順番と位置で配置するかを示した設計図です。英語のwireは線、frameは枠組みを意味し、線と四角形だけで画面の骨組みを描くことからこう呼ばれます。

建物にたとえるなら、内装や家具を決める前の間取り図にあたります。どこに玄関があり、どの部屋をどう通るかが決まっていなければ、壁紙の色を選んでも意味がありません。画面づくりでも同じで、情報の配置と流れを先に固めるのが、この設計図の役割です。

ワイヤーフレームで決めることと決めないこと

ワイヤーフレームで決めるのは、掲載する情報の種類、その優先順位、画面上の配置、ボタンやリンクなどの操作要素、ページ同士のつながりです。言い換えると「何を」「どの順番で」「どこに」置くかを決める工程です。

一方で、配色、フォントの種類、写真やイラストの選定、細かな装飾といった見た目の要素は、原則としてこの段階では決めません。見た目を作り込むと、レビューの場で「色が好みではない」といった議論に時間を取られ、本来確認すべき構造の話が後回しになりやすいからです。

ワイヤーフレームは制作の流れのどこで作るのか

一般的な制作の流れでは、目的やターゲットを整理する要件定義、サイト全体の構造を決める情報設計のあとに、ワイヤーフレームを作ります。その後、ワイヤーフレームをもとにビジュアルデザインを作り、実装へ進みます。

つまり、考える工程と作る工程をつなぐ位置にあるのがこの資料です。要件や情報設計の内容が画面として初めて目に見える形になるため、関係者の認識のズレが表面化しやすいタイミングでもあります。

ワイヤーフレームは誰が作るのか

ワイヤーフレームを作るのは、Webディレクター、UIデザイナー、情報設計の担当者などが中心です。制作会社に依頼する場合は、制作会社側が作成し、発注側が確認する分担がよく見られます。

ただし、事業の目的やユーザーのことを最もよく知っているのは発注側であることが多いものです。作成を任せる場合でも、確認には発注側が主体的に関わる必要があります。具体的な作り方の手順や使うツールについては、ワイヤーフレームの作り方完全ガイドで詳しく解説しています。

ワイヤーフレームを作る目的は認識を揃えて手戻りを減らすこと

ワイヤーフレームを作る最大の目的は、関係者の認識を早い段階で揃え、後工程での手戻りを減らすことです。言葉だけの打ち合わせでは、同じ「トップページにお知らせを載せる」という合意でも、思い描く画面は人によって違います。

情報の優先順位を決める

画面の面積には限りがあり、すべての情報を同じ大きさで目立たせることはできません。骨組みを描くと、何を最初に見せ、何を後ろに回すかを決めざるを得なくなります。

この優先順位づけは、ユーザーが目的を達成できるかどうかに直結します。たとえば問い合わせを増やしたいページで、問い合わせボタンが画面の下の方にしかなければ、どれほどデザインが美しくても成果にはつながりにくくなります。

関係者のイメージを共有する

Webサイトやアプリの制作には、経営層、事業担当者、デザイナー、エンジニア、運用担当者など、立場の違う人が関わります。共通の設計図があることで、全員が同じ画面を見ながら議論できます。

目に見える資料があると、言葉だけでは出てこなかった意見も引き出しやすくなります。「この情報はスマートフォンでも上に出したい」「この項目は更新が大変だ」といった具体的な指摘が、早い段階で集まるようになります。

手戻りのコストを抑える

構造の変更は、工程が進むほど影響範囲が大きくなります。骨組みの段階なら四角形を動かすだけで済む修正も、デザインが完成したあとでは作り直しになり、実装後であれば開発のやり直しにもつながります。

ワイヤーフレームを省略していきなりデザインに入ると、構造の問題と見た目の問題が同時に議論され、論点が混ざりがちです。構造を先に固めておくことは、結果としてスケジュールと費用の両方を守ることにつながります。

ワイヤーフレームを構成する主な要素

線と四角形だけの簡素な図ですが、画面を成り立たせる基本の要素がそろっています。ここでは、どの画面にも共通して登場する要素を紹介します。

レイアウト

レイアウトは、情報や機能を画面のどこに配置するかという全体の骨格です。ヘッダー、メインのコンテンツ領域、サイドバー、フッターといった大きな区画の分け方がこれにあたります。

ユーザーの視線は、画面の上から下、左から右へと流れるのが一般的です。重要な情報がその流れの中で自然に目に入る位置にあるか、画面を開いた直後に見える範囲に何を置くかが、レイアウトを考えるうえでの要点になります。

情報の階層

情報の階層とは、どの情報を大きく目立たせ、どれを補足として小さく扱うかという重みづけです。見出し、本文、補足説明といった階層がはっきりしていると、ユーザーは圧倒されることなく必要な情報にたどり着けます。

骨組みの図では、文字の大きさや枠の太さ、余白の取り方などで階層を表現します。色を使わない分、階層が構造そのものとして伝わるかどうかが問われます。

操作要素

操作要素は、ユーザーが画面と対話するための部品です。ボタン、リンク、入力フォーム、検索窓、タブ、チェックボックスなどが含まれます。

図の上では、どこに何の操作要素があり、押すとどうなるのかを示します。ボタンの文言も、仮の言葉ではなく実際に使う言葉に近づけておくと、ユーザーが迷わず次の行動に移れるかを判断しやすくなります。

ナビゲーション

ナビゲーションは、ユーザーがページや機能の間を移動するための道しるべです。グローバルメニュー、パンくずリスト、ページ内のリンク、戻るボタンなどがこれにあたります。

一貫したナビゲーションがあると、ユーザーは今どこにいて、次にどこへ行けるのかを迷わず把握できます。複数の画面を描くときは、メニューの位置や項目が画面ごとにぶれていないかも確認します。

注釈

ワイヤーフレームには、画面の外側に注釈を添えるのが一般的です。表示条件、文字数の上限、データの取得元、ボタンを押したあとの遷移先など、図だけでは伝わらない情報を書き込みます。

注釈は、デザイナーやエンジニアが設計の意図を正しく受け取るための大切な要素です。図はきれいでも注釈がない資料は、後工程で質問や解釈違いを生みやすくなります。

ワイヤーフレームとモックアップ・プロトタイプ・デザインカンプの違い

ワイヤーフレームと混同されやすい言葉に、モックアップ、プロトタイプ、デザインカンプがあります。いずれも完成前の画面を表す資料ですが、何を確認するための資料なのかが異なります。

大まかには、構造を確かめるワイヤーフレーム、見た目を確かめるデザインカンプ、操作を確かめるプロトタイプの順に、完成形へ近づいていくと捉えると整理しやすくなります。ただしプロトタイプは、後述のように早い段階で簡易的に作ることもあります。

デザインカンプとの違い

デザインカンプは、配色、フォント、画像、余白まで反映した完成見本です。ワイヤーフレームが構造を決める資料であるのに対し、デザインカンプは見た目を決める資料です。

ワイヤーフレームで合意した構造をもとにデザインカンプを作るのが基本の順番です。デザインカンプの詳しい役割については、デザインカンプとは何かもあわせてご覧ください。

モックアップとの違い

モックアップは、完成に近い見た目を再現した静的な模型です。現場によってはデザインカンプとほぼ同じ意味で使われたり、実際の端末の画面にはめ込んだ見せ方を指したりと、意味に幅がある言葉です。

いずれの場合も、ワイヤーフレームより見た目の完成度が高く、構造よりも印象や質感の確認に使われる点は共通しています。社内や制作会社と話すときは、どの意味で使っているかを最初に確認しておくと齟齬を防げます。

プロトタイプとの違い

プロトタイプは、実際にクリックや画面遷移を試せる試作品です。ワイヤーフレームが静止した設計図であるのに対し、プロトタイプは操作の流れや使い勝手を確かめるための資料です。

静止した画面同士をつなげて、簡易的なプロトタイプにすることもあります。プロトタイプの種類や進め方については、プロトタイピングとはで詳しく紹介しています。

ワイヤーフレームの種類は低忠実度と高忠実度に分かれる

ワイヤーフレームは、どこまで作り込むかによって、低忠実度と高忠実度に大きく分けられます。忠実度とは、完成形にどれだけ近いかの度合いのことで、英語ではローファイ、ハイファイと呼ばれることもあります。

低忠実度のワイヤーフレーム

低忠実度のワイヤーフレームは、手書きのスケッチや、灰色の箱を並べただけの簡単な図です。文字は仮の線や見出しだけで表し、寸法も厳密には決めません。

短時間で何案も作れるので、構想の初期にアイデアを広げたり、大まかな情報の順番を比べたりする場面に向いています。作り込んでいないぶん、見る人も遠慮なく意見を出しやすいのが利点です。

高忠実度のワイヤーフレーム

高忠実度のワイヤーフレームは、実際に使う見出しや文章、正確な配置、要素の大きさまで反映した図です。注釈も細かく書き込み、デザイナーやエンジニアがそのまま次の工程に進める状態を目指します。

構造が固まり、デザインや実装に引き渡す直前の段階で作るのが一般的です。作成に時間がかかるため、方向性が決まる前から高忠実度で作り始めると、修正のたびに大きな手間が発生します。

中間の段階を挟むこともある

実際の現場では、低忠実度と高忠実度の間に、配置や比率はおおよそ正確だが文言はまだ仮という中間の段階を挟むこともあります。決まった呼び方があるわけではなく、確認したい内容に合わせて段階的に作り込んでいくと考えると分かりやすいでしょう。

大切なのは、今どの忠実度で作っているのかを関係者で共有しておくことです。低忠実度の図に対して「文字が小さい」と指摘しても議論は進みません。

ワイヤーフレームはどこまで作るべきか

ワイヤーフレームをどこまで作り込むかに、一つの正解はありません。判断の軸は、ワイヤーフレームで何を確かめたいか、プロジェクトのどの段階か、誰が見るのか、の3つです。

確かめたいことで決める

情報の順番を比べたいだけなら、低忠実度で十分です。一方で、文章量が多いページや、入力項目の多いフォームの使いやすさを確かめたいなら、実際の文言や項目を入れた高忠実度のものが必要になります。

確かめたいことが曖昧なまま作り込むと、時間をかけた割に判断材料が増えません。作り始める前に、この図で何を決めるのかを一文で書いておくのがおすすめです。

段階と見る人で決める

構想の初期は低忠実度で広く考え、デザインや開発へ引き渡す直前に高忠実度へ仕上げるのが基本です。段階を飛ばして作り込むと、方向転換のたびに作り直しの手間が増えます。

見る人によっても必要な作り込みは変わります。社内で方向性を話し合うだけなら簡素な図で足りますが、経営層の判断を仰ぐ場面や、制作会社に正式に引き渡す場面では、意図が誤解なく伝わる程度まで文言や注釈を整えておく必要があります。

すべてのページを描く必要はない

ページ数の多いWebサイトでは、すべてのページのワイヤーフレームを描く必要はありません。トップページ、一覧ページ、詳細ページのように、同じ型を使い回すページは代表となるテンプレートを描き、違いは注釈で補うのが現実的です。

CMSで運用するサイトでは、特にこの考え方が有効です。一方で、問い合わせフォームや購入手続きのように、ユーザーの成果に直結するページは個別に丁寧に描いておきます。

デバイスと状態の違いも描く

スマートフォンで見られることが多いサービスでは、パソコン版とは別にスマートフォン版のワイヤーフレームを描きます。画面の幅が変わると、情報の順番や見せ方を変えるべき場面が出てくるからです。

アプリや業務システムでは、通常時の画面だけでなく、データがないときの表示、エラー時の表示、ログイン前後の違いといった状態も検討します。こうした状態は後回しにされやすく、実装の段階で慌てて決めることになりがちです。

テキストはできるだけ実際のものに近づける

仮の文字で埋めた図は、見た目は整っていても、実際の文章を入れたときにレイアウトが崩れることがあります。見出しやボタンの文言、主要な説明文は、確定前でも実際に近いものを入れておくと精度が上がります。

ワイヤーフレームを確認するときのポイント

制作会社やデザイナーからワイヤーフレームを受け取ったとき、どこを見ればよいのか迷う方も多いでしょう。見た目ではなく、構造と意図を確認するのが基本です。

ページの目的とユーザーの行動に合っているか

まず、そのページで最終的にユーザーにしてほしい行動は何かを確認します。資料請求、購入、会員登録、情報の閲覧など、目的によって最適な構成は変わります。

そのうえで、ユーザーがページに来てから目的の行動に至るまでの流れが、画面の上から下へ自然につながっているかを見ます。目的の行動につながるボタンが、迷わず見つけられる位置にあるかも確認しましょう。

情報の優先順位と抜け漏れはないか

ユーザーが最も知りたい情報が、最初に目に入る位置にあるかを確認します。会社として伝えたい情報ばかりが上に並び、ユーザーが知りたい情報が奥に埋もれていないかは特に見落としやすい点です。

あわせて、掲載が必要な情報に抜け漏れがないかもチェックします。法令上の表記、料金、問い合わせ先など、後から追加すると構成全体に影響する情報は、この段階で確認しておきます。

スマートフォンでの見え方は考えられているか

スマートフォン版の図がある場合は、パソコン版の情報がそのまま縦に並んでいるだけになっていないかを見ます。画面が狭いぶん、何を上に出すかの優先順位がよりはっきり問われます。

運用と実装の目線で無理はないか

更新の頻度が高い情報を、手作業でしか更新できない作りにしていないかを確認します。運用を担う担当者に見てもらうと、日々の作業の中で困る点が見つかることがあります。

実装の目線では、エンジニアに早めに見てもらい、実現の難しさや手間が大きい部分を洗い出しておきます。デザインが完成してから実装が難しいと分かると、手戻りが大きくなります。

設計の意図を説明してもらう

気になる点があれば、なぜこの配置にしたのかを作成者に説明してもらいましょう。理由を聞くことで、単なる好みの問題なのか、目的に照らして直すべき問題なのかを切り分けられます。

確認の場では、見た目の好みではなく、目的に合っているかどうかを基準に意見を伝えることが、良い設計に仕上げる近道です。

ワイヤーフレームが役立つ場面

ワイヤーフレームは、Webサイトの制作だけで使うものではありません。画面を通じてユーザーに何かをしてもらうプロジェクトであれば、規模や業種を問わず役立ちます。

Webサイトの新規制作やリニューアル

コーポレートサイトやサービスサイトの制作、リニューアルは、ワイヤーフレームが最もよく使われる場面です。リニューアルでは、現状のサイトの課題を整理したうえで、どの情報をどう組み替えるかを画面の骨組みとして示します。

アプリや業務システムの開発

スマートフォンアプリや、社内で使う業務システムの開発でもワイヤーフレームは欠かせません。画面数が多く、入力や検索などの操作が複雑になりやすいため、画面同士のつながりや操作の流れを早めに可視化しておく価値が大きくなります。

業務システムでは、実際に使う現場の担当者に見てもらうことで、業務の流れに合わない画面構成を早期に見つけられます。

新規事業のアイデア検証

新規事業では、まだ要件が固まっていない段階で、アイデアを画面として描き、顧客や社内の関係者に見せて反応を確かめる使い方もあります。完成品を作る前に方向性を確かめられるため、不確実性の高いプロジェクトほど効果を発揮します。

新規事業の中でワイヤーフレームをどう使うかについては、新規事業でワイヤーフレームが効く理由と使い方で、仮説検証やMVPとの関係まで詳しく解説しています。

まとめ

ワイヤーフレームとは、Webサイトやアプリの画面に、どの情報や機能をどの順番と位置で置くかを示す設計図です。見た目を決める前に構造を固めることで、関係者の認識を揃え、後工程での手戻りを減らせます。

構成要素は、レイアウト、情報の階層、操作要素、ナビゲーション、注釈が基本です。似た言葉との違いは、デザインカンプとモックアップが見た目、プロトタイプが操作の流れを確かめる資料であるのに対し、ワイヤーフレームは構造を確かめる資料だという点にあります。

どこまで作るかは、確かめたいこと、プロジェクトの段階、見る人によって決まります。低忠実度で広く考え、方向性が固まったら高忠実度へと段階的に作り込むのが基本の進め方です。確認する側は、見た目の好みではなく、目的に合った構造になっているかを基準に見ていきましょう。

自社だけで画面の設計を進めるのが難しい場合は、UI/UXデザインを専門とする会社に相談するのも一つの方法です。依頼先を比較したい方は、UIUXに強いデザイン会社おすすめ12選を参考にしてみてください。株式会社FAKEも、UI/UXデザインや新規事業立案、システム開発などをデザインドリブン®のアプローチで支援しています。

ワイヤーフレームに関するよくある質問

ワイヤーフレームとデザインの違いは何ですか？

ワイヤーフレームは、画面にどの情報をどこに置くかという構造を決める設計図です。デザインは、その構造をもとに配色やフォント、画像などの見た目を決める工程です。構造を先に固めてから見た目を作るのが基本の順番です。

ワイヤーフレームは発注側も作るべきですか？

必ずしも発注側が作る必要はありません。ただし、手書きの簡単なものでも、載せたい情報や優先したい順番を発注側が描いて共有すると、制作会社とのイメージのズレを減らせます。作成を任せる場合も、確認には主体的に関わることが大切です。

ワイヤーフレームとサイトマップの違いは何ですか？

サイトマップは、サイト全体にどのようなページがあり、どう階層化されているかを示す全体図です。ワイヤーフレームは、その中の一つひとつのページの中身と配置を示す設計図です。一般的には、サイトマップで全体の構造を決めてから、各ページのワイヤーフレームを作ります。

ワイヤーフレームは何を使って作ればよいですか？

紙とペンでも作れますし、スライド作成ツールや表計算ソフト、デザインツールを使う方法もあります。初期の段階は手書きで素早く案を出し、関係者と共有する段階でツールを使うと効率的です。具体的な手順やツールの選び方は、ワイヤーフレームの作り方を解説した記事で詳しく紹介しています。