画面モックとは ワイヤーフレーム・プロトタイプとの違いと作り方5ステップ、ツール

「開発会社から画面モックが届いたが、何をどこまで確認すればよいのかわからない」「モックとワイヤーフレーム、プロトタイプの違いが曖昧なまま打ち合わせが進んでいる」。システム開発の発注側でよく起こる状況です。

画面モックは、完成後の見た目を関係者で共有するための成果物です。文章や口頭では伝わりにくいイメージを、同じ絵を見ながら確認できるようにする役割を担います。

この記事では、画面モックの定義と似た用語との違いを整理したうえで、種類、作る目的、作成の5ステップ、使われるツール、そして発注側が押さえるべき確認の観点までをまとめます。

確認したいポイント	結論	詳細
画面モックとは？	完成後の見た目を共有する静止画	色や文字まで作り込んだ画面イメージです。動作は実装されていません。
ワイヤーフレームとの違いは？	骨組みか、見た目まで作るか	ワイヤーフレームは配置の設計図、モックはそこにデザインを当てた段階です。
プロトタイプとの違いは？	動かせるかどうか	モックは静止画、プロトタイプは画面遷移や操作を確認できる試作品です。
何を確認すべき？	情報の過不足と操作の流れ	見た目の好みより、必要な情報が揃っているかを優先して確認してください。

この記事でわかること

• 画面モックの定義と、現場で使われる呼び方の整理
• ワイヤーフレーム・プロトタイプ・デザインカンプとの違いと使い分け
• ローファイとハイファイ、HTMLモックなど種類ごとの役割
• 作成する4つのメリットと、作り方の5ステップ
• 発注側が確認すべき観点と、やりがちな4つの失敗

システム開発の進め方を整理したい方へ 要件の固め方から設計、開発、運用までの進め方をまとめたサービス資料を無料で配布しています。構想段階でも問題ありません。 ▶ 資料請求はこちら

画面モックとは完成後の見た目を共有するための静止画

画面モックとは、機能や動作は実装しないまま、画面のデザインやレイアウト、ボタンの配置といった見た目を表現した成果物です。英語のmock-upが語源で、実物大の模型を意味します。

色、フォント、画像、実際に表示される文言まで作り込むため、完成後の姿をかなり正確に共有できます。文章の仕様書だけでは伝わらない部分を補う役割です。

まずは呼び方の整理と、なぜ作るのか、どの工程で作るのかを確認します。

モック・モック画面・デザインカンプはほぼ同じ意味

現場では複数の呼び方が使われています。厳密に区別されていないことも多いため、打ち合わせの前に認識を合わせておくと混乱を避けられます。

• モック／モックアップ：最も一般的な呼び方。画面以外の成果物にも使われる
• 画面モック／モック画面：システムやアプリの画面に限定した言い方
• デザインカンプ：Web制作の現場で使われる。ほぼ同義として扱われる

どの言葉を使うかより、何がどこまで作り込まれているかを確認してください。同じモックという言葉でも、簡易な配置図を指す場合と、完成品と見紛う精密な画像を指す場合があります。

作る目的は認識のずれによる手戻りを防ぐこと

システムは完成するまで実体がありません。そのため、発注側と開発側でイメージがずれたまま進むことが起こります。

IPA（情報処理推進機構）が公開している解説資料では、ユーザー企業とベンダー企業の間で責任関係や作業分担が明確になっていない結果、損害賠償請求の訴訟などのトラブルに発展するケースがあり、その場合にはさらに多くの時間とコストを要することになると指摘されています（出典：IPA「情報システム・モデル取引・契約書（第二版）」 https://www.ipa.go.jp/digital/model/model20201222.html ）。

画面モックは、このずれを早い段階で表面化させる手段になります。実装が進んでから違ったと気づくより、絵の段階で修正するほうが費用も時間も圧倒的に小さく済みます。

作成するのは外部設計の工程

