Webサイト制作の際は、初期段階で関係者やクライアントと完成イメージを共有することが重要です。ほぼ完成の段階になって「思っていたものと違う」となって、一からデザインの作り直しは避けたいところですよね。そこで役立つのが「モックアップ」です。

モックアップとは、Webサイト制作の進捗や機能を確認するために作られる、サンプルのことです。

本記事では、Webデザインにおけるモックアップについて、意味や混同されやすいスケッチ・ワイヤーフレーム・プロトタイプとの違い、作成方法などを詳しく解説していきます。

Webデザインのモックアップとは？

Webサイト制作において、モックアップはデザインイメージを検証する目的で作成する「ビジュアルデザインの完成サンプル」です。頭の中で描いた完成形のイメージを視覚的に確認するためのものなので、機能は不要となります。

Webサイトの場合、使用するカラーやレイアウトで大きくデザインの印象が変わります。言葉だけでは伝わらないことも多いため、色や写真、画像を入れることでイメージを共有しながら進めることができます。クライアントや制作関係者の認識違いを防ぎ、スムーズに制作を進めるためにも、ビジュアル面での完成サンプルとしてモックアップが果たす役割は大きいと言えるでしょう。

スケッチ、ワイヤーフレーム、プロトタイプの違い

デザインは、スケッチ→ワイヤーフレーム→モックアップ→プロトタイプの順で進みます。

スケッチとはアイディアの下書きです。真っ白な紙にデザイナーが思い浮かぶだけのアイディアをどんどん書き出していく工程になります。

次にワイヤーフレームです。レイアウトを決めるための設計図になり、どこに何をどう配置するのか、情報設計を行う部分になります。このワイヤーフレームに配色や色、フォント、画像などデザイン部分を追加したものがモックアップになります。

そして、モックアップにボタンをクリックできるなど機能面などの動作を確認できるようにしたものがプロトタイプです。モックアップがビジュアルを確認する「模型」なのに対し、プロトタイプは操作性や機能面など動的な部分を確認する「試作品」になります。

関連記事：ワイヤーフレームとは？作り方、ポイントを解説！おすすめのツールも紹介

モックアップを作るタイミング

モックアップは、ワイヤーフレームの完成後に着手します。制作を始めてすぐに作るのではなく、まずはスケッチやワイヤーフレームを作り、全体の概要を固めてからにしましょう。ビジュアル面でのアイディアを洗い出し、整理し終えたタイミングで作ることが好ましいです。

モックアップを作成するメリット3つ

モックアップ作成が重視されるのは、以下の3つのメリットがあるからです。

1. 完成イメージを視覚化できる
2. クライアントとイメージのすり合わせができる
3. 完成後の追加修正リスクを回避することができる

順に解説していきます。

1. 完成イメージを視覚化できる

モックアップ作成のメリットは、完成イメージが視覚的に分かることです。ビジュアルデザインが具体化していることで、課題点も確認することもできます。

また、デザインイメージの共有が十分にできていないと、制作が進行するに従ってイメージが乖離していき、完成間近になって「イメージしていたものと違う」となるおそれがあります。そのため、事前にモックアップを作成することで、常に完成イメージと照らし合わせて制作することが重要です。結果的に、大きなズレが生じにくくなり、制作側と依頼側で認識違いが起きにくくなります。

2. 認識の共有がしやすい

「おしゃれなデザイン」、「カッコいいデザイン」のような抽象化された表現で共有しても、抱いているイメージは人それぞれ異なるため、認識の相違が起きやすいです。その点、デザインは言葉で説明するよりも実際のビジュアルがあった方が確認しやすく、特に複数人が関わるプロジェクトの場合、共通認識事項として役立ちます。

「これが目指すべきデザイン」と認識共有しておけば、それに応じたフォントや機能なども、クライアントや制作関係者で議論しやすくなるでしょう。

3. 完成後の追加修正リスクを回避することができる

クライアントにWebサイトを納品する場合、完成間近になってデザインの修正が発生すると、追加で時間コストが発生します。その場合、人件費などの観点から、利益がほとんどゼロになるリスクもあるでしょう。

モックアップがあることで、ボタンの色や形、配色やレイアウト、フォント、ロゴなど詳細部分までイメージを共有することができるようになります。結果として、完成後に追加修正するリスクを最小限に抑えられるでしょう。

