デザインカンプとは？作成手順や失敗しないためのコツを解説

「デザインカンプとワイヤーフレームってどう違うの？」
「デザインカンプってどうやって作ったらよいの？」

WEBデザイナーを目指す中で、このような悩みを抱える方もいらっしゃるでしょう。

WEBサイトやLP（ランディング・ページ）の制作において、完成イメージを共有する完成見本として「デザインカンプ」は欠かせない存在です。

クライアントや開発者との認識を揃え、スムーズな進行に役立つ重要な資料になります。

とはいえ、「どこまで作り込む？」「どんな要素を入れるべき？」と迷ってしまいますよね。

そこで本記事では、デザインカンプの基本から、作成時のポイント、役立つツールや実例を紹介しています。

読み終える頃には、仕事につながるデザインカンプを作れるようになっているはずです。これからWEB制作に取り組む方は、ぜひ参考にしてください。

デザインカンプとは

デザインカンプを一言でいうと、デザインの「完成見本」もしくは「デザイン案」です。

正式名称は「design comprehensive layout」といい、WEB業界では「カンプ」や「モックアップ」と呼ばれたりします。

以下のようなものがデザインカンプと言われるものです。実際のWEB制作ではこちらにHTMLやCSSを加えて、WEBサイトにしていきます。

▼デザインカンプと呼ばれるもの

デザインカンプはWEBデザイナーの実力が1番出る場所であり、転職できるか、フリーランスとして仕事を取れるかはデザインカンプのレベルで決まります。

デザインカンプの目的

デザインカンプの目的は、WEBサイト制作においてクライアントと制作者の相互ですり合わせを行い、完成形のイメージを共有することです。

通常のWEB制作の流れでは、まずWEBページのレイアウトを決めるため「ワイヤーフレーム」という設計図を作成し「デザインカンプ」で色やイメージといった完成イメージを明確にしたのち、HTMLやCSSによるコーディング作業に入っていきます。

この「デザインカンプ」で完成イメージを明確にすることが、クライアントと制作者とのイメージのすり合わせになり「クライアントの考えるイメージと制作者のイメージが違うために一から作り直す」という事態を未然に防ぐことができます。

コーディング作業に入る前であれば、デザインの修正も比較的に楽に行えるため、イメージのすり合わせは、ほとんどと言って良いほどこのタイミングで行われます。

またデザインカンプはこれ以外にも、制作者にどのくらいのスキルがあるかを図る「判断材料」という目的で使用されるという側面も持ち合わせています。

なお、動画制作における、クライアントと制作者で完成形のイメージ共有には、「絵コンテ」を活用します。各シーンごとの登場人物の動きやセリフなどを「絵コンテ」に書き込みます。

参考記事：動画制作の絵コンテの書き方｜書く前の準備や作成するときのポイントも解説｜ムビサク

テイスト別のデザインカンプの例

デザインカンプを作る上では、どのようなものを作れば良いかイメージできない方もいると思います。

そのため、ここでは現場で通用するレベル（転職したり、案件受注できるレベルの）デザインカンプの例をテイスト別にいくつかご紹介しますね。

• ポップ
• クール
• 和風

デザインカンプ・モックアップ・ワイヤーフレームの違い

WEB制作の現場では「デザインカンプ」「モックアップ」「ワイヤーフレーム」という言葉がよく使われます。

それぞれ役割や作成する目的が異なるため、違いを理解しておくことが重要です。

まず、ワイヤーフレームはWEBサイトの設計図にあたるものです。見出しや画像、ボタン、問い合わせフォームなどを配置するのかを決め、情報の整理やユーザー導線を設計します。

次に、デザインカンプはワイヤーフレームをもとに作成する完成見本です。実際に使用する写真やイラスト、フォント、配色などを反映し、完成後のWEBサイトを再現します。

クライアントとの認識合わせや、コーディング担当者への共有資料として活用されるのが一般的です。

最後のモックアップは、完成品に近い見た目や操作感を確認するための試作品を指します。デザインだけでなく、ボタンをクリックした際の画面遷移などを再現するケースもあり、ユーザー体験の検証に利用されることが多くあります。

