モックアップとは、完成前に見た目や形を確認するための試作品のことです。
かんたんに言うと、「完成したらこのように見えます」と見せるための見本です。
Webサイト（ホームページ）やスマホアプリ、商品デザインなどを作る前に、完成イメージを共有するために使われます。
ただし、モックアップは完成品そのものではありません。見た目を確認するための見本なので、実際に動く機能までは入っていないこともあります。
この記事では、モックアップとは何か、使われる場面、ワイヤーフレームやプロトタイプとの違い、作り方を初心者向けにわかりやすく解説します。
関連するIT用語をまとめて確認したい方は、IT用語一覧もあわせてご覧ください。
モックアップとは？完成前に見た目を確認する試作品のこと
モックアップとは、完成前のデザインや形を確認するために作る試作品です。
Webサイトやアプリであれば、実際の画面に近い見本を作ります。色、文字、画像、ボタンの位置などを入れて、完成後のイメージをわかりやすくします。
モックアップを見ることで、作る人と確認する人が「どのような完成形を目指すのか」を共有しやすくなります。
一方で、モックアップは完成品ではありません。あくまで見た目を確認するための見本です。
モックアップの意味を身近な例でわかりやすく解説
身近な例でいうと、家を建てる前に見る完成予想図に近いものです。
家を建てる前に、図面だけを見ても完成後の雰囲気はわかりにくいことがあります。そこで、完成予想図を見ると「どのような家になるのか」がイメージしやすくなります。
ITやWeb制作でも同じです。文章だけで説明するより、画面の見本を見たほうが、完成イメージを共有しやすくなります。
このように、モックアップは「完成前に見た目を確認するための見本」と考えるとわかりやすいです。
モックアップが使われる場面
モックアップは、パソコンやスマホ、インターネットに関係する分野でよく使われます。
ここでいうITとは、パソコンやスマホ、インターネットに関係する分野のことです。
モックアップはITだけでなく、デザインや商品作りなどでも使われます。
Webサイト制作で使うモックアップ
Webサイト制作では、ページの見た目を確認するためにモックアップを作ります。
たとえば、トップページにどの画像を置くか、見出しをどこに入れるか、ボタンをどの位置に置くかを見える形にします。
文章だけで説明するよりも、画面の見本があるほうが、完成イメージを伝えやすくなります。
スマホアプリで使うモックアップ
スマホアプリでも、画面の見た目を確認するためにモックアップを作ります。
アプリとは、スマホやパソコンで使うソフトのことです。たとえば、地図アプリ、買い物アプリ、写真アプリなどがあります。
アプリのモックアップでは、ログイン画面、メニュー画面、設定画面などを作ります。
この段階で見た目を確認しておくと、あとから大きく直す手間を減らしやすくなります。
商品デザインで使うモックアップ
商品デザインでも、モックアップは使われます。
デザインとは、色や文字、形、配置などを考えて、見やすく使いやすく整えることです。
たとえば、名刺、パンフレット、本の表紙、商品の箱などの完成イメージを見せるときに使われます。
実物に近い形で見せることで、色や文字の大きさ、全体の雰囲気を確認しやすくなります。
建築や歯科などで使うモックアップ
モックアップは、建築や歯科などでも使われる言葉です。
建築では、建物の一部を実物に近い形で作り、素材や見た目を確認することがあります。歯科では、治療後の歯の形を事前に確認するための見本を指すことがあります。
ただし、この記事では主にITやWeb制作で使うモックアップについて説明します。
ITやWeb制作でモックアップを作る目的
ITやWeb制作でモックアップを作る目的は、完成イメージをわかりやすく共有することです。
作る人、確認する人、依頼する人が同じ画面を見ながら話せるため、意見を出しやすくなります。
完成イメージを共有するため
文章だけで「見やすい画面にします」と言われても、人によって思い浮かべる画面は違います。
モックアップがあれば、色や文字の大きさ、ボタンの位置などを見ながら確認できます。
そのため、作る人と依頼する人の考えを合わせやすくなります。
修正点を早めに見つけるため
モックアップを作ると、完成前に気になる点を見つけやすくなります。
たとえば、「文字が小さい」「ボタンが見つけにくい」「画像が目立ちすぎる」といった点です。
早い段階で気づけると、あとから大きく直す手間を減らしやすくなります。
認識のずれを防ぐため
認識のずれとは、同じ話をしているつもりでも、人によって思い浮かべているものが違うことです。
Webサイトやアプリの制作では、複数の人が関わることがあります。そのため、言葉だけで進めると、完成イメージがずれることがあります。
モックアップがあると、全員が同じ見本を見ながら話せるため、認識のずれを防ぎやすくなります。
モックアップとワイヤーフレームの違い
モックアップとよく似た言葉に、ワイヤーフレームがあります。
ワイヤーフレームとは、画面の大まかな配置を決めるための設計図のようなものです。色や細かい見た目よりも、「どこに何を置くか」を確認するために作ります。
| 項目 | ワイヤーフレーム | モックアップ |
|---|---|---|
| 目的 | 画面の配置を決める | 完成後の見た目を確認する |
| 見た目 | 線や枠が中心でシンプル | 色や画像を入れて実物に近い |
| 使うタイミング | 最初の設計段階 | 見た目を確認する段階 |
かんたんに言うと、ワイヤーフレームは「配置の下書き」、モックアップは「見た目の見本」です。
モックアップとプロトタイプの違い
モックアップと似た言葉に、プロトタイプもあります。
プロトタイプとは、見た目だけでなく、動きや使い方も確認できる試作品のことです。たとえば、ボタンを押すと別の画面に移るように作られたものです。
| 項目 | モックアップ | プロトタイプ |
|---|---|---|
| 目的 | 見た目を確認する | 動きや使い方を確認する |
| 動き | 動かないことが多い | 画面の移動などを試せることがある |
| 確認する内容 | 色、文字、画像、配置 | 操作の流れ、使いやすさ |
かんたんに言うと、モックアップは「見た目の確認」、プロトタイプは「使い方の確認」に向いています。
モックアップの具体例
ここでは、モックアップの具体例を見ていきます。
実際の使い方を知ると、モックアップの役割がよりわかりやすくなります。
Webサイトのモックアップ例
Webサイトのモックアップでは、ページ全体の見た目を作ります。
たとえば、会社のホームページであれば、ロゴ、メニュー、メイン画像、説明文、問い合わせボタンなどを配置します。
これにより、完成したページがどのように見えるかを確認できます。
スマホアプリのモックアップ例
スマホアプリのモックアップでは、スマートフォンの画面に合わせて見た目を作ります。
たとえば、買い物アプリなら、商品一覧、商品説明、カート画面などを作ります。
実際のスマホ画面に近い形で確認できるため、文字の大きさやボタンの見つけやすさを考えやすくなります。
名刺やパッケージのモックアップ例
名刺やパッケージのデザインでも、モックアップが使われます。
平面の画像だけで見るより、実物に近い形で見るほうが印象を確認しやすくなります。
たとえば、本の表紙を本の形に当てはめたり、ロゴを箱や袋に配置したりする使い方があります。
モックアップの作り方
モックアップは、専門的なツールがなくても作れます。
大切なのは、最初から完璧に作ろうとしないことです。まずは、確認したい内容が伝わる形にすることを目指しましょう。
1. 作る目的を決める
最初に、何を確認するためのモックアップなのかを決めます。
たとえば、「トップページの見た目を確認する」「アプリの画面を確認する」「商品の完成イメージを見せる」などです。
目的がはっきりしていると、必要な内容だけを入れやすくなります。
2. 画面やデザインの構成を考える
次に、どこに何を置くかを考えます。
Webサイトなら、見出し、画像、本文、ボタン、メニューなどの位置を決めます。
この段階では、細かい色や画像よりも、全体の流れを考えることが大切です。
3. 色や文字、画像を入れる
配置が決まったら、色や文字、画像を入れていきます。
これにより、完成後に近い見た目になります。
仮の文章や仮の画像を使う場合は、あとで差し替えることがわかるようにしておくと親切です。
4. 見る人に確認してもらう
モックアップができたら、作る人、確認する人、依頼する人で見ていきます。
確認するときは、「全体が見やすいか」「文字が読みやすいか」「ボタンを見つけやすいか」などを見るとよいです。
見る人の意見を聞くことで、自分では気づきにくい点も見つけやすくなります。
5. 必要に応じて直す
確認して出た意見をもとに、必要な部分を直します。
モックアップは完成前の見本なので、直しながら良くしていくものです。
早い段階で修正できると、あとから大きく直す手間を減らしやすくなります。
モックアップ作成に使われる主なツール
モックアップは、いろいろなツールで作れます。
ここでは、よく使われるものを紹介します。
Figma
Figmaは、Webサイトやアプリの画面を作るときによく使われるデザインツールです。
複数人で同じ画面を見ながら作業しやすい点が特徴です。
Web制作やアプリ開発の現場で使われることが多いです。
Canva
Canvaは、画像や資料を作りやすいデザインツールです。
テンプレートが多く、初心者でも使いやすいのが特徴です。テンプレートとは、文字や画像を入れ替えるだけで使える「ひな形」のことです。
チラシ、SNS画像、簡単なWeb用画像のモックアップを作るときにも使えます。
Adobe Illustrator・Photoshop
Adobe IllustratorやPhotoshopは、デザイン制作でよく使われるツールです。
Illustratorは、ロゴや印刷物のデザインに使われることが多いです。Photoshopは、写真の加工や画像の合成に使われることが多いです。
名刺、ポスター、パッケージなどのモックアップ作成にも使われます。
PowerPointやGoogleスライド
PowerPointやGoogleスライドでも、簡単なモックアップを作れます。
四角形、文字、画像を並べるだけでも、画面の見本として使えます。
専門ツールに慣れていない人は、まず身近なツールで作ってみるのもよい方法です。
モックアップを作るメリット
モックアップを作ると、完成前に見た目を確認できます。
そのため、作る人にも見る人にも多くのメリットがあります。
完成後のイメージが伝わりやすい
モックアップがあると、完成後のイメージを見た目で伝えられます。
言葉だけでは伝わりにくい内容も、画面や画像で見ると理解しやすくなります。
特に、ITに詳しくない人にも説明しやすくなります。
あとから大きく直す手間を減らしやすい
完成前に見た目を確認できるため、大きな修正を早めに見つけやすくなります。
完成してから「思っていたものと違う」となると、直すのに時間がかかることがあります。
モックアップを作っておくと、あとから大きく直す手間を減らしやすくなります。
初心者でも意見を出しやすい
専門的な説明だけでは、意見を出しにくいことがあります。
しかし、モックアップがあれば、見た目を見ながら「ここは読みやすい」「このボタンは見つけにくい」と話しやすくなります。
初心者でも確認しやすい点は、モックアップの大きなメリットです。
モックアップを作るときの注意点
モックアップは便利ですが、使い方には注意も必要です。
役割を正しく伝えることで、誤解を防ぎやすくなります。
本物の完成品ではないと伝える
モックアップは、完成品ではありません。
見た目は本物に近くても、まだ動かない部分や仮の内容が入っていることがあります。
確認してもらうときは、「これは完成前の見本です」と伝えるとわかりやすいです。
細かく作り込みすぎない
最初から細かく作り込みすぎると、直すのに時間がかかります。
モックアップは、確認しながら直していくためのものです。
初めの段階では、必要な部分が伝わる程度に作ることも大切です。
見た目だけでなく目的も確認する
モックアップを見ると、色や画像などの見た目に目が向きやすくなります。
しかし、本当に大切なのは、その画面で何を伝えたいのか、何をしてもらいたいのかです。
見た目だけでなく、目的に合っているかも確認しましょう。
初心者が間違えやすいポイント
ここでは、モックアップについて初心者が間違えやすい点を整理します。
先に知っておくと、制作の話を聞いたときに理解しやすくなります。
モックアップは動く完成品ではない
モックアップは、基本的に見た目を確認するためのものです。
ボタンを押したり、画面が切り替わったりする機能がない場合もあります。
動きまで確認したい場合は、プロトタイプを作ることがあります。
ワイヤーフレームとは役割が違う
ワイヤーフレームは、画面の配置を考えるためのものです。
モックアップは、色や画像などを入れて、完成後の見た目を確認するためのものです。
どちらも制作に役立ちますが、確認する内容が違います。
無料素材の利用条件を確認する
モックアップを作るときに、無料の画像やテンプレートを使うことがあります。
その場合は、利用条件を確認しましょう。商用利用とは、仕事やお店の宣伝など、お金に関係する目的で使うことです。
クレジット表記が必要かどうかも確認するとよいです。クレジット表記とは、素材を作った人や提供元の名前を書くことです。
モックアップの言い換え表現
モックアップは、場面によって別の言葉で言い換えられることがあります。
たとえば、以下のような表現です。
- 試作品
- 見本
- 完成イメージ
- デザイン案
- 画面イメージ
ただし、すべてが完全に同じ意味とは限りません。
ITやWeb制作では、「完成前に見た目を確認するためのもの」という意味で使うと理解しやすいです。
モックアップに関するよくある質問
モックアップとは簡単にいうと何ですか？
モックアップとは、完成前に見た目を確認するための試作品です。
Webサイトやアプリであれば、実際の画面に近い見本を作り、完成イメージを確認します。
モックアップは何のために作りますか？
完成後の見た目を、関係者で共有するために作ります。
早い段階で確認することで、修正点を見つけやすくなります。
モックアップとモックの違いは何ですか？
モックは、モックアップを短くした言い方として使われることがあります。
たとえば、スマホの店頭サンプルや、まだ動かない画面の見本を「モック」と呼ぶことがあります。
ITやWeb制作では、どちらも「完成前の見本」という意味で使われることが多いです。
モックアップとプロトタイプの違いは何ですか？
モックアップは、主に見た目を確認するためのものです。
プロトタイプは、見た目だけでなく、操作の流れや動きも確認するためのものです。
モックアップとワイヤーフレームの違いは何ですか？
ワイヤーフレームは、画面の大まかな配置を決めるためのものです。
モックアップは、色や画像などを入れて、完成後の見た目に近づけたものです。
モックアップは初心者でも作れますか？
初心者でも作れます。
最初は、PowerPointやGoogleスライドなど、使い慣れたツールで作っても問題ありません。
大切なのは、完成イメージをわかりやすく伝えることです。
モックアップは無料で作れますか？
無料で作ることもできます。
無料で使えるデザインツールやテンプレートを使えば、費用をかけずに作成できます。
ただし、無料素材を使う場合は、仕事やお店の宣伝に使えるか、名前の表記が必要かを確認してから使いましょう。
まとめ：モックアップとは完成前にイメージを確認するための大切な試作品
モックアップとは、完成前に見た目や形を確認するための試作品です。
Webサイトやアプリ、商品デザインなどで使われ、完成後のイメージをわかりやすく共有するために役立ちます。
ワイヤーフレームは配置を考えるためのもの、モックアップは見た目を確認するためのもの、プロトタイプは動きや使い方を確認するためのものです。
また、モックはモックアップを短くした言い方として使われることがあります。まずは「モックアップは完成前の見た目の見本」と覚えるとわかりやすいです。