---

ニジボックスのUIデザインフローや案件事例をご紹介！

---

Webサイトを制作する際、その工程の中で必ず登場するのが「ワイヤーフレーム」と「デザインカンプ」です。聞いたことがある方がほとんどだと思いますが、その明確な違いを説明してくださいと言われると、言葉に詰まってしまう方も多いのではないでしょうか。

今回は、Web制作に携わる方に向けて「ワイヤーフレームとデザインカンプの違い」を解説していきます。

ワイヤーフレームとデザインカンプの違い

Web制作に関わったことがある方なら誰しも「ワイヤーフレーム」と「デザインカンプ」を見たことがあると思います。おおむね、ワイヤーフレームは「白黒でシンプル」「企画が始まった最初のほうで出てくる」、デザインカンプは「色も入っていて、ビジュアルもできている」「ワイヤーフレームの後で出てくる」という、大まかな分類をされているのではないでしょうか。

ここで、改めてワイヤーフレームとデザインカンプの違いを見てみましょう。

ワイヤーフレーム

ワイヤーフレーム（WF）はWebサイトやアプリの設計図のことです。
画面内にどの情報を/ページ内のどこに/どのように配置するかが記載されています。Webサイトの目的に沿って、サイトの企画を設計する基本となるものです。

デザインカンプ

デザインカンプは「Design Comprehensive Layout」の略で、Webサイトのデザインの完成見本のことを指します。ワイヤーフレームで決めた構成を基に、色や画像などのビジュアルを具体的にデザインしていきます。

簡単にまとめるとこのようになります。では、詳しく見ていきましょう。

Webサイトの制作工程におけるワイヤーフレームとデザインカンプ

ワイヤーフレームとデザインカンプは、上記のように役割が違い、Webサイトの制作工程上のどこで活用されるかも異なります。

一般的なWebサイトの制作工程は次のようになります。

• ターゲット・コンセプトの決定
• 要件定義
• Webサイト全体の構成作成（サイトマップ作成）
• 各ページの情報設計（ワイヤーフレーム作成）
• デザイン作成
• コーディング・システム開発
• テスト
• リリース

サイトの目的、コンセプトを形にしていく段階で、骨組みを作るのがワイヤーフレーム、それに肉付けして具体化するのがデザインカンプだと言い換えることもできます。

Webサイト制作の流れについて詳しく知りたい方は以下をご覧ください。

ワイヤーフレームの役割と中身とは

Web制作の初期段階においては、具体的な色や装飾よりも情報の配置や構造について詳細を詰めていくことが重要なため、ワイヤーフレームは基本的にグレースケールで作成されます。
これは、ワイヤーフレーム作りの段階で議論が十分になされないと、後のデザインカンプの段階で構造に関する大きな修正が必要となり、結果的にプロジェクトのスケジュールに大きな影響を及ぼすからです。

デザイン段階での大きな修正の最大要因が「ワイヤーフレーム段階での検討が足りなかった」というケースは珍しくありません。見た目はシンプルですが、Web制作の上で極めて重要な中間成果物の一つです。

ワイヤーフレームそのものや、作り方について詳しく知りたい方は以下の記事をご覧ください！

デザインカンプの役割と中身とは

デザインカンプは正確には「Design Comprehensive Layout」と呼び、デザインの完成見本のことを指します。ワイヤーフレームに基づいて、実際の写真やビジュアル、コピーを入れていき、公開されるWebサイトに近いものを作ります。

Webサイトやアプリの実装はデザインカンプを基に進めることになるため、後続作業での手戻りを無くすためにも、関係者間で認識を合わせることが大事です。

ワイヤーフレーム、デザインカンプは誰が作るのか？

ワイヤーフレーム、デザインカンプは「誰が作っても構いません」。

傾向としては、ワイヤーフレームは、デザインの前に、より企画に近い概念、構造を考える段階であるため、ディレクターが作成するケースが多くなっています。一方、デザインカンプはデザイナーが作成することが多くなっています。色彩設計やビジュアルの選定、作成などはデザイナーの仕事です。そのため、デザインカンプはどうしてもデザイナーの専任事項になります。

ただし、経験豊富なデザイナーの場合、企画段階から参画するケースも多く、ワイヤーフレームを作成する場合も珍しくありません。また、デザイン経験があるディレクターの場合、デザインカンプに近いレベルまで作ってしまうケースもあります。

ケースバイケースですが、基本は、「ワイヤーフレームはディレクター」「デザインカンプはデザイナー」と考えて問題ありません。

ワイヤーフレームとデザインカンプを作成するには？

ここでは、実際にワイヤーフレーム、デザインカンプを作成するにあたってのポイントについて解説します。最近では、ワイヤーフレーム作成ツールを活用するケースも増えており、その際の注意点についても触れていきます。

ワイヤーフレーム作成ツールを活用するのが便利

かつては、Illustratorなどのデザインツール、パワーポイントなどのプレゼンテーションツール、エクセルに代表される表計算ツールなど、多くのツールがワイヤーフレーム作成に活用されていました。しかし、どれも他の目的のツールであり、ワイヤーフレーム作成に特化したものではありません。

直感的な操作ができず作業効率が悪い、関係者に共有する際にうまく共有できないなどの問題もあり、FigmaやAdobe XDなどワイヤーフレーム作成を想定したツールの利用が増加しています。シンプルなものから高機能なものまで多様なツールがあるので、自分たちにあったものを選ぶといいでしょう。

ワイヤーフレーム作成ツールに関しては、下記ページもご覧ください。

デザインカンプを作るツールは？

一方、デザインカンプ作成ツールは、デザインツールが活用されることがほとんどですが、最近ではワイヤーフレーム作成ツールでそのままデザインカンプが作成できる、さらにはプロトタイプまで作成できるものが多くあります。
以下のようなメリットがあるため、ワイヤーフレームとデザインカンプは同一のツールで作成するのがおすすめです。

• デザイナーの工数が減少しスケジュールに余裕が生まれる
• デザイナーがデザインを考案することに集中できる
• ワイヤーフレームから逸脱したデザインカンプにならない

まとめ

ワイヤーフレーム、デザインカンプは、Web制作に関わっていると頻繁に目にするものです。その役割を正しく理解し、活用していくことでWeb制作の効率が上がり、「成果が上がるWebサイト」の制作ができるようになるでしょう。

ニジボックスではサイト制作や開発における、情報設計やビジュアル設計といったUIデザイン面に加えて、ユーザビリティテストなどによるUX観点やLP改善のご支援を行っております。 下記にて、ニジボックスがクライアント課題に伴走する中で、磨き上げてきたUI UXデザインのプロセスや支援事例の一端を資料として一部ご紹介しています。 ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください。