Webサイトを制作する際に重要なポイントは、クライアントのイメージを汲み、表現することです。
その際、クライアントとのイメージを共有するために欠かせないものが「デザインカンプ」です。
Webサイト制作に興味を持っている方は、一度は耳にしたことがあるはず。
この記事では、デザインカンプの意味や作り方、ツール、作成のポイントを紹介します。
目次
デザインカンプとは？
デザインカンプとは、デザインの完成見本を表しており、「Design Comprehensive Layout」の略称です。「カンプ」と呼ばれることもあります。
デザインカンプが必要な理由
デザイン作成前には必ずクライアントとヒアリングを行いますが、どうしても言葉だけでは齟齬が生じたり、イメージしているものが違っていることが多々あります。どのような見た目・機能を付けるのかなど、細部まで確認が必要です。
デザインカンプを活用することで完成イメージが可視化されるため、クライアントとの認識を合わせることができます。
また、制作側のデザイナーとコーダーで共通の完成イメージを持ち、制作作業をスムーズに進めることにも役立ちます。
ワイヤフレームやモックアップとの違い
デザインカンプと混同されやすい言葉に「ワイヤーフレーム」と「モックアップ」があります。
ワイヤーフレームとはデザインの前段階に作成します。何をどこに配置するのか、サイトのレイアウト・構成を可視化したものを指します。デザイン性は必要なく、制作するページの構成がわかれば問題ありません。
素の位置関係を指定するワイヤーフレームが先にあり、それを元に色や画像を入れ込み、完成イメージにしたものがデザインカンプです。
一方、モックアップとは完成模型や試作品という意味があり、もとはプロダクトデザインにて使用されていた言葉です。Web制作では、デザインカンプと同じ意味で使用されているため、デザインカンプと同じ意味だと覚えておいて問題ないでしょう。
デザインカンプの作り方
デザインカンプはワイヤーフレームを肉付けして作成していきます。ワイヤーフレームでは、デザインに使用するカラーやフォントの種類、文字のサイズなどを反映しているものもありますが、単純な構成のみで作成されることもあります。
ワイヤーフレームで細かい部分が決まっていない場合には、デザインカンプでデザインイメージや細かいサイズなどを決めていく必要があります。
では、デザインカンプはどのような手順で作成していくのか、流れを紹介します。
①サイトの目的を決める
まずは、Webサイトを制作する目的や狙いなどをしっかり決めます。
コーポレートサイトなのか、キャンペーンサイトなのか、ECサイトなのかなど、目的や目標とするターゲット層など、Webサイトの目的によってデザインは異なります。
そのため最初の段階で、Webサイトの目的などをしっかり決めることが大切です。
②サイトのデザインイメージを固める
同じターゲット層・目的のサイトがどのようなデザインなのか、どのような構成なのかを見比べましょう。テキストサイズを始め、画像や配色などもサイトの印象を決める上で重要な要素です。
参考サイトが見つかったら、実際にサイトの構成案を作成してみましょう。サイトの目的や狙いからイメージを明確にしていきます。当たり前ですが、参考サイトはあくまでも参考とし、元サイトを真似てトレースするなど、著作権違反するようなことはNGです。
こちらの記事に参考となるギャラリーサイトを紹介しています。
Webサイトデザインとは？作成の原則や、参考になるサイトを紹介
参考サイトはデザインカンプの作成だけではなく、デザインの勉強としても参考になるはずです。
③サイト幅を決め、ガイドを引く
目標とするWebサイトの目的や狙いなどを決め、参考になるホームページからの情報収集が終わったら、次はいよいよデザインカンプの作成です。
まずはサイト幅を決めましょう。ユーザビリティに直結する部分ですので、幅が広すぎたり狭すぎたりといった場合、ユーザーの環境によっては閲覧しにくいサイトになってしまいます。この幅のサイズはその時の流行やデバイスなどの変化・進化を反映して少しずつ変わっています。
一般的にはPCの場合は1,000px前後で作成することが多いです。幅については決まりはなく、制作するサイトの内容やデザインに応じて決めるのが良いと思います。ですが、デバイスの進化もWEBの世界も日々変化していくため、ディスプレイシェア率や新規サイトの調査も忘れずに行いましょう。
サイト幅を決めたら、サイト幅のサイズに合わせてガイドをひきます。ホームページの表示はわずか1pxズレただけでも、レイアウトが崩れ見栄えが悪くなります。そのためガイドをひく際もズレがないように注意しましょう。
④パーツを作成する
サイト幅とデザインイメージが固まったらデザインを進めていきましょう。パーツをガイドに沿って配置し、ワイヤーの構成パーツを肉付けしていきます。
完成のイメージに近づけるために、テキストや画像、ボタン、アイコンなどの素材も配置します。各素材を全て配置する理由は完成イメージを明確にするためであり、イメージを明確にすることで修正の必要の有無をクライアントと共有し判断できるからです。
サイト全体の配色もここで決めていきましょう。クライアントの要望があればそれを取り入れますが、制作側で決める場合は企業のアイデンティティを示すロゴカラーなどを参考にしましょう。
ユーザーが回遊しやすく、わかりやすいサイト設計を心がけてデザインカンプを作っていきましょう。
⑤レスポンシブデザインの場合
レスポンシブデザインのデザインカンプを作る場合は、端末に応じて作成する必要があります。
PCメインで作成した場合、画面幅が小さくなった場合にどのように表現したいのか制作時や実装した際にわからなくなることがあります。
そのためレスポンシブデザインの場合は、メインとなるデバイスのデザインカンプを作成し、そこから他の画面幅でのデザインカンプを作成するようにしましょう。
こちらの記事ではレスポンシブデザインの効果について説明しています。
レスポンシブデザインの効果とは？メリットとデメリットを知ろう！
デザインカンプ作成のポイント
デザインカンプはそれ単体で完結するものではなく、Webサイトとして完成させるための前段階の制作物に位置づけられています。
そのためデザインカンプ作成時は、どのようなことに気を付ければ制作作業がスムーズに進むのでしょうか？
コーディングを意識する
前述したように、デザインカンプは完成見本であり、コーダーはデザインカンプを見てそっくりそのままコーディングします。
デザインカンプがそのままWebサイトになってくるので、デザイナーはユーザビリティもしっかり考慮してデザインしていく必要があります。
①px単位の整数値で作成する（小数点は使用しない）
②Webフォントを使用する
③ベースカラー：サブカラー：アクセントカラー＝70%：25%：5%の比率を目安に配色する
④見出しのデザインには統一性を持たせる
⑤ガイド線をなるべく増やすことなく、要素同士を整列させる
全てデザインカンプから1pxのズレも出ないようにコーディングすることがコーダーの役割なので、デザイナーはコーダーにわかりやすいデザインデータを作ることも心がけていくといいでしょう。
細部まで作成する
構成案を考える段階から、サイトのユーザー導線とどうすればクリックやコンバージョンが得られるかを考えた上で作成していくことが大事です。デザインで大切なのは目的に合った見やすさ・使いやすさです。
そのため、デザインカンプを作るときは、構成案に縛られすぎないように注意しましょう。構成案はあくまでも「案」です。
構成案に沿ってデザインカンプを作っていくと、「ここはもっと、こうした方が良いのでは？」とより良いアイデアが浮かんでくる場合もあります。構成案に縛られずに、より良いアイデアを試してみてください。
作りやすいところから取り掛かる
上から順番に完璧に作っていこうとしてしまいがちですが、そのようなルールはありません。自分が取り掛かりやすい、と思ったところから始めましょう。
最初はここのアイコンから作るとか、やっていくうちに煮詰まったら別のパーツデザインをする等、自分ができそうと思ったところからやっていくことで、モチベーションも維持できます。
部分的にデザインに着手していくと、全体を俯瞰したときに着手していないパーツのデザインの方向性が定まってくることがあるので、全体のバランスを見ながら進めていきましょう。
デザインカンプを作るためのツール
デザインカンプの作成にはさまざまなデザインツールが使用されています。ツールを使えば制作メンバーやクライアントとの共有も可能で、その後の実装作業もスムーズに行えます。
デザイン関連の仕事を進めるうえでは業務効率化に必須のデザインツールを紹介します。
Photoshop
多くのデザイナーから愛用されているのがPhotoshopです。写真のレタッチや加工に向いている画像編集ソフトです。デザインの現場ではよく使われるソフトなので、デザインカンプもPhotoshopで作れるようにするといいでしょう。
Illustrator
PhotoshopとともにWebデザインの製作現場でよく使われるソフトです。アイコンやロゴの作成で使われることも多く、Photoshopとあわせて使いこなせるようにしておきましょう。
XD
動作が軽く、複数人の共同作業が行える、UI/UXデザインに特化した機能が魅力的なのがXDです。操作性もシンプルで、初心者の方でも感覚的に操作できます。
ワイヤーフレームの作成からデザインカンプ、コーディング作業まですべてXDだけで完結できる、とても魅力的なツールです。
こちらの記事ではXDの使い方や一部の機能について紹介しています。
Figma
こちらもXDのようにUI/UXデザインに特化した共同編集が行えるツールです。ですが、XDと違うのはブラウザ上で動作するため、アプリのダウンロードが必要ないことです。また、「個人・小規模プロジェクト向け」のプランであれば完全無料で使用可能です。
ただし、ブラウザ上で動作するという特性上、オフラインでは動かない、日本語に対応していないなどの注意点もあります。
デザインカンプでイメージを共有しよう
Webサイトを制作する中で、デザインの方向性を決めるデザインカンプは重要な役割を担っています。Webサイト全体のデザインやコーディングのし易さだけではなく、見やすさ使いやすさといったユーザビリティにも直結する要素。
基本をしっかり押さえて、閲覧しやすく使いやすい、かつクライアントの求めるデザインになるようなデザインカンプを作成しましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
