「デザインカンプって何？」
「デザインカンプをつくってみたい！」
「デザインカンプの手順を知りたい！」
Webデザイナーを目指している方、Webデザイナーになりたての方など、デザインカンプについてよくわからないと思っている方に向けてこの記事では、デザインカンプとは何か、どのように作成していくのかを解説します。
デザインカンプとは？
デザインカンプとは、WEBサイトやアプリデザインの「完成見本」のことです。
実際に完成したときの色、文字の大きさやフォント、使用写真、イラストなどの具体的なデザインを反映し、完成イメージを明確にするために作成するものになります。
依頼者のイメージとの認識違いがないように、最終的なデザインのイメージをクライアントに共有するために作成されます。
デザインカンプの制作が完了したら、クライアントに確認を行った上でデザインカンプを基にコーディング作業を行い実装します。
ワイヤーフレームとの違い
デザインカンプとよく混同されるのがワイヤーフレームです。
ワイヤーフレームは、デザインの枠組みを簡易的に表したものを指します。ワイヤーフレームはデザインの枠組みとなる、レイアウトやページの構造、情報の配置場所を簡易的に表したものになります。
デザインカンプの重要性
デザインカンプは、Webサイト制作の成功に不可欠なものです。
デザインの方向性を確認したり、デザインイメージを共有したり、細かなデザインの調整をするのに重要な役割を果たします。
また、実際のコーディング作業に入る前に、問題点を修正したり、イメージと違うということを未然に防ぐことができたりするため、クライアントと共通認識をもってデザインを完成させることができます。
その他にも、デザインカンプを作成することで、デザイナー自身がデザインの全体像を把握し、細部にこだわりデザインをすることができるメリットもあります。
デザインカンプの制作の流れ
デザインカンプは、WEBサイト制作の基盤となる重要な行程なので、しっかりと時間をかけて作り上げることが重要です。
WEBサイトの企画・要件を固める
はじめに、クライアントからの要望を伺い、WEBサイトの企画と要件を固める必要があります。
クライアントからの指示や要望などの詳細を確認し、デザインの方向性やイメージを明確に固めることが重要です。
WEBサイトの企画・要件を固めるために下記要素をしっかりと確認する必要があります。
- 制作の目標や目的
- メインターゲット層
- ブランドイメージ
- デザインの好み、参考サイト
- 参考サイト
- 盛り込みたい情報
- 取り入れたい機能
また、イメージに近い競合他社のデザインなどを交えて話をすることで。具体的なイメージをもって制作を進めることができます。
ワイヤーフレームの作成
次に、企画・要件を基にワイヤーフレームを作成します。
ワイヤーフレームではデザインの枠組みとなる、レイアウトやページの構造、情報の配置場所を簡易的にデザインします。
ワイヤーフレームで、WEBサイトのページレイアウトやコンテンツの配置などざっくりとした全体構造を決定します。
この段階では、まだ配色や画像などの具体的なデザイン要素はデザインしません。
ワイヤーフレーム完成後、クライアントに全体構造の確認を行い、問題がなければ次のデザインカンプ制作のステップに進みます。
デザインカンプの作成
ワイヤーフレームの次は、デザインカンプの制作を行います。
デザインカンプの制作では、具体的なデザイン要素を追加して完成した時のデザインイメージを作成していきます。
具体的には、ワイヤーフレームに反映していない色、文字の大きさやフォント、画像反映、イラスト、ロゴ、アイコンなどのデザインを全て制作していきます。
デザインカンプ制作では、ブランドイメージやコンセプトに合わせたデザインを制作する必要があるため、クライアントの指示や要望を満たすためのデザイン知識やスキルが求められます。
最終的チェックと修正
デザインカンプが完成したら、チーム内とクライアントにデザインを確認して必要に応じて修正や調整を行います。
デザインカンプの最終チェックと修正は何度か繰り返されることが多く、最終的なデザインの完成までもっていきます。
イメージに近いデザインか、見やすいか、使いやすいか、ターゲットにあった内容になっているか、などの細かな確認をしっかりと行い、デザインカンプを完成させます。
デザインを納品
最終的にデザインカンプの確認が終了し、完成したらコーディング作業に移ります。
デザインカンプを基にWEBサイトへ実装するためのコーディング作業を行い、実際に操作できるようにボタン設置、ページ作成、スマホ対応、動作チェックなど多くの作業を行います。
コーディング作業が終了し、WEB上に公開が完了したら納品完了です。
デザインカンプを制作するときのコツ
WEBサイト制作の目的や要件を明確に把握する
WEBサイト制作をする目的はクライアントによってさまざまです。
- ブランドイメージを強化したい
- 新商品の打ち出しをしたい
- 新サービスをアピールしたい
- サイトデザインが古いので今にあったデザインにしたい
- ユーザーの使いやすさを重視したWEBサイトを作りたい
- 商品購入ができるショッピングサイトを作りたい …など
クライアントによってWEBサイトを作る目的や最終的な目標は変わってきます。
そのため、初めにクライアントに対して目的・ターゲット・期限・イメージなど具体的な情報を伺うように心がけましょう。
初めに目的をしっかりと把握することができれば、方向性が大きく違くなってしまうなどのミスを未然に防ぐことができます。
ユーザーの視点のデザインを重視する
デザインカンプを作るときは、常にユーザー視点に立って考えることがとても重要です。
WEBサイトを利用するのは、クライアントではなくユーザーになります。クライアントの要望を反映させながら、ユーザー視点でのデザインを重視しましょう。
ユーザーがWEBサイトやアプリを使用するときの操作性や体験を考え、直感的で使いやすいデザインを作成しましょう。
また、今はスマホユーザーが非常に多いため、モバイル版のデザインカンプも作成しておく必要があります。
画面サイズ、文字のサイズ、ボタンの押しやすさ、メニューの見つけやすさなどの操作性を考慮したモバイルフレンドリーなデザインになるよう考慮しましょう。
ターゲット層に合わせたデザインにする
デザインカンプを作成する際は、WEBサイトのターゲット層に合わせたデザインにすることが重要です。
ターゲットを想定しないと抽象的なデザインになってしまい、どんなユーザーにも共感をもってもらえません。
そのため、ターゲット層のニーズや好みを分析し、ターゲットに合わせたデザイン、レイアウト、コンテンツ配置を行い、使いやすいデザインにすることを心がけましょう。
デザインカンプに一貫性もたせる
デザインカンプでは全体で一貫性のあるデザインを再現することが重要となります。
各ページや各パーツが独立しているようなデザインの場合、ユーザーが混乱してしまいます。
そのため、全体の配色やフォント、レイアウトなど各要素に規則性を持たせ、全体に統一感のあるデザインをするように心がけましょう。
デザインに一貫性があることで、ユーザーが混乱することなくスムーズな操作を実現することができます。
また、デザインに一貫性があることで、ブランドイメージの強化にもつながります。
デザインカンプの制作におすすめのツール
Adobe Photoshop
（参照元：Adobe Photoshop）
Photoshopはデザインカンプの制作ツールとして多くのWEBデザイナーから愛用されています。
Photoshopは画像の合成や加工などの編集が得意なデザイン作成ツールで、高機能なソフトのため多くのプロデザイナーがPhotoshopを使ってデザインカンプを制作しています。
有料デザインツールとなりますが、本格的にWEBデザインを行うのであればPhotoshopを使用するのをおすすめします！
Adobe XD
（参照元：Adobe XD）
「Adobe XD」は、Adobe社が提供するUI/UXデザインツールです。
直感的な操作で、デザインカンプの制作をすることができるため、注目をあびているツールの1つです。
「Adobe XD」は無料で使えるプランもあり、試しに使用してみるのもおすすめです！
画像編集ができない、Photoshopやillustratorにあるレイヤー機能がないためデザインの幅が狭まってしまうこともありますが、まずはやってみたいという方にはおすすめです。
Figma
（参照元：Figma）
Figmaはブラウザ上で使える、汎用性の高いデザインツールです。
WEBブラウザ上で簡単に制作をすることができ、チームで共同作業もすることができるため、今急速に人気を集めています。
また、無料で使用することができるため、まずはデザインカンプの練習をしてみたい方などにはとても適したデザインツールです。
無料で使用する場合、作成ファイルなどの制限はありますが一度試してみるのもおすすめです。
ブラウザ上でのデザインのため、オフラインでの使用ができないので注意しましょう。
GIMP
（参照元：GIMP）
「GIMP」は無料で使える画像加工・編集が得意なデザインツールです。
画像編集、複数のプログラミング言語に対応、psd形式の画像編集可能、など無料で使用できる優秀なデザインツールです。
しかし、Photoshopなどの有料デザインツールと比較すると、機能の充実さの点では劣る部分もあります。
初めてデザインカンプを作成する方や、まずはデザインの勉強をしたい方、などは是非試してみてください！
HerTech