ただし、WEBデザインの現場では、デザインカンプとモックアップは、明確に使い分けていない人も多いです。

実際に仕事をするときに定義を確認しておくことが大切です。

デザインカンプの作成手順

続いて実際にワイヤーフレームからデザインカンプを作るまでの流れを5つのステップに分けて解説します。手順に沿ってデザインカンプを作ってみましょう。

手順1：どのようなWEBサイトにするかを決める

まず最初の手順として、どのようなWEBサイトを作成するのかを決めます。

事前にクライアントと打ち合わせをして決まった内容(要件定義書)を元に、クライアントがどのような目的でそのWEBサイトを運用したいのかを確認し、それに沿ったWEBサイトのデザインを考えていきます。

要件定義書では以下のような内容がすでにすり合わせされていることがほとんどです。

WEBデザインのゴールはクライアントの要望を叶えることなので、既に決まっている内容から逸れることなく、最大限クライアントの要望を叶えられるWEBサイトのデザインを考えていきましょう。

Webサイトの作り方についての全体像は、こちらの記事でまとめています。ぜひチェックしてみてくださいね

あわせて読みたい

オシャレなWEBサイトの作り方！初心者向けにデザインの基本を解説 こんにちは、日本デザインスクール代表の久保なつ美です。 最近、「オシャレなWEBサイトってどうやって作るの？」「デザインってセンスが必要なんじゃないの？」といっ…

手順2：参考にするサイトを見つける

サイトを作成する際は、全体の骨組みにあたる「レイアウト」と、どのようなデザインにするかや配色といった、中身の部分にあたる「テイスト」を考えます。

このとき、参考にするWEBサイトを見つけますが、少なくとも3～10個ほど選びましょう。

一つだけだと、選択したサイトに似通ったものになってしまうばかりか、柔軟な発想ができなくなります。

ポイントは、クライアントの要望に沿ったもので、クライアントの魅力が伝わるテイストであること、また競合や同業のサイトはどのようなテイストになっているかを考えて選ぶと良いでしょう。

また参考サイトはプロのWEBデザイナーが作成しているため、画像や文字サイズ、配色など、デザインカンプ作成の参考になるだけでなく、デザインの勉強にもなります。

手順3：ワイヤーフレームの作成を行う

次はデザインカンプの下書きとしてワイヤーフレームを作成します。

使用するツールが決まったら、ワイヤーフレームを作成していきましょう。

ワイヤーフレームとは簡単に言うと「WEBサイトの骨組み」です。

デザインカンプを作成する前に大まかなWEBサイトの構成を作成し、サイト幅はどうするのか、画像のサイズや配置は、ボタンの位置はどこにするかなどを配置していきます。

※この際、多くのWEBデザイナーが画像や装飾と同じサイズの四角の図形を用いてワイヤーフレームを作成します。この時点でデザイン性や配色は一切必要ありません。

手順4：ガイドラインを引く

ワイヤーフレームが完成したら、デザイン制作に入る前にガイドラインを設定します。

ガイドラインとは、要素の配置や余白を揃えるための補助線のことです。

例えば、コンテンツの横幅を統一したり、見出しや画像の開始位置を揃えたりすることで、サイト全体に統一感が生まれます。

ガイドラインを引かずに制作を進めると、要素ごとの位置がばらつき、見づらいデザインになりやすいため注意が必要です。

整ったレイアウトを効率よく作るためにも、最初にルールを決めておきましょう。

手順5：パーツごとにデザインをしていく

ガイドラインを設定したら、ヘッダーやメインビジュアル、ボタン、見出しなどのパーツごとにデザインを作成していきます。

一度に全体を仕上げようとせず、パーツ単位で制作を進めることで、デザインの統一感を保ちながら効率よく作業できます。

デザインカンプ作成で失敗しないためのコツ

デザインカンプは、完成イメージを関係者と共有するうえで欠かせない資料です。

しかし、作り方を間違えると修正回数が増えたり、実装段階でトラブルが発生したりすることがあります。

