【基礎知識】モックアップとは？意味・作り方・無料ツールまとめ

はじめに

「モックアップって何？ワイヤーフレームと何が違うの？」と疑問に思っている方は多いのではないでしょうか。

Web制作やアプリ開発を学び始めると、「ワイヤーフレーム」「モックアップ」「プロトタイプ」という似た言葉が次々と登場します。これらの違いを曖昧なまま進めると、制作フローで手戻りが起きたり、クライアントや上司との認識がズレてしまうことがあります。

この記事では、モックアップの基本的な意味から、ワイヤーフレーム・プロトタイプとの違い、そして無料で使えるおすすめツールとIllustratorを使った作り方まで、初心者向けにわかりやすく解説します。

読み終えた後には「自分でモックアップを作れる」という自信がつくはずです。ぜひ最後まで読んでみてください。

モックアップとは？

モックアップの定義

モックアップ（mockup） とは、Webサイトやアプリのデザインをビジュアルとしてほぼ完成に近い形で表現したサンプルのことです。色・フォント・画像・レイアウトなど、実際の見た目を忠実に再現しており、完成イメージを関係者と共有するために使われます。

「模型」「見本」を意味する英語 “mock-up” が語源であり、製品開発の現場では実物大の試作品を指すこともあります。Web・デザインの文脈では、主にUIデザインの完成イメージを示すファイルや画像を指します。

モックアップの特徴を一言で表すなら、「静止画として視覚的にほぼ完成しているが、クリックしても動かない」という点です。実際のインタラクション（ボタンを押したときの動作など）はなく、あくまでデザインの確認・共有が目的です。

ワイヤーフレーム・プロトタイプとの違い

Web制作でよく混同される3つの概念を整理します。

制作フローとしては「ワイヤーフレーム → モックアップ → プロトタイプ」の順に進んでいくことが一般的です。それぞれの段階で確認する内容が異なるため、3つを混同して使うと意思決定のタイミングがずれてしまいます。

ワイヤーフレームの段階では「情報を正しく配置できているか」を確認し、モックアップの段階では「デザインの方向性が合っているか」を確認します。プロトタイプは、実際に触って体験した上でUIの使いやすさを検証するフェーズです。

Web制作フローにおけるモックアップの位置づけ

モックアップはWeb制作フローの中で、要件定義・ワイヤーフレーム作成の後、コーディング前に位置します。

1.要件定義
2.サイトマップ・ページ構成の設計
3.ワイヤーフレームの作成
4.モックアップの作成 ← ここ
5.クライアント確認・フィードバック
6.プロトタイプ（必要な場合）
7.コーディング・実装

モックアップを作成することで、コーディングに入る前に「デザインの方向性が合っているか」をクライアントや開発チームと確認できます。この段階で修正を行えば、コーディング後に大きな手戻りが発生するリスクを大幅に減らせます。

モックアップを作るメリット

認識のズレをなくしてコミュニケーションを円滑にする

モックアップの最大のメリットは、完成イメージを視覚的に共有できる点です。言葉だけでデザインを伝えようとすると、クライアントと制作者の間で認識がズレてしまうことが少なくありません。

たとえば「シンプルで清潔感のあるデザイン」という言葉は、人によって思い描くイメージが異なります。しかしモックアップを見せることで、「このトーン・この配色でよいか」を具体的に確認できます。

認識のズレを早い段階で解消できると、制作後の修正依頼が減り、プロジェクト全体のコミュニケーションコストを下げることにつながります。

デザインの問題を早期発見してコストを削減する

コーディングが完了してからデザインの大幅な変更が発生すると、修正にかかるコストと時間は非常に大きくなります。一方、モックアップ段階での修正はデザインファイルを変更するだけで済むため、工数が圧倒的に少なくなります。

特に、以下のような問題はモックアップを作成することで早期に発見しやすくなります。

• フォントサイズや行間が読みにくい
• 色の対比が弱くてボタンが目立たない
• 要素の余白・間隔のバランスが悪い
• 情報の優先順位が視覚的に伝わりにくい

モックアップを丁寧に作ることで、実装前に品質を高めることができます。

クライアントや上司への説明が格段にしやすくなる

モックアップは、デザインの専門知識がない人にも直感的に伝わる資料です。ワイヤーフレームだけでは「完成したらどう見えるのか」をイメージしにくい人も多いですが、モックアップを見せることで具体的なフィードバックが得やすくなります。

承認を得るためのプレゼンや、方向性の確認会議において、モックアップは非常に強力なコミュニケーションツールになります。特に、クライアントワークや社内での意思決定が必要なプロジェクトでは、モックアップを活用することで承認までのプロセスをスムーズに進めることができます。

初心者でも使える！無料モックアップツール5選

Figma（フィグマ）

Figma は、現在Web・アプリデザインの現場で最も広く使われているUIデザインツールです。ブラウザ上で動作するため、OSを問わず使えるのが大きな特徴です。

無料プランでも複数のプロジェクトを作成でき、リアルタイムでの共同編集も可能です。コンポーネント機能やオートレイアウト機能を使えば、効率的にモックアップを作成できます。

初心者にとって最初に習得すべきツールとして、現場での実績・学習リソースの豊富さの両面から、Figmaをもっとも強くおすすめします。

Adobe XD

Adobe XD は、Adobeが提供するUIデザイン・プロトタイピングツールです。PhotoshopやIllustratorとの連携が強く、すでにAdobeのツールに慣れている方にとって学習コストが低い点が特徴です。

現在はCreative Cloudのサブスクリプションに含まれており、単体での無料プランは縮小されています。Adobeのエコシステムをすでに使っている方には選びやすい選択肢です。

Canva（キャンバ）

Canva は、デザイン経験がない方でも直感的に使えるグラフィックデザインツールです。豊富なテンプレートが用意されており、ドラッグ＆ドロップで簡単にデザインを作成できます。

本格的なUIデザイン用途としてはFigmaに劣りますが、簡易的なモックアップやバナー・SNS用ビジュアルの作成であれば十分に対応できます。無料プランの機能も充実しており、コストをかけずにデザイン作業を始めたい方に向いています。

Mockplus（モックプラス）

Mockplus は、プロトタイピングに特化したデザインツールです。インタラクションの設定が直感的に行えるため、モックアップからプロトタイプへのステップアップを視野に入れている方に向いています。

無料プランでも基本的な機能を試せるため、プロトタイプ作成を学びたい初心者の入門ツールとして活用できます。

Cacoo（カクー）

Cacoo はヌーラボが提供する、日本製のオンラインダイアグラムツールです。ワイヤーフレームやフローチャートの作成が得意で、チームでの共同編集も可能です。

日本語UIで使いやすく、国内企業での導入実績も豊富です。モックアップ作成の前段階であるワイヤーフレームとセットで使うツールとして検討する価値があります。

Illustratorでモックアップを作る方法

Illustratorでモックアップを作る手順

Illustrator（イラレ）はベクター形式のグラフィックデザインツールであり、WebデザインよりもロゴやDTP（印刷物）の用途で使われることが多いですが、モックアップ作成にも活用できます。

基本的な作成手順は以下の通りです。

1.アートボードを設定する（PC向けなら1280px × 800px など）
2.グリッドやガイドを引いてレイアウトの基準を作る
3.長方形ツールや楕円形ツールで各UI要素（ヘッダー・ボタン・カードなど）を配置する
4.カラースウォッチでブランドカラーを設定して色を適用する
5.文字ツールでテキストを入力し、フォント・サイズを設定する
6.画像プレースホルダーを配置してレイアウトの完成形を確認する
7.PDFまたはPNG形式で書き出してクライアントに共有する

Illustratorのモックアップ作成に役立つ機能

Illustratorでモックアップを作成する際に役立つ機能を紹介します。

• アートボード — 複数ページのデザインを1ファイルで管理できる
• シンボル（グローバルスウォッチ） — ブランドカラーを一括管理できる
• ライブラリ — よく使うロゴやアイコンを共有ライブラリとして保存できる
• 整列・分布 — 要素を均等に並べる整列ツールで、精度の高いレイアウトが作れる
• 書き出し設定 — Webプレビュー用に画像を書き出す際、解像度や形式を細かく設定できる

Illustratorと専用ツールの使い分け方

Illustratorでのモックアップ作成は、Figmaなど専用ツールと比べると作業効率が劣る場面があります。以下の基準で使い分けることをおすすめします。

Figmaを選ぶ場面

• UIデザイン・Web用モックアップを作りたい
• チームでリアルタイム共同編集したい

Illustratorを選ぶ場面

• すでにIllustratorに習熟している
• 印刷物・ロゴと合わせてデザインしたい
• バナーやビジュアル素材に近い表現をしたい

「イラレでモックアップを作れるか？」という問いに対する答えは「Yes」ですが、Web制作のモックアップを効率よく作りたいのであれば、まずFigmaを習得することをおすすめします。

モックアップ作成のコツと注意点

最初から完成度を求めすぎない

モックアップは「デザインの方向性を確認するためのもの」です。最初から100点のデザインを作ろうとすると、確認・フィードバックのタイミングが遅くなり、大きな修正が発生するリスクが高まります。

まずはラフな状態で関係者に共有し、フィードバックを受けながら精度を上げていく進め方が、実務では一般的です。「完成度70〜80%の状態で早めに共有する」という意識を持つと、制作全体がスムーズに進みます。

フィードバックをもらうタイミングを意識する

モックアップのレビューを行うタイミングは、制作フローのごく早い段階に設定することが重要です。コーディング開始前に必ず確認を取り、大きな方向性のズレがないことを確認してから次のステップに進みましょう。

フィードバックをもらう際には、「色・フォント・レイアウト・情報の優先順位」のどれについてのフィードバックかを明確にすることで、修正の優先順位がつけやすくなります。

デザインの一貫性（ブランドトーン）を保つ

複数のページや画面をデザインする場合、フォント・カラー・余白・アイコンのスタイルを統一することが重要です。ページごとにデザインの雰囲気が変わると、ユーザーに不信感を与える原因になります。

デザインの一貫性を保つためには、カラーパレット・タイポグラフィ・コンポーネントを最初に定義してから各ページのデザインに入る「デザインシステム」の考え方が参考になります。Figmaのコンポーネント機能やスタイル機能を活用すると、統一感のあるモックアップを効率的に作ることができます。

まとめ

モックアップとは、Webサイトやアプリのデザインをビジュアルとしてほぼ完成に近い形で表現したものです。ワイヤーフレームが情報の構成を確認するフェーズであるのに対して、モックアップは色・フォント・画像などのデザインを反映した静的なデザイン画であり、プロトタイプの一歩前の段階に位置します。

モックアップを作成することで、クライアントや開発チームとの認識のズレを防ぎ、コーディング後の手戻りを大幅に減らすことができます。初心者には無料で使えるFigmaから始めることをおすすめしますが、Illustratorに慣れている方はそちらを活用することも可能です。