「デザインカンプって何？」
「デザインカンプはどうやって作ればいいの？」
「デザインカンプを作れるツールは？」
Webデザインの現場では、「デザインカンプ」を必ず作成します。
デザインカンプとは、WebサイトやLPの完成形の見本のこと。クライアントとのイメージの共有や、コーダーへの指示を送るために必要です。
この記事では、デザインカンプとは何か？というところから、デザインカンプの作り方まで、詳しく解説します。デザインカンプ作成のコツを覚えて、デキるWebデザイナーを目指しましょう。
- Webデザイナーを目指している人
- Webデザインの作り方で悩んでいる人
- 上手なデザインカンプを作りたい人
独学でWebデザイナーを目指す人へ
Webデザイナーを独学で目指している場合は、学習方法をしっかり把握しておくことが大切です。学習の流れを決めておけば、目標達成まで最短で駆け抜けられます。Webデザイナーの独学についてはこちらの記事で詳しく解説しているので、ぜひ参考にしてください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
デザインカンプとは
デザインカンプとは、Webデザインの完成見本のことです。「Design Comprehensive Layout」の略で、単に「カンプ」とだけいうこともあります。
作成する目的は、チーム全体で完成イメージを共有するためです。
具体的な例として、デザイン業務の進め方を考えるとわかりやすいでしょう。デザイン作成の業務は、クライアントから以下のような指示を受けて進行します。
- 全体の雰囲気を柔らかくして欲しい
- 狙っている層に刺さるような文章を考えて欲しい
- クリックしやすいボタンデザインが欲しい
このような指示は、人によって解釈が異なります。自分だけの考えでデザインを作ってしまうと、クライアントの要望を叶えられず、衝突の原因となってしまうかもしれません。
このようなズレを防ぐためにも、デザインカンプを作ることが大切です。
Web制作はコーディングを行って、Web上に公開するのがひとつのゴールです。コーディングをするためには、要素の大きさや余白、パーツ同士の位置をどうするのか、数値で表す必要があります。このように、デザインカンプは「コーディングの仕様書」のような側面も持っています。
デザインカンプは「モックアップ」と呼ばれることもあります。意味合い的には同じ言葉なので、どちらも「完成品の見本」のことだと認識しておけば問題ありません。
デザインカンプの作り方
デザインカンプの作り方は、大きく以下の6ステップに分かれます。
- デザインの要件を固める
- 参考にするデザインを決める
- ラフスケッチを作る
- ワイヤーフレームを作る
- 全体の調整と総仕上げを行う
- 必要に応じてレスポンシブデザインを作成する
各ステップで行う作業を把握して、全体の進行をイメージできるようにしておきましょう。
1．デザインの要件を定義する
まずは、デザインの要件を固めます。ここでのすり合わせを、「要件定義」といいます。
要件定義では、以下のことを決めておきましょう。
- デザイン作成の目的
- 想定しているターゲット層
- サイト全体の雰囲気
- ページの構成
要件定義を行うのは、どんな目的でデザインを作成するのか、どんなターゲットに対してアプローチしていくのかを明確にするためです。
Webサイトの場合は集客率アップ、LPの場合はお問い合わせ数の増加などを目的とすることが多く、成果を出すために最適なデザインを作ることが求められます。
さらに、要件定義ではサイト全体で必要なページ数や実装する機能などの仕様についても決めておきます。
ここで仕様を決めておかないと、制作の進行中に手戻りが発生する原因となります。全体の進行をスムーズに行うためにも、最初に要件定義をしておくことが大切です。
デザイン作成の練習としてデザインカンプを作成するときでも、要件定義は必ず行うようにしましょう。仮案件のような形でデザインの目的と機能を設定して、実際の案件を想定した練習をすると効果的です。
関連記事
Webサイトの要件定義については、こちらの記事で詳しく解説しています。ぜひ参考にしてください。
2．参考にするデザインを決める
デザインの要件が決まったら、参考にするデザインを決めます。以下のサイトを見ながら参考デザインを探してください。
参考にするデザインを選ぶときのポイントは、以下の3点です。
- クライアントの要望に近いものを選ぶ
- できるだけ多くのデザインを用意する（少なくても5つほど）
- 想定しているターゲットが近いものを選ぶ
要件定義ですり合わせた情報から、参考サイトを使ってクライアントの要望に近いデザインをいくつかピックアップします。それをもとに、大まかな完成形をイメージしましょう。
参考サイトは、レイアウトや配色など、クライアントのイメージに合うものを選定することが大切です。
参考にするデザインの数は、できるだけ多めに用意するのがおすすめです。少なくとも5つほどは用意しておきましょう。
参考にするデザインを選ぶときのポイントは、想定しているターゲットが同じものを選ぶことです。
どんな言葉で訴求しているのか、どんな配置で導線を組んでいるのかを見ることで、効果的なデザインの作り方がわかります。実際に結果を出しているデザインを参考にして、自分のデザインにも活かしましょう。
3．ラフスケッチを作る
参考にするデザインを決めたら、次はラフスケッチを作成します。ラフスケッチは、「デザインの下書き」だと思っておくとわかりやすいでしょう。
ラフスケッチ作成のポイントは、以下の4点です。
- 手書きで作成する
- 綺麗さや見やすさにこだわらない
- 思いつく限り多くのデザイン案を出す
- 何度も書き直して具体的なイメージを膨らませる
ラフの段階では、ツールを使わずに手書きで進めるのがおすすめです。手書きならツールを使うよりも素早くメモを残せるので、どんどん手を動かしてできるだけ多くのアイデアを出しましょう。
ラフスケッチを作成するときは、いくつも書き直して具体的なイメージを膨らませることが大切です。最初は抽象度の高い状態でも、少しずつ具体化して、最終的にはWebサイトの下書きにできる状態に仕上げます。
4．ワイヤーフレームを作る
次に行うのは、「ワイヤーフレーム」の作成です。
ワイヤーフレームとはデザインの構成案のことで、線や図形、テキストなどを配置して作成します。ラフスケッチが下書きなら、ワイヤーフレームは「清書」だと考えるとわかりやすいでしょう。
ラフスケッチでは大雑把なパーツの配置を決めましたが、ワイヤーフレームの作成段階では要素の大きさや余白など、細かな数値を設定していきます。
要素の大きさや余白は、8の倍数で設定するのがおすすめです。
「8の倍数」のメリット
- 画面幅が変わるときに調整しやすい
- 最小単位を8にすると小数点が出ない
- 規則性が生まれてユーザーに親切なデザインになり、コーディング作業もしやすくなる
ワイヤーフレーム作成のコツは、ガイド線を引いておくことです。
ガイド線を引いておけば、パーツの配置やレイアウトがずれることなく作業を進められます。ガイド線を引く位置は、中心と左右のコンテナ幅にするとやりやすくなるでしょう。
8の倍数デザインについて
プロジェクトによっては、ワイヤーフレームの段階で正確な配置は確定させずに、大まかな動線までを決める場合もあります。
その場合は、デザインカンプの段階で8の倍数を用いた細かい調整を行います。
余談になりますが、ZeroPlus Mediaを運営する株式会社TOMAPの内部制作フローでは、ワイヤーフレームの段階では8の倍数で制作することはありません。デザインカンプで細かい寸法を調整します。
しかしWeb制作会社などの現場では、先方とデザインを正確に擦り合わせるために、ワイヤーフレームの段階から8の倍数を用いて作ることがあります。
ワイヤーフレームの設計段階で8の倍数に配置することはあくまで方法の1つです。必ずしも8の倍数にこだわることなく、状況や場合に応じて柔軟に対応することが大切です。
5．デザインカンプの完成
最後に、全体の調整と総仕上げを行い、デザインカンプを完成させます。ここで行う作業は、以下の通りです。
- パーツを作成・配置する
- 画像を挿入する
- 配色をする
- あしらいを追加する
- 誤字脱字のチェックをする
パーツの配置は、全体的なバランスを考えながら行っていきます。ボタンやテキストなどのパーツを作成し、あしらいを追加していきましょう。
全体的な調整が終わったら、一旦時間を置いてから確認するのがおすすめです。完成直後は達成感があるので、客観的にデザインを見られるようになってから見直しを行うのがポイントです。
6．必要に応じてレスポンシブデザインを作成する
デザインの業務では、必要に応じてレスポンシブデザインを用意することがあります。
レスポンシブ対応とは、表示するデバイスの画面幅によって見せ方を変える仕組みのことです。CSSの記述によって実装するものですが、デザインの段階でスマホ版・タブレット版・PC版と決めておけばコーディング作業をスムーズに進められます。
レスポンシブデザインの作成を行うと工数が増えるので、コストがかかるのを嫌うクライアントによっては作成しないこともあります。しかし近年のWebデザインはモバイルファーストが重要視されているので、レスポンシブデザインは今はWebデザイナーに必須の考え方です。
どんな案件でも対応できるよう、レスポンシブデザインについて理解しておきましょう。
デザインカンプ作成におすすめのツール
デザインカンプの作成は、ツールを使って行います。デザインツールは多くの種類があるので、シェアの多さや使いやすさで選ぶとよいでしょう。
デザインカンプの作成におすすめのツールは以下の通りです。
- AdobeXD
- Photoshop
- Figma
- GIMP
それぞれのツールの特性を理解して、最適なツールを選ぶことが大切です。以下、各ツールを紹介していくので、興味のあるツールはぜひ自分の手で触ってみてください。
AdobeXD
AdobeXDは、Adobeが提供しているデザイン作成ツールです。
AdobeXDの特徴
- 動作が軽い
- チーム間でデザインの共有をしやすい
- ユーザーの動きをデザインデータで確認できる
AdobeXDは、単体で使用することができません。使用するためには、Adobe Creative Cloud（Adobe CC）のコンプリートプランを契約する必要があります。月額6,480円（税込）がかかりますが、XDだけでなくPhotoshopやIllustratorも使えるようになるので、プロのWebデザイナーを目指すなら契約しておきましょう。
AdobeXDの詳しい操作方法は、こちらを参考にするとわかりやすいです。
Photoshop
Photoshopは、画像編集が得意なデザイン作成ツールです。高機能で優秀なソフトのため、デザインカンプを作成するためのツールとしても根強い人気を持っています。
Photoshopの特徴
- 写真の切り抜き・合成ができる
- テキスト加工・背景の編集など複雑な操作ができる
- Illustratorとの互換性が高い
Photoshopは、XDとは異なり単体で使用することができます。AdobeCC単体プランに契約すると月額2,728円 (税込)で使用できます。画像の加工を得意としているので、写真をメインに使うWebデザインの作成で真価を発揮します。
Photoshopの操作方法は、こちらを参考にするとよいでしょう。
Figma
Figmaは、近年急速に勢いを増しているデザインツールです。デザインをブラウザ上で簡単に作成できるのが大きな特徴で、チームでのデータの共有にも適しています。
Figmaの特徴
- 無料で利用できる（作成できるファイル数に限度あり）
- オンラインでの共同作業に最適
- 自動保存機能がある
Figmaは無料で使えるのが魅力的なデザインツールです。ブラウザ上で作業できるので、作業を中断しても途中から開始できます。リアルタイムでプレビューを反映できるので、変更点があった場合はその場で修正することも可能です。
ただし、Figmaには「オフラインで作業できない」「ガイド線を引くことができない」「パーツの書き出しがやりにくい」などのデメリットがあります。メリットとデメリットを見比べて、実際に使うべきか判断しましょう。
基本的には無料で使えて機能も優秀。採用している現場も多いので、Figmaを扱えるようになっておくのはおすすめです。
Figmaの使い方は、こちらのチュートリアルが参考になります。
GIMP
GIMPは、画像の加工・編集を得意とするデザインツールです。Photoshopと異なるのは無料で使用できることや様々なOSで使用できること、ファイル形式の互換性が高いことなどが挙げられます。
GIMPの特徴
- 無料で使える
- 画像の加工処理や編集が得意
- psd形式の画像を編集できる
機能が多くて使いやすいのが、GIMPの特徴です。Photoshopと比べると機能面で劣りますが、初心者が学習のために使用する分には十分な機能を備えているといえます。プロレベルの作業を必要としないうちはGIMPで、デザインの実務を行うようになってからはPhotoshopを扱う、というふうにするのもおすすめです。
GIMPの使い方は、こちらを参考にするとわかりやすいでしょう。
デザインカンプ作成のポイント
デザインカンプ作成には、意識すべき3つのポイントがあります。クオリティの高いデザインを作るため、制作の進行を滞らせないためにもポイントを意識しながらカンプ作成を行っていきましょう。
デザインカンプ作成のポイントは、以下の通りです。
- ユーザー視点で考える
- コーディングで再現できるデザインにする
- やりやすいところから着手する
ユーザー視点で考える
デザインカンプの作成でもっとも大事なのは、ユーザー視点で考えることです。実際にデザインを見る立場になって、「見やすいか」「使いやすいか」を常に考えて作成しましょう。
ユーザー視点に立つための考え方として、「オリジナリティを出そうとしすぎない」ことが大切です。他のデザインと一線を画すようなデザインは確かに目を惹きますが、あまりに独自性を出しすぎるとユーザーにとって不親切な設計になりかねません。
自分の色を出そうとするよりも、まずは確実に満足してもらえるデザインを作るように心がけましょう。
とはいえ、このようなユーザーニーズに対しての感性は一朝一夕で身につくものではありません。たくさんのお手本を見て、たくさんデザインを作っていくうちに段々と培われていくものです。
レベルの高いWebデザイナーになるためにも、まずはアウトプットの量を増やして、着実にデザインのレベルをあげていきましょう。
コーディングを意識したデザインにする
デザインカンプは、コーディングで実装できるものにしなくてはなりません。そのためには、HTML/CSSの知識が必須です。
コーディングを意識したデザインを作成するポイントは、以下の通りです。
- 数値は整数にする
- 使いまわせるパーツの構造を意識する
- 必要に応じてレスポンシブデザインを作成する
コーダーとのやりとりは、Webデザイン作成を成功させる大事な役割を持っています。Webデザイナーがコーディングを意識することで、コーダーにとって作業しやすい環境ができ、チーム内のコミュニケーションも円滑になります。
スムーズな制作の進行のためにも、コーディングを意識したデザインカンプ作成を行いましょう。
関連記事
Webデザイナーがコーディングを学習すべき理由は、こちらの記事で詳しく解説しています。
HTML/CSSコーディングの練習をしたい人は、こちらの記事を参考にしてください。
コーディングの基礎を学ぶならZeroPlus Gate
Webデザイナーを目指すなら、コーディングについて学習しておきましょう。HTML/CSSを扱えるようになれば、Webデザイナーとして活躍の場が広がります。
実際にWebデザインとコーディングを一緒に学べるデザインスクールは多くありますが、同時に複数のスキルを学ぼうとすると駆け足で取得することになり、浅い部分しか身につかないかもしれません。
無料のプログラミングスクール『ZeroPlus Gate』ならば、コーディング技術の基礎を30日間しっかり身につけられます。わからない点は、現役エンジニアに無制限で質問できるため、「コーディングは難しそう」と感じている方でも安心です。
いきなりデザインスクールに飛び込むより、先に無料のZeroPlus Gateでコーディングを身に付け、Webデザインを学ぶ下地を固めておくことが、学習中の挫折を防ぐおすすめの方法です。
ZeroPlus Gateへの参加は、特設サイトよりぜひお申し込みください。
やりやすいところから着手する
作業を進めるコツとして、やりやすいところから着手するのがおすすめです。デザインカンプは、一番上から順番に作っていく必要はありません。ヘッダーやメインコンテンツ、細かなパーツなど、好きなところから取り掛かるとよいでしょう。
難しいところから始めると、モチベーション低下の原因にもなります。得意な部分から作業を始めて、詰まることなく作成できるようにするのが効率化のポイントです。
デザインカンプ作成の練習方法
デザインカンプ作成の練習は、以下のような順番で行うのがおすすめです。
- デザインツールの使い方を覚える
- 参考サイトをひたすらトレースする
- オリジナルの作品を作る
1．デザインツールの使い方を覚える
まずは、デザインツールの使い方を覚えましょう。デザインツールにはXDやFigmaなど、様々な種類があります。
それぞれに特徴があるので、使い分けることが大切です。基本的な操作方法は、各ツールのチュートリアル動画で学習できます。
ツールの操作スキルは、作業効率に大きく関わります。効率のよい作業を行うためにも、実務で使用するツールの特性を理解しておきましょう。
とはいえ、操作方法を覚える段階で足踏みするのも望ましくありません。ある程度の使い方を覚えたら、あとは実際にデザインを作りながら操作スキルを育てていきましょう。
2．参考サイトをトレースする
ツールの使い方を覚えたら、実戦練習に移ります。まだ自分のデザインを作るのは難しいので、最初は参考サイトをトレース（丸写し）するところから始めるのがおすすめです。
ポイントは、とにかくたくさんのお手本をトレースすることです。プロが作成したデザインをトレースすれば、ツールの使い方の学習になるのはもちろん、レイアウトや余白作りのコツを理解するのにも役立ちます。
最初はただ写すだけでも練習になりますが、慣れてきたら「なぜそのデザインにしているのか」を考えながら行うとさらに効果的です。
デザインの練習は、手を動かしてアウトプットしていくことが大切です。練習量が多いほど様々なデザインの経験が蓄積されていくので、実力のあるWebデザイナーになるためにもアウトプットを欠かさず行いましょう。
3．オリジナルの作品を作る
最後は、自分なりにデザインを自作してアウトプットしていきます。
参考サイトのトレースから少しだけアイデアをもらって、新しくレイアウトやあしらいを作る方法がおすすめです。完全にゼロから作るのはハードルが高いですが、参考サイトをもとにすればクオリティの高いデザインを作りやすくなります。
オリジナルの作品は、ポートフォリオに追加できます。ポートフォリオとは実績や作品をまとめたもののことで、副業・フリーランスの案件探しや転職活動の際に活用します。ポートフォリオの作品はデザイナーのスキルを図る重要な物差しとなるので、しっかり作り込むようにしましょう。
関連記事
Webデザイナーのポートフォリオについては、こちらの記事で詳しく解説しています。作り方の手順や作成のポイントを押さえておけば、クオリティの高いポートフォリオを作れるようになります。就職・転職を成功させるためにも、ぜひ参考にしてください。
Webデザイナーを最短で目指すならスクールがおすすめ
Webデザイナーを最短で目指すなら、スクールに通うのがおすすめです。
スクールに通えば、デザインに深い知見のある講師のもとでフィードバックをもらえるので、効率よくデザインスキルを磨くことができます。独学で闇雲に進めると挫折の原因となってしまうので、本格的にWebデザイナーを目指している人はスクールを検討してみてください。
とはいえ、「デザインスクールは高額で手を出せない」と悩んでいる人も多いはず。確かにデザインスクールは一般的に高額な受講料を払うイメージがありますが、中には無料で通えるスクールも存在します。
無料のデザインスクールについては、こちらの記事で詳しく解説しています。ぜひ気になるスクールを見つけてみてください。
無料で受講できるスクールZeroPlus Gate
ZeroPlus Gateは、完全無料でWebサイト制作を学習できるサービスです。Webデザイナーに必要なコーディングスキルを身につけられます。
ZeroPlus Gateは、特に以下のような人におすすめです。
- 独学だと挫折してしまいそう
- 短期間で集中して学び切りたい
- Webデザイナーを目指すキャリアについて相談できる人と繋がりたい
- プロの講師に技術を教えてもらいたい
初心者・未経験者でも最短で技術を身につけたい人は、ぜひZeroPlus Gateの受講を検討してみてください。ZeroPlus Gateで、Webデザイナーへの一歩を踏み出しましょう！
\受講は完全無料！/
まとめ：デザインカンプは「完成品の見本」
この記事では、Webデザインの現場で作成する「デザインカンプ」について解説してきました。
デザインカンプは、WebサイトやLPなどの見本のことであり、デザインカンプを通してチームの認識をすり合わせるために必要です。
デザインカンプの作り方は、以下の通りです。
- デザインの要件を固める
- 参考にするデザインを決める
- ラフスケッチを作る
- ワイヤーフレームを作る
- 全体の調整と総仕上げを行う
- 必要に応じてレスポンシブデザインを作成する
「ユーザーからの見え方を常に気にする」「コーディングで再現できるデザインにする」「やりやすいところから着手する」という3つのポイントを意識すると、クオリティの高いデザインカンプを作りやすくなります。
また、デザインカンプを作るためには、ツールを扱えるようになる必要があります。XDやPhotoshop、Figmaなどのツールの特徴を知って、最適なツールを選べるようにしておきましょう。
Webデザイナーになるには、コーディングスキルが重要です。HTML/CSSやJavaScriptなどのプログラミングスキルが必要になりますが、苦手意識を持っている人も少なくないでしょう。コーディングを効率よく身につけるなら、スクールに通って学習するのがおすすめです。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
