デザインカンプ作成で差をつける！Webデザイナーが知るべき秘訣とは？

2024年6月23日

今回の記事では、Webデザインの工程に欠かせないデザインカンプの作り方に関して解説してきます。

デザインカンプは、Webサイトやアプリなどのデザイン制作において、非常に重要な役割を果たします。今回の記事を参考に、目的を明確にしたデザインカンプを作成し、プロジェクトを成功に導いていきましょう。

デザインカンプとは？

デザインカンプは、Webサイトやアプリなどのデザインを視覚的に表現したものです。正式名称は「design comprehensive layout」といい、略して「デザインカンプ」と呼ばれています。

デザインカンプは、Webデザイナーのスキルが一番問われる箇所であり、ご自身のセンスが反映されます。正社員やフリーランスのWebデザイナーとして稼いでいくには。デザインカンプの実力で決まるといっても過言ではありません。

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

デザインカンプは、クライアントとの認識合わせや制作の効率化に役立ち、デザインの最終確認にも欠かせません。

デザインカンプを作ることで、以下のようなメリットがあります。

クライアントとの認識合わせをスムーズに行える: デザインカンプがあれば、クライアントとデザインイメージを共有しやすくなります。具体的なデザインを見せることで、認識の齟齬を防ぎ、スムーズに認識を合わせることができます。
制作の効率化: デザインカンプがあれば、デザインを理解しやすくなり、作業の効率が上がります。また、デザイン変更が発生した場合も、修正箇所が明確なので、スムーズに対応できます。
デザインの最終確認: デザインカンプは、デザインの最終確認にも役立ちます。印刷したり、画面に投影したりして、デザインを確認することで、細部までチェックすることができます。

モックアップやワイヤーフレームとの違いは？

デザインカンプと混同されやすいのがモックアップとワイヤーフレームです。

モックアップ:実際のデザインに近い見た目で、操作のしやすさなどを確認できます。

ワイヤーフレーム:サイトの構造やレイアウトを簡易的に描いたもので、デザインの詳細までは決まっていません。

デザインカンプは、モックアップほどの詳細さはないものの、ワイヤーフレームよりも具体的なデザインを表現できます。そのため、クライアントとの認識合わせや、制作者への指示をするときに最適です。

デザインカンプの作り方を6段階で解説

ここでは、デザインカンプの作り方を6段階で解説していきます。

1. 目的とターゲットを明確にする

まず、制作するWebサイトの目的とターゲットを明確にしましょう。どのような情報を伝えたいのか、ターゲットやペルソナは誰なのかによって、デザインの方向性が大きく変わってきます。目的とターゲットを明確にすることで、ブレのないデザインカンプを作成することができます。

2. 情報設計を行う

Webサイトにどのような情報を掲載するのか、各ページの構成をどのようにするのかを整理します。ユーザーがスムーズに情報を見つけられるように、論理的な情報設計を心がけましょう。

情報設計では、サイトマップの作成等が含まれます。

3. ワイヤーフレームを作成する

情報設計を元に、Webサイトの骨組みとなるワイヤーフレームを作成します。ワイヤーフレームは、具体的なデザインではなく、各要素の配置や役割を線や図形で表現したものです。

デザインカンプ作成前にワイヤーフレームを作成することで、全体のイメージを把握しやすくなり、スムーズに作業を進めることができます。

4. デザインカンプを作成する

ワイヤーフレームを元に、実際のデザインをしていきます。

色、フォント、レイアウトなどを調整し、目的とターゲットに合ったデザインを目指しましょう。デザインカンプ作成ツールを使うと、効率的に作業することができます。

5. フィードバックをもとに修正する

デザインカンプが完成したら、クライアントや関係者からフィードバックをもらいましょう。フィードバックを元に、デザインカンプを修正していきます。

修正を重ねることで、より良いデザインカンプに仕上げることができます。

6. 必要に応じて、レスポンシブデザインも作成する

デザインの仕事によっては、レスポンシブデザインを作成する場合もあります。

レスポンシブデザインは、PC以外の端末（スマートフォン、タブレット）にも対応したデザインのことです。昨今では、スマートフォンやタブレットの使用者が多いので、それに対応したデザインを作成する必要性が高くなっています。

