モックアップとは？Web制作での重要性や作成のポイント、おすすめツールを解説

「モックアップとは何かを知りたい」

「Web制作におけるモックアップの重要性を知りたい」

このようにお考えではありませんか？

今回は、モックアップの重要性や作成のポイントを解説するとともに、おすすめの作成ツールを紹介します。

モックアップを作成するとWebサイトの完成イメージを制作メンバー間で共有でき、修正点の把握や、認識のズレを解消するのに役立ちます。

魅力的でユーザーが使いやすいWebサイトの作成に役立つため、SEOに強いサイト制作にもつながります。

さらにSEOに強いWebサイトやコンテンツを作成したい方は、SEOに強いAIライティングツール「トランスコープ」もあわせてご活用ください。

モックアップとは？

モックアップ（mock-up）は英語で「模型」を意味する言葉で、製品の最終的なデザインを視覚化した完成見本のことです。

Webデザインの場では「デザインカンプ」と呼ばれることもあります。

モックアップでは、色・レイアウト・テキストの書体やサイズなどのデザインを表現します。

完成イメージを共有できるので、サイトのコンセプトやデザインがあっているかといった修正点の把握や、認識のズレを解消するのに役立ちます。

魅力的で使いやすいWebサイトを作るために欠かせず、ユーザーエクスペリエンスの向上やユーザーがアクションを起こしやすいデザイン作りにも役立つため、SEO対策にもつながります。

モックアップ作成のタイミング

モックアップは、サイトの基本的な構造やレイアウトが決定してから作成します。

Webサイト作成の主なフローは、以下のとおりです。

1. リサーチ・分析
2. ペルソナ設計
3. サイトマップ作成
4. ワイヤーフレーム作成
5. モックアップ・プロトタイプ作成
6. コンテンツ・デザイン作成
7. コーディング・実装

ワイヤーフレームでサイト構造を決定後、実際のコンテンツ作成やコーディングに入る前に作成します。

Webサイト作成にChatGPTを活用して効率化したいと考えている方は、ウェブサイト制作に活用できるChatGPTプロンプト16選もあわせてご覧ください。

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

「ワイヤーフレーム」とは、Webページに載せる要素や順番、配置する場所を表した設計図です。

ワイヤーフレームでは色やデザインは表現せず、四角いフレームや簡単なテキストで構成します。

ワイヤーフレームは「要素設計」を確認するために作成され、一方でモックアップは「Webページの見た目のイメージ」を確認するために作成されます。

プロトタイプとの違い

「プロトタイプ（prototype）」とは「原型」を意味し、作成するWebサイトの試作品を指します。

モックアップは画面遷移やアニメーションを含まない静的な画面デザインである一方、プロトタイプは「ユーザーがボタンをクリックするとどう動くのか」といった動的な要素を含みます。

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

Web制作時にモックアップを作るメリットは、以下の6つです。

1. サイトの完成形をイメージできる
2. 事前に修正点を洗い出せる
3. チーム全体で認識を共有できる
4. クライアントとの認識のズレを解消できる
5. ユーザビリティテストでニーズを反映できる
6. 修正が追加されるリスクを減らせる

それぞれ解説します。

1.サイトの完成形をイメージできる

モックアップを作成するメリットの1つ目は、サイトの完成形をイメージできることです。

モックアップでは、文字のフォントやサイズ、写真や画像の配置、ボタンの位置やデザイン、配色などを視覚的に確認できます。

とくに、配色はサイトの印象を作る大切な要素です。

部分的な確認は色見本でも可能ですが、全体的なイメージを想像しにくいため、モックアップでしっかりと確認することが重要です。

2.事前に修正点を洗い出せる

モックアップを作成するメリットの2つ目は、事前に修正点を洗い出せることです。

モックアップがあると、より具体的にサイトの完成形をイメージできるので「想定していたイメージとズレている」「ボタンの位置がわかりにくい」といった修正ポイントを早期に発見できます。

サイト制作に重要な、UIデザインのブラッシュアップにも役立つでしょう。

3.チーム全体で認識を共有できる

モックアップを作成するメリットの3つ目は、チーム全体で認識を共有できることです。

モックアップがあれば、制作に関わる全てのメンバーがデザインの完成形を確認できます。

確認した結果、ディレクターやデザイナー、コーダーなどチーム全体で問題点や修正点を共有できるため、サイト制作を円滑に進められます。

4.クライアントとの認識のズレを解消できる

モックアップを作成するメリットの4つ目は、クライアントとの認識のズレを解消できることです。

