2016年5月25日

アプリやWeb製作の「デザインカンプ」は、製作工程の中で非常に重要な役割があります。

デザインカンプは、Design Comprehensive Layoutの略で「デザインの完成予想作品」という意味がありますが、いったいどのような作業なのでしょうか。

デザインカンプの意味合いと重要性、作成ポイントについて解説します。

デザインカンプの意味合いと重要性

デザインカンプは、広告などの依頼主から理解を得るために作る完成予想作品のことです。

Webのデザインカンプであれば、まずヘッダーやメニュー、コンテンツなどの枠組みであるワイヤーフレームを構築する必要があります。枠組みが決定したら色をつけ、テキストや画像などを入れ込む作業があり、サイトの完成イメージを組み立て仕上げることをデザインカンプといいます。

最終的に仕上げる前にデザインカンプがあると、広告依頼主やその関係者、製作者が一同にデザイン案を共有でき、デザインに対して意見交換し修正を行った上で完成させられますよね。

製作工程で一旦予想完成図を共有することは、皆が納得しより良い内容にするためにとても重要な工程であり進行をスムーズにしてくれます。

クオリティの高いデザインカンプ作成のポイント

質の高いデザインカンプを完成させるには、どのようなポイントを押さえれば良いのでしょうか。Webサイトのデザインカンプを例に、以下のポイントをみていきましょう。

情報を整理しサイトの目的を決める

カンプ作成前に必ず詰めておきたいのが、サイト目的を決めることです。ここがぶれていると完成したサイトはアピールがあやふやになってしまい、ユーザーへの訴求効果が期待できなくなる可能性があります。

例えば狙うターゲット層や、資料請求や商品を購入するためのコンバージョンポイントなど、目的や狙いなどが違えばデザインも変わってきます。

おすすめなのはヒヤリングシートを作成し、打ち合わせ内容を記録しまとめることです。背景、目的、ターゲット、サイトの規模、予算、スケジュール、期待する効果などが明確になりますよ。

下書きをしワイヤーフレームを構築する

情報を整理しながら大まかな枠組みであるワイヤーフレームを決め、Web上での内容を見える化していきます。手書きでも良く、具体的な配置や装飾などを決めながら少しずつアウトプットしていく作業です。

ラフ案が仕上がってきたら参考になりそうなサイトを見つけ分析をし、具体的イメージを詰めていきます。既に出来上がっている参考サイトの詳細をよく調べて、良い部分をうまく自分のサイトに組み込みクオリティを上げていきましょう。

自分に向いているツールでパーツを作り込む

Webデザインのパーツを作り込んでいくには、Photoshop(フォトショップ)やIllustrator(イラストレーター)などのデザイン用ツールがメインとしてあります。

最近ではリアルタイムで共同作業ができるFigma(フィグマ)や、安価でコーディングを意識したデザインが得意なSketch(スケッチ)など、さまざまなツールが登場してきています。

どれもデザインを作り込むには有効なツールですが、自分の特性や得意なデザインに向いているものを使うことで魅力的なビジュアルが生み出せるでしょう。

デザインカンプの技術をしっかりと身につけよう

デザインカンプを作成することは、デザインを完成させプロジェクトを成功させる上で非常に大事な初期工程です。

まずはクライアントと共にイメージ共有と意見交換をし、目的や狙いを決めて作業を開始しましょう。ワイヤーフレームや下書きの段階で詳細を詰め、アウトプットしていくことも重要です。

このように情報を整理してからイメージを具体化することでデザインの方向性が定まり、最終作業での大規模修正や作業費用負担の増加などを防ぐことにも繋がっていきます。

カンプ作成ツールはメジャーなデザインツールだけでなく、自分の特性に合ったものにすることでより良いビジュアルとイメージに近づけるのではないでしょうか。安価で使いやすいツールもあるので是非活用してみましょう。