ワイヤーフレームとデザインカンプ
その違いを解説！
目次
Webサイトを制作する際、その工程の中で登場するのが「ワイヤーフレーム」と「デザインカンプ」です。聞いたことがある方がほとんどだと思いますが、その明確な違いは何なのでしょうか？
今回は、Web制作に携わる方に向けて「ワイヤーフレームとデザインカンプの違い」を解説していきます。
ワイヤーフレームとデザインカンプの違い
Web制作に関わったことがある方なら誰しも「ワイヤーフレーム」と「デザインカンプ」を見たことがあると思います。
ワイヤーフレームは
・白黒でシンプル
・企画が始まった最初のほうで出てくる
デザインカンプは
・大体のビジュアルができていて完成型に近いもの
・ワイヤーフレームの後で出てくる
という、大まかな分類をされているのではないでしょうか。
ここで、改めてワイヤーフレームとデザインカンプの違いを見てみましょう。
ワイヤーフレーム
ワイヤーフレーム（WF）はWebサイトやアプリの設計図のことです。
画面内にどの情報を、ページ内のどこに、どのように配置するかが記載されています。
Webサイトの目的に沿って、サイトの企画を設計する基本となるものです。
デザインカンプ
デザインカンプは「Design Comprehensive Layout」の略で、Webサイトのデザインの完成見本のことを指します。ワイヤーフレームで決めた構成を基に、色や画像などのビジュアルを具体的にデザインしていきます。
Webサイトの制作工程におけるワイヤーフレームとデザインカンプ
ワイヤーフレームとデザインカンプは、上記のように役割が違い、Webサイトの制作工程上のどこで活用されるかも異なります。
一般的なWebサイトの制作工程は次のようになります。
- ターゲット・コンセプトの決定
- 要件定義
- Webサイト全体の構成作成（サイトマップ作成）
- 各ページの情報設計（ワイヤーフレーム作成）
- デザイン作成
- コーディング・システム開発
- テスト
- リリース
サイトの目的、コンセプトを形にしていく段階で、骨組みを作るのがワイヤーフレーム、それに肉付けして具体化するのがデザインカンプだと言い換えることもできます。
ワイヤーフレームの役割と中身とは
Web制作の初期段階においては、具体的な色や装飾よりも情報の配置や構造について詳細を詰めていくことが重要なため、
ワイヤーフレームは基本的にグレースケールで作成されます。
これは、ワイヤーフレーム作りの段階で議論が十分になされないと、後のデザインカンプの段階で構造に関する大きな修正が必要となり、
結果的にプロジェクトのスケジュールに大きな影響を及ぼすからです。
デザイン段階での大きな修正の最大要因が「ワイヤーフレーム段階での検討が足りなかった」というケースは珍しくありません。
見た目はシンプルですが、Web制作の上で極めて重要な中間成果物の一つです。
デザインカンプの役割と中身とは
デザインカンプは正確には「Design Comprehensive Layout」と呼び、デザインの完成見本のことを指します。
ワイヤーフレームに基づいて、実際の写真やビジュアル、コピーを入れていき、公開されるWebサイトに近いものを作ります。
Webサイトやアプリの実装はデザインカンプを基に進めることになるため、後続作業での手戻りを無くすためにも、関係者間で認識を合わせることが大事です。
ワイヤーフレームとデザインカンプを作成するには？
ここでは、実際にワイヤーフレーム、デザインカンプを作成するにあたってのポイントについて解説します。最近では、ワイヤーフレーム作成ツールを活用するケースも増えており、その際の注意点についても触れていきます。
ワイヤーフレーム作成ツールを活用するのが便利
かつては、Illustratorなどのデザインツール、パワーポイントなどのプレゼンテーションツール、エクセルに代表される表計算ツールなど、多くのツールがワイヤーフレーム作成に活用されていました。
しかし、どれも他の目的のツールであり、ワイヤーフレーム作成に特化したものではありません。
直感的な操作ができず作業効率が悪い、関係者に共有する際にうまく共有できないなどの問題もあり、FigmaやAdobe XDなどワイヤーフレーム作成を想定したツールの利用が増加しています。
シンプルなものから高機能なものまで多様なツールがあるので、自分たちにあったものを選ぶといいでしょう。
デザインカンプを作るツールは？
一方、デザインカンプ作成ツールは、デザインツールが活用されることがほとんどですが、最近ではワイヤーフレーム作成ツールでそのままデザインカンプが作成できる、さらにはプロトタイプまで作成できるものが多くあります。
しかし、ワイヤーフレームを利用しながらデザインカンプを作成すると全体の工数も減り、スケジュールに余裕が生まれるので、ワイヤーフレームとデザインカンプは同一のツールで作成するのがおすすめです。
まとめ
ワイヤーフレーム、デザインカンプは、Web制作に関わっていると頻繁に目にするものです。その役割を正しく理解し、活用していくことでWeb制作の効率が上がり、「成果が上がるWebサイト」の制作ができるようになるでしょう。
近年では、figmaを使ってワイヤーフレームからデザインまで作成することも増えてきていますね。前回のブログでfigmaを紹介しているので、こちらもぜひご覧になってみてください！