Web制作を請け負っている場合、クライアントと認識を合わせることは重要ですが、視覚的なイメージを文章やことばだけで伝えるのは困難です。

サイトの完成間近になってから「イメージと違うため修正する」となると、公開スケジュールに間に合わない、予算を大幅にオーバーするなどの恐れがあります。

試作段階でサイトの完成図を共有し、「クライアントの世界観に合っているか」「思い描いているイメージどおりか」など認識のズレをなくしておくことが大切です。

5.ユーザビリティテストでニーズを反映できる

モックアップを作成するメリットの5つ目は、ユーザビリティテストでニーズを反映できることです。

ユーザビリティテストとは、製品を評価するために、実際にその製品をユーザーに試してもらう手法のことです。

モックアップを作成してあれば、サイトデザインを実際のユーザーにチェックしてもらい、フィードバックをもらえます。

ユーザーの生の声は、よりニーズに沿った、ユーザーが使いやすいサイト作成に役立ちます。

6.修正が追加されるリスクを減らせる

モックアップを作成するメリットの6つ目は、修正が追加されるリスクを減らせることです。

実際のコンテンツ作成やデザイン作成、コーディングといった最終的な段階で修正が入ると、大幅な変更が必要になり、時間も予算も大きくロスしてしまいます。

試作の段階で完成イメージを共有し、チーム内やクライアントと認識をすり合わせておくことで、完成に近づいてから修正が入るリスクを減らせます。

モックアップの作り方

モックアップは、ワイヤーフレームで構造やレイアウトを決めてからデザインします。

ワイヤーフレームのつくり方について詳しくは、ワイヤーフレームとは？作り方、ツール、作成のポイントを解説！もあわせてご覧ください。

ワイヤーフレームが完成したら、モックアップの作成に移ります。

作成時は、配色やレイアウトが商品・サービスのイメージに適しているかを確認し、ユーザーの使いやすさを意識してデザインを考えていきます。

モックアップは、コーディングなどの専門的な知識やスキルがなくても、ツールを使って作成可能です。

ツールを選ぶ際は、以下の点に注目して選びましょう。

• 使いやすさ
• 機能
• コスト

海外製のツールも多いため、日本語でサポートを受けたい場合は日本語に対応したツールを選ぶ必要があります。

デザイン機能やテンプレートは豊富か、オンラインで共同作業ができるか、セキュリティはしっかりしているかなどの機能面も確認しましょう。

モックアップ作成におすすめのツール10選

モックアップ作成におすすめのツールを紹介します。

1. Mockplus
2. Mockitt
3. moqups
4. Prott
5. Sketch
6. Studio
7. Cacoo
8. Figma
9. InVision
10. Adobe XD

それぞれ解説します。

1.Mockplus

引用：Mockplus

料金

• 無料（作成できるプロトタイプ数やページ数などに制限あり）
• PDFファイルへのエクスポートなど一部機能は有料（$29.5/月）

Mockplusは、直感的でわかりやすい操作が特徴のプロトタイピングツールです。

スケッチからフローチャート、ワイヤーフレーム、プロトタイプまでビジュアルデザインを簡単かつ迅速に作成できます。

サンプルとテンプレートが豊富で、リアルタイムでの共同編集ができる点も魅力です。

2.Mockitt

引用：Mockitt

料金

• Free：無料
• PERSONAL：$8/月
• ENTERPRISE：$12/月

Mockittは、Webブラウザ上で手軽に使えるモックアップツールです。

操作がわかりやすく、豊富なテンプレートを利用すれば簡単にサイトをデザインできます。

また、Mockitt AIという機能を利用すると、フローチャートやマインドマップ、表やグラフを即座に生成できます。

無料のSTARTERプランでも、3つまでのプロジェクトを利用可能です。

3.moqups

引用：moqups

料金

• Free：無料
• Solo：$19/月
• Team：$29/月

moqupsは、ブラウザベースのモックアップ・ワイヤーフレーム制作ツールです。

日本語には対応していませんが、英語がわからなくてもドラッグ アンド ドロップで直感的に操作できます。

ワイヤーフレームおよびプロトタイプの作成にも対応しているため、ワイヤーフレームからプロトタイプまで一貫して作成できます。

150以上の無料テンプレートが用意されているうえに、デバイスに関わらずクラウドでリモート作業が可能です。

4.Prott

引用：Prott

料金

• Free：無料
• Starter：¥2,090（税込）/月
• Pro：¥4,290（税込）/月
• Team：¥8,140（税込）/月

Prottは、ワイヤーフレーム作成やプロトタイプ作成が行える日本発のプロトタイピングツールです。

Windows、Macに対応したWeb版とAndroid、iOSに対応したアプリ版が提供されています。

