モックアップとは？意味とワイヤーフレーム・カンプとの違い

新しいデザインを本番で作る前には、必ず「実際にはどう見えるのか」という確認が入ります。アプリの画面をコードを書く前にフルカラーで見せる、ロゴを入れたユニフォームを発注前に確認する、ネットショップで受注生産のマグカップを販売する。その確認に使うのがモックアップです。この記事では、モックアップの意味を、Web・アプリ制作と商品・印刷物のデザインの 2 つの場面で整理し、ワイヤーフレーム、デザインカンプ、プロトタイプとの違い、種類と作り方を紹介します。

結論から。 モックアップとは、完成品がどう見えるかを本番前に確認するための、本物に近い見本です。Web・アプリ制作では、色、文字、画像まで入れた静止画の画面（デザインカンプとほぼ同じ意味）を指し、動きを付けたものはプロトタイプと呼びます。商品や印刷物のデザインでは、Tシャツ、マグカップ、箱、スマートフォンなどの写真にデザインを合成し、完成品のように見せた画像を指します。

モックアップとは

モックアップ（mock-up）とは、本物そっくりに作った見本のことです。もとは製造業や建築の言葉で、製品、部屋、乗り物などが量産や施工の前にどう見えるかを確かめるために作る、実物大の模型を指していました。英語の mock には「まねる、模造の」という意味があり、日本語では「実物大模型」「試作模型」と訳されます。

デザインの分野では、この言葉が「完成形に見える見本の画像」という意味で使われるようになりました。現在は、主に次の 2 つの意味で使われます。

• Web・アプリ制作のモックアップ：画面やページを、本番の色、フォント、画像、余白まで入れて作った静止画。構成を決めるワイヤーフレームと、動きを確かめるプロトタイプの間に位置します。
• 商品・印刷物のモックアップ：Tシャツ、マグカップ、パッケージ、名刺、スマートフォンなどの写真や 3D 画像に、デザインを合成した画像。

どちらも、「作る前に、見た目を判断できるようにする」という目的は同じです。

ワイヤーフレーム・モックアップ・プロトタイプの違い

Web やアプリの制作では、モックアップはラフから本番に近づいていく 3 つの段階の 1 つです。

	ワイヤーフレーム	モックアップ（デザインカンプ）	プロトタイプ
再現度	低い	高い	高い（または中くらい）
見せるもの	配置と情報の構成	本番の色、文字、画像、余白	見た目＋クリックや画面の移り変わり
動き	静止画	静止画	操作できる
答える問い	どこに何を置くか	どう見えるか	どう動くか
主な使いどころ	企画、情報設計	クライアントや社内の見た目の確認	ユーザーテスト、開発への引き渡し

ワイヤーフレームは、灰色の箱と仮の文字だけで作るので、話し合いが構成に集中します。モックアップで本番のデザインが入ると、色、フォント、写真についての意見が出てきます。プロトタイプは、モックアップの画面どうしをつなぎ、ボタンをタップすると次の画面に進むようにしたものです。

日本の Web 制作の現場では、モックアップと同じ段階のものをデザインカンプ（カンプ）と呼ぶことが多く、「カンプで確認をもらってからコーディングに入る」のように使われます。小さな Web サイトならラフからそのままカンプに進み、大きなアプリでは 3 つの段階を何度も繰り返すなど、どこまで作るかはプロジェクトによって変わります。

商品・印刷物のモックアップの種類

Web 制作以外で「モックアップ」と言うと、多くは商品のモックアップを指します。よく使われる種類は次のとおりです。

• アパレル：Tシャツ、パーカー、トートバッグ、キャップ。布のしわに沿ってプリントが曲がります。オンデマンドプリントのショップで欠かせない画像です。
• マグカップ・タンブラー：円筒の面に沿ってデザインが回り込みます。
• パッケージ：箱、パウチ、ラベル、ボトル、缶。商品化の前の提案やクラウドファンディングのページで使われます。
• 印刷物：名刺、チラシ、ポスター、封筒、招待状を、机や壁の写真に合成します。
• デバイス：Web サイトやアプリの画面を、スマートフォン、ノートパソコン、タブレットの写真にはめ込みます。
• 看板・サイン：店舗の看板、屋外広告、車両のラッピング、のぼり。ロゴを実際の大きさで見せられます。
• 書籍・ジャケット：電子書籍、単行本、CD のジャケットを立体的に見せます。

