デザインカンプの意味とは？作り方やおすすめツールも紹介【2024年最新版】

デザイン制作の現場でよく耳にするのが、デザインカンプと呼ばれる言葉です。作成見本であるデザインカンプの役割を理解することで、よりスムーズなデザイン制作を進められるでしょう。そこでこの記事では、営業・バックオフィスなど、さまざまな分野の発注先を比較検討できる「アイミツ」が、デザインカンプとは何かを解説しながら、その作り方や制作の際に役立つツールについて紹介します。

 【関連ページ】
ホームページ制作にかかる費用・相場感や、あなたの目的別にホームページ制作会社をお探しいただけます。
ホームページ制作の費用・相場
デザインに強いホームページ制作会社一覧

まずは、デザインカンプとはどのような言葉なのかについて解説します。デザインの完成見本であるデザインカンプを作成する目的について理解を深めることで、ハイクオリティなデザイン制作が必要な場合でも、スムーズに工程を進めることができるでしょう。デザインについての知見に自信がない方は、その役割を知っておくことをおすすめします。

デザインカンプはDesign Comprehensive Layoutの略称で、日本ではデザインカンプ、あるいはカンプと略されることもあります。多くのデザインは複数回の打ち合わせの中で完成に辿り着きますが、その中で紹介する完成見本がデザインカンプというわけです。いきなりデザインの完成品を納品するのではなく、あらかじめデザインカンプの状態で発注者に対し提示し、デザインの情報を共有することで承認をもらいます。

デザインカンプを作成する目的は、関係者間の情報共有をスムーズにするためです。デザインの依頼というのはその性質上、口頭でのコミュニケーションではどうしても感覚的なものになりやすく、具体的な話がしづらい傾向にあります。口頭では同意が得られているようなことも、デザインにおこしてみると「なんか違う」ということになり、完成までに多くの時間がかかってしまうことも珍しくありません。そこで完成品を仕上げる前にデザインカンプを作成することで、方向性やディテールの確認を行います。そうすることで、完成品になって多大な修正が必要になるケースを防ぎ、作業を効率よく進められるのです。

デザインカンプに似た言葉として、ワイヤーフレームやモックアップという言葉が使われることもあります。これらは概ね同じような見本を指していますが、仕様について細かな違いがあるため、理解しておくと正しいコミュニケーションが取れるでしょう。それぞれの言葉の定義について、ここで解説します。

ワイヤーフレームを日本語に訳すと「枠組み」となりますが、文字通りデザインの枠組み、つまりレイアウト設計を指す言葉です。具体的な仕様やコンテンツは決まっていないものの、概ねこのような雰囲気のデザインになる、ということをワイヤーフレームの段階で共有します。サイト全体の設計などを確認したい場合、ワイヤーフレームを共有することで関係者間の意思疎通を取れるのが特徴です。

モックアップとは、主にプロダクトデザインの領域で使われることの多い用語です。こちらもデザインカンプ同様、プロトタイプ的な意味合いを持つ言葉ですが、物理的な模型を指す意味合いが強い傾向にあります。デザインカンプの場合、平面的なデザインの完成見本を指していますが、モックアップは新型のスマホや家電など、ハードウェアの完成見本を指しているケースが一般的です。明確な言葉の違いはありませんが、立体感がある方がモックアップ、そうでないのがデザインカンプという認識で覚えておきましょう。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

デザインカンプはデザインを完成させるのとは別途用意するものですが、どのようなプロセスで制作するのでしょうか。主な手順としては、
1.目的やコンセプトを決める
2.コンセプトに沿ったデザイン例を探す
3.デザイン例を参考に構成案を作成する
4.デザインカンプの前にワイヤーフレームを作る
5.デザインカンプ完成のためガイド線を引く
6.Webデザインに必要なパーツを作成する
7.修正を加えてデザインカンプを完成させる
という7つのステップに分かれて行います。それぞれでどんな作業が発生するのか、本番のデザイン制作にどう影響することとなるのか、見ていきましょう。

デザインカンプの制作においては、まず目的やコンセプトを定めるところからスタートします。デザインの目的は問題解決であるため、どんなゴールを達成するのか、どんな課題を解消するためにデザインするのかを念頭に考える必要があるでしょう。その上で目的達成につながるコンセプトを策定し、具体的なデザインに落とし込んでいきます。この点はデザイン制作のプロセスとリンクしており、本番のデザイン制作においてもこれらのコンセプトやゴール設定は反映されると考えておきましょう。

デザインカンプ制作を効率よく進める上では、既存のデザインをもとに具体的なプランを考えていくのがベターです。ゼロから全てのデザインを検討するのは多くの時間を要しますが、既存のアイデアを参考にすれば、スピーディに制作を進められるでしょう。デザイナーはクライアントのニーズをヒアリングした上で、問題解決につながりそうなデザインを既存のものからピックアップし、方向性を策定します。同じような目的のサイトデザイン例をクライアントやチームで共有しておけば、作成するデザインの方向性を間違うことも避けられるでしょう。

