デザインカンプとは?デザインカンプの意味と作り方を解説

フリーランスのお仕事などでデザイナーを目指す方も多いでしょう。デザインの仕事について勉強を進めていく時には、デザインカンプという言葉を知る必要があります。デザインカンプや作り方を知ることで、本格的なデザインのポイントが理解できるようになります。デザインカンプの意味と作り方を解説します。

[デザイン用語]デザインカンプとは


デザインカンプとは、デザイナーの仕事をする上では欠かせないデザイン用語になります。WEB制作やアプリ制作に携わる人には、必須スキルとも言われています。デザイン用語の一つ、デザインカンプについて紹介します。

デザインの完成見本

デザインカンプを簡単に説明すると、求められている作品の完成模型を作ることです。個人で行う仕事ではなく、チームや複数のメンバーで行う時にはデザインカンプは重要な役目を果たします。具体的な色や画像がある見本により、完成イメージがぶれずにゴールまでたどり着くことが出来ます。

ラフよりもさらに細かい

デザインの仕事を始める時には、さきに漠然とした枠組みや雰囲気をしめすラフ案・ラフ画を作成することが多いです。デザインカンプは、ラフよりもさらに細かいことを指示するものです。

モックアップとも呼ばれる

デザインカンプは、別名でモックアップと呼ばれます。モックアップの代表といえば、スマホのショップにある等身大の模型があります。デザインカンプという完成模型があることで、顧客に製品のイメージを正しく想像させることができます。

デザインカンプを作る目的


デザインカンプを作る目的やメリットはどのようなものなのでしょうか。

完成図をイメージしやすくする

デザインはフリーランスの代表的な仕事ですが、実際には多くの人数で行うこともあります。クオリティの高い仕事をするためには、メンバーとのイメージの共有が重要になります。
デザインカンプがあることで、メンバー全員が完成図をイメージしやすくなるというメリットがあります。

Web制作では欠かせない

完成模型があることで作業効率が良くなることは言うまでもないでしょう。特にWeb制作ではデザインカンプが欠かせません。サイトやホームページは、HTMLなどを用いた実装段階にまで行くと、デザインの修正や変更が難しくなります。初期の段階で完成イメージが明確である必要があるため、デザインカンプは必須と言えるのです。

類語ワイヤーフレームとの違いは?


ワイヤーフレームというデザイン用語があります。デザイン用語のデザインカンプと類語ワイヤーフレームとの違いについて紹介します。

ワイヤーフレームとは

ワイヤーフレームとは、デザインをする前に大まかな枠組みを定めることを言います。レイアウトとも言いますが、Web制作などではスマホやパソコン画面上に表示される全体図や、大まかな外観を先に決める工程になります。どこに何を配置するかなどサイトのレイアウトを決めます。
  

デザインカンプの前段階

ワイヤーフレームは、デザインカンプの前段階のステップであると言えるでしょう。デザインカンプの段階では、ワイヤーフレームで定めたものに対して、具体的な装飾を施します。

デザインカンプで使われる作成ツール


デザインカンプは具体的な図や色の貼り付けが重要になります。そのためパソコンソフトをメインとした専用のツールが欠かせません。デザインカンプで用いられることが多い作成ツールについて紹介します。

フォトショップ(Photoshop)

デザインカンプの作成ツールとして有名なものがフォトショップ(Photoshop)になります。写真加工のソフトとしても知られていますが、デザインスペースというレイアウトを定める機能があります。定めた枠組みに対して色付けや画像の選定がスムーズなためデザインカンプ作成にも人気が高いです。

イラストレーター(Illustrator)

イラストレーター(Illustrator)というパソコンソフトも、フォトショップと同様にデザインカンプに用いられています。高機能という魅力があるのですが、パソコンソフト業界では有名なAdobe社製で少し価格が高く設定されています。

Webサイトのデザインカンプの作成


質の高いデザインカンプを作り上げるポイントはどこにあるのでしょうか。Webサイトのデザインカンプ作成のポイントについて紹介します。

Webサイトの目的を決める

デザインカンプを作成する上で一番重要なことはWebサイトの目的を決めることと言えます。明確な目的があることにより、その目的から逆算してデザインの色合いや雰囲気といったものを考えることができます。

参考になるサイトを見つける

ラフ案やラフイメージが仕上がってくると、具体的なイメージも欠かせなくなります。ライバルサイトや具体的な参考になるサイトを見つけることが可能であれば、サイト分析を入念に行って自前のイメージに取り入れたり、反対に差別化ポイントを設けたりしましょう。

ワイヤーフレームを作成

大体のイメージやアイデア・方向性が定まったら、枠組みとなるレイアウトに取り掛かることが出来ます。パソコンソフトなどを用いて、ワイヤーフレームを作成する段階に移ります。サイト全体の骨組みを決めることで完成に一歩近づくことが可能です。

パーツを作成

ワイヤーフレームがある程度仕上がってきたら、デザインカンプに入る直前まで来たと言えるでしょう。あとは色や画像を貼り付けていく工程に入ります。もし不足なものが考えられたら、専用パーツを作成して、Webサイトに盛り込むことも検討しましょう。そのうえでデザインカンプの最終段階に進むことが出来ます。

まとめ

今回はデザインの仕事をする時に必要となるデザインカンプについて紹介しました。デザインカンプは、デザインの土台となるレイアウトを定めた後に行う詳細な部分にアプローチする作業です。漠然としたラフやレイアウトを具体的な形にしていくための、不可欠な部分だと言えるでしょう。デザインカンプの技術をしっかりと身につけていくことをおすすめします。

関連記事

ページ上部へ戻る