デザインカンプとは？作る目的や作成手順を解説

Webサイトの制作現場で使われる「デザインカンプ」という言葉。

しかし「デザインカンプって何？」と、言葉の意味がわからずに困惑した経験のある方もいると思います。

デザインカンプとは「デザインの完成見本図」であり、おもに制作者とクライアントの間のイメージ共有のために作られます。

本稿ではデザインカンプを作る目的や作成手順などを詳しく解説します。

デザインカンプとは

「デザインカンプ」とはWebサイトの完成イメージのことであり、Webサイトの骨組みである「ワイヤーフレーム」とは違い、画像や記事などの各要素を実際に配置した見本図に該当します。

似た意味の言葉として「モックアップ」がありますが、こちらは「プロダクトの試作品」を意味する言葉であり、デザインカンプとほぼ同じ意味で使われています。

これら2つの言葉を明確に使い分ける必要はなく、「完成品に至るまでのイメージ図」だと考えておきましょう。

デザインカンプが必要な理由

デザインカンプはクライアントとのイメージ共有のために作られ、Webサイトをどのような見た目にするか、どのような機能をつけるかなど細かい部分まで確認するために用いられます。

Web制作は発注側の要望、意見をヒアリングする過程を経てから実際の作業に着手しますが、言葉だけを使ってやり取りをすると認識の齟齬が生じがちです。

もしクライアントとの認識違いがあると、大部分が完成してから作りなおさなければなりません。

それを防ぐために数点のデザインカンプを提出し、クライアントの要望を深いところまで汲み取れるようにし、細かいところまでイメージをすり合わせるというわけです。

デザインカンプの作成手順

デザインカンプ作成はワイヤーフレーム作成後に着手します。

まずは制作するWebサイトの目的や狙いを明確にし、そこから参考サイトを見つけ、デザインカンプ制作作業を始めます。

制作するWebサイトの目的や狙いを明確にする

デザインカンプ制作前にWebサイトの目的や狙いを明確にします。

Webサイト制作には必ず目的があるはずで、それは「顧客に自社のサービスや商品を紹介して成約につなげたい」、「新入社員を求人したい」などさまざまです。

どんなターゲットに何を訴求したいかによってデザインは異なるので、Webサイト制作の目的設定後にターゲットを選定し、制作メンバーで細かい部分をすり合わせていきます。

参考サイトを見つける

続けて、デザインカンプ作成の参考サイトを見つけます。

プロのWebデザイナーが制作した上述の目的と同じコンセプトのWebサイトを参考にし、画像や文字サイズ、ボタンの色などを決めます。

その際にユーザーの見やすさや使いやすさ、クライアントの要望に適しているか、このサイトを参考にしてクライアントの魅力を伝えられるかなどを考慮し、3～10個ほど選びましょう。

アートボードの幅や高さを設定

一般的にデザインカンプ作成時はPhotoshopやXDなどのWebデザイン作成に適したソフトを使用し、アートボードの幅や高さを1280～1920pxの間に設定してから作業をします。

全ての構成案を配置

続いてデザインカンプ制作前に用意した構成案を全て配置します。

その後、サイト内に配置する各種パーツを作成するので、もしパーツ制作が必要な場合はギャラリーサイトを参考にしてみてください。

素材の配置

完成イメージを明確にするため、ボタンやアイコン、画像などの各要素を配置します。

画像が決まっていない場合は画像素材の選定を後回しにし、フォトストックサイトなどからイメージに適した素材をダミー画像として配置します。

各素材を全て配置する理由は完成イメージを明確にするためで、イメージを明確にすることで修正の必要の有無を判断できます。

コンテナ幅を決める

テキストを入れるコンテナ幅を決定し、そこにガイド線を引きます。

コンテナ幅は800px～1300pxの大きさが一般的で、ガイド線はコンテナ幅に沿うように、要素を整列させるために必要な箇所に引きます。

配色を決める

サイト全体の配色はクライアントの要望があればそれを取り入れますが、自分で決める場合は企業のアイデンティティを示すロゴカラーなどを参考にしましょう。

