モックアップとは？作り方の例やツール紹介とプロトタイプとの違いを簡単に解説

Webサイトやアプリ開発でモックアップをどの段階で、何のために作ればよいか迷うことがあります。この記事は、UXデザインの設計力と、ブランド構築支援の表現力の高さを強みにするWeb制作会社株式会社デパートがまとめました。

デザインを単なる見た目ではなく事業課題の解決を支える設計として捉える視点から、モックアップの意味・目的・作成ツールの選び方まで、手戻りを減らすための判断材料を整理します。

モックアップとは【初心者向け】本物そっくりの見た目を持つ模型のこと

モックアップとは、製品やWebサイトの完成イメージを、実物そっくりに再現した静的な模型を指します。英語の「mock-up」が語源で、「模型」や「見本」という意味を持ちます。IT業界では、Webサイトやアプリケーションの配色、画像、フォントといったビジュアルデザインを具体的に示したものを指すのが一般的です。

モックアップを作成することで、実際に動作するプログラムを開発する前に、関係者全員が最終的な見た目を確認し、デザインに関する認識を揃えることが可能になります。

【図解】ワイヤーフレーム・プロトタイプとの違いを制作フローで理解

Webサイトやアプリケーションの制作は、一般的に「ワイヤーフレーム→モックアップ→プロトタイプ」という順序で進みます。それぞれの役割は明確に異なり、この違いを理解することがプロジェクトを円滑に進める上で重要です。

ワイヤーフレームが骨格の設計、モックアップが見た目のデザイン確認、プロトタイプが動作検証という役割を持ちます。このフローを意識することで、各工程で何を決定すべきかが明確になり、手戻りの少ない開発が実現できます。

違い①：ワイヤーフレームは設計図、モックアップは完成見本

ワイヤーフレームは、Webページのレイアウトやコンテンツの配置を示す設計図です。主に線や四角などのシンプルな図形で構成され、どこに何を配置するかという情報構造を定義することに特化しています。色や画像などの装飾的な要素は含みません。ワイヤーフレームの詳しい作成方法については「ワイヤーフレームの作成手順」で詳しく紹介しています。

一方、モックアップはワイヤーフレームで決定した骨格に、配色、フォント、画像といった具体的なビジュアルデザインを乗せた完成見本です。ワイヤーフレームが構造の合意形成を目的とするのに対し、モックアップは見た目のデザインに関する合意形成を目的とします。

違い②：プロトタイプは「動く試作品」、モックアップは「静的な見た目」

プロトタイプは、モックアップに動きや機能（インタラクション）を実装した動く試作品です。ボタンをクリックしたら別ページに遷移する、メニューが開くといった、実際の製品に近い操作感を試せます。ユーザー体験（UX）や機能の妥当性を検証することが主な目的です。

対して、モックアップはあくまで見た目を再現した静的な画像やデザインデータであり、クリックしても画面は遷移しません。プロトタイプが操作感や機能を検証するものであるのに対し、モックアップは見た目を検証するものという点が大きな違いです。

違い③：デザインカンプはWeb制作におけるモックアップの別名

Web制作、特にWebデザインの現場では、デザインカンプという言葉がよく使われます。これは「デザインコンポジション（Design Composition）」の略で、完成見本を意味します。役割や指し示すものはモックアップとほぼ同義であり、Webサイトのビジュアルデザインを具体的に示した完成イメージを指します。

どちらの言葉を使うかは企業やチームの文化によることが多いですが、Webサイト制作の文脈でデザインカンプと出てきたら、それはモックアップのことだと理解して問題ありません。

モックアップを作成する3つの大きな目的

モックアップを作成する目的は、単に綺麗な完成見本を作ることではありません。プロジェクトを円滑に進め、最終的な成果物の質を高めるための意義が3つあります。開発の早い段階で関係者間の認識を揃え、デザインの問題点を洗い出し、ユーザーからの具体的な意見を得ることで、後の工程での大幅な手戻りや修正コストの増大を防ぎます。

モックアップは、効率的で質の高いものづくりに不可欠なプロセスです。

目的①：関係者間で完成イメージの認識を合わせる

モックアップの最大の目的は、関係者全員が完成イメージを具体的に共有し、認識を一致させることです。テキストや口頭だけの説明では、デザイナー、エンジニア、クライアントそれぞれが思い描くイメージに食い違いが生まれやすくなります。

視覚的に完成形を示すことで、「思っていたものと違う」という事態を防ぎ、デザインに関するフィードバックや評価を的確に行えるようになります。これにより、開発後の大幅な手戻りを防ぎ、プロジェクトを円滑に進行させることが可能です。

目的②：開発の早い段階でデザインの問題点を発見する

モックアップを作成する段階で、ビジュアルデザインの課題を早期に発見・検証できます。例えば、以下のような問題点をこの段階で特定・修正することで、実装後の手戻りコストを大幅に削減できます。

• 配色によって文字が読みにくくなっている

• 画像の配置がユーザーの視線の流れを妨げている

• ブランドイメージとデザインのトンマナが合っていない

• スマートフォンでの表示でレイアウトが崩れそうな箇所がある

デザインの検証を後回しにすると修正コストが実装後に膨らんでしまいます。実装前に見つかった問題は、実装後に見つかった場合と比べてコストが数倍変わることもあります。早い段階での視覚的な確認が、プロジェクト全体のコストコントロールにも直結します。

目的③：ユーザーテストで直感的なフィードバックを得る

モックアップを使ってユーザーテストを行うことで、実際のユーザーから直感的で具体的なフィードバックを得られます。完成品に近い見た目を見せることで、ユーザーは製品やサービスの使い心地を具体的にイメージし、以下のような意見を述べやすくなります。

• このボタンは押したいと思えるか

• 必要な情報にすぐたどり着けるか

• 次にどこへ進めばよいかわかるか

これにより、開発者はデータだけでは分からないユーザーの視点を設計に反映でき、最終的なプロダクトの満足度向上や問い合わせ・購入などのコンバージョン率改善につながります。

【3ステップ】モックアップの基本的な作り方の流れ

モックアップを作る方法は、いくつかの明確なステップに分かれています。特別なスキルがなくても、この流れに沿って進めることで、誰でも完成イメージを具体化できます。まずはレイアウトの骨組みを決め、次にビジュアルデザインの要素を固め、最後に専用ツールで作成するという3ステップが基本です。

この手順を踏むことで、効率的に質の高いモックアップを作成することが可能になります。

ステップ1：レイアウトの骨組み（ワイヤーフレーム）を決定する

まず最初に、Webページやアプリの画面に何をどこに配置するかを決めるワイヤーフレームを作成します。

• ヘッダー、フッター、メインコンテンツ、サイドメニューなど大枠のレイアウト

• ボタンや入力フォームなど詳細な要素の配置

• コンテンツの優先順位と情報の階層構造

この段階では色や装飾は考えず、情報設計に集中することが重要です。このワイヤーフレームが、後のデザイン工程のベースとなります。

ステップ2：ビジュアルデザイン（配色・画像・フォント）を固める

ワイヤーフレームで骨格が決まったら、次にビジュアルデザインの要素を具体的に定義していきます。ブランドイメージやターゲットユーザーに合わせて、以下の要素を決定します。

ここで決定したデザイン要素をワイヤーフレームに乗せていくことで、モックアップが完成に近づきます。

ステップ3：専用ツールを使って完成イメージを作成する

最後に、デザインツールを使って、ステップ1と2で決めた要素を統合し、実際の完成イメージを作成します。Figma や Penpot といった専門ツールを使い、ワイヤーフレームのレイアウトに沿って、配色を適用し、画像素材を配置、テキストを正しいフォントとサイズで入力していきます。

この作業を通じて、静的ながらも本物そっくりのビジュアルが完成します。ツールの編集機能を活用し、細部を調整してモックアップを仕上げます。

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

モックアップ作成には、専門のデザインツールを使用するのが一般的です。現在では無料で高機能なツールも多く、プロのデザイナーでなくても直感的に扱えるものが増えています。ツールの選定にあたっては、共同編集機能の有無・対応OS・他ツールとの連携性・コストなどを考慮すると良いでしょう。

ここでは、無料で始められる代表的なツールと、より手軽に使える特化型ツールを紹介します。

無料で始められる代表的なデザインツール

現在、モックアップ作成の主流となっているのが、無料で始められる高機能なデザインツールです。代表的なものに Figma や Penpot があります。

Figmaはブラウザ上で動作し、複数のメンバーとリアルタイムで共同編集できる点が大きな特徴です。豊富なプラグインで機能を拡張したり、作成したデザインからプロトタイプを制作したりすることも可能で、多くのWeb制作現場で標準ツールとして利用されています。

Penpotはオープンソースのデザインツールで、クラウド版は無料で利用でき、セルフホスティングにも対応しています。Figmaと同様の共同編集機能を持ち、特にコストを抑えたいチームやオープンソースの活用を重視する組織での採用が増えています。

プログラミング不要で使える特化型ツール

より手軽にモックアップを作成したい場合や、デザインの専門知識に自信がない場合には、プログラミングが要らない特化型ツールが便利です。例えば、Framer はドラッグ＆ドロップの直感的な操作で画面を作成でき、アニメーションや動きのある表現も加えやすく、テンプレートも豊富に用意されています。

パワーポイントやIllustratorでも作成は可能ですが、WebやアプリのUIデザインに特化していないため、専用ツールの方が効率的に作業を進められます。

【業界別】モックアップの具体的な活用事例

モックアップはIT業界だけでなく、製造業や建築業など、さまざまな分野で活用されています。形あるものを作る際には、完成イメージを事前に共有することが不可欠であり、モックアップはそのための有効なコミュニケーション手段となります。

ここでは、各業界でモックアップがどのように活用されているのか、具体的な事例を交えて紹介します。

IT・Web業界：WebサイトやアプリのUIデザイン確認

IT・Web業界では、Webサイトやアプリの画面デザイン（UI）を確認するためにモックアップが欠かせません。新しいWebサイトを構築する際、完成後のトップページや下層ページの見た目をモックアップで作成し、クライアントの合意を得ます。UIデザインのポイントについては「UIデザインのポイントと事例」で詳しく紹介しています。