本章では、デザインカンプ作成で失敗を防ぐために押さえておきたい6つのコツを紹介します。

デザインカンプ作成のコツ1：構成案は細部まで考えて作る

最初の段階で作成する構成は細部までしっかりと考えて作りましょう。

ここでいう「細部」とは、ターゲット層やユーザー、目標とする結果に導く、いわゆるコンバージョンを上げるためのデザインにするにはどうするかを考える、ということです。

ここがしっかりしていることで、ワイヤーフレームからの落とし込み、参考サイト探し、デザインまでがスムースに行えるのです。

例えば作成するサイトがECサイトの場合、店舗情報、お問い合わせ、商品購入ボタンをどこに配置するか、どういった配色にするか等、デザインによって得られる結果は大きく変わってきます。

デザインカンプ作成のコツ2：レイヤーの整理をする

デザインカンプをphotoshopで作成する際、レイヤーの整理をしながら作成しましょう。

これはデザイン制作全般において言えることですが、レイヤーの整理ができていないと、デザインを進めるうえで、どこにどの部分を配置したのか、分からなくなって作業が遅れる原因となってしまいます。

また、自分が作成したデータは他のデザイナーが使用する可能性もあるため、誰が見ても分かりやすいようにレイヤーの整理をしましょう。

初歩的なことですが、特に初心者のうちは、レイヤーの整理をしっかりと意識しながら進める癖をつけましょう。

デザインカンプ作成のコツ3：オリジナリティを求めすぎない

WEBサイト作成において、オリジナリティにはこだわりすぎないようにしましょう。

プロのWEBデザイナーでも、何もない状態からデザインを作成すことは非常に難しいものです。

世間一般に出回っているWEBコンテンツなどのデザインは、必ずと言って良いほどどこかしらのサイトを参考に作成されています。

ですので、良いデザインはどんどん参考にして真似しましょう。

デザインカンプ作成のコツ4：コーディングを意識しながら作る

WEBデザインはコーディングの必要があることから、数値を意識しながら作成することが重要なポイントのひとつになります。

このためには、以下の点に留意して作成すると良いでしょう。

また普段から、WEBサイトをまるごと書き写す「トレース」をする、ギャラリーサイトを眺めるといった方法でもコーディングを意識する訓練になります。

自分なりにコーディングしやすいルールを見つけつつ、制作物を作成しましょう。

デザインカンプ作成のコツ5：作りやすいところから取り掛かる

デザインカンプは自分が作りやすいと思った部分から作成しましょう。

一番上から作らなければならないというルールはありませんので、取り掛かりやすい、と思ったところから始めることです。

やっていくうちに煮詰まったら、他のパーツをデザインする等、自分ができそうと思ったところからやっていくことで、モチベーションの維持にも繋がります。

ポイントとしては、全体を見ながら進めていくことが大切です。

こうすることで、まだ決めていない詳細な部分のデザインも定まってくることがあります。

デザインカンプ作成のコツ6：最初の案に縛られすぎない

デザインカンプ作成では、最初の構成案に縛られすぎないことも大切です。

最初に考えたレイアウトや配色が必ずしも最適とは限りません。

実際に制作を進める中で、「思ったより文字が小さくて読みにくい」「余白がなくてごちゃごちゃして見える」などの違和感に気づくこともあります。

その場合、最初の案に固執せず、必要に応じて柔軟に改善する姿勢が大切です。

最初の案を変えることは失敗ではありません。

よりよいデザインに近づけるための工程なので、前向きに修正してみてください。

デザインカンプの作成に便利なツール

デザインカンプは紙とペンでも作成できますが、実際のWEB制作現場では専用のデザインツールを活用するのが一般的です。

ツールごとに特徴や得意分野が異なるため、自分の目的やスキルレベルに合ったものを選ぶことが大切です。

本章では、デザインカンプ作成でよく使われるツールを紹介します。

ツール1：Photoshop

PhotoshopはAdobe社が提供する画像編集ソフトで、長年にわたりWEBデザイン業界で利用されてきた定番ツールです。

