ワイヤーフレームとデザインカンプについて

あけましておめでとうございます。澤田です。
今回はウェブデザインが完成するまでに必要な「ワイヤーフレーム」と「デザインカンプ」という、聞いたことはもちろんあるけどしっかり意味が理解できているか自信がないこの2つの言葉について調べてみました。

ワイヤーフレーム

ワイヤーフレームとは、ウェブサイトの構成を形にしたものです。
あくまで構成に関するもののため、文章や写真はダミーが入っていたり、色は使わずモノクロで作られていたりします。
打ち合わせでクライアントの要望を聞いた上で、ディレクターが作成することが多いのではないでしょうか。

デザイナーがデザインをディレクターから任される際は、このワイヤーフレームをもとに、なぜここにこのコンテンツがあるのか（どういった効果を狙っているのか）、どのようなデザインが良いのかなどの説明を受けます。
言葉だけで説明を受けるよりもイメージを共有しやすく、デザインへスムーズに着手できるため、欠かせない重要な工程ですね。

余談ですが、私は学生時代こういったデザインに取り掛かる前のものを広くラフと呼んでいたので、このワイヤーフレーム（もしくはワイヤー）という言葉がなかなか馴染まなかったことを覚えています。

さて、ワイヤーフレームが完成し、それがデザイナーの手に渡りました。
デザイナーがデザインにかかり、最終的にできあがるのがデザインカンプです。

デザインカンプ

デザインカンプ（モックアップと呼ぶことも）とは、デザインの仕上がりを提示する完成見本のことで、軸となるワイヤーフレームを肉付けして作成します。
ちなみに「カンプ」は「Comprehensive Layout（包括的なレイアウト）」を略した呼び方のようです。
あまり聞き覚えのない難しい英単語ですね。

ワイヤーフレームと違ってデザインが完成しており、画像や文章も入っています。
このデザインカンプがあることによって、制作側・クライアント側ともにデザインの完成イメージをコーディングの前に明確に共有することができ、後々の修正を減らすことにも繋がります。

ここから修正等を経て完成したデザインをもとに、コーディング等の作業へと移っていくという流れになります。

まとめ

今までなんとなく使ってきていた言葉を理解したくて、今回改めてこの２つの言葉について調べてみました。

構成を形にしたワイヤーフレーム。
そしてそこからデザインなどを作り込み、具体性が増したデザインカンプ。

今となっては当然そうなこれらの工程ですが、このように完成までプロセスを明確にし、段階を踏んでデザインをしていくことが、結果に繋がるウェブサイトを作る上で必要なことなのだろうと思います。