定めた目的の達成やコンセプトとの相性が良さそうな既存デザインをいくつか見つけることができたあとは、構成案の作成を進めます。参考になりそうなデザインを見つけても、それがそのまま今回のデザインプロジェクトに適用できるとは限りません。どのような点が今回のプロジェクトと相容れないのか、どのようにアレンジしていけば問題解決につながるのかを考えながら、デザインの方向性を具体的なものにしていきます。土台として良いデザインをピックアップできれば、肉付けやそぎ落としを行うだけで構成を確固たるものに仕上げられるでしょう。

構成案がまとまったら、ワイヤーフレームの作成に取り掛かりましょう。デザインのレイアウトを具体的に形にしておくことで、細かな要件をどの様に落とし込んでいくのか、スムーズに考えることができます。構成案をベースにワイヤーフレームを検討し、ページデザインのアイデアを膨らませていくための土台へと仕上げる段階です。ワイヤーフレームの作成は、専用のデザインツールなどを使って行うと便利でしょう。あまりにフレームワークが既存デザインと酷似していると著作権に触れる可能性があるため、ある程度オリジナリティに配慮する必要もこのあたりから出てきます。

ワイヤーフレームを仕上げた後は、ガイド線を引いていく作業に移りましょう。ガイド線とは、実際にデザインを行う際の補助の役割を果たす線のことを言います。ガイド線を引いておくことで、デザインにズレなどが生じず、ディテールまでハイクオリティのページに仕上げることが可能です。ガイド線を引く場合、真ん中に引き中心軸がずれない様にするだけでなく、左右にも引くことで、デザイン作業時に正確な補助ができます。ガイド線を引くときはツールの定規機能を使うなどして、正確に描画しましょう。

Webデザインは一枚のページに全ての要素が収まっていますが、実際にはそれぞれの機能が個別に役割を果たしているという仕様になっています。デザインカンプ制作の際も、Webデザインに必要な機能を別個のパーツとして捉え、仕上げていく作業が必要です。各機能ごとに仕上げていくことで、作業内容が煩雑になってしまう事態を回避し、確実にページとしての機能を個々のパーツが果たしてくれるでしょう。それぞれのパーツが出来上がった後は、パーツごとの干渉が発生しないかも確認し、1つのページ内でまとまりを作っていきます。

一通りのデザインが完成した後は、一度コンセプトや構成案を振り返り、上流過程で設けた要件を確実に満たしているかどうかをチェックしましょう。実装すべき機能に漏れがないか、当初のレイアウトとデザインカンプで相違はないか、当初の目的を達成できるページとなっているかなど、基本的な確認事項をクリアにしておきます。デザインカンプを仕上げ、共有した後はそのフィードバックをもとに、デザインの完成に向け仕上げ加工や修正作業を実施するというプロセスです。

デザインカンプ作成を上手く進めていくためには、デザインスキルを磨くことはもちろんですが、以下のようなポイントを理解しておくことも大切です。最低限知っておくべきは、
・サイトの目的やコンセプトを忘れない
・独自性を意識しすぎない
・コーディングまで見通して作成する
・構成案作成時に詳細まで決めておく
の4つです。それぞれのポイントを詳しく見ておきましょう。

デザインカンプ作成に当たっては、当初のWebサイトの目的や、設定したコンセプトから外れたものになっていないかを確認する必要があります。デザイン制作が進んでいくと、ディテールにこだわったり各機能の動作確認などに追われ、コンセプトや当初の想定などが抜け落ちてしまうことも珍しくありません。適宜コンセプトや目指すべきゴールを振り返り、それに則ったデザインができているかどうか、評価することが大切です。

デザインはあくまで問題解決のためのアプローチであるため、アーティスティックに考えすぎるのは良い方向性とは言えません。あまりに既存デザインと酷似しているのは問題ですが、かといって過度に独自性に囚われる必要はなく、ユーザビリティを確実に確保するための心構えが求められます。ユーザーにとって使いやすいサイトにするため、どんなデザインを採用すれば良いか、という問題意識を忘れないことが大切です。

Webデザインで必ず発生する工程がコーディングです。ビジュアルのデザインがどれだけ優れていても、コーディングの都合上、無理がある仕様の場合、やむを得ず妥協しなければならないことも出てくるでしょう。こういったやむを得ない仕様変更のリスクを回避するためにも、後に発生する作業を見据えたデザインを採用し、確実に完成可能なことを確認しながら仕様を固めていくことをおすすめします。

構成案作成の段階で、できるだけディテールまで詰めておくことができれば、後の作業の負担や修正のリスクを回避することができます。構成案作成の段階ではまだワイヤーフレームもできていませんが、手当たり次第に構成案を作成するのではなく、先の作業を見越して作成に取り組むことが重要です。構成案作成は比較的上流の作業ですが、しっかりと時間をかけて取り組めるプロセスでもあるため、焦ってこなす必要はありません。

