Webデザインの完成見本である「デザインカンプ」。WebサイトやWebページがどんなデザインになるのかを、クライアントやコーダーなどに伝えるために欠かせません。
本記事ではデザインカンプとは何か、何のために使われるのかを解説。スムーズに制作を進めるためのデザインカンプの作り方や作成時に意識したいこと、作成に使えるツールも紹介します。
- デザインカンプとは何か、似た言葉との違い
- デザインカンプの作り方と、作成時に意識すべきこと
- デザインカンプの作成に使えるツール5選
デザインカンプとは？
デザインカンプはWebサイトやWebページの視覚面の構成となる、Webデザインの完成見本のことです。クライアントやチームメンバーなどの関係者に、最終的にどのようなデザインを作るのかを共有するために必要です。単に「カンプ」と呼ぶこともあります。
デザインカンプを共有することで、関係者との意思疎通がしやすくなります。特にクライアントとの意思疎通は重要で、完成形を見ながらデザインの詳細を決めていきましょう。
モックアップとの違い
デザインカンプと似た言葉として、「モックアップ」が挙げられます。モックアップはデザインの完成形や試作品を示す言葉で、デザインカンプと同じ意味で使われます。
ただ、デザインカンプがWebデザインの現場で使われることが多いのに対し、モックアップは主にプロダクトデザインで使われます。
ワイヤーフレームとの違い
モックアップと同じく、「ワイヤーフレーム」もデザインカンプと混同されやすい言葉です。ワイヤーフレームはデザインの構成案や設計図のようなもので、デザインカンプはこれに基づいて作られます。
どちらもクライアントやチームメンバーなどの関係者と共通認識を持つために使われるものです。
ただ、デザインカンプを作ってから大きな修正が発生すると手戻りが多くなります。ワイヤーフレームの段階で認識のすり合わせを行い、大まかなデザインが決まってからデザインカンプを作成するといいでしょう。
デザインカンプの作り方6ステップ
デザインカンプの作り方は大きく6つの工程に分かれます。
- STEP1．デザインの目的を決める
- STEP2．参考にするデザインを探す
- STEP3．ワイヤーフレームを作る
- STEP4．ガイドを引く
- STEP5．パーツを配置する
- STEP6．必要に応じてレスポンシブデザインのカンプも作る
それぞれの工程の詳細を確認していきましょう。
STEP1．デザインの目的を決める
まずはWebデザインの目的を決めます。目的を決めることで、そのデザインは誰に向けたものなのか（ペルソナ）も見えてきます。具体的には「商品やサービスの販売」「会社のブランディング」などの目的が考えられるでしょう。
掲載先のWebサイトについて確認することも大切です。たとえばコンテンツマーケティング用のメディアと、自社のブランディングのためのオウンドメディアでは、求められるデザインは変わってくるでしょう。
STEP2．参考にするデザインを探す
Webデザインの目的を決めたら、参考にするデザインを探しましょう。「0→1」で作るよりも、参考となるものがあった方が、デザイン制作にかかる時間を短縮できます。
参考のイメージをいくつかピックアップし、クライアントに共有することで、共通認識も持ちやすくなるでしょう。
STEP3．ワイヤーフレームを作る
参考にするデザインが決まったら、それを元にフレームワークを作りましょう。フレームワークは1つではなく、複数作成し、クライアントと共有することをおすすめします。
ここでも共通認識づくりが大切です。フレームワークへのフィードバックを通して、クライアントの要望やイメージしているデザインを引き出していきます。
なお、フレームワークの作成ツールは紙でもデジタルでも構いません。大切なのはいくつかの候補を出すこと、クライアントからフィードバックをもらい、イメージを固めていくことです。
配置する要素が多い場合は2カラム、少ない場合は1カラムのように、Webサイト・ページのカラム数もここで決めます。
STEP4．ガイドを引く
フレームワークが完成し、Webサイト・ページの大まかなレイアウトが決まったら、ガイドを引きましょう。各カラムやフッター・ヘッダーなどの幅・高さを調整しながら、レイアウトが崩れないようにガイドを引いていきます。
STEP5．パーツを配置する
ガイドを引いたら、Webサイト・ページに配置するパーツを作り、配置していきます。ここでは全体のバランスを考え、各パーツの色味や大きさ、配置を調整していきましょう。テキストのフォントやフォントサイズも決めていきます。
STEP6．必要に応じてレスポンシブデザインのカンプも作る
WebサイトやWebページをレスポンシブデザインに対応させる場合、各端末でどのようにデザインを表示するのか、端末ごとのデザインカンプも作りましょう。
この場合、各端末のデザインカンプを並行して作るのではなく、まずはメインの端末用のデザインカンプを作ります。メインのデザインカンプを先に作り、端末に合わせて調整していくことで、効率よく作業を進めていけるでしょう。
