デザインカンプとは？役割と作成方法を紹介

Webサイト制作の場でよく耳にする「デザインカンプ」。
聞き慣れない言葉なので、困った経験をした方もいるのではないでしょうか？
本記事ではデザインカンプの役割や作り方を解説します。

デザインカンプとは？

デザインカンプとは、デザインの完成見本を表しており、「Design Comprehensive Layout」の略称です。「カンプ」や「モックアップ」とも呼ばれています。
要素の位置関係を指定する「ワイヤーフレーム」に色や画像を入れ込み、完成イメージにしたものがデザインカンプとなります。

ワイヤーフレームとは？

ワイヤーフレームとは何をどこに配置するのか、サイトのレイアウト・構成を可視化したものを指します。デザイン性は必要なく、制作するページの構成がわかれば問題ないので、エクセルやパワーポイントなどで作ることもあります。
ワイヤーフレームからデザインカンプを作成する流れとなるため、できるだけ同一ツールで作るようにルール設定しておくと、デザインも効率よく作成することができます。

デザインカンプが必要な理由

ワイヤーフレームでWebサイトの各要素の配置を決定し、デザインカンプでは制作物の完成品をイメージできるようにします。
デザイン作成前には必ず発注側のヒアリングを行いますが、どうしても言葉だけでは齟齬が生じたり、イメージしているものが違っていることが多々あります。デザインカンプを作成することで、完成品が可視化されるため、発注側と受注側の認識を合わせることができます。また、制作側もデザイナーとコーダーで共通の完成イメージを持つことができます。

Webサイト制作の一般的な流れ

実際にWebサイト制作の場ではどのタイミングでどのようにデザインカンプが使われるのか、簡単にご紹介します。

1.制作するページ（サイトマップ）を決める
2.ワイヤーフレームで構成を決める
3.デザインカンプでWebサイトの見え方を確定する
4.デザインカンプに基づいてコーディングを行う
5.納品

各項目の細かい内容は下記記事で詳しく紹介しています。
Webサイト制作における納品までのスケジュール

デザインカンプを作るためのツール

デザインカンプの作成には様々なデザインツールが使用されますが、代表的なものはAdobe製品のPhotoshopやIllustratorです。

近年では動きなども表すことができる、Adobe製品のXDを使用する制作会社も増えてきました。デザイナー向けのオンライン講座も増えてきていますね。
画像編集ソフトであれば何でも作成はできますが、Webデザインに特化しているものとすればAdobe製品が断トツの人気です。デザイン関連の仕事を進めるうえでは業務効率化に必須のツールと言えます。

デザインカンプの作り方

デザインカンプはワイヤーフレームを肉付けして作成していきます。ワイヤーフレームでは、デザインに使用するカラーやフォントの種類、文字のサイズなどを反映しているものもありますが、単純な構成のみで作成されることもあります。
ワイヤーで細かい部分が決まっていない場合には、デザインカンプでデザインイメージや細かいサイズなどを決めていく必要があります。

サイト幅を決める

デザインに入る前にまずはサイト幅を決めましょう。一般的にはPCの場合は1,000px前後で作成することが多いです。
近年では画面幅いっぱいにデザインを見せていくようなレイアウトも人気です。

また、スマホユーザーが多いことから、モバイルファーストでスマホのデザインから作成するようなことも多くなっています。
サイト幅を決めたら、サイト幅のサイズに合わせてガイドをひき、ガイドに合わせて要素を作成していきます。

サイトのデザインイメージを固める

なかなかワイヤーからさくさくデザインを進められることは難しいもので、ある程度どのようなデザインがいいかを自分の中で固めることが重要になります。
同じような商材を扱っているサイトを見てみたり、同じような色合い・イメージのサイトを見てイメージを固めていきましょう。
Webデザインのギャラリーサイトもたくさんあるので、参考にしてみてください。

レイアウトを決めてパーツを作成する

サイト幅とデザインイメージが固まったらデザインを進めていきましょう。ワイヤーにある構成のパーツを作成して組み合わせていくような作業になります。
パーツを配置するレイアウトは、1カラムが最近では人気ですが、メニューの多いサイトや記事サイトの場合には2カラムレイアウトが主流です。
ユーザーが回遊しやすく、わかりやすいサイト設計を心がけてデザインカンプを作っていきましょう。

デザインカンプからWebサイトができるまで

前述したように、デザインカンプは完成見本であり、コーダーはデザインカンプを見てそっくりそのままコーディングを行います。
デザインカンプがそのままWebサイトになってくるので、デザイナーはユーザビリティもしっかり考慮してデザインしていく必要があります。また、コーダーが迷わないようにアニメーションやボタンのホバーなど、細かい部分もデザインカンプで表す必要があります。

カラーはもちろん、フォントの種類やフォントサイズ、線の太さや要素の大きさ、余白など、全てデザインカンプから1pxのズレも出ないようにコーディングすることがコーダーの役割なので、デザイナーはコーダーにわかりやすいデザインデータを作ることも心がけていくといいでしょう。

デザインカンプでイメージを共有しよう

Webサイトを制作する中で、デザインの方向性を決めるデザインカンプは大変重要な役割を担っています。完成見本図となるデザインカンプをしっかり作成して、クライアントとのイメージを共有しスムーズにサイト制作をしていくようにしましょう。

制作でお悩みでしたら、
Bigmacにお任せください。