そのため、レスポンシブデザインもWebデザインにおいては必要不可欠です。

デザインカンプを作る際のポイント

デザインカンプは、Webサイトやアプリの完成イメージを共有するための重要な資料です。しかし、目的や内容を誤ってしまうと、プロジェクトの進行を妨げたり、思わぬ修正が発生したりする可能性があります。

デザインカンプを作る際には、以下の点に注意しましょう。

目的を明確にする

デザインカンプを作る前に、目的を明確にすることが重要です。クライアントとの認識合わせなのか、　制作者への指示なのか、目的によって必要な情報が変わってきます。

クライアントとデザインイメージを共有し、認識を一致させることが目的であれば、全体のデザインや配色、主要な要素などに重点を置いたカンプを作成します。

デザインの最終確認が目的であれば、印刷したり画面に投影したりして、デザインの全体像や細かい部分までを入念に確認できるカンプを作成しましょう。

必要な情報を盛り込む

目的に応じて、以下のように必要な情報をしっかり盛り込みましょう。

コンテンツ：テキスト、画像、動画など、ユーザーに提供する情報が適切に組み込まれているか。
ブランディング要素：ロゴ、カラースキーム、タイポグラフィなど、ブランドのアイデンティティに沿った要素が反映されているか。
ナビゲーション：ユーザーが簡単に情報を見つけられるように、効果的なナビゲーションが設計されているか。
インタラクション：ボタンやリンクの動作など、ユーザーのインタラクションが明確にされているか。

クライアントとの認識合わせであれば、全体のデザインや配色などを中心に、開発者への指示書であれば、各要素の寸法や配置などを中心に記載します。

わかりやすく表現する

デザインカンプは、誰が見てもわかりやすく表現する必要があります。視覚的に理解しやすいようにしましょう。

以下の点に注意しておくと、より分かりやすいデザインカンプを作成できます。

専門用語は避ける: デザイナーにとって当たり前の専門用語でも、クライアントや制作者にとっては理解できない場合があります。できるだけ分かりやすい言葉で説明しましょう。
図やイラストを活用する: 文章だけでは伝わりにくい部分は、図やイラストを活用して視覚的に表現しましょう。
レイアウトを工夫する: 必要な情報が整理されていて、見やすいレイアウトを心がけましょう。
注釈をつける: 必要に応じて、各要素に注釈をつけ、意図を明確にしましょう。

コーディングを意識する

デザインカンプを作成する際は、コーディングで表現できるように意識して作成しましょう。

コーディングを意識しないまま作成してしまうと、制作者が実装をするとなった際、コーディングで表現できない事態が発生し、修正をする手間が発生してしまいます。

そのため、作業の効率化のためにも、コーディングの知識は最低限必要です。

Webデザインでコーディングはどのくらい必要かは、こちらの記事で詳しく解説しています。

デザインカンプ作成におすすめのツール

1. Photoshop

Photoshopは、画像編集に特化したデザインツールです。

画像やテキストの編集や加工ができ、3D機能などが搭載されているので、Webデザインにおいてよく使用されています。デザインカンプ作成においても、自由にカスタマイズできるので、高品質なものを作成可能です。

公式サイト : https://www.adobe.com/jp/products/photoshop.html

2. Illustrator

Illustratorは、グラフィック編集に特化したデザインツールです。

ロゴやアイコン、イラストなどの作成や編集ができるので、デザインカンプ作成にも非常に役立ち、細かな調整もできるので、より綺麗なデザインを作成可能です。Photoshopと一緒に使いこなせるようになると、デザイナーとしてのスキルも大幅に身につきます。

公式サイト : https://www.adobe.com/jp/products/illustrator.html

3. XD

XDは、WebサイトやモバイルアプリのUI/UXデザインに特化したデザインツールです。

全体のデザインカンプの作成が可能で、効率良く作業を進められます。また、デザインカンプのみならず、要素からHTMLやCSSのを書き出すことも可能なので、コーディングをどのようにすれば良いかをすぐに把握できます。さらに、プロトタイプやプレビューも可能なので、デザインカンプ作成に必要な要素をほぼ網羅していると言えるでしょう。

公式サイト : https://helpx.adobe.com/jp/xd/get-started.html