モックアップを作成する際の注意点6つ

制作のメリットが大きいモックアップですが、作成時にはいくつか押さえておきたいポイントがあります。ここでは6つの注意点を紹介します。

1. スケッチやワイヤーフレームの作成から始めること
2. 作成が必要な画面をすべて洗い出すこと
3. クライアントの希望に寄り添えているか確認すること
4. ファーストビューのレイアウトに注力すること
5. 認識されやすいボタンデザインを作ること
6. ユーザーが分かりやすい導線を提示すること

1. スケッチやワイヤーフレームの作成から始めること

レイアウトなどを決めないまま、デザインを作っていくのは効率が悪いです。作っていくうちに、レイアウト全体から見直す必要が出てくるおそれもあります。

そうしたリスクを抑えるためにも、まずはスケッチでラフ案を作ったうえで、ワイヤーフレームでレイアウトを定めましょう。このステップを踏むことで、最初の希望からのズレを最小限にすることができるでしょう。

2. 作成が必要な画面をすべて洗い出すこと

モックアップは完成品のイメージを共有する目的があるため、遷移先の画面分すべてを漏れなく作成しなければなりません。遷移先のページ数を洗い出し、モックアップを作成数と合致しているかを念入りにチェックしましょう。

ワイヤーフレームの段階で必要な画面数をチェックしておくことで、作成漏れを防ぐことができます。すべての導線から遷移先の画面が揃っているか、配置に抜け漏れがないか、必ず複数人で確認しましょう。

3. クライアントの希望に寄り添えているか確認すること

クライアントのイメージとズレていないか、こまめに確認をすることも重要です。完成段階になって共有してイメージが大きく異なると発覚した場合、大幅な修正が必要となり、納期を押すおそれもあります。このようなことがないように常に途中段階で確認を入れておきましょう。

デザインの現物がない状態では、各人の認識にズレや温度差が生じるおそれがあります。曖昧な点はモックアップの作成段階ですべて明確にしておきましょう。

4. ファーストビューのレイアウトに注力すること

Webサイトに訪問したときやアプリを起動後に最初に目にするファーストビューの画面は、もっとも力を入れる部分です。Webサイトの印象を大きく左右するため、特にファーストビューのレイアウトに注力しましょう。

使い勝手が悪く、どこに何があるか分からないと認識されると、Webサイトの離脱の原因になります。直感的な操作が可能になっているか、ボタンの配置は分かりやすいか、認識されやすい大きさや配色になっているかなど、念入りにチェックしましょう。

5. 認識されやすいボタンデザインを作ること

Webサイトを初めて訪問したユーザーにとって、認識されやすいボタンの配置、デザインは重要なポイントです。ボタンの色が他の色味に埋もれていないか、小さすぎて認識できないなどないように意識しましょう。

6. ユーザーが分かりやすい導線を提示すること

Webサイトでは、問い合わせボタンや購入ボタンをクリックするような成果を上げるための導線設計が重要です。導線設計が分かりにくいと目的のページに辿り着けない、コンバージョンに至らないなど、ユーザーの離脱につながります。

ユーザーがストレスなく閲覧できるように、直感的に操作できること、分かりやすいことを意識して導線を設計しましょう。ユーザーの利便性が高くなれば、結果的にコンバージョンにつながります。モックアップの段階でしっかり確認しておきましょう。

以下では、自社に必要な業務を明確にする「ジョブディスクリプション」の作成ポイントをテンプレート付きで解説しています。無料でダウンロードできますので、ぜひご利用ください。

【お役立ち資料】
ジョブディスクリプション作成ガイド

xdesigner.jp

モックアップの作り方3選

モックアップを作成する方法を3つ紹介します。

1. モックアップ作成ツールで作る
2. モックアップジェネレーターで作る
3. Webデザイナーに外注する

1. モックアップ作成ツールで作る

モックアップ作成ツールは、デザインやコーディングの知識不要で簡単に作成することができます。そのため、モックアップの目的である「イメージの共有」を効率的に行うことができるでしょう。

動作はツールにより異なりますが、複数人で進捗状況を確認しやすいものを選ぶことが大切です。URLにて共有して複数人で共同編集することができ、コメントが残せるものをおすすめします。まずは複数のツールを無料版で試し、有料プランを検討すると良いでしょう。

