デザインカンプとは？webサイト制作における役割と作成におすすめのツールも紹介

WEBサイト制作ではクライアントと制作者の認識を共有することが重要です。そのためには、ヒアリングなどをおこない、完成イメージを明確に示すことが欠かせません。 その完成品のイメージとしてつくられる見本が、「デザインカンプ」です。しかし同じ完成品のイメージには、「ワイヤーフレーム」や「モックアップ」があるので、WEBデザイナー初心者にはこれらの違いがわからないという方も多いのではないでしょうか。 そこで今回はデザインカンプの定義や活用方法、作成時の注意点・おすすめツールなどについて解説していきます。

デザインカンプとは

「デザインカンプ」とは、デザインの完成イメージのことです。 デザインカンプは別名を「モックアップ」・「カンプ」といい、ワイヤーフレームに色を付けて画像やテキストを挿入して具体的な完成イメージとして仕上げたものをさします。 WEB制作の現場では、まずWEBサイト全体の骨組みであるワイヤーフレームを作成し、そこから画像やテキストなどの各要素を実際に配置してデザインカンプとして仕上げます。背景や色を付けることにより、完成イメージがひと目でわかるようにしているのです。

Webサイト制作でデザインカンプを活用する方法

WEBサイト制作の現場でデザインカンプを作成することには、以下の2つの理由があります。

• 制作物の納品が遅延することを防ぐ
• WEB制作の現場と認識のズレが生じることを防ぐ

WEBサイトを制作するときは、そのWEBサイトで達成する目的を決めます。その後で、どんな見た目・機能を備えさせるのかなどを目的に即して細かく決定し、デザインカンプを数点作成します。 WEBサイト制作会社へ外注をする場合は、制作会社に自社サイトのイメージを明確に伝えるためにデザインカンプを作成します。デザインカンプを受け取った制作会社は、クライアントである企業の意向がわかった状態で作業をするので、完成までスムーズに進みます。 このようなプロセスを踏まえる理由は、WEBサイトの規模が大きいものであればあるほど、作業量が膨大になることにあります。最初の段階で制作会社に企業側の意向を伝えることができないと、双方の認識にズレが生じ、結果完成までの時間が長くなります。 制作物の納品が遅延することを防ぐため、制作作業を始める・外注する前に、デザインカンプを作成するというわけです。制作会社にとっても、コーディング作業に入る前であれば、デザインの修正も比較的簡単にできるので、作業量が少なくて済みます。 つまり、企業側と制作会社側双方の負担を軽減するために、最終的な完成品のイメージを共有することが必要不可欠なのです。結果、制作物の納品までスムーズに進みやすくなります。 また、デザインカンプを作成すると、制作会社内のスタッフ間でWEBサイトの完成イメージが共有しやすくなります。全員が完成イメージを共有していると、スタッフ同士の認識のズレも生じにくくなるので、制作作業の効率が上がります。

デザインカンプ作成での注意点

デザインカンプを作成する際は、「デザイン性よりも実用性・WEBサイトの目的に合った利便性を重視する」・「実際の作業の進めやすさに配慮する」といったことに注意しましょう。 では、これらの注意点を踏まえて作業をするには、具体的にどんなことを心がけていけばよいのでしょうか。

他社サイトを参考にする

デザインカンプを作成するときは、デザインのオリジナリティに縛られず、他社サイトのデザインの良いとこ取りをするイメージを持ちましょう。 WEBサイト制作で大切なのは、「WEBサイトを使って達成したい目的に合った見やすい・使いやすいデザインや機能」です。既存WEBサイトのデザインの多くは、ほかのWEBサイトの良いデザインを参考にしているものです。 既存のWEBサイトのデザインは、サイトユーザーの利便性を考えてつくられていることが多く、それらはWEBサイトを使って達成したい目的を実現するために採用されています。 そのため、既存のWEBサイトのデザインを新規サイトの参考にすることで、新規サイトの目的に応じたデザイン・レイアウトを採用しやすくなります。参考WEBサイトは3～10個ほど選び、選択したWEBサイトとそっくりにならないように注意しましょう。 作成時のポイントは、あくまで、事業・サービス内容等が伝わるようにすることです。デザイン性も大切ですが、それよりも実用性を重視し、成約へつなげることを意識したデザインを採用するようにしましょう。 また、商品購入や資料請求などのコンバージョン要素には暖色系を採用し、ボタンクリックなどのアクションをイメージしやすくしましょう。

