モックとはモックアップの省略で、簡単に言うと「見た目の確認だけできる試作品」です。
用語の理解だけならこれだけで充分です。

モックの目的

ここから先は、詳しく知りたい方向けにお話しします。

モックとは、英語の“mock-up（モックアップ）”が語源で、「実物に近い見本」や「模擬品」と訳されることが多い言葉です。
ITやプロダクト開発では、完成品を作る前に、その形・構成・使い勝手などを疑似的に体験できるものとしてモックが作られます。
実際の機能は持たずとも、「イメージの可視化」や「開発プロセスの効率化」、「クライアント・ステークホルダーとの認識の共有」など、幅広い活用目的があります。

モックの主な目的

• デザインやUIの確認
• 機能の流れ・導線のチェック
• クライアントとのイメージ共有
• 開発メンバー間の共通認識の形成
• 利用者による初期ユーザーテスト
• 営業提案・プレゼンテーションの補助

モックの種類

モックには、目的や精度によっていくつかの種類があります。

ローファイモック（Low-fidelity Mock）

• 手書きや簡易ツールで作成された、大まかなレイアウトや構成を示すもの
• ボタンや入力項目の位置関係、ページ遷移の概念をつかむために使用
• 通常は開発初期段階で利用

例：紙に描いたスケッチ、ホワイトボードの図解、FigmaやAdobe XDなどで作成されたワイヤーフレーム

ハイファイモック（High-fidelity Mock）

• 色やフォント、画像などを盛り込んだ、実物に近い精密なデザイン
• UIやUXの確認、実際の動き（アニメーション・画面遷移）の確認に使用
• ステークホルダーへの提案やフィードバック収集に有効

例：Figma、Adobe XD、Sketchなどで作成されたUIモック

インタラクティブモック

• 実際にボタンがクリックできる、画面遷移が可能なモック
• ユーザーテストや操作体験の確認に使われる
• プログラムではなくツール上でリンクや動作を設定する

例：Figmaのプロトタイプ機能、InVisionなど

モックの活用

IT業界を例に、モックの活用方法を開発工程別に記載します。

要件定義段階

モックを使ってユーザーの要望やUI設計を可視化することで、要件のずれを防ぐ。

デザイン・UIレビュー

クライアントや社内の関係者と「どんなものを作るか」を合意形成するために、ハイファイモックを使う。

フロントエンド開発支援

デザイナーが作成したモックをもとに、フロントエンドエンジニアが実装する。

バックエンド連携前のテスト

バックエンドが完成していなくても、モックサーバーやモックAPIを使って画面側の開発やテストを先行できる。

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

モックアップ（Mockup）とプロトタイプ（Prototype）は、どちらも製品やサービスの開発過程で使われる「試作物」ですが、目的や機能性、活用フェーズが異なります。
以下に違いをわかりやすく整理して解説します。

モックアップ

• ボタンや入力欄は見た目だけで、動作はしない
• 視覚的に完成形のイメージを伝えるための「静的」なモデル

例えで理解するなら…

• レストランで料理の「食品サンプル」を見て選ぶイメージ
• 見た目は分かるが、味（＝機能）は体験できない

プロトタイプ

• 実際にクリックしたり、入力が可能な「動的」なモデル
• 製品の使いやすさや動作の流れを検証する目的で使う

例えで理解するなら…

• 実際に「試食」して味を確かめられるイメージ
• 完成版ではないが、使用感や課題が体験できる

モックアップは、「見た目の試作品」であり、デザイナーだけで完結できるためプロトタイプに比べるとコストを低く抑えるとこが出来ます。
プロトタイプは「体験できる試作品」であるため、デザイナーやエンジニア・UX担当が試作品制作に関与するためコスト高となりますが、無駄な開発コストや手戻りを削減できます。