【初心者必見】デザインカンプの作り方を5ステップで徹底解説！おすすめツールも紹介

「デザインカンプの作り方がわからない」
「デザインカンプとワイヤーフレームの違いを知りたい」
「無料でデザインカンプが作れるソフトはないかな？」

デザインカンプは、Webサイトのデザインを検討する際に作成します。Webデザイナーを目指しているなら、デザインカンプの作成スキルは必須です。

しかし、どのように作成したら良いかわからない方も多いでしょう。また、インターネットで調べるほど新しい情報が出てくると、何が正しいのかわからず悩んでしまいますよね。

そこで本記事では、デザインカンプ関する以下の内容について解説します。

• デザインカンプの概要
• デザインカンプの作り方
• おすすめツール

Webデザイナーを目指している方は、ぜひ最後までお読みください。

デザインカンプとはWebサイトの完成見本

デザインカンプとは、Webサイトの完成見本です。クライアントと制作者が完成イメージを共有するときなどに使います。

文字や画像などは全て挿入されており、コーディングすれば納品できる状態です。ボタンやアイコンなど、細部まで作り込んだデザインカンプを共有してブラッシュアップすることで、完成度の高いWebサイトができ上がります。

ワイヤーフレームやモックアップとの違いを解説

ここでは、デザインカンプと以下の項目を比較します。

• ワイヤーフレームとの違い
• モックアップとの違い

それぞれの特徴がわかる内容になっているので、ここでしっかり確認しておきましょう。

1. ワイヤーフレームとの違い

ワイヤーフレームは、Webサイトの設計図です。デザインカンプとは異なり、配色したり文字を挿入したりすることはありません。

どこにどの要素を配置するか、大まかに決めるためのWebサイトの骨組みです。ワイヤーフレームをクライアントと共有して方向性を決め、デザインカンプに反映します。

2. モックアップとの違い

モックアップは、模型という意味です。Webデザインのアイデアをクライアントやチーム内で共有するときに使用します。

Web制作におけるデザインカンプと同じ意味と捉えて問題ありません。

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

デザインカンプは、以下の5ステップで作成します。

1. Webサイトの方向性を決める
2. 参考サイトを探す
3. ワイヤーフレームを作る
4. ガイド線を引く
5. パーツを作る

特に、1と2が重要です。Webサイトの方向性が決まっていないと、質の良いデザインは作成できません。情報収集をしっかり行い、需要のあるWebサイトを作りましょう。

1. Webサイトの方向性を決める

クライアントに、Webサイトを作る目的やターゲットなどをヒアリングしましょう。目的やターゲットによって、Webサイトの方向性が変わります。

例えば「起業のためにとりあえずほしい」場合と「自社商品を売りたい」場合では、Webサイトのデザインやボリュームに差が生じます。

ヒアリングは、Webサイトを作る上で重要な業務です。製作者も交えて、クライアントが納得いくまで話し合いましょう。

2. 参考サイトを探す

方向性が決まったら、Webサイトのイメージを作る段階に入ります。さまざまな企業のWebサイトが見られる「Pinterest」や「I/O 3000 | Webデザインギャラリー」で探すのがおすすめです。

ヒアリングの内容を参考にしながら、モデルとなりそうなWebサイトを探します。2〜3サイトをピックアップして、大体の傾向を掴みましょう。

3. ワイヤーフレームを作る

ヒアリングした情報と参考サイトを軸にして、ワイヤーフレームを作成します。Adobe XDなどソフトで作成できますが、手書きでも問題ありません。作成しやすい方法を選びましょう。

ワイヤーフレームには、以下のような要素をおおまかに配置します。

• メインメニュー
• サイドメニュー
• カラム
• お問い合わせフォーム
• CTA　など

レスポンシブデザインのワイヤーフレームも忘れずに作成しましょう。ざっくりとした配置が分かれば良いので、ワイヤーフレームを作る段階では、文字や画像などを挿入する必要はありません。

4. ガイド線を引く

ガイド線とは、パーツを配置する際に目安となる線のことです。ガイド線がズレているとレイアウトが崩れたり、コーディングの修正が必要になったりするので慎重に引きましょう。

ソフトを使い慣れていないと、思い通りの線が引けないことがあります。あまりにも時間がかかると、納期遅れやクオリティの低下などの原因になります。

事前にソフトの使い方を練習して、スムーズに作業できるようにしておきましょう。

5. パーツを作る

ガイド線に沿ってパーツを配置します。配色したり文字を入れたりして、納品物と同じデザインになるようにしましょう。

完成したデザインカンプはクライアントと共有するので、誤字脱字や画像サイズのミスなどがないか、入念に確認しておきましょう。1人だと見逃すことがあるので、ダブルチェックを行ってください。

デザインカンプを作成する際の3つのポイント

デザインカンプを作成する上で大切なポイントは、以下の3つです。

1. レスポンシブデザインも作る
2. Webデザインの基本を守る
3. 情報をわかりやすく伝える

ユーザーが快適に使えるWebサイトを制作したい方は、ぜひ参考にしてみてください。

1. レスポンシブデザインも作る

