Facebookでシェア
X（Twitter）でポスト
LINEでシェア
※ 本コンテンツにはプロモーション（PR）が含まれています。また、詳しい最新情報については公式サイトをご確認ください。
デザインカンプはWebサイト制作を進めるにあたって、クライアントと完成イメージを共有するために必要なものです。Webデザイナーとしてのスキルを試される、判断材料ともいえます。
今回は、デザインカンプの詳細やデザインカンプの作り方、押さえておきたいポイントまで解説します。
今回は、デザインカンプの詳細やデザインカンプの作り方、押さえておきたいポイントまで解説します。
デザインカンプとは？
デザインカンプとは、デザインの完成見本のことです。正式名称は「design comprehensive layout」で、「カンプ」や「モックアップ」と呼ばれることがあります。Webデザインに限らず、デザインの現場でよく使われる言葉です。クライアントとの完成イメージをすり合わせるために作成します。
Webサイト制作におけるデザインカンプの役割
通常のWebサイト制作では、まずWebサイトのコンセプトを決め、「ワイヤーフレーム」と呼ばれる設計図を作成します。次に、ワイヤーフレームを落とし込みながらデザインカンプで完成イメージを明確にし、コーディング作業をする流れです。デザインカンプは、Webサイト制作の方向性を決定する重要な役割を担います。チームでWebサイトを制作する場合は、Webディレクターがクライアントのヒアリングからワイヤーフレームまでを担当。そして、Webデザイナーがデザインカンプ作成を担当することが多いでしょう。Webデザイナーがそのままコーディング作業をする場合もありますが、専任のコーダーがいる場合はコーダーに任せます。
なお、デザインカンプが完成した時点で、コーディング作業に入る前にクライアントとすり合わせをします。そうすることで、イメージが違うからすべてやり直すといった事態を避けることが可能です。
デザインカンプの作り方
続いて、デザインカンプの作り方を紹介します。チームでWebサイトを制作する場合は、手順ごとに担当者が異なる場合があります。ただし、制作会社によって担当する役割はそれぞれ違うので、「Webデザイナーだから担当はここ」といった決まりはありません。上記を踏まえたうえで、デザインカンプの作り方を確認していきましょう。
ステップ1：Webサイトのコンセプトを決める
まずクライアントにヒアリングをして、制作するWebサイトのコンセプトを決めます。ターゲット層や配色、何を目的としてWebサイトを作るのかなど、クライアントとすり合わせをしましょう。ターゲット層が高齢の場合はテキストを大きめにする、メインで推したい商材を目に留まりやすい位置にするなど、クライアントの要望に沿った構成を考えることが大切です。
ステップ2：参考サイトを探す
Webサイトのコンセプトが固まったら、参考サイトを探します。参考サイトは3～5個程度選びましょう。参考サイトが多すぎると混乱してしまいますが、少なすぎるとひとつの参考サイトに引っ張られてしまいます。クライアントの要望に沿ったテイストで、最大限の魅力を引き出せる参考サイトを探しましょう。
ステップ3：ワイヤーフレームを作成する
参考サイトが決まったら、ワイヤーフレームを作成します。ワイヤーフレームは、紙に描いたりAdobeのツールを使用したりなど、自分がスムーズにできる方法でかまいません。なお、参考サイトはあくまでも参考です。コピーすると著作権法に触れてしまうので注意しましょう。
ステップ4：ガイド線を引く
ワイヤーフレームの次は、本格的にデザインカンプを作成します。デザインカンプの作成時は、まずガイド線を引きましょう。ガイド線とは、目安となる補助機能の線のことです。ガイド線は、真ん中と左右の位置に引くと作業がしやすくなります。Photoshopの定規機能を使えば、簡単にガイド線を引くことが可能です。
ステップ5：全体のバランスを考えてデザインカンプを完成させる
ワイヤーフレームを参考に、全体のバランスを考えながらパーツを組み合わせます。基本的には、はじめに決めた参考サイトに沿ってデザインカンプを作成します。しかしテイストが違う場合は、ほかの参考サイトを使ってもかまいません。変更するときはメンバーに共有しつつ、完成まで進めましょう。
デザインカンプを作成するときのポイント
デザインカンプは直感のみで作ってしまうと、コンセプトがブレてしまったり、あとのコーディング作業でつまずいてしまったりすることがあります。デザインカンプの作成時は、以下のポイントを押さえましょう。コンセプトを常に意識する
Webサイト制作は、はじめの段階でクライアントの要望をヒアリングし、コンセプトを明確にします。しかしデザイン重視で作ってしまうと、途中からコンセプトがブレてしまうことがあります。Webサイトのコンセプトは常に意識しておくようにしましょう。また、デザインカンプの前に着手するワイヤーフレームは、ターゲット層に刺さる構成になるよう、細部まで考える必要があります。クライアントのヒアリングからワイヤーフレーム作成までの工程は、Webサイト制作の要となる部分です。
こだわりすぎないようにする
Webサイト制作では、オリジナリティを求めすぎないようにしましょう。あまりにオリジナリティにあふれた奇抜なサイトだと、ユーザーにとって使いにくくなります。世の中のWebサイトは、なにかしらのサイトを参考にしながら制作されています。オリジナリティよりもユーザビリティ（ユーザーにとっての使いやすさ）を重視しましょう。
コーディングを考慮して作成する
Webサイト制作では、デザインの方向性が決まったらコーディング作業に移ります。最近ではコーディングが必要ないノーコードツールがありますが、デザインの段階からコーディングを意識することは大切です。自分がコーディング作業まで担当する場合はまだいいかもしれません。しかし担当が変わる場合は、コーディング作業の負担を減らせるよう考慮しましょう。
まとめ
デザインカンプとは、クライアントに提示する完成見本のことです。デザインカンプでクライアントから了承を得られたら、次はコーディング作業に取り掛かります。デザインカンプは、Webサイト制作の方向性を確認する重要な役割を担います。作成する際は、Webサイトのコンセプトを意識しつつ、コーディングについて考慮しましょう。更にスキルアップしたい方は、コエテコがおすすめするWebデザインスクールなどでの学習も検討してみましょう。
