モックアップの作り方を解説！ワイヤーフレームとの違いと制作手順

Web制作の打ち合わせで「まずモックアップを出してください」と言われて、何をどこまで作ればいいのか迷った経験はないでしょうか。ワイヤーフレーム、モックアップ、プロトタイプという似た言葉が並ぶため、初めて関わる方ほど混乱しやすい領域です。

モックアップとは、配色・書体・画像まで反映させた「完成イメージに近い静止画のデザイン」のことです。線画で構造だけを示すワイヤーフレームの次の工程にあたり、動きの検証を行うプロトタイプの前段階に位置します。

この記事では、それぞれの違いを整理したうえで、モックアップを作る具体的な手順、使えるツール、そして関係者から承認をもらいやすくするための工夫までを解説します。

言葉の定義でつまずくと、その後の工程がずっとぼやける。ここは丁寧に整理していこう。

モックアップとは何か

2つの意味で使われる言葉

モックアップという言葉は、Web・デザインの現場で2通りの意味で使われます。混同されやすいので、最初に整理しておきましょう。

• UIモックアップ：Webサイトやアプリの完成イメージを、配色や画像まで反映させて作った静止画のデザイン
• プロダクトモックアップ：作ったデザインをスマートフォンの画面やパッケージにはめ込み、実物っぽく見せる提示用の画像

制作の打ち合わせで出てくるのは前者が中心ですが、ポートフォリオや提案資料では後者もよく使われます。どちらの意味で使われているかを確認してから着手しないと、作るものがまるごと食い違います。

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

制作は「スケッチ → ワイヤーフレーム → モックアップ → プロトタイプ」という順で進むのが一般的です。この順番を飛ばして最初から見た目を作り込むと、構造の変更が発生したときに作業がまるごとやり直しになります。

レイアウトや余白の考え方は、UIデザインの本で基礎を押さえておくと、モックアップを作るときの判断が安定します。

モックアップを作る前に決めておくこと

目的とターゲットの確認

誰に何をしてもらうためのページなのかが曖昧なままでは、デザインの良し悪しを判断する基準がありません。「資料請求を増やしたい」「採用応募につなげたい」といったゴールを、制作前に言語化しておきます。

参考サイトの共有

言葉だけで「上品な感じ」「かっこよく」とすり合わせようとすると、認識のズレが生まれやすくなります。実際のサイトを3つ程度持ち寄り、どこが良いと感じるのかを具体的に言語化しておくと、後戻りが減ります。

素材の準備状況を確認する

写真やロゴが用意できていないままモックアップを作ると、仮素材で作ったデザインが本番素材に置き換わった瞬間に印象が崩れることがあります。支給素材の有無、撮影の予定、文字原稿の準備状況を、着手前に確認しておくのが安全です。

UIモックアップの作り方（6ステップ）

ステップ1：ワイヤーフレームを用意する

まずは要素の並び順と優先度を決めます。ヘッダー、メインビジュアル、サービス紹介、実績、問い合わせ、といったブロックを縦に並べ、各ブロックに何を載せるかを箇条書きで書き込んでおきます。この段階では装飾を一切考えません。

ステップ2：デザインの土台となるルールを決める

いきなり要素を配置し始めると、余白や文字サイズがばらついて統一感のない画面になります。先に次のルールを決めておきましょう。

• 余白の基準：8pxの倍数など、間隔の単位をそろえる
• 文字サイズ：見出し・小見出し・本文・注釈の4段階程度を決める
• カラー：メインカラー、アクセントカラー、背景色、文字色を決める
• グリッド：コンテンツ幅とカラム数を決める

ステップ3：メインビジュアルから作る

ページの印象を決めるのはファーストビューです。ここが固まると、以降のセクションの方向性が自然と決まります。逆に細部から作り始めると、全体を見たときにちぐはぐになりやすくなります。

ステップ4：セクションごとに作り込む

ブロック単位でデザインを進め、都度全体を縮小表示して確認します。拡大した状態だけで作業を続けると、ページ全体のリズムや余白のバランスを見失いやすくなります。

30分に1回は全体表示に戻して眺めるといい。近づきすぎると崩れに気づけないんだ。

ステップ5：スマートフォン版を作る

閲覧の多くがスマートフォンからという前提であれば、PC版と並行してスマートフォン版のモックアップも用意します。単純に横幅を縮めるのではなく、要素の並び順や省略する情報を検討する作業が必要です。

ステップ6：文字と画像を本番相当にする

ダミーテキストのまま提出すると、実際の文章量が入ったときにレイアウトが崩れることがあります。可能な範囲で本番の原稿を流し込み、想定より長い見出しが入った場合の見え方も確認しておきましょう。

モックアップ作成に使えるツール

Figma

