デザインカンプとは?意味やWebデザインで必要な理由、作り方を解説

デザインカンプとは?意味やWebデザインで必要な理由、作り方を解説
ABOUT ME
ライター kobayashi_osushi
看護系高等専門学校卒業。看護師として大学病院やクリニックなどで従事。結婚や子育てをきっかけに多様な働き方を求め、2021年からフリーライターとして活動を開始。キャリア支援や転職関連の記事執筆に携わり、自分らしい働き方を発信している
エディター Tomomaru
フリーランスWeb編集・コンテンツディレクター兼たまにライター。 略歴は、アパレル→事務職を経てWebデザインをスクールで学んだのち、SHElikesと出会いWeb制作会社でマーケOLしてみたり。結果、書くことが天職だと思い込み、副業ライター道を歩んでいる。次なる野望は絵描きになること。思い込むのは自由です。

デザインカンプとは、制作物のデザインやレイアウト、画像、配色などが一目でわかる完成見本のことです。Webサイト制作の現場でよく聞く用語ですが、デザインカンプの必要性やどのような場面で活用するのかを疑問に思う方もいるのではないでしょうか。

今回は、デザインカンプの概要や作り方、ワイヤーフレーム・モックアップなどとの違い、おすすめの制作ツールなどについて解説します。

この記事を読んで、デザインカンプとは何かを知り、制作に必要な知識を学びましょう。

デザインカンプとは?

デザインカンプとは「デザインの完成見本」の意味です。「Design Comprehensive Layout」の略で、Webサイトやデザインの制作現場でよく使われ、「カンプ」と呼ばれることもあります。 

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

デザインカンプは、クライアントとWebデザインのイメージをすり合わせるために必要です。クライアントの要望をもとにサイト制作を行っても、言葉では表現しきれないイメージのズレが生まれてしまうケースはよくあります。こうしたズレを防ぎ、クライアントが満足できるデザインを制作するためにも、具体的な見本が欠かせません。

デザインカンプは、クライアントが思い描くイメージを体現し、双方のイメージを一致させるために制作する必要があるのです。

また、デザインカンプは、コーダーなどWebサイトの制作チームとイメージ共有や認識を統一するためにも活用されます。

ワイヤーフレームやモックアップ、サイトマップとの違い

デザインカンプは、ワイヤーフレームやモックアップ、サイトマップと混同されやすい専門用語です。それぞれの目的を押さえておくと、迷うことなく現場でスムーズに仕事ができるため、しっかり覚えておきましょう。

  • ワイヤーフレーム
    Webページの骨組みである設計図のこと。コンテンツやメニューなどをどこにどう配置するか、どれぐらいの大きさにするかなどが一目でわかる制作物で、デザインカンプのもとになる。色や画像などの細かい要素は決まっていない段階。
  • モックアップ
    完成模型を意味するプロダクトデザイン用語。Webサイト制作では、デザインカンプと同義で用いられる場合がある。
  • サイトマップ
    Webサイトの階層を表す地図のこと。トップページから各ページへの導線をわかりやすく表現したもの。

なお、Webデザインの基礎知識に関する情報は、以下の記事で詳しく解説しています。Webデザイン初心者の方はぜひご覧ください。

あわせて読みたい
Webデザインとは?初心者にもわかりやすく解説
Webデザインとは?初心者にもわかりやすく解説webデザインと聞いて、どんなことを思い浮かべますか? 初心者には難しそう センスがないと出来ないのでは? パソコン一台でできる仕事…

デザインカンプの作り方6ステップ!

ここでは、デザインカンプの作り方を以下の流れに沿ってご紹介します。

  1. Webサイトの目的を明確にする
  2. 参考サイトを探す
  3. 構成を考える
  4. ガイドを引く
  5. パーツを配置する
  6. レスポンシブ対応

それぞれ順に見ていきましょう。

1.Webサイトの目的を明確にする

まずは、Webサイト制作の目的を明確にしましょう。たとえばECサイトやコーポレートサイト、予算やスケジュールなど、どのようなサイトでどのような成果を得たいのかを具体的に企画することで、デザインの方向性を決められるからです。

サイト制作の目的はクライアントによってさまざまなので、まずはしっかりヒアリングを行い、全体像を明確にしたうえで体制を構築していきましょう

2.参考サイトを探す

つぎに、デザインの参考になるサイトを探します。Web上で公開されているサイトのデザインやレイアウトを見ることで、具体的なイメージ化を図ります。競合になりそうなサイトだけでなく、異業種のサイトも見比べながら、それぞれの長所・短所を洗い出し、差別化要素や強みを見出しましょう

3.構成を考える

リサーチした参考サイトを見ながら、大まかな構成を考えましょう。コンテンツの幅やサイズ、配置、表示の順番などを決めることで、デザインの大枠を作ります。構成案の作成に使用するツールは、紙とペン、ホワイトボード、Photoshop、Illustratorなど自分が使いやすいもので構いません。既存サイトのデザインを参考にしつつも、真似にならないように構成を練りましょう

4.ガイドを引く

構成案ができたら、ガイドと呼ばれる線を引いて、実際にデザインカンプを制作していきましょう。ガイドを引く作業は、デザインカンプの制作で最初に着手すべき工程です。デザインやレイアウトの崩れを防ぐためにも、正確にガイドを引いて、土台を整えましょう。ガイドを引く際は、デザイン制作の現場でよく使用されるPhotoshopの定規機能が便利です。

