WEBデザイン初心者でも分かる!デザインカンプの基本と作成手順

 「デザインカンプって何?」
 「デザインカンプをつくってみたい!」
 「デザインカンプの手順を知りたい!」

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

 

HerTechといえば、完全初心者でもたった4か月でWebデザインスキルを習得できる女性限定スクールです♪

また、なんといってもオンライン勉強会・チャットサポート・グループコーチングで挫折・不安をゼロにする仕組みがあるので継続して勉強することができます
短期間でWebデザインスキルを学びたい!」「挫折せずスキルを身に着けたい!」方には、HerTechがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
はじめは無料の説明会があるから、自分にあっている内容なのか確認できるから安心だよ!
しかも、60分少人数だから受講内容を詳しく知れるよ♪
ほんと!?
じゃあ、試しにHerTechの無料説明会に参加してようかな!
あと、補足で未経験でも分かりやすいオンライン動画講義と、実践課題があるから着実にスキルアップできるよ♪

 疑問や不安をすべて解消!
HerTech無料説明会を実施中(60分)

WEBCOACH

WEBCOACHといえば、副業・フリーランスを目指す幅広い年代(20代 ~ 40代)の方が学習できるオンラインWebデザインスクールです♪

また、なんとコーチは採用率5%を潜り抜けた現役のフリーランスコーチだから、プロ目線の指導を受けることができます。
質の高いWebデザインスキルを学びたい!」方には、WEBCOACHがおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料カウンセリングがあるから、学習内容やコースがあっているか確認できるから安心だよ!
ほんと!?
じゃあ試しにWEBCOACHの無料カウンセリングに参加してようかな!
あと、完全マンツーマンで24時間担当コーチに質問をしたり、定期的なコーチングで学習計画やモチベーション管理があるから挫折せず続けられるよ♪

東京デザインプレックス研究所

東京デザインプレックス研究所といえば、2012年1月に開校し、急成長している「プロフェッショナル養成」のためのWebデザインの学校です♪

また、社会人・学生を中心に20代の方に人気で、未経験からキャリアチェンジしたい人におすすめの学校です。
プロのWebデザイナーになりたい!」方には、東京デザインプレックス研究所がおすすめです♪

でも、結構高い金額かかるんじゃないの…?
まずは無料で資料請求できるから、自分の方針にあっている学校なのか確認できるから安心だよ!
ほんと!?
資料請求ならすぐできるね!まずは、東京デザインプレックス研究所の資料請求してみるよ!
あと補足で、次世代のクリエイター/デザイナーに求められる志向性やスキルを学べるプログラムがあるから未経験からキャリアチェンジしたい人にはぴったりだよ♪