ワイヤーフレームとデザインカンプの違いとは？活用タイミングやよくあるトラブルも紹介
Webサイトやアプリを制作する際に欠かせない工程として「ワイヤーフレーム」と「デザインカンプ」があります。どちらも完成イメージを関係者と共有するための資料になりますが、目的や役割は大きく異なります。違いを理解せずに進めてしまうと、認識のズレや修正の手戻りが発生する可能性もあるので注意が必要です。
この記事では、ワイヤーフレームとデザインカンプの基本的な違いや活用のタイミングを解説し、さらに制作現場でよくあるトラブルについても紹介します。制作プロセスの理解を深め、スムーズな進行に役立ててください。
ワイヤーフレームとデザインカンプの違い
Webサイトやアプリ制作において、ワイヤーフレームとデザインカンプはしばしば混同されます。しかし実際には役割やタイミングが異なり、混同したまま進めてしまうと認識のズレや手戻りにつながる恐れがあります。両者の特徴を整理したものが以下の表です。
| 項目 | ワイヤーフレーム | デザインカンプ |
|---|---|---|
| 定義 | Webサイトやアプリの設計図となる構成案 | ビジュアルの完成見本（Design Comprehensive Layout） |
| 要素 | 線・枠・配置のみ。色や装飾は含まない | 色・画像・フォントなど装飾をすべて含む |
| 目的 | 情報設計・構造確認・ユーザビリティ向上 | 完成イメージの共有・承認獲得 |
| タイミング | 設計フェーズ（デザイン前） | デザインフェーズ（実装前） |
| 主な利用者 | ディレクター、設計担当 | デザイナー、クライアント |
ワイヤーフレームとは「Web制作の設計図となる構成案」
ワイヤーフレーム（WF）とは、主に線と枠だけで構成されたサイトやアプリの設計図となる構成案です。基本的な構造を定義するもので、ワイヤーフレームの中でページのどこに・どのような情報を・どのように配置するかを決めていきます。
この段階ではまだあくまで構造部分を考えていることから、ワイヤーフレームをつくる際に色や画像、フォントなどの装飾的な要素は含まれません。単純にユーザビリティを向上させるにはどうすればいいかを考え、ページやサイト全体の構造に反映させていきます。
デザインカンプとは「完成イメージを可視化するビジュアル見本」
デザインカンプとは、「Design Comprehensive Layout（デザイン カンプリヘンシブ レイアウト）」を略したもので、Webサイトやアプリにおけるビジュアルの完成見本を指します。Webサイトやアプリが完成したらどのようなデザインになっているかを表すものであり、クライアントに提出することを目的につくられます。
デザインカンプは数種類制作しますが、その中でも特に完成イメージが近いものが、実際にクライアントへ提示することになります。ビジュアルの完成見本となるため、色や画像、フォントなどの装飾的な要素もすべて含まれます。
ワイヤーフレームとデザインカンプが混同されやすい理由
ワイヤーフレームとデザインカンプは混同されやすい言葉として認識されています。しかし、実際には上記で説明したように、それぞれ特徴が異なるものになります。混同されやすい理由として考えられるのは、どちらもWebサイトやアプリが完成する前の設計資料であること、見た目が似ている場合もあることなどが挙げられます。特にどちらも「完成形をイメージ・共有するための図」として扱われるため、同じ性質の資料と勘違いされる可能性が高いです。
また、Webデザイナーではない人やクライアントは制作プロセス自体に馴染みがなく、どちらも一括りにデザイン資料と捉えてしまいがちです。このような理由から、ワイヤーフレームとデザインカンプは混同されてしまう可能性があるのです。
プロトタイプやモックアップとの違いは？
ワイヤーフレームやデザインカンプと似ているものに、プロトタイプやモックアップがあります。役割の違いを整理すると以下のようになります。
| 項目 | ワイヤーフレーム | デザインカンプ | モックアップ | プロトタイプ |
|---|---|---|---|---|
| 定義 | ページ構造の設計図（線・枠で構成） | ビジュアルの完成見本 | 完成形に近い外観サンプル（装飾あり） | 動作や遷移を確認できる試作品 |
| 要素 | 配置・情報設計のみ | 色・画像・フォントを含む | デザイン要素を反映 | デザイン＋操作性（動き）を反映 |
| 目的 | 情報整理・ユーザビリティ確認 | 完成イメージ共有・承認 | 仕上がりのイメージ共有 | 実際の操作性・導線の検証 |
| タイミング | 設計フェーズ | デザインフェーズ | デザイン確認時 | 実装前の検証時 |
| 主な利用者 | ディレクター、設計担当 | デザイナー、クライアント | デザイナー、クライアント | デザイナー、エンジニア、クライアント |
このように、モックアップは内部のシステムなどは実装されていないものの、装飾部分は完成形のイメージに近いサンプル品を指します。色やレイアウトなどのビジュアルデザインは完成形に近いため、仕上がりを共有する際に用いられるケースが多く、デザインカンプとほとんど同じ意味で使われています。
プロトタイプは、「原型」を意味する言葉で、制作したWebサイトやアプリの試作品を指します。デザインカンプやモックアップは色や装飾などが施されていますが、プロトタイプではさらに動きが追加され、操作性を検証するのに用いられることが多いです。
ワイヤーフレームについては「作り方」や「レイアウトの種類」まで知っておくと理解が深まります。詳しくはこちらの記事でまとめています。
Web制作工程におけるワイヤーフレームとデザインカンプの役割とタイミングの違い
Web制作の工程では、ワイヤーフレームとデザインカンプも作成されますが、具体的にどのような役割を持ち、どのタイミングで活用されるのでしょうか？ここで、ワイヤーフレームとデザインカンプの役割とタイミングの違いについて解説します。
設計フェーズ：ワイヤーフレームで情報設計を固める
Webサイト・アプリの制作工程において、まずはターゲットやコンセプトを決定し、要件定義が行われます。その後、Webサイト全体の構成が作成され、各ページの情報設計を固めていきます。この各ページの情報設計を固めるために、ワイヤーフレームを作成していくのです。
ワイヤーフレームは構造や情報の配置を示すことから、デザインの前に作成するものとなります。ワイヤーフレームを作成しておくことで、クライアントが意図していないサイト・アプリになっていないか、達成したい目的を本当に達成できるのか、などをチェックすることも可能です。また、ワイヤーフレームを作成している段階でユーザビリティの向上も図れるように、直感的な操作を可能とする設計を意識していきます。
ビジュアルフェーズ：デザインカンプで見た目を具体化
ワイヤーフレームが完成し、問題がなければデザイン作業に移っていきます。Webデザイナー・アプリケーションデザイナーは、ワイヤーフレームに基づいて企業やブランドのイメージを反映させた色やフォント、画像などを組み込んでいきます。ここで出来上がるのがデザインカンプです。デザインカンプでWebサイトやアプリの見た目を具体化していきます。
デザインカンプは上記でも紹介したように、数点まとめて作成しクライアントに提出する必要があります。提出した中から希望のデザインを選んでもらい、承認を得てから実際にWebサイトやアプリを制作します。この段階でクライアントとイメージを共有しておかないと、あとでトラブルにつながる恐れもあるため、デザインカンプでWebサイトやアプリのデザインを共有することが重要です。
デザインカンプの理解を深めるには、UI/UXデザインの基本原則を押さえておくと効果的です。以下の記事では、UI/UXデザインの作成手順やポイントをまとめていますので、あわせてご覧ください。
ワイヤーフレームやデザインカンプに関するよくあるトラブル
ワイヤーフレームとデザインカンプはWebサイトやアプリを制作する上で欠かせないものですが、場合によってはトラブルに巻き込まれてしまう可能性もあります。トラブルを未然に防ぐために、どのような問題が起きやすいのか把握しておきましょう。
構造が固まっていない段階でビジュアルの要望が出る
ワイヤーフレームは設計フェーズで作成することになりますが、まだワイヤーフレームも完成していない段階でビジュアルについて要望や指摘を受けてしまうことがあります。例えばワイヤーフレームを見て、「文字が小さくて読みづらい」「もっと明るい色を使ってほしい」「余白をもっとつくってほしい」などです。
こうした要望が出てもまだ構造が固まっていない段階にあるため、修正することはできません。ただし、デザイン作業に移行する際にデザイナーへ要望を共有することは可能です。
デザインの段階で構造変更を求められる
ワイヤーフレームで構造が決まってからデザイン作業に移りますが、この段階で構造の変更を求められてしまうことがあります。例えば「この箇所のレイアウトを変更したい」「この説明をより詳しくしたいので、スペースをもっと取りたい」などです。
デザイン作業に移行してから構造を大幅に変更しようとすると、追加費用が発生するのはもちろん、スケジュールもあらためて調整する必要が出てきます。このような事態を回避するためには、ワイヤーフレームが出来上がった時点でクライアントに「デザイン作業に移ると構造の大幅変更が難しくなる」ことを丁寧に説明することが大切です。どうしても変更が必要となった場合には、どこに・どのような影響が出てしまうのか明確に説明できるようにしておきましょう。
関係者間で成果物の認識にズレが生じる
関係者間で成果物の認識にズレが生じてしまうことは、よくあるトラブルの1つです。特にプロジェクトに関わる人が多ければ多いほど、共有がうまくいかず認識のズレが生じやすくなります。担当者が複数人いる場合や制作会社でも複数の部署がプロジェクトに携わっている場合、外部のパートナーが参加している場合も注意するようにしましょう。
認識のズレを防ぐためには、すべての関係者にワイヤーフレームやデザインカンプを共有することが大切です。また、プロジェクトの初期段階でどういうサイト・アプリを制作したいのか、具体例があればそのサイト・アプリを提示することも重要です。デザインは一人ひとりの主観によってイメージが異なることから、言葉で伝えるよりもイメージを共有したほうが理解しやすくなります。
確認不足による後工程での手戻りが発生する
プロジェクトを進める中で、各工程でクライアントから合意を得ながら進めていくことが基本となります。しかし、上司や他部署のメンバーに確認を取っておらず、その結果手戻りが発生するケースもあるでしょう。確認不足による後工程での手戻りが発生すると、また作業をし直さないといけなくなるため、スケジュールにも影響が出る恐れがあります。
最初からクライアントの要望通りに遂行できれば手戻りが発生する可能性も低いですが、完璧にこなすことは難しいです。そのため、手戻りは発生するものとしてスケジュールに加えておくこともできます。しかし、手戻りが多くなるとそれだけスケジュールも圧迫されてしまうので、確認不足による後工程での手戻りが発生しないように、進捗状況をクライアントも含めチーム全体で共有することが大切です。
なお、実際のユーザーがどんな場面で離脱しているかは調査データからも見えてきます。気になる方はこちらのレポートも参考にしてください。
▼アプリのUI改善や離脱率低減のヒントが満載！
【最新版】半数が離脱してしまうほどダメなUIとは？アプリUX 市場調査レポート
まとめ：ワイヤーフレームとデザインカンプの違いを理解して、スムーズなWeb制作を進めよう
ワイヤーフレームとデザインカンプは、どちらもWebサイト・アプリ制作に欠かせないもので、目的や役割、制作するタイミングなどが異なってきます。それぞれの特徴を理解して、高品質なWebサイト・アプリを制作していきましょう。
アプリの企画や構造設計などにお悩みの方には、アイリッジの「アプリ企画/RFP作成支援」の活用がおすすめです。アプリ企画/RFP作成支援では、要件整理から現状分析、UX戦略、ユーザー体験デザインの設計などを図りつつ、企画書・RFP（提案依頼書）の作成を支援するサービスになります。アプリの開発プロジェクトにおいて、企画段階から支援することでより高品質なアプリの開発にもつながります。アイリッジでは企画支援以外にも、活用支援やプロモーションなどもサポートしているので、アプリ開発を成功させたい方はぜひご相談ください。
