デザインカンプとは？作り方やおすすめのツール、作成時のポイントを紹介
Webデザインの制作現場で耳にする「デザインカンプ」について、「どういう意味なんだろう」「モックアップや構成案との違いは何だろう」と疑問の方も多いではないでしょうか。
本記事は、デザインカンプの意味や作り方、おすすめのツールを紹介します。
デザインカンプの作成方法や、作成するポイントもお伝えするので、参考にしてみてください。
ノーコードで手間なく お問い合わせフォームの作成には「Tayori」
工数をかけずにお問い合わせフォームを作成したい方には「Tayori」がおすすめです。まずは無料プランからお試しください。
デザインカンプとは？デザインカンプを作る目的
デザインカンプとは、デザインの完成見本のこと。Design Comprehensive Layoutの略で単に「カンプ」と呼ばれることもあります。
デザインカンプは、クライアントへの提案やチームメンバーとのデザイン共有のために欠かせないものです。具体的な完成イメージを共有することで、クライアントとの意思疎通を行い、デザインの詳細を決定していきます。
デザインカンプとモックアップ、ワイヤーフレームとの違いとは？
デザインカンプと混同されやすい言葉に、「モックアップ」があります。モックアップはプロダクトデザインにおける、完成模型や試作品を指す言葉。デザインカンプと同じ意味で使われます。明確に使い分ける必要はなく、どちらも「完成品のイメージ」だと覚えておくといいでしょう。
また、デザインカンプは、デザインの構成案やワイヤーフレームを基に作られます。構成案やワイヤーフレームの段階では色や画像などは決まっていなかったものを、デザインカンプでは完成までをイメージして詳細まで決定していくものだと認識しておくとわかりやすいでしょう。
デザインカンプの作り方5ステップ
デザインカンプの重要性は、おわかりいただけたでしょうか。次からは、Webサイトの作成を例として、デザインカンプの作り方を5ステップに分けて解説していきます。
STEP1．Webサイトの目的を決める
デザインカンプを作る前に、まずはWebサイトを制作する目的を決定します。
Webサイトを制作する場合、「会社の概要説明」「商品を販売したい」など、目的があるはずです。どのようなターゲット・ペルソナに、何を訴求したいのかによって、適したデザインは異なります。
まずは、Webサイトを作成する目的や、ペルソナの設定を行い、メンバー全員ですり合わせていくことが大切です。
デザインに入る前の段階ですが、この段階が基礎・前提となる部分です。一番重要だと認識し、時間をかけて納得のいくまですりあわせておきましょう。
関連記事：ビジネスにおける「ペルソナ」とは？設定に必要な要素や、注意点を紹介
STEP2．参考となるWebサイトを探す
Webサイトの目的を決めたら、参考となるWebサイトを探しましょう。ゼロからデザインするよりも、既存のサイトを参考にした方が、デザインの質も作成の効率も上がります。
同じターゲット層・目的のサイトを探し、それぞれどんなデザインなのか、どのような構成なのかを見比べてみましょう。
STEP3．構成案を作る
参考サイトが見つかったら、実際にいくつか構成案・モックアップを作ってみましょう。参考サイトを見ながら、クライアントのニーズや特徴を考え、複数の案を出していきます。
構成案は紙に書いても、Photoshopをはじめとするデジタルツールで作っても構いません。
また、参考サイトはあくまでも参考とし、丸々コピーするなど、著作権違反するようなことは絶対に避けてください。
要素やメニューの多いサイトでは2カラム（2列）、要素の少ない場合やシンプルなデザインにしたい場合は1カラム（1列）というように、サイトに合ったレイアウトを選びましょう。
STEP4．ガイドを引く
構成案を作り、どんなデザインにするかイメージを決めたら、デザインカンプの制作に入ります。
パーツの配置が少しずれるだけでも、見栄えが悪くなったり、レイアウトが崩れたりします。そのためデザインカンプでまず最初に着手するべき部分は、ガイドを引くことです。モックアップや構成案に従って、まずはガイドを引くことから始めましょう。
ちなみに、Photoshopでガイドを引くなら、定規機能を使うのがおすすめです。
STEP5．パーツを作る
ガイドを引いたら、パーツを作り、ガイドに沿って配置していきます。
完成系がイメージできるように、色合いや画像なども実際のサイト同様に設定しましょう。
レスポンシブデザインのときのデザインカンプの作り方
レスポンシブデザインのときは、端末に応じてコンテンツをどのように表示するのかを意識する必要があります。
レスポンシブデザインは基本的に、画面内のコンテンツを表示する幅（コンテナ）が流動的に変わっていくパターンと、任意の幅で固定されるパターンに分かれます。
例えば、PCメインで作成したサイトの場合、大きい画面だからこそ成り立つデザインを組むと、小さな画面になった場合、どのように表現したいのか制作時・実装時にわからなくなるケースもあります。
そのためレスポンシブデザインの場合は、まずはメインとなるデバイスのデザインカンプを作成し、その他のデバイスについてもできるだけ作成しましょう。
デザインカンプを作るときにおすすめのツール5選
デザインカンプは紙でも作れるものの、ツールを使って作れるようにしておくことをおすすめします。ツールを使えばクライアントや制作メンバーとの共有もしやすく、デザインカンプを基にした実装作業にもスムーズに移れるからです。
次には、デザインカンプを作るときのおすすめツールを5つ紹介します。
1．Photoshop
デザインカンプの制作ツールとして、多くのデザイナーから愛され続けているのがPhotoshopです。画像編集ソフトとしてもよく使われるソフトなので、デザインカンプもPhotoshopで作れるようにしておくといいでしょう。
＞＞公式サイト：Photoshop
2．Illustrator
Illustratorも、Webデザインの製作現場でよく使われるソフトです。ロゴやアイコンの作成で使われることも多く、Photoshopと併せて使いこなせるようにしておきましょう。
＞＞公式サイト：Illustrator
3．XD
シンプルな操作性と、UIデザインに特化した機能が魅力的なのがXDです。ワイヤーフレームからデザインカンプまで、HTMLやCSSによる構築作業までの段階はXDだけで完結できます。
＞＞公式サイト：XD
4．GIMP
ここまで紹介してきたツールは、どれも有料のAdobe製品です（XDのみ無料プラン有り）。無料で使えるツールでさ人には、フリーの画像編集ツール・GIMPをおすすめします。
フリーソフトでありながら、画像編集や複数のプログラミング言語に対応した、使い勝手の良いツールです。
＞＞公式サイト：GIMP
5．Figma
Figmaはブラウザ上で使える、汎用性の高いデザインツールです。デザインカンプの作成や画像編集をブラウザ上で行えて、複数人での共同作業にも対応しています。
＞＞公式サイト：Figma
デザインカンプを作るときの3つのポイント
デザインカンプの作成に慣れていないと、カンプ作りが捗らなかったり、実際の制作作業がスムーズに進まなかったりします。では、どんなことに気を付ければ、よりスムーズにデザインを作っていけるのでしょうか。
最後に、デザインカンプを作るときに気を付けたい3つのポイントをお伝えします。
ポイント1．コーディングにまで気を配る
デザインカンプを作るときは、コーディング（実装）にまで気を配りましょう。デザインカンプの段階でコーディングのことまで考えられていれば、以降の作業もスムーズに進みます。
具体的には、「10px未満のフォントサイズや小数点以下の数値は使わない」「ブロック同士の余白や見出しデザインを統一する」などを意識しましょう。
その他、先ほども解説したように、レスポンシブデザインのケースも検討できるといいでしょう。
ポイント2．オリジナリティーに縛られない
デザインカンプを作るときは、「オリジナリティーを出そう」と意識しすぎないことです。複数の参考サイトを見比べながら、イイトコ取りをする感覚で、デザインカンプを作りましょう。
デザインで大切なのはオリジナリティーではなく、「目的に合った見やすさ・使いやすさ」です。既存の優れたデザインも、ほかのデザインの良いところを組み合わせて作られています。
何より、オリジナリティーは度重なる制作の末に、自然とうまれてくるものです。優れたデザインにたくさん触れ、制作実績を積み重ねていくうちに、デザイナーとしての個性がにじみ出していくでしょう。
ポイント3．構成案に縛られない
デザインカンプを作るときは、構成案に縛られすぎないようにしましょう。構成案は、あくまでも「案」です。デザインそのものではありません。
構成案に沿ってデザインカンプを作っていると、「ここはもっと、こうした方が良いのでは？」と思うこともあるでしょう。より良いアイデアが浮かんだら、構成案に縛られずに、実際に試してみてください。
ユーザビリティの高いサイト作成は、デザインカンプから
ユーザビリティの高いサイト作成は、デザインカンプからはじまります。デザインカンプ作成時点で、レスポンシブデザインやユーザビリティを意識できていれば、より良いWebサイトを作れるでしょう。
構成案をいくつか作りながら、最もユーザビリティの高いものはどれか、見比べてみてください。「この構成案は、なぜユーザビリティが高いといえるのか」を、具体的な言葉で説明できれば、なおいいでしょう。
とはいえ、ユーザビリティを高めるには、さまざまなことを意識しなければなりません。ユーザビリティをあまり意識したことがない方は、「UI・UXの違いとは？非デザイナーでも今すぐできる3つの改善施策・勉強方法」の記事を参考に、まずは基礎知識から身に付けていきましょう。
ノーコードで手間なく お問い合わせフォームの作成には「Tayori」
シンプルで使いやすいお問い合わせフォームを作成したい方には「Tayori」がおすすめです。デザインの変更もクリック一つでできるので、お問い合わせフォームの作成に工数をかけたくない方にぴったりです。まずは無料プランからお試ししてみませんか？