一般的な開発の流れでは、要件定義の後に続く外部設計の段階で作成されます。要件で決めた内容を、実際の画面としてどう表現するかを詰める工程です。

この段階で発注側が内容を確認し、合意してから実装へ進むのが標準的な進め方になります。

開発手法によっては、この工程を短い周期で繰り返す形になります。小さく作って確認し、また作るという進め方では、画面ごとにモックと実装が交互に進みます。

その前段となる要件の整理については、要件定義の例｜機能要件・非機能要件の悪い例から良い例への書き換え集で解説しています。

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

この3つは制作の順序で並んでおり、それぞれ確認する目的が異なります。混同すると、レビューで見るべき点を見誤ります。

違いを一言で言えば、骨組み、見た目、動きの3段階です。順に確認していきます。

ワイヤーフレームは配置を決める骨組み

ワイヤーフレームは、画面の基本設計図にあたります。どこに何を配置するかをグレーの四角と線だけで表したもので、色やフォントは扱いません。

この段階で確認すべきは、必要な情報が漏れなく載っているか、情報の優先順位が適切かという点です。見た目の話は次の段階へ回します。

ここでデザインの好みを議論し始めると、本来決めるべき情報の構造が固まらないまま進むことになります。

あえて簡素に作られているのには理由があります。見た目が粗いほど、レビューする側は中身の議論に集中できます。

モックは見た目を確定させる静止画

ワイヤーフレームに色、フォント、画像、実際の文言を当てたものが画面モックです。完成後の見た目がほぼそのまま確認できます。

確認すべきは、文字が読みづらくないか、強調すべき箇所が目立っているか、ブランドの印象と合っているかといった点です。

パソコンとスマートフォンの両方で使うシステムでは、それぞれの画面サイズでのモックを用意してもらってください。片方だけ確認して進めると、後から表示の問題が出ます。

動作は確認できません。ボタンを押したらどうなるか、画面がどう切り替わるかは、次のプロトタイプの段階で見ることになります。

プロトタイプは動きと操作性を確認する試作品

モックに簡易的な動きを加え、画面遷移やボタンの反応を確認できるようにしたものです。実際に触って使い心地を検証できます。

操作の流れに無理がないか、目的の画面に迷わずたどり着けるかといった観点で確認します。ユーザーに触ってもらう検証にも使えます。

すべての案件でプロトタイプまで作るとは限りません。画面数が多い場合や、操作が複雑な場合に価値が大きくなります。

逆に、画面が数枚で操作も単純なシステムであれば、モックまでで十分な場合もあります。工程を増やすこと自体が目的にならないよう注意してください。

開発の進め方を相談したい方へ 構想の内容を伺い、どの工程で何を確認すべきかを整理します。30分のオンライン相談は無料で、しつこい営業はいたしません。 ▶ 相談予約はこちら

画面モックの種類と使い分け

モックと一口に言っても、作り込みの度合いや形式によって種類が分かれます。目的に応じて選ぶことで、無駄な工数をかけずに済みます。

ここでは3つの分け方を紹介します。

ローファイとハイファイ｜作り込みの度合い

ローファイは、紙のスケッチやホワイトボードの図解といった簡易なものを指します。短時間で作れるため、アイデアを議論する段階に向いています。

ハイファイは、色やフォント、画像まで作り込んだ精密なものです。関係者との最終的な合意形成や、実装への引き渡しに使われます。

初期から精密なものを作ると、修正のたびに工数がかかります。議論が固まっていない段階では、あえて粗く作るほうが意見を出しやすくなるという効果もあります。

デザインモックとHTMLモック｜作られる形式

デザインモックは、デザインツールで作成した画像形式のものです。最も一般的で、修正も容易に行えます。

HTMLモックは、実際のHTMLとCSSで作られた静的なページです。ブラウザで表示できるため、実機での見え方や画面サイズごとの表示を確認できます。

