Webデザインの現場では、「デザインカンプ」を必ず作成します。

デザインカンプとは、WebサイトやLPの完成形の見本のこと。クライアントとのイメージの共有や、コーダーへの指示を送るために必要です。

この記事では、デザインカンプとは何か?というところから、デザインカンプの作り方まで、詳しく解説します。デザインカンプ作成のコツを覚えて、デキるWebデザイナーを目指しましょう。

目次

デザインカンプとは

デザインカンプとは、Webデザインの完成見本のことです。「Design Comprehensive Layout」の略で、単に「カンプ」とだけいうこともあります。

作成する目的は、チーム全体で完成イメージを共有するためです。

具体的な例として、デザイン業務の進め方を考えるとわかりやすいでしょう。デザイン作成の業務は、クライアントから以下のような指示を受けて進行します。

  • 全体の雰囲気を柔らかくして欲しい
  • 狙っている層に刺さるような文章を考えて欲しい
  • クリックしやすいボタンデザインが欲しい

このような指示は、人によって解釈が異なります。自分だけの考えでデザインを作ってしまうと、クライアントの要望を叶えられず、衝突の原因となってしまうかもしれません。

このようなズレを防ぐためにも、デザインカンプを作ることが大切です。

Web制作はコーディングを行って、Web上に公開するのがひとつのゴールです。コーディングをするためには、要素の大きさや余白、パーツ同士の位置をどうするのか、数値で表す必要があります。このように、デザインカンプは「コーディングの仕様書」のような側面も持っています。

デザインカンプは「モックアップ」と呼ばれることもあります。意味合い的には同じ言葉なので、どちらも「完成品の見本」のことだと認識しておけば問題ありません。

デザインカンプの作り方

デザインカンプの作り方は、大きく以下の6ステップに分かれます。

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

  1. デザインの要件を固める
  2. 参考にするデザインを決める
  3. ラフスケッチを作る
  4. ワイヤーフレームを作る
  5. 全体の調整と総仕上げを行う
  6. 必要に応じてレスポンシブデザインを作成する

各ステップで行う作業を把握して、全体の進行をイメージできるようにしておきましょう。

1.デザインの要件を定義する

まずは、デザインの要件を固めます。ここでのすり合わせを、「要件定義」といいます。

要件定義では、以下のことを決めておきましょう。

  • デザイン作成の目的
  • 想定しているターゲット層
  • サイト全体の雰囲気
  • ページの構成

要件定義を行うのは、どんな目的でデザインを作成するのかどんなターゲットに対してアプローチしていくのかを明確にするためです。

Webサイトの場合は集客率アップ、LPの場合はお問い合わせ数の増加などを目的とすることが多く、成果を出すために最適なデザインを作ることが求められます。

さらに、要件定義ではサイト全体で必要なページ数や実装する機能などの仕様についても決めておきます。

ここで仕様を決めておかないと、制作の進行中に手戻りが発生する原因となります。全体の進行をスムーズに行うためにも、最初に要件定義をしておくことが大切です。

デザイン作成の練習としてデザインカンプを作成するときでも、要件定義は必ず行うようにしましょう。仮案件のような形でデザインの目的と機能を設定して、実際の案件を想定した練習をすると効果的です。

2.参考にするデザインを決める

デザインの要件が決まったら、参考にするデザインを決めます。以下のサイトを見ながら参考デザインを探してください。

参考デザインを集めたサイトの例

参考にするデザインを選ぶときのポイントは、以下の3点です。

  • クライアントの要望に近いものを選ぶ
  • できるだけ多くのデザインを用意する(少なくても5つほど)
  • 想定しているターゲットが近いものを選ぶ

要件定義ですり合わせた情報から、参考サイトを使ってクライアントの要望に近いデザインをいくつかピックアップします。それをもとに、大まかな完成形をイメージしましょう。

参考サイトは、レイアウトや配色など、クライアントのイメージに合うものを選定することが大切です。

参考にするデザインの数は、できるだけ多めに用意するのがおすすめです。少なくとも5つほどは用意しておきましょう。

参考にするデザインを選ぶときのポイントは、想定しているターゲットが同じものを選ぶことです。

どんな言葉で訴求しているのか、どんな配置で導線を組んでいるのかを見ることで、効果的なデザインの作り方がわかります。実際に結果を出しているデザインを参考にして、自分のデザインにも活かしましょう。

3.ラフスケッチを作る

参考にするデザインを決めたら、次はラフスケッチを作成します。ラフスケッチは、「デザインの下書き」だと思っておくとわかりやすいでしょう。

ラフスケッチのイメージ

