Webサイトを制作する際に重要なポイントは、クライアントの意向を忠実に反映させることです。自分自身のWebサイトを作成する場合は、自分の頭の中にあるイメージをもとに制作を進めるだけですが、クライアントのWebサイトを作成する場合はそのようにはいきません。Webサイトのコンセプトをヒアリングし、クライアントにWebサイトの具体的な完成イメージを示す必要があります。
Webサイトの制作者とクライアントとのイメージを共有するために欠かせないのが、「デザインカンプ」です。Web制作に興味を持っている人であれば、一度は聞いたことがあるのではないでしょうか。今回は、デザインカンプとはどのようなものか、なぜWeb制作に必要なのかについてご説明します。
デザインカンプとは
デザインカンプとは、簡単に説明すると「完成イメージ」のことです。日本語では「カンプ」と呼んでいますが、これは英語では「包括的レイアウト」という意味の「Comprehensive Layout」を略した呼び方です。つまり、すべての要素がそろった状態の最終的な見本がデザインカンプです。
デザインカンプを制作する場合、最初にWebサイトの枠組みを決めるワイヤーフレームを作ります。ワイヤーフレームの作成とは、画像を置く位置や記事を載せる位置などを線で区切ってWebサイトの骨組みを作ることです。
ワイヤーフレーム作成後、各要素を実際に配置し、デザインカンプに仕上げます。仮の画像を配置したり、背景や色を付けたりして、最終的な完成イメージが一目で分かるようにするのです。デザインカンプは、Photoshopなどのデザイン用ツールを使って作成されます。
Webサイト制作でデザインカンプが必要な理由
では、なぜデザインカンプを最初に作らなければならないのでしょうか。
1つ目の理由は、クライアントとの認識のずれが生じることを防ぐためです。
Webサイトを作成するためには、最初にクライアントとWebサイトの方向性を決定します。どのような見た目にするのか、どのような機能を付けるのかなど、細かい部分まで確認してから制作作業に入りますが、もし最初の時点でクライアントと認識の違いがあると、大部分が完成してからすべて作り直さなくてはならない可能性があります。
そのため、Webサイト制作を始める場合、まずはクライアントにデザインカンプを数点提出することが一般的です。提出したデザインカンプの中から希望のデザインを選んでもらい、要望を聞いてカンプを修正し、制作承認を得てから制作作業をスタートさせます。
Webサイトの規模が大きくなればなるほど、制作時間や作業工数が増えるため、デザインカンプはより重要になってきます。トラブルなく制作作業を進めるためには、デザインカンプをもとにして、クライアントとイメージの共有を図ることが不可欠です。
デザインカンプを用意するもう1つの理由は、HTMLやCSSのコーディング作業をスムーズに進めるためです。Webサイト制作は多くのスタッフが制作に関わるため、スタッフ全員で明確な完成イメージが共有されていなければなりません。そのため、デザインカンプは制作作業のゴールのイメージとしても利用されます。
モックアップやワイヤーフレームとの違い
デザイン初心者が間違えやすい、デザインカンプとモックアップ、デザインカンプとワイヤーフレームの違いについて解説します。
デザインカンプとモックアップの違い
デザインカンプは、デザインの「完成サンプル」のことを指します。見本を共有することで、クライアントとイメージを固めて、すり合わせます。
モックアップは「模型」という意味があり、もともとプロダクトデザインの世界から来ている言葉です。Web制作の世界では、デザインカンプと同じようなニュアンスで使われることが多く、それほど大きな違いはありません。
デザインカンプとワイヤーフレームの違い
デザインカンプについては前述した通りですが、似たような言葉でワイヤーフレームがあります。
ワイヤーフレームとは、デザイン前段階に作成する「ページごとのレイアウト図」を指す言葉です。ワイヤーフレームをWebディレクターや営業担当が作成し、Webデザイナーはそれを元にデザインに着手していきます。
ワイヤーフレームが先にあり、それを元に作成した完成イメージをデザインカンプと呼びます。こちらはニュアンスが大きく異なるので、間違えないようにしましょう。
デザインカンプの作成手順
続いて、具体的にデザインカンプはどのような手順で作成していくのか、流れを解説します。
Webサイトの企画を固める
まずは、Webサイトを制作する上で、どのような予算、スケジュール、体制でプロジェクトを進めていくのか、企画の全体像を明確にしておく必要があります。
キャンペーンサイトなのか、コーポレートサイトなのか、ECサイトなのかなど、目的によってアウトプットは大きく変わりますし、それに紐付いて予算やスケジュールも変わります。
まずは、全体像を明確にして、それに基づいた体制構築を進めておきましょう。
参考となるWebサイトを見つける
企画を進めていく上で、参考になるサイトイメージをいくつか決めておきましょう。
競合サイトや、異業界の最近印象的だったサイト、Pinterestに載っているWebサイトのビジュアルなどなど、方法はなんでもいいので、「こんな感じ！」という参考サイトを見つけましょう。これがあるだけで、進めていく上でのイメージがだいぶ固めやすくなります。
異業種やぜんぜん違う領域であっても、Webサイトであれば意外とアウトプットが似ていることもあるので、幅広くデザインをウォッチしてみましょう。
サイトイメージを下書きする
参考サイトを見つつ、実際にサイトの構成案をいくつか作成してみましょう。Photoshopでもいいですし、まずは紙やホワイトボードにざざっと描いてみるのでも構いません。
サイトの特性や目的からブレイクダウンして、イメージをどんどん明確にしていきましょう。当たり前ではありますが、元サイトをトレースするのはNGです。
ガイドを引く
構成案が完成したら、構成案を元にガイドを引いていきましょう。Photoshopであれば定規機能が便利です。少しのズレでもビジュアルが与える影響は大きく変わるので、慎重に作業しましょう。
パーツの配置
ガイドを元に、パーツを配置し、Webサイトに肉付けをしていきます。色や画像やイラスト、動画などの素材イメージも完成版に極力近いものを配置しましょう。
レスポンシブデザインにおけるデザインカンプの作り方
レスポンシブデザインとは、Webサイトを「ユーザーが閲覧するデバイスの画面サイズに応じて表示を最適化するデザイン」のことです。
レスポンシブデザインは、今では当たり前。PCサイズでのデザインカンプだけ作成した場合は、スマホやタブレット端末ではどのように見えるのかのイメージがつきにくいです。
ですから、PC画面だけでなく、スマートフォンとタブレットから閲覧した場合のデザインカンプも制作しておくとよいでしょう。
デザインカンプを作成する際のコツ
デザインカンプを実際に作成していく上で、ここに力を入れるべし！というポイントをいくつか紹介していきます。
できるだけ細部まで作成する
フォントサイズやピクセルサイズ、余白の大きさ、実際にコーディングをするにあたって、細かく全体像を描いておくのは非常に重要です。
また、構成案を考える段階から、ユーザー導線とどうすればクリックやコンバージョンが得られるかを考えた上でページイメージを作成していくのが大事です。
参考サイトを複数用意しておき、良い要素を真似する
はじめから、オリジナリティのある構成にしよう！とこだわるよりは、すでにある、参考になりそうなサイトを複数用意して、ここはイケてる！と思う要素を真似しましょう。
真似するといっても、トレースはいけません。サイトの良いと思った構成を参考にするのが大事です。既存のあらゆるサイトも、いろんなサイトの要素の組み合わせで成り立っているのです。
着手しやすいところからまず始める
細部にこだわって上から順にやっていくのではなく、まるでデッサンで鼻から描き始める人が多いように、自分が着手しやすい箇所から一つ一つ作業を進めていくのが大事です。
多少モチベーションが落ちている時など、まず何かしらに着手をし始めると、どんどん作業が進むようになります。
デザインカンプの作成におすすめのツール
デザインカンプは紙でもできますが、クライアントやチームメンバーとの共有などを考えるとデジタルで取り掛かるのをおすすめします。効率的にデザインカンプを作成するためのツールをいくつか紹介します。
Photoshop
デザインカンプといえば、Photoshopという方も多いのではないでしょうか。デザイナーであれば必ずマスターしておきたいツールです。
Illustrator
デザイナーであれば、Photoshopとともに使えるようにしておきたいツールです。デザインカンプにおいても、Photoshopと併用することも多いです。
Figma
画像編集やデザインをWeb上で複数人で同時でやりたいのであれば、Figmaは非常に便利です。手軽でわかりやすいUXが特長です。
デザインカンプについて学ぶ方法とは
デザインカンプについて学びたいのであれば、大きく分けて「独学」か「スクール」のどちらかで学ぶ方法があります。
独学であれば、自身でWebデザインやデザインカンプについての教本を購入し、そちらをベースに学習していきます。自分のペースで学習できるメリットはありますが、学習途中で三日坊主で挫折しやすかったり、フィードバックがなかなか受けにくく、上達に時間がかかったりするリスクがあります。
スクールの場合は、スクール受講費用はかかりますが、プロのデザイナーから指導を受けられるため、悩んだ際にも質問がしやすかったり、自分のアウトプットへのフィードバックを受けられたりするメリットがあります。
本気で学習したいのであれば、費用がかかっても、プロから学習できるスクールのほうが安心して学習できるといえるかもしれません。
1994年創業、これまでに数多のクリエイターを生み出してきたデジタルハリウッドでは、オンラインのクリエイター講座「デジハリ・オンラインスクール」を運営しています。
ふだんなかなか忙しい方や、時間が取りにくい方におすすめの、オンライン学習。時間や場所にとらわれず、仕事の後や育児の合間など、好きなタイミングでWebデザインの基礎を学習できます。
デザイナーとしての一歩を踏み出したい方は、ぜひとも一度講座をチェックしてみるのをおすすめします。
まとめ
Webサイトの制作フローにおいて、デザインカンプはデザインの方向性を決める重要な役割を持ちます。コーディング作業に入ってからの大規模な方向転換は、作業コストの大幅な増加だけでなく、制作スケジュールにも影響を与えます。デザインカンプをベースに、初期の段階でクライアントとのイメージ共有をすることが、プロジェクトを成功させる秘訣です。