スマートフォンとパソコンで表示が変わる仕組みを採用する場合は、HTMLモックで確認しておくと安心です。

モックAPI・モックサーバー｜開発を先行させる仕組み

画面の見た目とは別に、開発現場ではデータを返す仕組みを模擬的に用意することもあります。これをモックAPIやモックサーバーと呼びます。

裏側の処理が完成していなくても、画面側の開発やテストを先に進められる点が利点です。複数のチームが並行して作業する場合に効果を発揮します。

発注側が直接扱うものではありませんが、開発会社との会話で出てくる言葉です。意味を知っておくと理解が進みます。

画面のモックと混同しないでください。見た目を確認するための成果物と、開発を進めるための仕組みは、まったく別のものを指しています。

画面モックを作る4つのメリット

工数をかけてでも作る価値があるのはなぜか。発注側の視点で4つに整理します。

社内で必要性を説明する際の材料としても使えます。

メリット1｜認識のずれと手戻りを防げる

最も大きな効果です。仕様書の文章だけでは、読む人によって想像する画面が変わります。絵にすることで、この差が一目でわかります。

手戻りの費用は、工程が進むほど大きくなります。絵の段階なら数時間の修正で済むものが、実装後なら数日から数週間の作業になることも珍しくありません。

メリット2｜社内の合意形成が早くなる

画面を見せれば、システムに詳しくない人でも判断できます。経営層や現場の担当者から意見を引き出しやすくなります。

承認の場面でも、文章の仕様書より画面を見せたほうが判断が速くなります。稟議を通すための材料としても有効です。

反対意見も早い段階で出てきます。完成後に指摘されるより、絵の段階で議論できるほうが、結果的に手戻りは小さく済みます。

メリット3｜実装とテストを先行できる

画面が確定していれば、開発者は迷わず実装に入れます。何を作るかの確認に時間を取られる場面が減ります。

テスト項目の作成も、画面が決まっていれば先に着手できます。全体の期間短縮につながる効果です。

マニュアルや研修資料の準備も並行して進められます。画面が確定していれば、実装の完了を待たずに操作手順を作り始められます。

メリット4｜実際の利用者に確認してもらえる

完成前に現場の担当者へ見せることで、実務に合わない点を早く見つけられます。実際に使う人の視点は、設計する側では気づけないものです。

この工程を省いて完成後に見せると、使いにくいという指摘が一気に出てきます。そこからの修正は、費用も時間も大きくかかります。

開発の手戻りを減らしたい方へ 要件の固め方から設計、開発までの進め方をまとめた資料をご用意しています。稟議の参考資料としてもご活用いただけます。 ▶ 資料請求はこちら

画面モックの作り方5ステップ

作成は開発会社が担当することが多いものの、流れを知っておくと関わり方が変わります。発注側でも簡易なものなら作れます。

ここでは実務の順序に沿って解説します。

STEP1 目的と対象画面を決める

何を確認するために作るのかを決めます。社内の合意形成なのか、実装への引き渡しなのかで、作り込みの度合いが変わります。

すべての画面を作る必要はありません。利用頻度が高い画面、操作が複雑な画面、意見が分かれている画面に絞ってください。

画面数が多い案件ほど、絞り込みが重要になります。全画面を精密に作ると、工数が膨らんだ割に確認が形骸化します。

STEP2 情報を整理してワイヤーフレームを作る

その画面で何を表示し、何を操作できるようにするかを洗い出します。そのうえで、優先度の高い情報を上部に置く形で配置を決めます。

この段階では色を使わず、四角と線だけで作ります。デザインの議論を後回しにすることが、情報の構造を固めるための条件です。

STEP3 デザインを当ててモックに仕上げる

配置が固まったら、色、フォント、画像、実際の文言を入れていきます。既存のサービスがある場合は、そのデザインの決まりに合わせます。

表示する文言は、仮の文字ではなく実際に使う内容を入れてください。文字数が想定と違うと、レイアウトが崩れることがあります。

