モックアップとは？意味や作り方を解説

モックアップ（デザインカンプ）とは？

モックアップとは、ウェブサイトやアプリの開発時に、色やデザインのサンプルとして作成されるビジュアルツールです。

英語では、「mock-up」と記載され「模型」という意味があります。

また、Webデザインの場では、デザインカンプとも呼ばれることがあり、デザインやレイアウトを含めた完成品を具体的に表現した完成サンプルとして作成されます。

モックアップを作成することでステークホルダーやクライアントとビジュアルに対するアイデアをわかりやすく伝えることが可能になり、UX改善や意思決定をサポートできます。

ワイヤーフレームやプロトタイプがモックアップと同義で認識されることがありますが、動作や構造の有無によって大きく役割が異なります。

モックアップ、ワイヤーフレーム、プロトタイプの違い

モックアップとワイヤーフレームの違い

モックアップとワイヤーフレームは両者とも製品やウェブサイトの設計段階で使用されるビジュアルツールですが、その目的と表現方法に違いがあります。

ワイヤーフレームは、ページの構造やレイアウト、情報の階層性を示すためのシンプルな図であり、色やグラフィック、具体的なデザイン要素は含まれず、ページ内のコンテンツの配置や機能の位置関係を示します。

一方で、モックアップはデザインのビジュアルを色、タイポグラフィ、画像などで表現しており、具体的な構造やボタンの位置などはモックアップでは設計されません。

▼ ワイヤーフレームについてもっと詳しく知りたい ワイヤーフレームとは？作り方やおすすめのツールを紹介

モックアップとプロトタイプの違い

プロトタイプも同様にアプリやウェブサイトの設計プロセスにおいて役立つビジュアルツールですが、機能の上でモックアップと大きな違いがあります。

プロトタイプでは、ユーザーがボタンをクリックするとどういう動きが起きるのか、どのページに遷移するのかという実際の動作を体験することができます。

しかし、モックアップには動作的な機能はなく、あくまで製品やサービスのデザイン（見た目）に焦点を置いたビジュアルツールです。

モックアップの作り方

構造とレイアウトを決める

基本構造を形作る

ワイヤーフレームでデザインの骨格を描き、主要な要素の配置と全体的なユーザーフローに焦点を当てます。

視覚的階層とナビゲーションを設計する

最も重要な要素を特定し、明確な視覚的階層を設計しましょう。

直感的なナビゲーションをデザインし、シームレスなユーザー体験を実現することができます。

ビジュアル要素のデザイン

モックアップをデザインする時はブランドの色を選び、適切なイメージを彷彿とさせることが重要です。

また、フォントの調整をすることにより、より情報が理解しやすくなり、 ブランドの個性が表現しやすくなります。

さらに、モックアップの視覚的な魅力を高めるために、関連する画像を取り入れることもできます。

適切なデザインツールでモックアップを作成

適切なデザインツールを使ってモックアップを作成することで、作成プロセスを効率化することができます。

ツールの選択には、使いやすいインターフェイスかや、デザイン素材が十分に揃っているかなどを考慮しましょう。

まとめ

モックアップはアプリやウェブサイト、プロダクトのデザインを視覚的に共有するためのビジュアルツールであり、Webデザインの場では、デザインカンプとも呼ばれています。

ワイヤーフレーム、プロトタイプ、モックアップは、どれもデザインプロセスでよく使用されるツールですが、その機能や活用目的に多くの違いがあります。

モックアップを使用することで、色やデザインがブランドの特徴やメッセージに 合ったものかをリリース前に確認することができるようになり、より洗練されたデザインでウェブサイトやプロダクトをリリースすることに役立ちます。

モックアップを制作フローに導入して、プロジェクトチームとデザインを共有しましょう。

Miro のモックアップ

Miro のホワイトボードツールでは、無料のデザインツールやテンプレートを活用して、ワイヤーフレーム、プロトタイプピング、モックアップを簡単に作成することができます。

また、1つのボードにデザインを管理することで、誰でも必要な時にデザインにアクセスすることができ、付箋やコメントを通してフィードバックを共有することができます。

以下のリンクから製品情報をご確認いただけます。

◆ Miro のモックアップツール ◆ Miro のワイヤーフレームツール ◆ Miro のプロトタイピングツール ◆ Miro のデザインテンプレート

著者:Miroチーム 最終更新日：2026年2月5日

モックアップに関するよくある質問

モックアップとデザインカンプの違いは何ですか？

モックアップは、デザインの方向性や見た目を確認するための中間成果物です。一方、デザインカンプは最終的なビジュアルを確定するための完成度の高いデザインを指します。

モックアップとは、どのような目的で作成するものですか？

モックアップは、Webサイトやアプリの完成イメージを視覚的に共有するために作成します。デザインの方向性やレイアウト、UIの雰囲気を関係者と確認する目的で、設計の途中段階で使われます。

モックアップはどのような流れで作成すればよいですか？

まず画面構成や情報の配置を整理し、その後に配色やUIの雰囲気を調整します。モックアップを作成することで、デザインの方向性を早い段階で確認できます。

モックアップはデザイナー以外でも作成できますか？

はい。テンプレートや既存のUI要素を使えば、専門的なデザイン知識がなくてもモックアップを作成できます。チームで共有しながら、デザインの方向性をすり合わせることが可能です。