デザインカンプとは？作る意味はどこにある？作り方とともに解説

WEB制作現場に身を投じれば、必ずといっていいほど耳にする「デザインカンプ」。ひとことで言えばWEBサイトの見本となる完成イメージの事ですが、サイトをデザインする際には非常に重要な役割を持っています。

しかし、特にWEB制作の現場で関わる方以外がデザインカンプを作る意味を本当に理解せず、ただ「そういうものらしいから」という理由だけで作ったとしても、時間の無駄になるだけでなく、完成したWEBサイトにもデザインカンプを作る効果は反映されません。

そこでこの記事では、デザインカンプの基礎と共に、作る意味と作り方を詳しく解説します。

デザインカンプの基礎知識

デザインカンプとは一体なんなのか？そして、WEBサイトを制作する際なぜ作らなければならないのか？

まずは、そんな基礎知識から確認します。

デザインカンプとは完成イメージの事

先述しましたが、デザインカンプとはひとことでいえばWEBサイトの見本となる「完成イメージ」で、正式名称を「Design Comprehensive Layout」といいます。

「Comprehensive」には「包括的な」「総合的な」という意味がありますので、「Design Comprehensive Layout」を日本語で言うのであれば、「デザインの総合的なレイアウト」となります。

サイトのデザイン段階で作られる、レイアウトも含めた完成品の全体像を把握するためのイメージです。

WEB制作の現場では、単に「カンプ」と呼ばれることもあります。

デザインカンプを作る意味

デザインカンプを作る意味は、主に次の3つです。

メンバー同士でイメージ共有されていなければ、各々がバラバラに作業した結果まったく予期せぬサイトができあがるということになりかねません。

そして、完成イメージをクライアントと制作者が共有しておかなければ、完成後に「イメージが違うからイチから作り直す」といった状況を引き起こしかねず、こうなればクライアントと制作者双方にとって不幸な結果をもたらします。

デザインカンプで完成イメージ、つまりはゴールを明確にして走ることが、ムダのない効率的な作業へとつながるのです。

デザインカンプとモックアップ

デザインカンプと混同されやすい言葉に、「モックアップ」があります。

しかし、モックアップとは「模型」という意味を持っていますので、もともとはプロダクトデザインの世界で使われる言葉です。

どちらも完成状態を共有するために作られる構成イメージとして、同等の意味を持っているため、WEB制作の現場でもほぼ同じニュアンスで使われることはあります。

とはいえ、WEB制作の現場ではデザインカンプという言葉のほうが多く使われるため、サイトデザイナーにとってはより馴染みのある言葉です。

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

もう1つ、デザインカンプと混同されやすい言葉として、「ワイヤーフレーム」がありますが、モックアップの場合と違いこちらはその意味合いが大きく異なります。

ワイヤーフレームとは、デザインカンプを作成する前に作成する「ページごとのレイアウト図」を指しています。

WEBサイトを作成する場合、まずこのワイヤーフレームをWEBディレクターなどが作成し、それをもとにしてWEBデザイナーがデザインを作っていくのです。

こうしてできあがったデザインの完成予想図がデザインカンプであるため、デザインカンプとワイヤーフレームは作られる段階も違えば、その役割も違います。

デザインカンプの作り方

次に、デザインカンプの作り方を解説します。

あくまでザッとした大まかな流れの解説とはなりますが、手順自体はお分かりになると思いますので、デザインカンプ制作の参考となるはずです。

WEBサイトの目的を決める

まず必要なのが、作成するWEBサイトの目的を決めることです。

会員登録や商品販売が目的なのか、企業のブランドを周知することが目的なのかなど、サイトの目的によってターゲットや訴求内容も違い、それによって適切なデザインも大きく異なります。

そうした目的を明確にした上で、クライアント、制作メンバー全員がすり合わせを行います。

この段階で、イメージを共有するために作る骨組みが「ワイヤーフレーム」です。

参考となるサイトを探す

WEBサイトを作るためには、全体の骨組み（ワイヤーフレーム）と、中身にあたる「テイスト」を決める必要がありますが、このときは参考となるWEBサイトを見つけるのが近道です。

一見、イチから作成することが理想的に思えますが、すべてをオリジナルで制作するのはあまり現実的ではありません。

むしろ競合他社のすぐれたWEBサイトを参考にデザインを考えたほうが、ユーザーの安心感なども含めて遥かに効率的です。

ただし、この場合1サイトのみを参考にすると、似たようなイメージになってしまい発想の柔軟さも損なわれます。