データが多い場合と少ない場合、エラーが出た場合の画面も作っておくと、実装時の迷いが減ります。

ここを省くと、実装の段階で開発者が判断することになります。業務を知らない人が決めた結果、現場に合わない挙動になるという流れは、よくある失敗です。

STEP4 関係者でレビューして修正する

発注側、開発側、実際の利用者でレビューを行います。確認の観点をあらかじめ決めておくと、議論が拡散しません。

指摘は記録に残してください。口頭での合意は後から認識が食い違います。何をどう直すかを文字で残すことが、後のトラブルを防ぎます。

修正は1回で終わらないのが普通です。2回から3回のやり取りを想定してスケジュールを組んでください。

レビューの参加者が多すぎると、意見がまとまらず回数が増えます。判断できる人に絞り、それ以外は確認だけの立場にしておくと進みやすくなります。

STEP5 確定して実装へ引き渡す

内容が固まったら、確定版として関係者で合意します。この時点で決まった内容が、以降の実装の基準になります。

確定後の変更は追加費用や納期の延長につながります。どこまでが確定で、どこからが未確定かを明示しておいてください。

確定版には日付と版数を入れておくと確実です。複数の版が混在すると、どれを基準に実装しているかがわからなくなります。

開発を外注する際の費用や進め方は、システム開発の外注とは｜費用相場、外注先の種類と選び方で整理しています。

レビューで確認すべき4つの観点

モックが届いても、どこを見ればよいかがわからなければ確認が形だけになります。あらかじめ観点を決めておいてください。

見るべき順番は、情報、操作、表示、例外の4段階です。具体的な項目に落とすと次のようになります。

情報の過不足を確認する

その画面で業務を進めるために必要な項目がすべて載っているか、逆に不要な情報が混ざっていないかを確認します。

実際に業務を行う担当者に見てもらうのが最も確実です。設計する側は、日々の運用で必要になる細かい項目を見落としがちになります。

操作の流れが実務と合っているか確認する

画面上で作業する順番が、実際の業務の流れと一致しているかを見ます。入力する順序が実務と逆になっていると、現場は使いにくさを感じます。

1つの作業を終えるまでに何回クリックするかも確認してください。日に何十回も繰り返す作業では、1クリックの差が大きな負担の違いになります。

表示と可読性を確認する

文字が小さすぎないか、重要な情報が目立っているか、色だけで意味を区別していないかを見ます。

利用する環境も考慮してください。現場で使う場合は、明るい場所でも見えるか、手袋をしたまま操作できるかといった観点が必要になります。

例外の状態を確認する

データが1件もない場合、件数が非常に多い場合、入力を間違えた場合の画面も確認します。ここが抜けると、実装の段階で判断が発生します。

権限によって表示が変わる場合は、それぞれの見え方も確認対象です。管理者の画面だけ見て承認すると、一般利用者の画面で問題が見つかります。

使われるツールと選び方

作成にはデザインツールを使うのが一般的です。近年は生成AIを使って下書きを作る方法も広がっています。

それぞれの特徴を整理します。

デザインツール｜共同編集とコメント機能が便利

ブラウザ上で動作し、複数人で同時に編集できるツールが主流になっています。リンクを共有すればレビューもその場で行えます。

画面上に直接コメントを書き込める機能が特に有効です。どの箇所についての指摘かが明確になり、メールでのやり取りより誤解が減ります。

プロトタイプの機能を備えた製品も多く、モックから画面遷移を確認できる状態まで一貫して作れます。

発注側が編集する必要はありません。閲覧とコメントができれば十分です。操作を覚える負担を理由に確認が滞るほうが問題になります。

生成AIの活用｜下書きを短時間で用意する

画面の要件を文章で伝えると、レイアウトの案やHTMLの雛形を生成できるようになりました。ゼロから考える時間を短縮できます。