デザインの作成にコードの知識は不要で、ドラッグ アンド ドロップして配置するだけで、簡単に作成できます。

日本語でサポートを受けられるので、英語ができなくても安心です。

Teamプラン（有料）であれば、共同編集や組織管理機能も利用できます。

5.Sketch

引用：Sketch

料金

• スタンダード：$10/月
• Macオンリーライセンス：$120/月
• ビジネス：$20/月

Sketchは、Mac専用のデザイン制作ツールで、直感的に使える操作性や豊富なテンプレートが魅力です。

縦に長いデータを作成できるため、スマホ画面に適したデザイン作成にも役立ちます。

プラグインが豊富で、さまざまな拡張機能を追加できるのも魅力です。

30日間は全ての機能を無料で利用できるので、まずは試してみましょう。

6.Studio

引用：Studio

料金

• Free：無料
• Starter：980円/月
• CMS：2,480円/月
• Business：4,980円/月

StudioはクラウドベースのWebサイト作成ツールで、英語版と日本語版が提供されています。

最初にチュートリアルがあり操作もわかりやすく、ドラッグ アンド ドロップでパーツを挿入できるため、初心者でも使いやすいツールです。

テンプレートやアイコンも多数用意されているうえに、900種類以上のフォントを無料で利用できます。

7.Cacoo

引用：Cacoo

料金

• 個人利用：￥660/月
• チーム利用：￥1,980円〜/月

CACOOは、クラウド上で利用できるオンライン作図ツールです。

シンプルで簡単な操作性が特徴で、100種類以上の図形やテンプレートを利用できます。

複数のメンバーで編集できるうえに、チャット機能も付いているため、チームでモックアップを作成するのに向いています。

30日間は、すべての機能を無料で試せます。

8.Figma

引用：Figma

料金

• スターター：無料
• Figmaプロフェッショナル：￥1,800/月
• Figmaビジネス：￥6,750/月
• エンタープライズ：￥11,250/月

Figmaはブラウザ上で利用できるデザインプラットフォームです。

図形描画ツール・テキストツールなど必要なツールや機能は一通りそろっており、さらにPC・スマートフォンなど各規格のテンプレートが用意されています。

1つのファイルを複数のメンバーで同時編集も可能で、ファイル利用数の制限などはあるものの無料プランでも十分利用できます。

9.InVision

引用：InVision

料金

• Free：無料
• Starter：$7.95/月

InVisionは、Webデザインのプロトタイピングを複数のメンバーで作成・確認できるツールです。

直感的に操作が可能で、アップしたデザインに対してコメントやログを共有できます。

InVisionが出しているSketchのプラグインを利用すると、Sketchのアートボードを簡単にInVisionへ同期できます。

10.Adobe XD

引用：Adobe XD

料金

• Adobe Creative Cloud コンプリートプラン：7,780円/月

※単品での購入不可

XDはAdobe社のデザインツールで、Webサイトのデザインやワイヤーフレーム、プロトタイプを作成できるほか、メンバーで共同編集できる機能があります。

ワイヤーフレームの作成からデザイン作成、動きの確認まで一貫してできるのが魅力です。

ただし、2023年1月からAdobe Creative Cloud コンプリートプラン（7,780円/月）でのみ提供されており、単品では購入できません。

モックアップを作成する7つのポイント

モックアップを作成するときは、以下の7つのポイントを意識しましょう。

1. ワイヤーフレームを作ってからモックアップを作成する
2. 必要な画面数など事前に決めておく
3. ファーストビューに力を注ぐ
4. ユーザーの行動を促すよう導線を整える
5. ユーザー目線を意識して作成する
6. 関係者での情報共有・すり合わせを徹底する
7. 公開後は解析ツールでユーザーの動きを分析する

それぞれ解説します。

1.ワイヤーフレームを作ってからモックアップを作成する

モックアップを作成するポイントの1つ目は、ワイヤーフレームを作ってからモックアップを作成することです。

ワイヤーフレームで、Webページに「どのような要素を」「どのような順番で」「どこに配置するか」をしっかりと固めてからデザインに入ることで、当初の予定とのズレを最小限にできます。

1つずつステップを踏んでサイト制作することで、余計な手間や時間がかかるリスクを減らせるでしょう。

2.必要な画面数などを事前に決めておく

モックアップを作成するポイントの2つ目は、必要な画面数などを事前に決めておくことです。

サイトの各ページからさまざまな画面に遷移する場合、モックアップを作成する前に遷移先の画面数を確認・決定し、抜け漏れがないようにしましょう。