ラフスケッチ作成のポイントは、以下の4点です。

  • 手書きで作成する
  • 綺麗さや見やすさにこだわらない
  • 思いつく限り多くのデザイン案を出す
  • 何度も書き直して具体的なイメージを膨らませる

ラフの段階では、ツールを使わずに手書きで進めるのがおすすめです。手書きならツールを使うよりも素早くメモを残せるので、どんどん手を動かしてできるだけ多くのアイデアを出しましょう。

ラフスケッチを作成するときは、いくつも書き直して具体的なイメージを膨らませることが大切です。最初は抽象度の高い状態でも、少しずつ具体化して、最終的にはWebサイトの下書きにできる状態に仕上げます。

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

次に行うのは、「ワイヤーフレーム」の作成です。

ワイヤーフレームとはデザインの構成案のことで、線や図形、テキストなどを配置して作成します。ラフスケッチが下書きなら、ワイヤーフレームは「清書」だと考えるとわかりやすいでしょう。

ラフスケッチでは大雑把なパーツの配置を決めましたが、ワイヤーフレームの作成段階では要素の大きさ余白など、細かな数値を設定していきます。

ワイヤーフレームのイメージ

要素の大きさや余白は、8の倍数で設定するのがおすすめです。

「8の倍数」のメリット

  • 画面幅が変わるときに調整しやすい
  • 最小単位を8にすると小数点が出ない
  • 規則性が生まれてユーザーに親切なデザインになり、コーディング作業もしやすくなる

ワイヤーフレーム作成のコツは、ガイド線を引いておくことです。

ガイド線を引いておけば、パーツの配置やレイアウトがずれることなく作業を進められます。ガイド線を引く位置は、中心と左右のコンテナ幅にするとやりやすくなるでしょう。

8の倍数デザインについて

プロジェクトによっては、ワイヤーフレームの段階で正確な配置は確定させずに、大まかな動線までを決める場合もあります。

その場合は、デザインカンプの段階で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デザイナーを目指すなら契約しておきましょう。

Photoshop

Photoshopは、画像編集が得意なデザイン作成ツールです。高機能で優秀なソフトのため、デザインカンプを作成するためのツールとしても根強い人気を持っています。

Photoshopの特徴

  • 写真の切り抜き・合成ができる
  • テキスト加工・背景の編集など複雑な操作ができる
  • Illustratorとの互換性が高い

Photoshopは、XDとは異なり単体で使用することができます。AdobeCC単体プランに契約すると月額2,728円 (税込)で使用できます。画像の加工を得意としているので、写真をメインに使うWebデザインの作成で真価を発揮します。

Photoshopの操作方法は、こちらを参考にするとよいでしょう。

Figma

Figmaは、近年急速に勢いを増しているデザインツールです。デザインをブラウザ上で簡単に作成できるのが大きな特徴で、チームでのデータの共有にも適しています。

Figmaの特徴

  • 無料で利用できる(作成できるファイル数に限度あり)
  • オンラインでの共同作業に最適
  • 自動保存機能がある

Figmaは無料で使えるのが魅力的なデザインツールです。ブラウザ上で作業できるので、作業を中断しても途中から開始できます。リアルタイムでプレビューを反映できるので、変更点があった場合はその場で修正することも可能です。

ただし、Figmaには「オフラインで作業できない」「ガイド線を引くことができない」「パーツの書き出しがやりにくい」などのデメリットがあります。メリットとデメリットを見比べて、実際に使うべきか判断しましょう。

基本的には無料で使えて機能も優秀。採用している現場も多いので、Figmaを扱えるようになっておくのはおすすめです。

Figmaの使い方は、こちらのチュートリアルが参考になります。

Figmaの基本 – Figma Basics 日本語版 | Figma

GIMP

GIMPは、画像の加工・編集を得意とするデザインツールです。Photoshopと異なるのは無料で使用できることや様々なOSで使用できること、ファイル形式の互換性が高いことなどが挙げられます。

GIMPの特徴

  • 無料で使える
  • 画像の加工処理や編集が得意
  • psd形式の画像を編集できる

機能が多くて使いやすいのが、GIMPの特徴です。Photoshopと比べると機能面で劣りますが、初心者が学習のために使用する分には十分な機能を備えているといえます。プロレベルの作業を必要としないうちはGIMPで、デザインの実務を行うようになってからはPhotoshopを扱う、というふうにするのもおすすめです。

GIMPの使い方は、こちらを参考にするとわかりやすいでしょう。

4つのステップで学ぶ GIMP 2.10 の使い方

デザインカンプ作成のポイント

デザインカンプ作成には、意識すべき3つのポイントがあります。クオリティの高いデザインを作るため、制作の進行を滞らせないためにもポイントを意識しながらカンプ作成を行っていきましょう。