また、モバイルアプリやWebアプリなどのシステム開発においても、各画面のレイアウトや操作性を携帯端末の実機サイズで確認するために活用され、ユーザーにとって使いやすい設計の実現につながります。

製造・メーカー：製品の外観デザインやサイズ感の検証

製造業では、新製品開発の際に、外観デザインやサイズ感を確認するためのモックアップが作られます。例えば、化粧品の容器や飲料の缶、香水瓶などのパッケージデザインを検討する際、ラベルを貼ったリアルなサンプルを作成し、店頭での見え方や持ちやすさを検証します。

また、展示会に出展する際に、開発中の商品を実物そっくりのモックアップとして展示し、来場者の反応を見るためにも活用されます。

建築業界：建物の外観や内装の完成イメージ共有

建築業界では、住宅や商業施設の完成イメージを顧客に伝えるためにモックアップが用いられます。マンションのモデルルームは、内装や設備、生活動線をリアルに体験できる大規模なモックアップの一種です。

また、CGパースや精巧な建築模型も、建物の外観や周辺環境との調和、店やホテルの内装デザインを関係者間で共有し、合意形成を図るための重要なモックアップとして活用されています。

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

ここでは、モックアップに関して初心者の方が抱きやすい疑問や質問について、Q&A形式で解説します。

Q. モックアップのクオリティは低くても問題ないですか？

目的によりますが、関係者との認識齟齬を防ぐためには、本番に近いクオリティで作成することが理想です。
特に色味やフォント、画像などの最終的なデザインを決定する場面では、作り込みが甘いと正しい判断ができません。
ただし、あくまで内部確認用であれば、細部にこだわらずスピードを優先する場合もあります。

Q. モックアップは作らずにプロトタイプから始めても良いですか？

静的なデザインの合意形成を飛ばしてしまうと、後工程で大幅な手戻りが発生するリスクが高まります。
まずはモックアップで見た目のデザインを確定させ、関係者の承認を得た上で、そのデザインを基にプロトタイプを作成するのが最も効率的な進め方です。

順番を守ることで、修正範囲を限定できます。

Q. Webサイト制作では「デザインカンプ」という言葉も聞きますが違いは何ですか？

Webサイト制作の現場において、「モックアップ」と「デザインカンプ」はほぼ同じ意味で使われる言葉です。
どちらも、Webページのビジュアルデザインを具体的に示した完成見本を指します。
企業やチームの慣習によって呼び方が異なるだけで、役割や作成するものに実質的な違いはありません。

Q. モックアップの作成は専門的なスキルがなくても可能ですか？

可能です。
現在では、Figmaのように直感的に操作できる無料ツールが普及しています。
また、多くのツールにはテンプレートやUIキットが用意されており、それらを活用することで、専門的なスキルがなくても簡単にクオリティの高いモックアップを作成できます。

Q. モックアップを作る工数がもったいないと感じますが、どういう時に必要ですか？

関係者が複数人いるプロジェクトや、完成イメージの認識がズレると大きな手戻りが発生する場合には特に必要です。
一見、工数がかかるように見えますが、開発着手前にデザインの問題点を修正できるため、結果的にプロジェクト全体の手戻りや修正コストを大幅に削減することにつながります。

モックアップの効果は、合意形成フローの設計で決まる

モックアップは、単なる見た目の確認だけでなく、関係者間の認識を揃え、開発の手戻りを防ぐための重要なコミュニケーション手段です。ワイヤーフレームで骨格を決め、モックアップで見た目を固め、プロトタイプで動きを検証するという流れを理解することで、プロジェクトを円滑に進めることができます。専用ツールを使えば簡単に作成できるため、ぜひ活用してみてください。

モックアップ作成を始める前に、以下の点を確認しておくと、制作工程全体をより効率的に進めやすくなります。

• 誰がモックアップをレビューし、何を承認するのかが明確になっているか

• ワイヤーフレームの段階で、情報構造や配置の合意が取れているか

• フィードバックのタイミングと反映ルールがプロジェクト内で共有されているか

• 使用するデザインツールがチーム全員で共有・編集できる環境になっているか

ツールを活用することでモックアップの作成自体は手軽になっています。ただし、ツールを使いこなすことと、プロジェクト全体の合意形成フローを設計することは別の話です。どの段階で何を確認するかをあらかじめ決めておくことが、手戻りを減らす上で最も効果的です。

モックアップ・プロトタイプは株式会社デパートにご相談ください

株式会社デパートでは、見た目の完成度だけでなく、ユーザーの操作しやすさと事業上の成果につながる設計を意識したモックアップ・プロトタイプの制作を行っています。

どこから進めればよいか整理できていない段階でも、現在のプロジェクト状況や課題を共有いただくことで、情報設計・導線設計・ブランド表現を一貫した視点で整理する支援ができます。社内で対応できる範囲と、外部に相談した方がよい範囲を分けて考えたい場合も、お気軽にご連絡ください。

株式会社デパートのサービスをご紹介