複数案を出させて比較する使い方が有効です。1案だけ作らせても、良し悪しの判断ができません。

ただし、生成されたものはたたき台です。自社のデザインの決まりや業務の事情は反映されていないため、人が整える工程は必要になります。

選ぶときの3つの観点

ツールを決めるときは、次の点を確認してください。

• 発注側がアカウントなしで閲覧・コメントできるか
• 開発会社が普段使っているツールと合っているか
• 確定版を画像やPDFとして書き出せるか

3つ目は見落とされがちです。契約や検収の場面では、特定のツールに依存しない形式で残しておく必要があります。

開発会社との契約が終わった後も、モックは自社に残しておいてください。将来の改修や別の会社への依頼の際に、重要な資料になります。

発注側が押さえる4つの注意点

モックがあっても、確認の仕方を誤ると本来の効果が出ません。ここでは起こりやすい4つの問題を挙げます。

いずれも、確認の観点を先に決めておけば防げます。

注意1｜見た目の好みだけを議論しない

色やフォントの好みに議論が集中し、必要な情報が揃っているかの確認が抜けるケースがよくあります。

優先すべきは、業務に必要な項目がすべて表示されているか、操作の手順が実務と合っているかという点です。見た目の調整は後からでも直せます。

レビューの場では、確認の順番を決めて進行すると議論が散らかりません。情報の確認を終えてから、見た目の話に移る流れが有効です。

注意2｜作り込みすぎて時間をかけない

精密なモックを全画面分作ると、それだけで数週間かかります。その間、実装は進みません。

確認したい論点が済んだら、次へ進んでください。完璧を目指す必要はありません。

どの画面をどこまで作るかは、事前に開発会社と合意しておいてください。範囲が曖昧なまま進むと、見積もりとの差が生まれます。

注意3｜決定事項を記録に残す

レビューで合意した内容を記録せずに進めると、後から言った言わないの議論が起こります。画面ごとに、確定した内容と保留の項目を残してください。

特に保留事項の管理が重要です。後で決めるとしたまま忘れられ、実装の直前に問題として浮上するケースが少なくありません。

注意4｜モックは仕様書の代わりにならない

画面で表現できるのは見た目だけです。入力値の制限、エラー時の挙動、権限による表示の違いといった仕様は、別途文書で定める必要があります。

モックがあるから仕様書は不要という判断は危険です。両方を揃えて初めて、認識のずれを防げます。

画面に表示されない処理も同様です。バックグラウンドで動く集計や連携は、絵では表現できません。別の資料で確認してください。

設計から開発まで伴走支援します 要件の整理から画面設計、開発、リリース後の改善までを一気通貫でご支援しています。まずは構想段階からご相談ください。 ▶ 相談予約はこちら

まとめ｜情報の過不足を先に確認し、記録を残す

画面モックとは、色や文言まで作り込み、完成後の見た目を関係者で共有するための静止画です。現場ではモック、モック画面、デザインカンプなどと呼ばれ、ほぼ同じ意味で使われます。

ワイヤーフレームは骨組み、モックは見た目、プロトタイプは動きを確認するもの。この3段階を区別しておくと、どの場面で何を確認すべきかが明確になります。

作る目的は、認識のずれによる手戻りを防ぐことです。絵の段階なら数時間で直せる修正が、実装後には数週間の作業になります。早い段階で確認することの価値はここにあります。

発注側として押さえるべきは、見た目の好みより情報の過不足を先に確認すること、そして決定事項と保留事項を記録に残すことです。モックは仕様書の代わりにはならない点も覚えておいてください。

他社がどのような順番でシステムを形にしたのかは、ネクストスケールの導入事例でご覧いただけます。

システム開発の進め方を無料でご提案します 構想を伺い、どの工程から着手すべきかを無料でご提案します。オンライン30分で完結し、助成金活用のご相談も歓迎しています。 ▶ 相談予約はこちら