5.パーツを配置する

ガイドが引けたらパーツを作成し、構成案に沿って配置していきましょう。実際のサイトに近い配色や画像などを含めて制作することで、サイトの完成形がイメージしやすいデザインカンプが出来上がります。

6.レスポンシブ対応

レスポンシブデザインとは、ユーザーが使用するデバイスに応じて、サイズやコンテンツの配置が最適化されるデザインのことです。デザインカンプでは、パソコンからの閲覧を想定するだけでなく、スマホやタブレットからアクセスしても見やすいサイトになるように、レスポンシブデザインを用意する必要があります。

まずはメインとなるデバイスのデザインを考え、他のデバイスから閲覧した場合のデザインもそれぞれ制作しておくのがおすすめです。

あわせて読みたい
Webデザイナーとは?仕事内容やスキル、トレンド情報まで
Webデザイナーとは?仕事内容やスキル、トレンド情報までWebデザイナーは、クライアントや社内のチームとコミュニケーションを取りながら、Webサイトをデザイン・制作する仕事です。その仕事内…

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

デザインカンプを作るときは、以下にある2つのポイントを意識することが大切です。

  • サイトの目的を意識する
  • 細部にまで配慮する

それぞれ見ていきましょう。

サイトの目的を意識する

デザインカンプは、サイトの目的を意識して作ることが大切です。なぜなら、デザインカンプの時点でサイトの目的がブレてしまうと適切な導線や訴求に至らず、クリック数やコンバージョンなどの成果が得られない可能性があるからです。またクライアントの満足度が低下し、修正ややり直しの手間が発生してしまいます。

こうした事態を防ぐためにも、構成を考える段階から、ユーザー視点を考慮したデザインカンプを作りましょう

細部にまで配慮する

デザインカンプの制作では、フォントサイズや余白、デザインの統一など細部への配慮が必要です。その理由は、デザインを実装するコーディング作業をスムーズに行うためです。デザインカンプを作る段階で細かく配慮しておくと、コーダー側の作業負担をグッと減らすことができます。制作ツールの設定機能などを活用し、コーディングを意識したデザインカンプを作りましょう。

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

デザインカンプの制作におすすめのツールは、以下の3つです。

  • Adobe Photoshop
  • Adobe XD
  • Figma

それぞれのツールについて詳しく解説します。さっそく見てみましょう。

Adobe Photoshop

Adobe Photoshopは、デザイン制作の現場で長年支持されているデザインツールです。デザイン制作や画像編集、合成画像の作成などさまざまな用途で使うことができます。設定によりガイドや余白、レイアウトなどが定めやすいため、デザインカンプの制作に慣れていない方でも安心して使えるでしょう。

Webデザインで必要な機能を多く搭載しているため、Webデザイナーを目指す方はぜひご活用ください。

Adobe XD

Adobe XDは、Webデザインやプロトタイプ制作が可能なデザインツールです。動的要素を含めたデザイン制作ができるため、より完成系に近いデザインカンプを作ることができます。前述のAdobe Photoshopや、同社が提供するAdobe Illustratorとの互換性に優れているため、目的に合わせてデザインツールを使い分けることも可能です。

動作が軽く、チームでデザインの共有がしやすいメリットがありますが、2023年現在はメンテナンスモードのため、Adobe XDのソフトを新規購入することができません。企業によっては、Figmaや他のツールに移行するケースもあるようです。

Figma

Figmaは、Webデザインやアプリ設計などで活用されているデザインプラットフォームです。デザイン作業や編集、データ保存などがすべてWeb上でできるため、クライアントとのファイル共有も容易にできます。複数人で共同編集するのに適したツールなので、チームで共有しながらデザインカンプを制作したい方にもおすすめです。

あわせて読みたい
Figma(フィグマ)の使い方とは?初心者向けにわかりやすく解説
Figma(フィグマ)の使い方とは?初心者向けにわかりやすく解説Figmaは、Web上で共同編集ができるデザインプラットフォームです。操作性の高さから、さまざまなWeb制作現場で幅広く活用されてい…

Webデザインの基礎を学んでデザインカンプを作ってみよう!

Webサイトの制作では、デザインカンプを用いてクライアントとイメージのすり合わせを行うことが大切です。要望をもとに、ユーザー視点も踏まえたデザインカンプを作ることができれば、クライアントの満足度を高めることができるでしょう。

しかし、デザインカンプの制作に慣れていない方や、初心者の方は、どのようなデザインカンプを作ればいいかわからないこともあるのではないでしょうか。デザインカンプをはじめ、Webデザインに関する知識とスキルを身につけるのであれば、女性向けキャリアスクールSHElikes(シーライクス)の活用がおすすめです。

SHElikesには、全40以上の職種スキルの習得が目指せるコースが用意されており、Webデザインだけでなく、PhotoshopやFigma、マーケティングや動画編集などのクリエイティブスキルを幅広く学ぶことができます。Webデザインスキルを広く学びたい方や、今とは違う働き方をお探しの方は、まず一度、無料体験レッスンに遊びに来てみてくださいね。

女性向けキャリアスクールSHElikes無料体験レッスンはこちら

※ 掲載している情報は記事更新時点のものです。