Webデザインの完成見本「デザインカンプ」の作り方｜作成時に意識したいことと、作成に使えるツール5選

Webデザインの完成見本である「デザインカンプ」。WebサイトやWebページがどんなデザインになるのかを、クライアントやコーダーなどに伝えるために欠かせません。

本記事ではデザインカンプとは何か、何のために使われるのかを解説。スムーズに制作を進めるためのデザインカンプの作り方や作成時に意識したいこと、作成に使えるツールも紹介します。

デザインカンプとは？

デザインカンプはWebサイトやWebページの視覚面の構成となる、Webデザインの完成見本のことです。クライアントやチームメンバーなどの関係者に、最終的にどのようなデザインを作るのかを共有するために必要です。単に「カンプ」と呼ぶこともあります。

デザインカンプを共有することで、関係者との意思疎通がしやすくなります。特にクライアントとの意思疎通は重要で、完成形を見ながらデザインの詳細を決めていきましょう。

モックアップとの違い

デザインカンプと似た言葉として、「モックアップ」が挙げられます。モックアップはデザインの完成形や試作品を示す言葉で、デザインカンプと同じ意味で使われます。

ただ、デザインカンプがWebデザインの現場で使われることが多いのに対し、モックアップは主にプロダクトデザインで使われます。

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

モックアップと同じく、「ワイヤーフレーム」もデザインカンプと混同されやすい言葉です。ワイヤーフレームはデザインの構成案や設計図のようなもので、デザインカンプはこれに基づいて作られます。

どちらもクライアントやチームメンバーなどの関係者と共通認識を持つために使われるものです。

ただ、デザインカンプを作ってから大きな修正が発生すると手戻りが多くなります。ワイヤーフレームの段階で認識のすり合わせを行い、大まかなデザインが決まってからデザインカンプを作成するといいでしょう。

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

デザインカンプの作り方は大きく6つの工程に分かれます。

それぞれの工程の詳細を確認していきましょう。

STEP1．デザインの目的を決める

まずはWebデザインの目的を決めます。目的を決めることで、そのデザインは誰に向けたものなのか（ペルソナ）も見えてきます。具体的には「商品やサービスの販売」「会社のブランディング」などの目的が考えられるでしょう。

掲載先のWebサイトについて確認することも大切です。たとえばコンテンツマーケティング用のメディアと、自社のブランディングのためのオウンドメディアでは、求められるデザインは変わってくるでしょう。

STEP2．参考にするデザインを探す

Webデザインの目的を決めたら、参考にするデザインを探しましょう。「0→1」で作るよりも、参考となるものがあった方が、デザイン制作にかかる時間を短縮できます。

参考のイメージをいくつかピックアップし、クライアントに共有することで、共通認識も持ちやすくなるでしょう。

STEP3．ワイヤーフレームを作る

参考にするデザインが決まったら、それを元にフレームワークを作りましょう。フレームワークは1つではなく、複数作成し、クライアントと共有することをおすすめします。

ここでも共通認識づくりが大切です。フレームワークへのフィードバックを通して、クライアントの要望やイメージしているデザインを引き出していきます。

なお、フレームワークの作成ツールは紙でもデジタルでも構いません。大切なのはいくつかの候補を出すこと、クライアントからフィードバックをもらい、イメージを固めていくことです。

配置する要素が多い場合は2カラム、少ない場合は1カラムのように、Webサイト・ページのカラム数もここで決めます。

STEP4．ガイドを引く

フレームワークが完成し、Webサイト・ページの大まかなレイアウトが決まったら、ガイドを引きましょう。各カラムやフッター・ヘッダーなどの幅・高さを調整しながら、レイアウトが崩れないようにガイドを引いていきます。

STEP5．パーツを配置する

ガイドを引いたら、Webサイト・ページに配置するパーツを作り、配置していきます。ここでは全体のバランスを考え、各パーツの色味や大きさ、配置を調整していきましょう。テキストのフォントやフォントサイズも決めていきます。

STEP6．必要に応じてレスポンシブデザインのカンプも作る

WebサイトやWebページをレスポンシブデザインに対応させる場合、各端末でどのようにデザインを表示するのか、端末ごとのデザインカンプも作りましょう。

この場合、各端末のデザインカンプを並行して作るのではなく、まずはメインの端末用のデザインカンプを作ります。メインのデザインカンプを先に作り、端末に合わせて調整していくことで、効率よく作業を進めていけるでしょう。

デザインカンプを作るときに意識したいこと

デザインカンプを作るときに意識したい3つのことを紹介します。これらを意識することで、デザインはもちろん、その後の工程もスムーズに進められるでしょう。