また、ロゴカラーを参考にする場合は「なぜその企業はそのロゴカラーを採用しているのか」という理由も把握しておきましょう。

デザインを作成する

これまでの手順を全て終えたら、デザインの作成に入ります。

参考サイトからパーツやレイアウト、テキストの配置方法などを真似してみても良いでしょう。

また、Webサイトはユーザーの利便性を重視して作られていることが多いので、参考サイトを見る際は「なぜこの箇所にこのデザインのパーツが配置されているのか」を考えるようにしましょう。

レスポンシブデザインの場合

レスポンシブデザインのデザインカンプを作る場合は、端末に応じて作成する必要があります。

パソコンメインのデザインを組むと、画面幅が小さくなった際にどう表現するかが実装時にわからなくなることがあります。

そのためメインデバイスとしてスマートフォン（480px）、タブレット（768px）の2種類のデザインカンプを作成し、そこから他の画面幅でのデザインカンプも作成するようにしましょう。

デザインカンプを作成するときの注意点

デザインカンプはそれ単体で完結するものではなく、コーディングを経てWebサイトとして完成させるための前段階の制作物に位置づけられています。

そのためデザインカンプ作成時はコーディング時の負担を考慮することが必要です。

また、デザインカンプを作成する時はオリジナリティに縛られず、構成案に縛られないことも大切です。

コーディングの負担を考慮する

コーディングのことを考慮すれば、以降の作業をスムーズに進められます。

具体的には「文字サイズを10px以下にしない」、「ブロック同士の余白やデザインを統一する」など、Webサイトコーディング時に守るべき数値や規則性を踏まえることがこれに該当します。

コーディング時の負担を考慮するだけで、エンジニアが実装作業をしやすくなり、デザイナーへの確認の手間などもなくなるので作業効率が上がります。

オリジナリティにとらわれない

デザインカンプ作成時はオリジナリティに固執せず、複数の参考サイトの構成を踏まえて「ユーザーの使いやすさ、見やすさ」を第一に考え、「良い部分」を反映させるようにしましょう。

そもそもゼロからデザインを作成することはプロでも難しく、ユーザーの利便性を考えてデザインを組むなら、どうしても共通する部分は出てきます。

デザイナーが参考にするWebサイトも必ずどこかのサイトや周囲のデザインを参考にして作られているので、最初からオリジナリティを出そうとはせず、複数のサイトを参考にして組み合わせたり言語化してみたりしてください。

そういったインプットとアウトプットの繰り返すことで、オリジナリティ、つまり斬新なデザインの組み合わせが自然と出てくるものです。

構成案にとらわれない

デザインの構成案はあくまで「案」なので、ある程度の配置やテキストの変更は可能です。

デザインカンプ作成時に「このデザインのほうが良いのではないか」と思ったなら、迷わず変更してみましょう。

変更後のほうが良いと判断できたら、それを実際のデザインに反映させてみましょう。

デザインカンプ作成時のツール2選

デザインカンプは紙でも作れますが、デザインツールを使えばクライアントや制作メンバーとのデータも共有もしやすいです。

ここからはデザインカンプ作成時のおすすめツールを2つ紹介します。

Photoshop

出典：https://www.adobe.com/jp/products/photoshop.html

「Photoshop」はデザインカンプ、Webデザイン、コーディング時の測定ツールとして使われるデザインツールです。

Photoshopは画像編集ソフトとして多くのデザイナーから愛用されており、さまざまなデザインの作成に適しています。

XD

出典：https://www.adobe.com/jp/products/xd.html

「XD」はPhotoshopよりも操作性がシンプルで、UIデザインに特化しています。

ワイヤーフレームからデザインカンプ、コーディング時の測定までこれで済ませることが可能です。

まとめ

ユーザビリティ（ユーザーの利便性）を考えたWebサイトは、デザインカンプを作り込むことで制作できます。

より閲覧しやすく使いやすいWebサイトを作れるように、レスポンシブやユーザビリティを意識しつつデザインカンプを作成しましょう。