デザインカンプとは、制作物のデザインやレイアウト、画像、配色などが一目でわかる完成見本のことです。Webサイト制作の現場でよく聞く用語ですが、デザインカンプの必要性やどのような場面で活用するのかを疑問に思う方もいるのではないでしょうか。
今回は、デザインカンプの概要や作り方、ワイヤーフレーム・モックアップなどとの違い、おすすめの制作ツールなどについて解説します。
この記事を読んで、デザインカンプとは何かを知り、制作に必要な知識を学びましょう。
デザインカンプとは？
デザインカンプとは「デザインの完成見本」の意味です。「Design Comprehensive Layout」の略で、Webサイトやデザインの制作現場でよく使われ、「カンプ」と呼ばれることもあります。
デザインカンプが必要な理由
デザインカンプは、クライアントとWebデザインのイメージをすり合わせるために必要です。クライアントの要望をもとにサイト制作を行っても、言葉では表現しきれないイメージのズレが生まれてしまうケースはよくあります。こうしたズレを防ぎ、クライアントが満足できるデザインを制作するためにも、具体的な見本が欠かせません。
デザインカンプは、クライアントが思い描くイメージを体現し、双方のイメージを一致させるために制作する必要があるのです。
また、デザインカンプは、コーダーなどWebサイトの制作チームとイメージ共有や認識を統一するためにも活用されます。
ワイヤーフレームやモックアップ、サイトマップとの違い
デザインカンプは、ワイヤーフレームやモックアップ、サイトマップと混同されやすい専門用語です。それぞれの目的を押さえておくと、迷うことなく現場でスムーズに仕事ができるため、しっかり覚えておきましょう。
- ワイヤーフレーム
- Webページの骨組みである設計図のこと。コンテンツやメニューなどをどこにどう配置するか、どれぐらいの大きさにするかなどが一目でわかる制作物で、デザインカンプのもとになる。色や画像などの細かい要素は決まっていない段階。
- モックアップ
- 完成模型を意味するプロダクトデザイン用語。Webサイト制作では、デザインカンプと同義で用いられる場合がある。
- サイトマップ
- Webサイトの階層を表す地図のこと。トップページから各ページへの導線をわかりやすく表現したもの。
なお、Webデザインの基礎知識に関する情報は、以下の記事で詳しく解説しています。Webデザイン初心者の方はぜひご覧ください。
デザインカンプの作り方6ステップ！
ここでは、デザインカンプの作り方を以下の流れに沿ってご紹介します。
- Webサイトの目的を明確にする
- 参考サイトを探す
- 構成を考える
- ガイドを引く
- パーツを配置する
- レスポンシブ対応
それぞれ順に見ていきましょう。
1.Webサイトの目的を明確にする
まずは、Webサイト制作の目的を明確にしましょう。たとえばECサイトやコーポレートサイト、予算やスケジュールなど、どのようなサイトでどのような成果を得たいのかを具体的に企画することで、デザインの方向性を決められるからです。
サイト制作の目的はクライアントによってさまざまなので、まずはしっかりヒアリングを行い、全体像を明確にしたうえで体制を構築していきましょう。
2.参考サイトを探す
つぎに、デザインの参考になるサイトを探します。Web上で公開されているサイトのデザインやレイアウトを見ることで、具体的なイメージ化を図ります。競合になりそうなサイトだけでなく、異業種のサイトも見比べながら、それぞれの長所・短所を洗い出し、差別化要素や強みを見出しましょう。
3.構成を考える
リサーチした参考サイトを見ながら、大まかな構成を考えましょう。コンテンツの幅やサイズ、配置、表示の順番などを決めることで、デザインの大枠を作ります。構成案の作成に使用するツールは、紙とペン、ホワイトボード、Photoshop、Illustratorなど自分が使いやすいもので構いません。既存サイトのデザインを参考にしつつも、真似にならないように構成を練りましょう。
4.ガイドを引く
構成案ができたら、ガイドと呼ばれる線を引いて、実際にデザインカンプを制作していきましょう。ガイドを引く作業は、デザインカンプの制作で最初に着手すべき工程です。デザインやレイアウトの崩れを防ぐためにも、正確にガイドを引いて、土台を整えましょう。ガイドを引く際は、デザイン制作の現場でよく使用されるPhotoshopの定規機能が便利です。
5.パーツを配置する
ガイドが引けたらパーツを作成し、構成案に沿って配置していきましょう。実際のサイトに近い配色や画像などを含めて制作することで、サイトの完成形がイメージしやすいデザインカンプが出来上がります。
6.レスポンシブ対応
レスポンシブデザインとは、ユーザーが使用するデバイスに応じて、サイズやコンテンツの配置が最適化されるデザインのことです。デザインカンプでは、パソコンからの閲覧を想定するだけでなく、スマホやタブレットからアクセスしても見やすいサイトになるように、レスポンシブデザインを用意する必要があります。
まずはメインとなるデバイスのデザインを考え、他のデバイスから閲覧した場合のデザインもそれぞれ制作しておくのがおすすめです。
デザインカンプを作るときのポイント
デザインカンプを作るときは、以下にある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上でできるため、クライアントとのファイル共有も容易にできます。複数人で共同編集するのに適したツールなので、チームで共有しながらデザインカンプを制作したい方にもおすすめです。
Webデザインの基礎を学んでデザインカンプを作ってみよう！
Webサイトの制作では、デザインカンプを用いてクライアントとイメージのすり合わせを行うことが大切です。要望をもとに、ユーザー視点も踏まえたデザインカンプを作ることができれば、クライアントの満足度を高めることができるでしょう。
しかし、デザインカンプの制作に慣れていない方や、初心者の方は、どのようなデザインカンプを作ればいいかわからないこともあるのではないでしょうか。デザインカンプをはじめ、Webデザインに関する知識とスキルを身につけるのであれば、女性向けキャリアスクールSHElikes（シーライクス）の活用がおすすめです。
SHElikesには、全45以上の職種スキルの習得が目指せるコースが用意されており、Webデザインだけでなく、PhotoshopやFigma、マーケティングや動画編集などのクリエイティブスキルを幅広く学ぶことができます。Webデザインスキルを広く学びたい方や、今とは違う働き方をお探しの方は、まず一度、無料体験レッスンに遊びに来てみてくださいね。
女性向けキャリアスクールSHElikes無料体験レッスンはこちら