Figmaはブラウザ上で動作するデザインツールで、記事執筆時点ではUIデザインの現場で広く使われています。複数人が同じファイルを同時に開いて作業でき、共有リンクでレビューをもらえる点が制作フローと相性の良い部分です。無料で始められるプランが用意されていますが、機能や条件は変更されることがあるため公式サイトでご確認ください。

Canva

Canvaはテンプレートを土台に手早くビジュアルを作れるサービスです。本格的なUI設計には向きませんが、社内資料に添える簡易的なイメージや、プロダクトモックアップ風の見せ方を短時間で用意したい場面では便利です。

Photoshop・Illustrator

アドビ製品でモックアップを作る現場も残っています。既存のPSDデータを引き継ぐ案件や、写真加工を多用するデザインではこちらが選ばれることがあります。

プロダクトモックアップの作り方

制作したデザインをノートPCやスマートフォンの画面にはめ込み、実物のように見せる手法です。ポートフォリオや提案資料の説得力が上がるため、覚えておくと役立ちます。

手順の概要

1. デバイスの写真素材、またはモックアップ用のテンプレートを用意する
2. 画面部分の形に合わせて、作成したデザイン画像を変形させて配置する
3. 画面の反射や影を軽く加えて、なじませる

Photoshopではスマートオブジェクトを使うと、画面部分の中身を差し替えるだけで新しいモックアップが完成します。1つテンプレートを作っておけば、案件ごとに中身を入れ替えて使い回せるため、作業時間を大きく短縮できます。

撮影して素材を作る場合

自分で撮影した写真を使うと、他の人と同じテンプレートにならず個性が出ます。ただし手ブレや映り込みの処理が手間になるため、卓上の折りたたみ式ライトやコンパクトな撮影ボックスがあると安定します。スマートフォンで撮る場合も、小型の三脚とスマホホルダーを用意するだけで仕上がりが変わります。

承認をもらいやすくする工夫

意図を添えて提出する

デザインだけを渡すと、感覚的な好みで判断されてしまいがちです。「この配色は落ち着いた印象を出すため」「この位置にボタンを置いたのは視線の流れに合わせるため」といった理由を短く添えると、議論の土台がそろいます。

比較案は2案程度に絞る

案を出しすぎると、判断そのものが難しくなります。方向性の違う2案を提示し、それぞれの狙いを説明する形が現実的です。案の数を増やすことよりも、なぜその案なのかを説明できることのほうが、合意形成には効いてきます。

修正の回数をあらかじめ決めておく

修正の範囲と回数を取り決めていないと、細部の調整が延々と続くことがあります。受託であれば見積もりの段階で条件を明記しておくとトラブルを防げます。

「なんとなく違う」で戻されるのがいちばんしんどい。だから意図を先に言葉にしておくんだ。

よくある質問

Q. ワイヤーフレームを飛ばしてモックアップから作ってもいいですか

小規模なページであれば省略することもあります。ただし複数人が関わる案件では、構造の合意を取らないまま見た目を作り込むと、大きな手戻りにつながりやすくなります。工数に余裕がなくても、簡単な構成メモは残しておくことをおすすめします。

Q. モックアップはどこまで作り込むべきですか

目的によって変わります。方向性の確認が目的ならトップページのファーストビュー周辺だけで足りますし、開発に渡す前提なら全ページ分の細部まで固める必要があります。何を判断するための資料なのかを先に確認しましょう。

Q. ダミーテキストは使ってもいいですか

初期段階では問題ありません。ただし提出時には、実際に入る文章量に近いテキストへ置き換えたほうが精度が上がります。ダミーのままだと、原稿が入った途端にレイアウトが破綻することがあります。

Q. モックアップの作成にはどのくらい時間がかかりますか

ページの規模と要素の量によりますが、コーポレートサイトのトップページであれば、数日から1週間程度を見込む制作者が多いようです。素材の準備状況や修正回数によって変動します。

Q. 未経験者がポートフォリオを作る場合、モックアップだけで十分ですか

デザイン職を目指すなら、モックアップに加えて「なぜこの設計にしたか」の説明を添えると評価されやすくなります。コーディングまで対応できることを示したい場合は、実際に公開されたページも用意しておくと強みになります。

まとめ

モックアップは、配色や書体まで反映させた完成イメージの静止画であり、ワイヤーフレームとプロトタイプの間に位置する工程です。作る前に目的・参考サイト・素材の状況を確認し、余白や文字サイズのルールを決めてから着手すると、作業がぶれません。

ツールはFigmaを中心に、用途によってCanvaやアドビ製品を使い分けるのが現実的です。提出時には意図を言葉で添え、案を絞って提示することで、判断がスムーズに進みます。

見た目を整える作業に見えて、実際には合意を形成するための道具がモックアップです。この視点を持って作ると、デザインの説得力が変わってきます。

まずは好きなサイトを1つ選んで、同じ構成でモックアップを作ってみよう。練習としてかなり効くよ。