よくできた商品モックアップには 3 つの条件があります。デザインが面に沿っていること（布のしわやマグカップの丸みに合わせて曲がる）、写真の光と影がプリントの上にも乗っていること（貼り付けたように見えない）、プリントの大きさが実際に印刷できる大きさと同じであることです。

モックアップを使う場面

• ネットショップの商品画像：注文が入ってから作るオンデマンドプリントの商品は、モックアップが商品写真になります。
• クライアントへの提案：平面のロゴより、看板やユニフォームに入れたモックアップのほうが、使われる場面を想像しやすく、確認が早く進みます。
• カラー展開の検討：白、グレー、黒の Tシャツに同じデザインを並べると、在庫を発注する前にどの色が合うかを判断できます。
• 販売前の反応を見る：パッケージやグッズのモックアップを SNS やクラウドファンディングで見せ、需要を確かめてから生産します。
• ブランドの見せ方をそろえる：ローンチページ、商品一覧、ショップの画像を同じモックアップのセットでそろえられます。

モックアップを商品画像として使うときは、プリントの大きさを実物どおりにすることが大切です。実際より大きく見せたモックアップは、届いた商品とのイメージの違いにつながります。試作品を 1 枚撮った実物の写真をモックアップと並べて載せると、購入前の「本当はどう見えるの？」に答えられます。

モックアップの作り方

モックアップの作り方は、主に 3 つあります。

1. モックアップ素材を使う：Tシャツやスマートフォンの写真に、デザインを差し込める枠（スマートオブジェクト）が用意された PSD などの素材を使います。Photoshop で開き、枠の中にデザインを貼るだけで、しわや影に沿って合成されます。Illustrator でも、写真の上にデザインを重ねて変形すれば作れます。
2. オンラインのモックアップ作成ツールを使う：ブラウザで商品写真を選び、デザインをアップロードして位置と大きさを決めるだけで書き出せます。
3. 実物を撮影する、3D で作る：試作品を撮影したり、パッケージを 3D で描き起こしたりする方法です。もっとも手間と費用はかかりますが、メインビジュアルや独自のパッケージの提案に向いています。

Web・アプリのモックアップは、ワイヤーフレームをもとに、Figma などのデザインツールで本番の色、フォント、画像を入れて作ります。

Playyy で商品モックアップを作る

Playyy は、画像、プレゼン資料、文書などを 1 つの編集できるキャンバスで作る AI デザインエージェントで、Tシャツ、パーカー、スウェット、マグカップなどの写真にデザインを配置するモックアップ機能を備えています。エディターで［Elements］→［Mockups］を開いて服の写真を挿入し、デザインをドロップします。ダブルクリックでプリントを配置し、ドラッグで移動、角を引いて拡大縮小、上のハンドルで回転できます。［Print size］では、推奨サイズとプリント範囲いっぱいのどちらかを選べます。同じ流れは Tシャツのモックアップ作成ページでも試せます。

服の色を変えても、しわ、リブ、影はそのまま残り、プリントはデザインどおりに保たれます。チャットで「このデザインをマグカップとトートバッグに入れて」と頼んだり、自分で撮った商品写真をアップロードしたりすることもできます。エージェントが平らな面、マグカップのような円筒、正面を向いた服などのプリントできる面を見つけてデザインを合成し、デザインは編集できる状態のまま残ります。複数の商品を 1 つのページに並べてまとめて書き出す場合は、アパレルのモックアップ作成ページが便利です。PNG または JPG を ZIP にまとめて、または確認用の PDF で書き出せます。Playyy は毎日付与されるボーナスクレジットで無料で始められます。

まとめ

モックアップとは、完成品の見た目を本番前に確かめるための、本物に近い見本です。Web・アプリ制作では、ワイヤーフレームとプロトタイプの間にある静止画の完成見本（デザインカンプ）を、商品や印刷物のデザインでは、Tシャツやマグカップなどの写真にデザインを合成した画像を指します。どちらの場合も、作る前に見た目を判断し、確認や提案を早く進めるために使います。手元のデザインを商品の形で見てみたいときは、Playyy のモックアップ機能から始めてください。