コーディングを考えて作成する

デザインカンプがコーディングに配慮されてつくられていると、以後の作業が進みやすくなります。 基本的には、各要素の数値や配色も見出しデザインを統一する・各要素を整列させるなどのことに注意します。例えばWEBサイトのコーディングでは、テキストの最低サイズなどが決まっているので、「フォントサイズを10px以上にする」ようにしましょう。 ほかにも、スライダーを導入する箇所にはボタンを配置するなど、そのことがわかるようにしておくとコーディング時に作業が進めやすくなります。 普段から既存WEBサイトのデザインを見ることで、「コーディングを進めやすいデザインカンプにするには、この点に注意しよう」と意識できるでしょう。

デザインカンプ作成におすすめのツール

デザインカンプ作成に適した、デザイン・グラフィックツールには、以下の4つがあります。

• Photoshop
• Illustrator

• Figma
• GIMP

このうち、PhotoshopとIllustratorは有料のデザインツールです。 PhotoshopとIllustratorはグラフィックデザイナーも使用しているツールであり、WEB制作会社においても、デザインカンプの作成からコーディング時の余白・フォントサイズの数値計測などに使用されています。 これらはおもに画像の作成や加工、ロゴやアイコンの作成など、さまざまな用途に使用できる点が特徴です。高機能な反面、操作が複雑だというデメリットがありますが、使いこなすことができればあらゆるデザインや加工が可能です。 一方のFigmaとGIMPは無料のデザインツールです。Figmaはブラウザ上で動作するツールであり、ファイルのリアルタイム編集・共有機能が備わっているので、リモートワークに重宝します。動作が軽く、有料でチーム開発用プランへとアップデートすることも可能です。 GIMPはPhotoshopの代用ソフトとして使われることが多く、日本語にも対応しています。無料とは思えないほど高機能で、さまざまなデザイン作成に使用することができ、Figmaと同様にプラグインで機能を拡張できるようになっています。 これら有料・無料デザインツールには異なる特徴があるので、自分の作業内容や使いやすさに合ったツールを選び、デザインカンプを作成していきましょう。

NERDなら、SEOに効果的なサイト制作やリニューアルを実現

NERDはBtoB・BtoCを問わずさまざまな業種のWEBサイト作成をおこなっており、WEBサイト制作から運用までを幅広くサポートしています。 そんなNERDの特徴は以下のとおりです。

• NERDでは、成果につながるサイト制作から運用までをサポート
• SEO対策やサイト制作の実績も多数

NERDでは、成果につながるサイト制作から運用までをサポートします

NERDは企画から集客までを全て社内で完結させることにより、WEBサイト制作の段階から成果につなげることを考え、運用後の保守・メンテナンスも担当しています。 ユーザーの心理を読み解いた独自の型に沿って構成をしますが、テンプレートは使用せず、お客様を理解して1社ごとのニーズに寄り添って構成をします。そのため結果が出やすくなっています。

SEO対策やサイト制作の実績も多数あります

NERDの年間受注実績は100社以上であり、WEBマーケティングも支援しています。 最新のSEO対策をおこなうので、WEB検索で上位表示されやすくなっており、平均検索順位の19位から2位への改善・資料ダウンロード率7.60％から10.90％への改善など、さまざまな成果を出しています。

サイト制作やリニューアルにお困りならご相談ください

NERDはビジネスの課題解決を念頭に置き、結果につながるWEBサイト制作をおこなうことを重視しています。 これまで蓄積してきた成功ノウハウを活用し、結果を重視するアウトプットをおこなって、お客様のビジネスを成功へと導きます。 WEBサイト制作や集客は、ぜひ、NERD株式会社にご相談ください。

弊社は、東京都墨田区にあるWEBサイト制作会社です。「制作」「マーケティング」「プロダクト」の3つを強みに、これまでに培った「成功するノウハウ」を活かしたWEBサイト制作を得意としています。

以下から弊社のサービス資料・お役立ち資料をダウンロードできますので、皆様のWEBサイト運用に活用していただけますと幸いです。