遷移先の画面の確認には、ワイヤーフレームが役立ちます。

ワイヤーフレームでサイトの構造を固め、遷移するページや仕組みを確定させてからモックアップを作ることで、後から追加する手間を省きスムーズにサイト制作を進められます。

3.ファーストビューに力を注ぐ

モックアップを作成するポイントの3つ目は、ファーストビューに力を注ぐことです。

ファーストビューとは、ユーザーがサイトを開いたときに表示される、スクロールせずにみられる画面領域のことです。

サイトに訪れたユーザーは、ファーストビューを見て自分の求める情報かどうかを判断します。

そのため、ファーストビューが魅力的でないと、ユーザーはすぐに離脱してしまいます。

モックアップを作成する際はファーストビューにはとくに力を入れ、ユーザーに有益な情報が伝わるデザインになっているか、チームメンバーやクライアントとよく検討しましょう。

4.ユーザーの行動を促すよう導線を整える

モックアップを作成するポイントの4つ目は、ユーザーの行動を促すよう導線を整えることです。

Webサイトを作成する最終目標は、ユーザーに自社が求める行動を起こしてもらうことです。

サイトを訪れたユーザーが迷わずに行動を起こせる導線か、ユーザーの行動を促すようなCTA（Call To Action）が含まれているか、よく確認しましょう。

5.ユーザー目線を意識して作成する

モックアップを作成するポイントの5つ目は、ユーザー目線を意識して作成することです。

ユーザー目線が失われると、ユーザーにとって使いにくく、違和感のあるWebサイトとなります。

もし役に立たないと思われてしまうと、ユーザーはすぐにサイトから離脱してしまいます。

• ユーザーにとって使いやすいレイアウトか
• 求める情報にストレスなくたどり着ける動線か
• 商品やサービスに適した配色・デザインか

以上を、ユーザー目線で確認しましょう。

6.関係者での情報共有・すり合わせを徹底する

モックアップを作成するポイントの6つ目は、関係者での情報共有・すり合わせを徹底することです。

制作メンバーやクライアントとの認識にズレが生じると、サイトの完成間近になってから大幅な修正が入る恐れもあります。

関係者の中でイメージのズレや誤解が生じないように、モックアップを作成したらメンバーやクライアントと共有し、デザインの細部まで確認しましょう。

試作段階で情報共有・すり合わせを徹底することで、実際にコンテンツの作成やコーディングに着手してから修正が入るリスクを軽減できます。

7.公開後は解析ツールでユーザーの動きを分析する

モックアップを作成するポイントの7つ目は、サイト公開後は解析ツールでユーザーの動きを分析することです。

もし、想定していたようにユーザーがアクションを起こしていないならば、ボタンやナビゲーションの位置は適切か検討する必要があるかもしれません。

また、ページ半ばで離脱しているのであれば、情報やメリットが伝わるデザインになっているかを見直す必要もあるでしょう。

ユーザーの動きを分析するためには、Google Analyticsのようなアクセス解析ツールやヒートマップが役立ちます。

Google Analyticsについて詳しく知りたい方は、GA4(Google Analytics4)の機能・使い方を解説もあわせてご覧ください。

ヒートマップについては、【ヒートマップ活用術】上位表示を目指すSEO対策テクニック7選のコラムも参考にしてみてください。

モックアップを活用して魅力的で使いやすいWebサイトを作成しよう

今回は、モックアップの重要性や作成のポイント、おすすめのツールを解説しました。

モックアップを作成すると関係者間でWebサイトの完成イメージを共有でき、修正点の把握や認識のズレを解消するために役立ちます。

さらに、ユーザーが使いやすく魅力的なWebサイトの作成に役立ち、SEOに強いサイト制作にもつながります。

また、ユーザーエクスペリエンス改善に取り組みたい方は、UI/UXデザイナー向けのChatGPTプロンプト集15選もご参考ください。

ユーザビリティやクローラビリティを向上させたい方はサイトマップの種類と作成するメリット、作成ツールを解説も併せてご覧ください。

SEOをより強化するには、SEOに強いAIライティングツール「トランスコープ」がおすすめです。

トランスコープについては、以下の動画で詳しく紹介しています。

AIでSEOに強いブログ記事作成！SEOに強いAIライティングツール「トランスコープ」とは？

さらに、【トランスコープの評判・導入事例】では、実際にトランスコープを取り入れた企業の導入事例を掲載しています。

ぜひご確認ください。

トランスコープは、無料で体験ができます。

ご興味がございましたら、お気軽にお試しください。

■SEOに強いAIライティングツール「トランスコープ」

https://transcope.io/