写真の加工や色調補正、画像合成などの機能が豊富で、ビジュアルを重視するデザインカンプ制作に適しています。

また、細かなデザイン調整ができるため、完成イメージに近いカンプを作成しやすい点が魅力になります。

現在ではFigmaなどのツールが使われる場面も増えていますが、広告バナー制作や画像編集と併用するデザイナーも多く、現在でも高い人気を誇っています。

Photoshopの公式サイト

あわせて読みたい

【超簡単】Photoshopのインストール方法とよくある質問まとめ 広告バナーやホームページ、SNSの投稿を作るときに使用するPhotoshop（フォトショップ）。 今回は、Photoshop使用開始までの方法を詳しくまとめました。 記事の後半では…

ツール2：Illustrator

IllustratorはAdobe社のベクターグラフィック編集ソフトです。

ロゴやアイコン、図形などを高品質に作成できるため、WEBデザインだけでなくグラフィックデザインの分野でも広く利用されています。

ベクターデータは拡大・縮小しても画質が劣化しないため、さまざまなサイズのデザイン素材を作成する際に便利です。

デザインカンプそのものをIllustratorで制作するケースは以前より減っていますが、オリジナルのアイコンやイラストを作成する用途では今でも活躍しています。

Illustratorの公式サイト

あわせて読みたい

【Adobe】イラストレーター（Illustrator）とは？基本の使い方ガイド デザインやイラストに少し興味が出てくると、イラストレーターという言葉を目にする場面が増えてきます。 名前は知っていても、実際の中身まではわからないままという方…

ツール3：Adobe XD

Adobe XDはIllustratorやPhotoshopと違い、デザインカンプの作成に特化したツールです。

簡単な図形作成機能やデザイン作成機能もあるので、シンプルなデザインで良ければワイヤーフレームやデザインカンプの作成時に装飾も作ることが可能です。

また、IllustratorやPhotoshopとの連携も行いやすく、操作性もほとんど共通しているためAdobeユーザーはAdobe XDでデザインカンプを作成するのが最も効率的ではないでしょうか。

※Adobe XDは2023年1月24日に単体プランの販売が終了しております。Adobe Creative Cloudコンプリートプランに加入することでアプリを使用することができますが、サポートが終了しております。

Adobe XDの公式サイト

ツール4：Figma

Figmaは低価格(個人利用の範疇であれば無料)で使用できるデザインカンプ作成ツールです。かつては、Adobe XDと双璧を成すツールでしたが、Adobe XDのサポートが終了した現在では、Figmaに注目が集まっています。

最大の特徴は、同じデザインカンプを複数人で共有しながら編集できる点にあります。

チームでのデザイン作業やリモートワークとの相性が良いので、導入する企業が増えてきている再注目のデザインカンプ作成ツールと言えるでしょう。

操作感もシンプル、且つAdobe XDに引けを取らず高機能なので、Adobe XDを使用するかFigmaを使用するかは、自身の環境に適している方を選べば問題ありません。

Figmaの公式サイト

ツール5：GIMP

GIMPは、無料で使用可能なオープンソースのデザインカンプ作成ツールです。

操作が非常に直観的でわかりやすく、プラグイン(拡張機能)を追加することで自分にとって使いやすいようにカスタマイズもできるため多くのWEBデザイナーから支持を受けています。

特にフリーランスや個人でWEBデザインをしている方は、部署内での共有などを気にする必要がないので、予算を抑えるためにGIMPを使用することも検討してみましょう。

GIMPの公式サイト

デザインカンプの参考にしたいサイト4選

デザインカンプを作成する際は、いきなり制作を始めるのではなく、まず参考となるWEBサイトを調査することが大切です。

優れたデザインを数多く見ることで、レイアウトのパターンや配色の使い方、余白設計、写真の見せ方などを効率よく学べます。

本章では、デザインカンプを作成する際、参考になるサイトを4つご紹介します。

あわせて読みたい