有名なツールとしては、「Figma」「Sketch」「Adobe XD」などがあります。

2. モックアップジェネレーターで作る

モックアップジェネレーターは画像をはめ込んでモックアップイメージを生成してくれるツールです。Webサイトの場合、URLを打ち込むだけでモックアップを生成してくれます。PCやスマホ、タブレット端末などにはめ込んでモックアップを作ることができるので、より具体的にイメージすることができます。代表的なツールは「MockupPhotos」「Placeit」「MockupsJar」があります。

3. Webデザイナーに外注する

3つ目は、制作会社やフリーランスなどプロに外注する方法です。

外注することで、デザインに対する知見がなくても確実に作成することができます。また、自社で持っていないプロの視点をデザインに取り入れることも可能となります。

デザインのクオリティも高くなることで、より完成形のイメージレベルを高くしたモックアップも期待できるでしょう。また、外注することで、社内でデザイン以外のコア業務に集中できるメリットもあります。

関連記事：デザインの依頼方法6ステップを解説！依頼するメリットや注意点についても
関連記事：外注デザイナーを探す方法は？おすすめサービス10選と注意点を解説！

下記の資料では、デザイナーを取り巻く環境や、採用のポイントをわかりやすくまとめています。無料でダウンロードできますので、ぜひご利用ください。

【お役立ち資料】
3分でわかるデザイナー採用

xdesigner.jp

モックアップの活用方法

モックアップの制作は一見手間ではありますが、Webサイトの完成度を高めるには必要です。ここではモックアップを活用する方法を2つ紹介します。

1. モックアップ作成後は関係者間で評価する
2. モックアップを元にプロトタイプを作成する

1.モックアップ作成後は関係者間で評価する

まずは関係者間で評価をすることが重要です。配色やレイアウト、ボタンのサイズ、フォントなど、クライアントの希望に寄り添っているかを確認しましょう。

モックアップはプロトタイプと違い、操作面での評価はできません。あくまでビジュアル面に特化して評価を行います。ユーザーにとって、ボタンのサイズは見やすいか、導線は分かりやすいかなどモックアップを使って評価しましょう。評価は必ず複数人で行い、ユーザー視点に立って、主観が入らないように注意が必要です。

制作が進んだ段階でデザインを見直すことになれば、手間も時間もかかります。あらかじめ完成イメージを関係者間で評価することで、大幅な改修は避けられるでしょう。

2.モックアップを元にプロトタイプを作成する

モックアップを作成し、関係者間で評価をして確認が済めば、次のステップでプロトタイプを作成します。モックアップは視覚的なビジュアルのチェックに使いますが、プロトタイプは機能面や使用感のチェックに使います。

下記の資料では、デザイン業務の外注とデザイナー採用のコストを中心に比較し、双方のメリットとデメリットを解説しています。無料でダウンロードできますので、ぜひご利用ください。

【お役立ち資料】
デザイン外注とデザイナー採用 コスト比較表

xdesigner.jp

モックアップの作成からWebデザインまで依頼するならクロスデザイナーがおすすめ！

本記事では、モックアップの作成方法やメリットについてお伝えしてきました。モックアップを作成することで、クライアントとイメージの共有や完成までをスムーズに進めることができます。

また、完成までにすり合わせの評価やフィードバックを活用することができ、完成後の大幅修正を防ぐメリットは大きいと言えるでしょう。

なお、モックアップの作成からWebデザインまでフリーランスデザイナーに依頼したいなら、クロスデザイナーがおすすめです。

クロスデザイナーは、国内最大規模のデザイナー登録者から、厳正したデザイナーを最適なタイミングでご提案するフリーランスデザイナー専門のエージェントサービスです。現在、7,000人以上のデザイナーが在籍しています。

登録しているデザイナーとの合意があれば正社員採用も可能です。また、スカウトや人材紹介機能もあるため、採用難易度の高い、即戦力デザイナーの採用機会を最大限サポートしています。

エージェントに相談いただければ、最短3営業日でのアサインも可能です。また、週2〜3日の柔軟な依頼も可能なので、自社の作業量に応じて効率的に外注することができます。

こちらより、クロスデザイナーのサービス資料を無料でダウンロードできます。即戦力デザイナーをお探しの方は【お問い合わせ】ください。平均1営業日以内にご提案します。