デザインカンプ作成のポイントは、以下の通りです。

デザインカンプ作成のポイント

  • ユーザー視点で考える
  • コーディングで再現できるデザインにする
  • やりやすいところから着手する

ユーザー視点で考える

デザインカンプの作成でもっとも大事なのは、ユーザー視点で考えることです。実際にデザインを見る立場になって、「見やすいか」「使いやすいか」を常に考えて作成しましょう。

ユーザー視点に立つための考え方として、「オリジナリティを出そうとしすぎない」ことが大切です。他のデザインと一線を画すようなデザインは確かに目を惹きますが、あまりに独自性を出しすぎるとユーザーにとって不親切な設計になりかねません。

自分の色を出そうとするよりも、まずは確実に満足してもらえるデザインを作るように心がけましょう。

とはいえ、このようなユーザーニーズに対しての感性は一朝一夕で身につくものではありません。たくさんのお手本を見て、たくさんデザインを作っていくうちに段々と培われていくものです。

レベルの高いWebデザイナーになるためにも、まずはアウトプットの量を増やして、着実にデザインのレベルをあげていきましょう。

コーディングを意識したデザインにする

デザインカンプは、コーディングで実装できるものにしなくてはなりません。そのためには、HTML/CSSの知識が必須です。

コーディングを意識したデザインを作成するポイントは、以下の通りです。

  • 数値は整数にする
  • 使いまわせるパーツの構造を意識する
  • 必要に応じてレスポンシブデザインを作成する

コーダーとのやりとりは、Webデザイン作成を成功させる大事な役割を持っています。Webデザイナーがコーディングを意識することで、コーダーにとって作業しやすい環境ができ、チーム内のコミュニケーションも円滑になります。

スムーズな制作の進行のためにも、コーディングを意識したデザインカンプ作成を行いましょう。

やりやすいところから着手する

作業を進めるコツとして、やりやすいところから着手するのがおすすめです。デザインカンプは、一番上から順番に作っていく必要はありません。ヘッダーやメインコンテンツ、細かなパーツなど、好きなところから取り掛かるとよいでしょう。

難しいところから始めると、モチベーション低下の原因にもなります。得意な部分から作業を始めて、詰まることなく作成できるようにするのが効率化のポイントです。

デザインカンプ作成の練習方法

デザインカンプ作成の練習は、以下のような順番で行うのがおすすめです。

デザインカンプ作成の練習方法

  1. デザインツールの使い方を覚える
  2. 参考サイトをひたすらトレースする
  3. オリジナルの作品を作る

1.デザインツールの使い方を覚える

まずは、デザインツールの使い方を覚えましょう。デザインツールにはXDやFigmaなど、様々な種類があります。

それぞれに特徴があるので、使い分けることが大切です。基本的な操作方法は、各ツールのチュートリアル動画で学習できます。

ツールの操作スキルは、作業効率に大きく関わります。効率のよい作業を行うためにも、実務で使用するツールの特性を理解しておきましょう。

とはいえ、操作方法を覚える段階で足踏みするのも望ましくありません。ある程度の使い方を覚えたら、あとは実際にデザインを作りながら操作スキルを育てていきましょう。

2.参考サイトをトレースする

ツールの使い方を覚えたら、実戦練習に移ります。まだ自分のデザインを作るのは難しいので、最初は参考サイトをトレース(丸写し)するところから始めるのがおすすめです。

ポイントは、とにかくたくさんのお手本をトレースすることです。プロが作成したデザインをトレースすれば、ツールの使い方の学習になるのはもちろん、レイアウトや余白作りのコツを理解するのにも役立ちます。

最初はただ写すだけでも練習になりますが、慣れてきたら「なぜそのデザインにしているのか」を考えながら行うとさらに効果的です。

デザインの練習は、手を動かしてアウトプットしていくことが大切です。練習量が多いほど様々なデザインの経験が蓄積されていくので、実力のあるWebデザイナーになるためにもアウトプットを欠かさず行いましょう。

3.オリジナルの作品を作る

最後は、自分なりにデザインを自作してアウトプットしていきます。

参考サイトのトレースから少しだけアイデアをもらって、新しくレイアウトやあしらいを作る方法がおすすめです。完全にゼロから作るのはハードルが高いですが、参考サイトをもとにすればクオリティの高いデザインを作りやすくなります。

オリジナルの作品は、ポートフォリオに追加できます。ポートフォリオとは実績や作品をまとめたもののことで、副業・フリーランスの案件探しや転職活動の際に活用します。ポートフォリオの作品はデザイナーのスキルを図る重要な物差しとなるので、しっかり作り込むようにしましょう。

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP