Webサイトやアプリの開発を進めると、「モックアップを作りましょう」と言われる場面があります。完成イメージを早めに固めるために重要な工程ですが、ワイヤーフレームやプロトタイプとの違いが曖昧なまま進むと、認識のズレや手戻りにつながります。
結論から言うと、モックアップとは色や画像、フォントまで作り込み、完成後の見た目を共有するための静止画の設計物です。ワイヤーフレーム（骨組み）に視覚デザインを加えた段階にあたり、実際に動かせるプロトタイプとは区別されます。この記事では、モックアップとは何かという基本から、画面モックやHTMLモックといった種類、作り方の手順、おすすめのツール、発注時に確認すべきことまでをわかりやすく解説します。
この記事のポイント
- モックアップとは色や画像まで作り込み完成イメージを共有する静止画の設計物
- ワイヤーフレームは骨組み、モックアップは見た目、プロトタイプは動く試作品
- デザインモック・画面モック・HTMLモックなど目的で種類を使い分ける
- 作る目的は認識合わせと手戻り防止。発注側は早い段階で見た目を確認する
目次
モックアップとは？種類と作る目的
まずはモックアップが何を指すのか、どんな種類があり、なぜ作るのかを整理します。ここを押さえると、ワイヤーフレームやプロトタイプとの混同を避けられます。
モックアップとは何か
モックアップ（Mockup）とは、もともと「実物大の模型」を意味する言葉です。Webサイトやアプリの開発では、機能や動作は未実装のまま、画面のデザインやレイアウト、ボタンの配置といった見た目を表現し、完成イメージを共有するための成果物を指します。
現場では「モック」「モック画面」「画面モック」「モックサンプル」などとも呼ばれ、ほぼ同じ意味で使われます。デザインカンプと同義で扱われることも多く、一般的にはワイヤーフレームが完成したあとに作成します。色やフォント、画像まで作り込むため、文章や口頭だけでは伝わりにくい最終的な見た目を、関係者が同じ目線で確認できるのが特徴です。
もともとは製造業で、見た目は完成品とほぼ同じでも内部の機能は動かない模型をモックアップと呼んでいました。ソフトウェア開発でも考え方は同じで、「動きはないが、見た目は本物に近い」状態を指します。動かないからこそ作成や修正が軽く、完成前のデザイン合意に向いているわけです。読み方は「モックアップ」で、まれに「モップアップ」と誤記されることもありますが、指すものは同じです。
モックアップの種類
ひとことでモックアップと言っても、作り込み方や目的によっていくつかの種類があります。代表的なものを整理します。
| 種類 | 内容 | 主な用途 |
|---|---|---|
| デザインモック | デザインツールで作る静止画の完成イメージ | 色・レイアウトの合意形成 |
| 画面モック（モック画面） | 各画面の見た目を1枚ずつ表現したもの | 画面ごとの仕様・遷移の確認 |
| HTMLモック | HTML/CSSで作る完成形に近いモック | ブラウザ表示・レスポンシブの確認 |
多くは静止画のデザインモックで足りますが、実際のブラウザでの見え方やスマホ対応まで確認したい場合は、HTMLで作るHTMLモックが選ばれます。用途に対して過剰に作り込むと工数が増えるため、何を確認したいかで種類を選ぶのがポイントです。
ワイヤーフレーム・モックアップ・プロトタイプの違い
モックアップは、ワイヤーフレームやプロトタイプと混同されがちですが、完成イメージに近づく段階が異なります。
| 名称 | 位置づけ | 含む要素 |
|---|---|---|
| ワイヤーフレーム | 骨組み（線画の設計図） | 要素の配置・情報設計のみ |
| モックアップ | 見た目（静止画） | 色・画像・フォントなどの視覚デザイン |
| プロトタイプ | 動く試作品 | 画面遷移やクリックなどの動き |
ワイヤーフレームは骨組み、モックアップはそこに皮を被せた静止画、プロトタイプは実際に触れる試作物、という順で完成イメージに近づいていきます。MVPやPoCも含めた試作の概念を整理したい場合は、プロトタイプとMVP・PoC・モックアップの違いを解説した記事もあわせて確認すると、どの段階で何を作るべきかが見えてきます。
モックアップを作る目的とメリット
モックアップを作る一番の目的は、完成後の見た目について関係者の認識を合わせ、手戻りを防ぐことです。文章や口頭の指示だけでは、発注側と開発側のイメージにズレが生まれやすく、完成してからデザインの修正が入ると大きなコストになります。
モックアップの段階であれば、色やレイアウトの調整が容易です。早い段階で見た目を可視化することで、デザインの問題点やユーザビリティの課題を実装前に発見でき、ユーザーテストの土台としても使えます。発注側にとっては「思っていたものと違う」を防ぐ、最もコスト効率の良いチェックポイントだと言えます。
具体的なメリットは大きく4つあります。1つ目は、デザイナーと開発者、発注側の認識をそろえ、コミュニケーションを改善できること。2つ目は、実装前に画面を見ながら要件の抜けや矛盾といった問題を特定できること。3つ目は、レイアウトや導線へのフィードバックを得て設計を改善できること。4つ目は、モックアップを使ったユーザーテストで、使い勝手の課題を早期に洗い出せることです。いずれも「作ってから直す」より圧倒的に低いコストで対応できる点が共通しています。
モックアップの作り方とおすすめツール
ここからは、モックアップを実際にどう作るか、どのツールを使うかを見ていきます。発注側が自分で作らない場合でも、流れを知っておくと制作物の確認がしやすくなります。
モックアップの作り方の手順
モックアップは、いきなりデザインを作り込むのではなく、要件の整理から段階的に進めます。
基本の流れは、①必要な画面と要件を整理する、②ワイヤーフレームで配置と情報設計を固める、③色・画像・フォントを加えてモックアップにする、④関係者で確認しフィードバックを反映する、という順です。先にワイヤーフレームで構造を決めておくと、デザイン段階で「配置から議論し直す」といった手戻りを防げます。要件の整理そのものに不安がある場合は、要件定義の進め方を解説した記事を先に読んでおくとスムーズです。
①では、トップページや一覧、詳細、入力フォームなど、必要な画面を洗い出して優先順位をつけます。どの画面に何の機能が必要かを発注側で言語化しておくと、後工程のブレが減ります。要件を文書に落とす段階では、要件定義書テンプレート（Word形式）を使うと、画面や機能の抜け漏れを防ぎながら整理できます。②のワイヤーフレームでは、各画面に何をどこへ置くか、画面間の遷移はどうなるかを、色をつけずに線と枠で固めます。③のモックアップで初めて、ブランドカラーやロゴ、写真、実際の文言を反映し、完成後の印象に近づけます。④では、発注側・デザイナー・開発者がそろって確認し、ズレを潰してから次の工程へ渡します。なお、ゼロから作るほかに、用意されたテンプレートに画像を当てはめるモックアップジェネレーターを使うと、実機にはめ込んだリアルな見え方を手早く用意できます。
モックアップ作成ツールの選び方
モックアップは専用のデザインツールで作るのが一般的です。代表的なツールと特徴を整理します。
| ツール | 特徴 |
|---|---|
| Figma | クラウド型で共同編集に強い。現在の主流 |
| Adobe XD | Adobe製品と連携。スタンドアロン版は新規販売を終了 |
| STUDIO | デザインからそのままWeb公開まで可能 |
| Sketch | Mac向けの定番デザインツール |
| Canva | テンプレートが豊富で手軽に作れる |
選ぶときのポイントは、操作のしやすさ、複数人で同時編集できるか、目的（WebかアプリかでUIや書き出しが変わる）の3点です。多くのツールに無料プランや無料体験があるので、まずは試してから決めるとよいでしょう。チームで作るなら、リアルタイム共同編集と変更履歴が残るクラウド型が効率的で、現状はFigmaが選ばれることが多くなっています。
HTMLモックを作るケースと注意点
静止画のモックアップで足りないときに使われるのが、HTML/CSSで作るHTMLモックです。実際のブラウザで表示できるため、デザインツールの静止画では分からない「ブラウザによる表示崩れ」や「スマホでのレスポンシブ表示」まで確認できます。
一方で、HTMLモックはコーディングが必要なぶん、静止画のモックより工数がかかります。あくまで見た目の確認が目的なので、動作する機能まで作り込もうとすると、それはモックアップではなくプロトタイプや本開発に近づき、コストが膨らみます。HTMLモックを作る場合は、どこまでを確認対象にするかを先に決めておくことが大切です。
発注時にモックアップで確認すべきこと
制作したモックアップは、受け取って終わりにせず、次の観点で確認すると失敗を防げます。色やレイアウトに不自然な点がないか、要望どおりのデザインになっているか、ボタンやリンクが直感的に操作できる配置か、そして問い合わせや購入といったコンバージョンへの導線が正しく設計されているかです。
特に発注側は、細部のフォントや色だけでなく「ユーザーが迷わず目的を達成できるか」という視点で見ると、実装後の使いにくさを早期に防げます。気になる点はモックアップの段階で必ず伝え、認識を合わせてから次の工程へ進めましょう。
スマートフォンとパソコンの両方で使うサービスなら、レスポンシブ対応（画面幅に応じたレイアウトの切り替え）が必要かどうかも、この段階で確認しておきます。PC向けの見た目だけで合意してしまうと、後からスマホ表示の作り直しが発生しがちです。HTMLモックを使えば、実際の端末やブラウザで崩れないかまで確かめられるため、対応端末が多いサービスほど早めの確認が効いてきます。
モックアップに関するよくある質問
モックアップについて、発注前によく聞かれる疑問をまとめました。
- Q. モックアップとモック画面・モックサンプルは違うものですか？
- A. ほぼ同じ意味で使われます。いずれも完成後の見た目を共有するための静止画を指し、現場では「モック」「画面モック」などと略して呼ばれることもあります。
- Q. モックアップとプロトタイプの違いは何ですか？
- A. モックアップは見た目を表現した静止画、プロトタイプは画面遷移などを実際に操作できる動く試作品です。動きや使い勝手を確かめたい場合はプロトタイプを作ります。
- Q. HTMLモックとは何ですか？
- A. HTML/CSSで作る完成形に近いモックアップです。ブラウザでの表示やスマホ対応まで確認できますが、コーディングが必要なぶん工数はかかります。
- Q. モックアップは無料ツールでも作れますか？
- A. 作れます。FigmaやCanvaなどは無料プランがあり、小規模なモックアップなら十分対応できます。機能や共同編集の制限を確認したうえで選びましょう。