【保存版】LPデザインの参考になるギャラリー＆まとめサイト13選 どんなに綺麗にデザインしても、見る人の心を動かせなければ意味がありません。成果につながるLPを作るには、「デザインの見せ方」と「売れる仕組み」を理解することが…

サイト1：SANKOU！webデザインギャラリー・参考サイト集

SANKOU！は、国内最大級のWEBデザインギャラリーサイトです。企業サイトや採用サイト、LP（ランディングページ）など、さまざまなジャンルのWEBデザインが掲載されています。

「業種」「カラー」「デザインテイスト」などの条件で絞り込み検索ができるため、自分が制作したいサイトに近い事例を効率よく探せるのが特徴です。

例えば、コーポレートサイトを制作する場合は信頼感のあるデザイン事例を、若年層向けサービスならポップで親しみやすいデザイン事例を集中的に調査できます。

掲載数も非常に多いため、デザインカンプ制作前にまずチェックしておきたい定番サイトといえるでしょう。

サイト2：Muuuuu.ORG

Muuuuu.ORGは、国内外の高品質なWEBサイトを厳選して紹介しているギャラリーサイトです。

掲載されているサイトはデザイン性の高いものが多く、トレンドを取り入れたレイアウトやアニメーション表現を学ぶのに適しています。

また、トップページだけでなく下層ページまで掲載されているケースもあるため、サイト全体の構成を参考にしやすい点も魅力です。

「なんとなくおしゃれなサイトを集める」のではなく、「なぜこのデザインが見やすいのか」「なぜこのレイアウトが使われているのか」を分析しながら見ることで、デザイン力の向上につながります。

サイト3：I/O　3000

I/O 3000は、世界中の優れたWEBデザインを集めたギャラリーサイトです。

海外サイトが多く掲載されているため、日本国内だけでは得られない最新のデザイントレンドや表現手法に触れられます。

近年のWEBデザインでは、ミニマルデザインや大胆なタイポグラフィなどが注目されていますが、そうした最先端の事例を効率よく収集できるのが特徴です。

競合サイトとの差別化を図りたい場合や、新しいアイデアを取り入れたい場合は、国内サイトだけでなく海外事例も積極的に参考にするとよいでしょう。
。

サイト4：URAGAWA

URAGAWAは、WEBデザインの事例紹介だけでなく、デザインの考え方や制作ノウハウも学べるサイトです。

単純に「おしゃれなサイトを探す」だけでなく、「なぜそのデザインが成果につながるのか」という視点で事例を紹介しているため、実践的な知識を身につけられます。

また、レイアウトや配色、UIデザインなどの解説記事も豊富に掲載されているため、デザイン初心者にもおすすめです。

デザインカンプ制作では見た目の美しさだけでなく、ユーザーが使いやすい設計を意識することが重要です。

URAGAWAを活用することで、デザインの引き出しを増やしながら、より完成度の高いデザインカンプを作れるようになるでしょう。

デザインカンプの作り方まとめ

ここまで、デザインカンプの作成目的や作り方などを解説してきました。

デザインカンプの作成はWEBデザイナーにとって花形の仕事です。あなたが作成したデザインカンプがそのままWEBサイトにアップされ、これから多くのユーザーに見られていきます。

本記事で解説したデザインカンプの作り方はあくまで基本的なものなので、まずはこの基礎をしっかり理解し、そこから先は応用編として自身のデザイン力を存分に発揮したデザインカンプを作成してみてください！

あわせて読みたい

デザインにおけるラフって何？どんな流れでどこまで作ればいい？ WEBサイト制作やリニューアルをおこなう際の重要な工程の1つに、ラフの制作があります。 WEBデザインの勉強中の方や、WEBデザイナーになりたての方には、聞きなれない用…

この記事の内容が、あなたの働き方や将来を考えるきっかけになれば嬉しいです。

もし「デザインをもっと上達させたい」「デザインを本格的に仕事にしたい」と思ったら、【逆算式ロードマップセミナー】がおすすめです。

在宅WEBデザインで月20万円を目指すためのロードマップを、初心者向けに丁寧に解説しています。

ぜひ、少しでも興味があれば参加してみてくださいね。