目的やコンセプトを意識する

デザインカンプを作るときは、常に目的やコンセプトを意識しましょう。これらが曖昧だったりデザイン性ばかりに目が向いたりすると、Webサイト・ページのコンセプトとできあがったデザインが乖離してしまいます。

オリジナリティよりもユーザビリティ

デザインカンプを作るときは、オリジナリティよりもユーザビリティを大切にしましょう。デザインカンプで作るのはWebサイトやWebページのデザインであり、ユーザーがタップやクリック、スクロールなどをして直接触れる部分です。

オリジナリティにばかり目が向いてしまうと、どこに何があるのかわからない、ユーザーにとって不親切なWebサイト・ページになってしまいます。

デザインからコーディングまでを考える

デザインカンプを作るときは、デザインだけでなく、コーディングのことまで考えましょう。Webデザインの完成見本であるデザインカンプは、その後、WebサイトやWebページに実装することになります。

デザインカンプの段階からコーディングを意識できていれば、その後の作業がスムーズに進むでしょう。これは自分とは別にコーディング担当がいる場合、特に重要なことです。

デザインカンプ作成に使えるツール5選

デザインカンプの作成に使えるツールを5つ紹介します。普段使っているツールやチームで導入しているツールを踏まえ、メンバーにとって使いやすいものを選びましょう。

Adobe Photoshop

Adobe Photoshopは多くのデザイナーから支持を集めているツールです。利用率が非常に高いツールであるため、これが使いこなせないと何かと困ることも出てくるでしょう。写真の編集や加工に強いツールですが、Photoshop出デザインカンプも作れるようにしておきたいです。

＞＞Adobe Photoshopの公式サイト

Adobe Illustrator

Adobe Illustratorも、Photoshopと同じくデザイン制作の現場でよく使われるツールです。ロゴやアイコン、イラストなどの作成に強いツールで、デザインカンプに配置する各種素材の制作にも使えます。

Illustratorで素材を作り、Photoshopでデザインカンプを作成するというデザイナーが多いです。

＞＞Adobe Illustratorの公式サイト

Adobe XD

Adobe XDはPhotoshopやIllustratorなどのベンダーとして知られるAdobe社の、比較的新しいツールです。2023年1月で単体プランは終了しましたが、Webサイト向けのUI・UXデザインに強いツールとして知られ、モバイル向けの制作にもよく使われています。

＞＞Adobe XDの公式サイト

Figma

Figmaはブラウザから使えるデザインツールです。ブラウザ上でデザインができるため時間や場所を問わずに使えること、直感的な操作性などに強みがあります。作成したデザインカンプをブラウザ上で確認することもでき、クライアントやメンバーとの共有もしやすいです。

＞＞Figmaの公式サイト

GIMP

GIMPはオープンソース（ソースコードが公開されたシステム。コードの改変も可能）の画像編集・ペイントツールです。無料で使えること、無料でありながら高機能であることが特徴で、プラグインにより機能を追加することもできます。

＞＞GIMPの公式サイト

デザインカンプは目的とユーザビリティを意識して作ろう

デザインカンプはWebサイトやWebページのデザインの完成見本です。クライアントにデザインの完成形を共有するためだけでなく、コーディングにも欠かせない大切なものです。

デザインカンプの作成では、クライアントや他メンバーとやりとりしながら、共通認識をつくることが大切です。デザインの目的やコンセプト、クライアントの要望を意識せずにデザイン制作を進めてしまうと、手戻りも多くなります。

デザインカンプで作ったデザインは、WebサイトやWebページに実装されるものです。PCやスマホの画面を通してユーザーが直接触れる部分であるため、ユーザビリティを意識して作成しましょう。

【関連記事】

インシデントとは？インシデント管理のよくある課題と解決策、管理方法をまとめて解説

インシデントとは、大きなアクシデントが起こる一歩手前の状態のことです。インシデントへの対応が遅れることで、情報漏えいや損害賠償などのさまざまな被害が想定されます。 本記事ではインシ...

【目的別】ヒアリングシートの作り方とテンプレート・項目作成に便利な4つのフレームワークも紹介

商談や打ち合わせ、面接などで何を聞くのかをまとめた「ヒアリングシート」を活用することで、相手の現状や要望をより深く理解できます。 本記事ではヒアリングシートを活用するメリットや効果...

インタビューのコツ21選｜質問や対談のポイントを紹介

初めてインタビューをすることになった場合、どのようなことに気をつけて実施したらいいのか不安な方も多いのではないでしょうか。限られた時間内で相手に質問を行い、回答の中からコンテンツのテーマに合った...