レスポンシブデザインとは、タブレットやスマートフォンなどの画面サイズに合わせたデザインのことです。レスポンシブデザインを設定しないと、タブレットやスマートフォンでWebサイトを開いたときに、レイアウトが崩れてしまいます。

パソコンだけでなく、他の端末の画面サイズにも合わせたデザインカンプを作成しましょう。見づらいWebサイトではユーザーが離脱しやすく、売上などに影響を与えます。

レスポンシブデザインを作成することで、スマートフォンのユーザーでも快適にWebサイトを利用できます。

2. Webデザインの基本を守る

Webデザインの基本を守るだけで、Webサイトの質が上がります。

• ピクセルのズレをなくす
• 配色は3カラー
• 読みやすいように文字の行間を空ける　など

デザインにもルールがあります。オリジナリティを出すよりも、ルールを守る方がユーザーにとって使いやすいWebサイトに仕上がります。

基礎知識があるからこそ、オリジナリティは輝きます。最初は良いものを作るより、ルールを守ることを重視しましょう。

3. 情報をわかりやすく伝える

Webサイトを訪れたユーザーが、必要な情報をすぐ得られるようなデザイン設計にします。画像と説明文が離れていたり、文字で埋め尽くされていたりすると、ユーザーが離脱しやすくなってしまいます。

商品の魅力を伝える文章は大切ですが、あまりにも長いとユーザーに読んでもらえません。ところどころに画像を入れて説明するなど、わかりやすさを意識した設計にしましょう。

デザインカンプ作成できるおすすめツール5選

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

1. Adobe Photoshop
2. Adobe Illustrator
3. Adobe XD
4. Figma
5. GIMP　

どのツールも、WindowsとMacの両方で使用できます。それぞれ紹介するので、ツール選びの参考にしてみてください。

1. Adobe Photoshop

「Adobe Photoshop」は、写真の加工に優れたソフトです。

• 写真・画像・文字の組み合わせ
• 背景の切り抜き
• 肌の補正　など

編集した写真は、原本と見分けがつかないほどクオリティが高いです。プロの現場でも使用されています。

操作方法が少し難しく慣れるまで時間がかかりますが、機能が優れているのが魅力です。jpgやpngファイルへの書き出しも可能です。

デザインカンプ作成時には必ず、画像を使います。画像の加工機能が優れているツールを探しているなら、Adobe Photoshopがおすすめです。

2. Adobe Illustrator

「Adobe Illustrator」は、ロゴデザインやイラスト作成に優れたソフトです。文字や図形を自由に配置できます。

直感的に操作できるので、初心者におすすめです。ベクター画像を採用しているため、画像を拡大・縮小しても画質が悪くなりません。

Adobe Photoshopと使い分けると、作業効率が高まります。Adobe Photoshopで編集した画像をAdobe Illustratorにアップし、文字入れするなどが可能です。

細かなバランス調整ができるので、見栄えの良いデザインカンプに仕上がるでしょう。

3. Adobe XD

「Adobe XD」にはグループ機能が備わっており、他の人と共同作業できます。プロトタイプを使えば、ボタンをクリックしたらリンク先に移動するなど、実際の動きを再現可能です。

使いやすさと機能の豊富さが魅力的なツールです。以前は無料で使えていましたが、2023年1月からは月額1,298円（税込）となっています。

4. Figma

「Figma」は、スタータープランを選択すれば無料で使えます。複数人で同時に編集できたり、自動保存できたりするので使い勝手が良いです。

複数人が同時に同じファイルにアクセスできるので、チームで取り組む際に便利でしょう。クラウド上にデータが保存されるので、どこからでもアクセス可能な点も魅力です。

有料プランもありますが、デザインカンプ作成なら無料プランで十分です。

5. GIMP

「GIMP」は、無料で使えるオープンソースの画像編集ソフトです。Adobe Photoshopと比べると、画像編集性能は劣りますが、簡単に操作できる点が魅力です。

オープンソースとはプログラム（ソースコード）が公開されているソフトウェアのこと。GIMPのソースコードを自由にカスタマイズできるので、ほしい機能を自分で追加できます。

カスタマイズしなければ簡単に操作できるので、初心者にもおすすめのソフトです。

デザインカンプを作成するならコーディングが必須

コーディングまで行えるWebデザイナーの需要は、年々高まっています。今やコーディングは、Webデザイナーに求められる最低限のスキルです。クライアント側は納品まで一括して依頼でき、製作者側は高単価で受注しやすくなるのでお互いにメリットがあります。

コーディングが難しい方は、知識だけでも身につけておきましょう。コーダーとのコミュニケーションがスムーズになり、コーディングを意識したWebデザインを作成できます。仕事が円滑に進み、質の良いWebデザインを作れるでしょう。

1案件150万円受注の実績を持つ講師が直接指導する講座『Wonderful Designer』

• 論理的なデザイン構築方法
• 基礎のプログラミング
• 案件受注のコツ

【教材はちょっと高いなぁ…】 そんな人は2,480円で各講座を受講体験できる「人生逃げ切りサロン」へ

• プログラミング
• 動画編集
• Webデザイン
• ライティング
• ネット物販