少なくとも3～10のサイトを選び、クライアントの要望も踏まえたテイストを考えることが重要です。

サイトイメージの下書きを作る

ワイヤーフレームにテイストを加え、肉付けするイメージでデザインカンプの下書きを行います。

ワイヤーフレームの状態で細かい指示がある場合を別として、装飾や色といった要素を、ブランドイメージやサイトのターゲットに合わせて決定していきます。

この作業は、AdobeのPhotoshopやIllustratorを使用して行うことが多いと思いますが、個人でWEBデザインを行う場合は、GIMPなどの無料ソフトもおすすめです。

サイズとレイアウトを決めガイドを引く

具体的なイメージが固まった段階で、実際に制作する前に幅や高さといったサイズを決め、ガイドラインを引いてます。

ユーザーが利用するブラウザ環境を想定し、適切なサイズを決定しなければブラウザによってレイアウトが崩れたり、パーツの配置位置がズレたりしてしまいます。

多くのWEBサイトでは、PCであれば1280px✕1920pxといったサイズが使われていますが、このサイズのままではスマホやタブレットなどでは見づらい画面となることも考えられます。

そのため、表示画面を表わすガイドラインの幅は、大体1000px前後で制作しておくことが、どんなデバイスでも対応可能なためおすすめです。

パーツを作成する

テキストや画像、ボタンやリンクなどのパーツを作成します。

その後それぞれに具体的な色付けをし、サイズを調整してガイドに沿ってパーツを配置していけば、デザインカンプは完成です。

パーツには、ユーザーの視線を引き付けるファーストビューや、サイト内移動を容易にするナビゲーション、商品やサービスの情報といった要素がありますが、これらのデザインイメージがバラバラにならないよう、注意しながら制作しなければなりません。

デザインカンプのコツ

デザインカンプを作成する場合は、次のようなポイントについて考えていくことが求められます。

ここでは、デザインカンプ制作時のコツとして解説します。

構成案は細部まで考える

目的を考える際やワイヤーフレームを考える際など、構成案の決定時にはできる限り細部まで考えます。

ターゲット層やユーザー、あるいはペルソナ。結果に導くCV率を上げるデザインなど、考えるべきことは多岐にわたり、それらが細かく決定されていればいるほど、その後のワイヤーフレームからの落とし込みや参考サイト探しなども、明確な目的を持って行えるのです。

ただし、どれだけ

オリジナルにこだわらない

競合他社のサイトを参考にしながら作成することが良い、とは先述しました。

このとき、オリジナリティを出そうと考えすぎないことが重要です。

WEBデザインを行う際に大切なのは、オリジナリティがあることではなく、目的に沿ってユーザーが見やすく使いやすいサイトであることです。

そのためには、既存のうまく行っている優れたデザインの良さを「いいとこ取り」する感覚でデザインカンプを作ることが、結果的に「良いサイト」を生み出すことになります。

コーディングを意識する

WEBデザインをするということは、グラフィックデザインをする場合と違い、コーディング作業が必要となります。

そのため、デザインカンプを作る際にも数値を意識することが重要です。

こうしたことを意識してデザインカンプを作成すれば、チームとしてその後の作業も効率的に進められるでしょう。

全体バランスを見ながら作成する

デザインカンプを作成する際は、必ずしも上から順番に作っていく必要はありません。

作りやすそうなところから作っていくことで、思考のめぐりが良くなったり、モチベーションが維持できたりもします。

また、構成案にしばられすぎず、新たによりよいデザインのアイデアが浮かんだ場合は、パーツを追加したり若干のレイアウト変更を行ったりしても構いません。

ただし、いずれの場合でも重要なのは、全体のバランスを見ながら進めていくということです。

最初に決めたサイトの目的さえズラさず、全体のバランスを見ながら作成できれば、その都度のアイデアを盛り込むこと自体は問題ありません。

まとめ

WEBサイトを制作する際には必ず作成しなければならないデザインカンプの基本と、作る意味、さらには具体的な作り方の手順について解説しました。

デザインカンプとは、クライアントを含めたすべての関係者が、サイト作成前に共有しておくべき「完成イメージ」を形にしたものです。

なんのためのサイトなのかの目的を明確にすることで、ターゲットや訴求内容も明確になります。

まずは最初のすり合わせを徹底的に行い、準備段階に時間と手間を割くことで、結果的に手戻りの少ない効率的な制作過程を進められます。

そのための重要な指針。それこそがデザインカンプなのです。