デザインカンプ／モックアップとは？作る目的を理解すれば押さえるべきポイントが見えてくる！

こんにちはディーメイクでwebデザイナーをしている鈴木です。
今回はデザインカンプ／モックアップの概要やプロトタイプとの違い
作る目的などについて書いてみたいと思います。

目次

1. デザインカンプ／モックアップってなんだろう
2. プロトタイプとの違い
3. デザインカンプの目的
4. デザインカンプを作るタイミング
5. デザインカンプの作り方
6. デザインカンプを作るとき気をつけること
7. まとめ

1.デザインカンプ／モックアップってなんだろう

Webサイトがどのような見た目になるのかビジュアルを確認する
いわゆる『デザイン見本』です。

「デザインカンプ」「モックアップ」「デザイン案」といろんな言い方をしますが
Web制作の現場では大体同じものを指しています。

似たようなものに「ワイヤーフレーム」や「プロトタイプ」があります。
それぞれ簡単に違いを説明したいと思います。

• ワイヤーフレーム
  設計図、レイアウト図。
• デザイン案／デザインカンプ
  サイトのビジュアルがわかるように作成されるデザイン図。
• モックアップ
  試作品、視覚的な完成形。（Web制作の現場ではデザイン案／デザインカンプとほぼ同じ）
• プロトタイプ
  動きや導線（リンク）などを再現したもの。

「デザインカンプ」「モックアップ」「デザイン案」いろんな言い方があることを先ほど書きましたが
本文ではここからは「デザインカンプ」に統一したいと思います。

2.プロトタイプとの違いについて

デザインカンプとプロトタイプの違いを簡単にいうと
・デザインカンプ：見た目を確認するための見本
・プロトタイプ：動的な要素を確認するための見本
ということになると思います。

「動的な要素」の確認とは
・リンクなどで画面がどう遷移してくかの確認
・見た目に変化のある要素がどう動くかの確認
　（例：クリックしたら色やカウントが変わる、ポップアップが出るなど）
などを指します。

ちなみにwebサイト制作の中で作るプロトタイプは主に下記の３つです

1. ファンクショナルプロトタイプ
   ワイヤーフレームのようなシンプルな図を使い
   画面遷移や機能の確認が主な目的になります。
   紙上でスピーディーに行うペーパープロトタイプなどがこれにあたります。
2. デザインプロトタイプ（ビジュアルプロトタイプ）
   Adobe XDやfigmaなどのプロトタイピングツールを使って
   動きのあるオブジェクトのチェックやリンクなど導線の確認を
   ブラウザやツールを使ってできるように作ったものを指します。
   ユーザーの使い勝手や視認性の確認が主な目的になります。
3. コンテクスチュアルプロトタイプ
   サービスやアプリを実際に動かしている様子を動画などにして見せることで
   より具体的な使用感を共有できるようにしたものを指します。
   PR動画やCM、体験映像などがこれにあたります。
   ストーリーに沿って全体的な流れを見せることで
   プロダクトが実際にどう受け取られるか確認することが主な目的になります。

ファンクショナルプロトタイプは主にワイヤーフレームを作るタイミングで、
デザインプロトタイプはデザインカンプ作成後に
コンテクスチュアルプロトタイプはプレゼンやPRの際に作る事が多いと思います。

3.なんのためにデザインカンプを作るの

デザインカンプで確認すべきことは多岐に渡りますが
目的別に大きく分けると下記の４つになると思います。

• サイトの目的や企業のイメージにあっているか認識の確認
• サイトの目的を達成できるデザインになっているかの確認
• 導線（動線）はしっかりと確保されているか、わかりやすいかの確認
• どのキャリアでも問題ないサイトになっているかの確認

ついつい見た目のカッコ良さや雰囲気に気を取られてしまいがちですが
『サイトの目的は何か』等もしっかり意識してデザインに落とし込むことで
ユーザーにとって使いやすいサイトにすることができます。

また、最近ではスマホやタブレットでの見た目や使い勝手も重要になっています。
それぞれのキャリアでどう見えるのかも、しっかり確認したいポイントです。

4.デザインカンプを作るタイミング

ディーメイクではwebデザインの際に大体下記のような流れで進めています。

1. ヒアリング
2. 企画
3. 契約
4. プロジェクト立ち上げ
5. サイト設計
6. デザイン
7. コーディング
8. 開発
9. テスト
10. リリース

デザインカンプを作るのは「6.デザイン」の時です

5.デザインカンプの作り方

基本的にはデザインソフトを使って作ります。
有料ソフトだとadobeのphotoshopやillustrator。最近ではXDで書くことも多くなってきています。
無料ソフトだとGIMPやfigmaなどが有名ですね。

それぞれに利点やできることの違いがあるので
まずは自分に合うツールを使って書いてみるのが良いと思います。

デザインカンプの書き方は

1. ワイヤーを元に幅や高さを決め、全体のガイドを引く
2. メインや差し色となるカラーを決める
3. 共通になるパーツをデザインする（ヘッダー、フッター、ナビゲーションなど）
4. ２以外のパーツをデザインする
5. 全体のフォントサイズや画像の画角などを整える
6. 全体のバランスを見ながら色味や配置を調整する

実際に作る際は、参考となるサイトを見たりして
予めある程度はイメージを固めてから手を動かすとスムーズです。

PCから作っても、スマホから作っても良いですがそれぞれにデザインを作ります。
通常は１コードでどちらのキャリアにも対応できるようにデザインします。

カラーやフォントの種類、フォントサイズなどは
クライアントのヒアリングの中で得た情報をもとに
ターゲットも意識しつつふさわしいものを選ぶようにしましょう。

6.デザインカンプを作るとき気をつけるポイント

サイトの目的を見失わない

ECサイトのようにサービスを提供するサイトなのか
メディアサイトのように文章を読ませるサイトなのか
コーポレートサイトように情報を伝えるサイトなのか

サイトの目的をしっかり意識することで
どうデザインに落とし込むかが見えてきます。

目立たせるポイントはどこか整理する

webデザインをしていると「ここも目立たせて」「ここも強調して」と言われ
あちこち目立たせた結果どれも目立ってない。ということがあったります。

サイトの目的は何かを意識し「伝えるべきこと」「達成すべきこと」は何かを整理すれば
ユーザーの目線に立ってどこを目立たせれば使いやすいかが見えてきます。

スタイルを統一する

デザインの段階である程度コーディングをイメージし
フォントサイズやカラーの使い方などルールを持ってスタイルを統一しておきます。

きちんとスタイルを統一することでコーディングの効率を上がるだけでなく
ユーザーの学習コストを下げることにもつながります。

分業されていて、デザインとコーディングが分かれている場合も
ルールを持ってデザインをすることで
細かな修正や追加に対し共通の認識を持って対応しやすくなります。

7.まとめ

webデザイナーにとってもクライアントにとっても
デザインカンプの確認は、サイト制作前半の山場になると思います。

デザインの中には、問題を解決のためのギミックや
目的を達成するための仕掛けなど、様々な工夫が散りばめられています。
まさにデザイナーの腕の見せ所です。

また、流行の変化や新しい技術の登場など
デザインも常に変化しています。

良いデザインカンプを作るためにはセンスだけではなく
情報収集をきちんと続け、技術を向上させ続けられることも
大切な資質の１つだと思います。

ワイヤーフレームについては下記の記事で紹介していますので是非ご覧ください。

webデザインについては下記の記事にまとめてあるのでこちらも是非ご覧ください。