最後に、デザインカンプの作成において役に立つツールを紹介します。デザインカンプ作成専用のツールというものは存在せず、一般的なデザインツールを使って作業に取り組むこととなるでしょう。プロフェッショナル向けのツールは高機能ですが導入費用が高く、一般向けのツールはその逆という傾向にあります。

IllustratorはAdobeが提供する、世界で最もポピュラーなデザインツールの一種です。グラフィックデザインやWebデザインなど、幅広いデザイン業務で活躍し、世界最高峰の現場でも用いられていることから、導入実績は十分と言えます。Illustratorを使ってできないことは基本的にありませんが、注意点としてはその運用には一定のスキルが求められることです。特に使用方法は独特なので、最初は簡単な図を描くのにも苦労しますが、時間をかけて徐々に運用スキルを磨いていきましょう。

PhotoshopはIllustrator同様、Adobeが提供するデザインツールです。Illustratorはデザインを一から制作する際に用いられるソフトですが、Photoshopはどちらかというと画像編集に強い機能群が揃っているソフトと言えます。画像加工特化とはいえ、Webデザインなどで使用するツールなどは一通り揃っており、Illustratorのように運用することができるため、Photoshopだけで作業をこなしてしまうデザイナーも少なくありません。逆に画像をあまり使う機会がないというユーザーは、他のソフトを使ったほうが都合が良いことも考えられます。

cacooはワイヤーフレーム設計に使えるツールです。最大の特徴は、Webブラウザ上で利用できる点が挙げられます。多くのデザインツールは、一度PCにソフトをインストールしなければならないため、ソフトが未インストールのPCでは作業ができません。一方でcacooはインターネット環境があれば、どこでもどんなPCでも作業することができるため、柔軟性に優れています。一方でオフライン環境では利用が極端に制限される上、単純なパフォーマンスについてはソフトウェア型のツールの方が優れていることもあるため、不便を感じる場合は有料ソフトの導入を検討しましょう。

moqupsもcacoo同様、Webブラウザ上で動かすことができるワイヤーフレーム制作ツールです。アカウントを登録すればすぐに使用することができ、ローカルファイルの画像をアップロードしてデザインに反映することもできます。作成したワイヤーフレームデザインは、PNGなどのデータに変換してダウンロードし、オフライン環境で閲覧することも可能です。注意点としては、現状日本語に対応しておらず、英語でガイドラインなどを参考にしなければならないことが挙げられます。日本語が使えるツールを探している場合、適さないサービスです。

FigmaはWebブラウザから利用が可能なデザインソフトで、ワイヤーフレーム作成や画像編集など、幅広い作業に対応しているのが特徴です。一般的なダウンロードソフトと同じくらい多様な機能を揃えており、簡易Illustratorとでも言えるようなクオリティで、プロレベルのWebデザインの現場でも通用することが期待できます。オンラインツールなので、リアルタイムで1つのデータに複数人でアクセスし、共同作業を進めるといった使い方も可能です。注意点としては有料のサービスであることと、オフライン環境では利用機能に制限がかかる点が挙げられます。

XDはUIデザインに特化した、Adobeが展開するデザインツールです。近年需要が高まっているユーザーインターフェースの制作・改善に必要な機能が揃っているため、高いユーザビリティを備えたデザイン制作に携わる場合は役に立つでしょう。Adobe製品ということもあり信頼性は高く、導入実績も豊富という点も魅力です。注意点としては、Adobe製品特有のサブスクリプション形式の利用となることと、Webサイト全体のデザインを行いたい場合、他のツールと連携して進めなければならない点が挙げられます。

wireframe.ccは、Webブラウザ上で自由にワイヤーフレームを描くことに特化したサービスです。アカウント登録は利用にあたって必要なく、サービスを開いてすぐにデザイン業務に取り掛かることができるスピード感があります。ドラッグ操作で簡単にワイヤーフレームを仕上げることができ、デザインに慣れていない人でも安心して運用できるでしょう。ただ、シンプルな操作性に特化したサービスでもあり、複雑なデザインを実現したい場合には機能不足を感じることもあるかもしれません。また、基本的には英語でのサービス利用となるため、言語面でのサポートが得られにくい点も注意が必要です。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下のとおりです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

この記事では、デザインカンプとはどのようなものか、作成の必要性や作成の手順などについて解説しました。デザインカンプは質の高いデザイン業務には不可欠な作業ですが、実施には相応のスキルやツールの整備が必要です。アイミツでは、そんなデザインカンプを確実にこなし、ハイクオリティなデザインを仕上げられる制作会社を紹介しています。ホームページのデザイン制作でお悩みの際には、お気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】
デザインに強いホームページ制作会社一覧

【費用感を知りたいという方はこちら】
ホームページ作成の費用・相場