「モックアップ」という言葉は日常ではあまり耳にすることはありませんが、Webサイトやアプリケーションの制作現場では頻繁に登場します。

見慣れない言葉なので、最初は戸惑ったり疑問に思う人も多いのではないでしょうか。

「モックアップってよく見かけるけど、何のことかわからない…」

「モックアップにはどんなメリットがあるの？」

「ワイヤーフレームやプロトタイプとはどう違うの？」

この記事ではそんな疑問にお答えするため、モックアップとは何かを中心に、Webサイト制作における役割やメリット、作成の流れについて解説していきます！

モックアップとは？

モックアップとは、一言で言えば「模型」のことです。

もともとは建築模型や自動車デザイン、製品パッケージのラベルなど、さまざまな分野で完成イメージを共有するために活用されてきました。

身近な例を挙げると、家電量販店などでスマートフォンの見本品を手に取ってみたことはありませんか？実はこのようなスマートフォンの見本品もモックアップに含まれます。

見本品のため画面やボタンの操作はできないものの、デザインなどの見た目は本物のスマートフォンにそっくりです。

つまり、モックアップとは「完成品に近いデザインの見本品」を指します。

そもそも、なぜ多くの業界でモックアップが活用されているのでしょうか？その理由は、商品が完成した際に「イメージしていたものと違う」となるリスクを避けるためです。

たとえば注文住宅などで建築を依頼するとき、クライアントが「3階建てで白い壁」「屋根は斜め」「窓は大きく」などのイメージを言葉で伝えたとしましょう。

しかし、いざ建物が完成したら「希望と全然違う」となるかもしれませんよね。

このように、ただ言葉で伝えただけだとクライアントと制作側の思うイメージにずれが生じてしまい、完成後に全く異なるデザインのものに仕上がってしまう恐れがあるのです。

だからこそ、事前にデザインの見本としてモックアップを用意し、完成品のイメージを共有する必要があります。そうすれば、認識のずれなどを防ぐことができるのです。

Webサイト制作におけるモックアップの意味や役割

それでは、Webサイト制作におけるモックアップの意味や役割とは何でしょうか？

Webサイト制作におけるモックアップも、カラー・レイアウト・フォントなどのデザイン要素を反映した静的なサンプルとしての役割を持ちます。

「ユーザーが画面上でサイトを見た時にどのように見えるか」をサンプルとして提示するのがWebサイトのモックアップです。

そのため、Webサイトのモックアップでは実際にボタンをクリックしたりページを切り替えるなどの操作はできません。

ただし、コンテンツがどのように配置されるかなどのレイアウト面や、カラーや装飾などのデザイン面はモックアップで確認することができます。

Webサイト制作においてもデザイン面のチェックは必要不可欠なので、モックアップは非常に重要な役割を担うといえるでしょう。

ワイヤーフレーム・デザインカンプ・プロトタイプとはどう違う？

モックアップと似た用語として、ワイヤーフレームやプロトタイプがあります。

これらはWeb制作の中で頻繁に登場する用語ですが、それぞれモックアップとは意味や役割、特徴が異なります。

ワイヤーフレーム・プロトタイプ・モックアップの3種の用語について、それぞれの違いをしっかりおさえておきましょう。

ワイヤーフレームとの違い

ワイヤーフレームとは、Webサイトの構成や配置を示す「設計図」のようなものです。

モックアップとの一番の違いはデザイン性の有無です。

簡単にいうと、「どの情報をどのように配置するか」だけを線や枠で示したシンプルなレイアウト図になります。

モックアップに色や画像などのデザイン要素を加える前の段階がワイヤーフレームです。

ワイヤーフレームが骨組みだとすれば、モックアップはその骨組みに肉付け（デザイン）をした状態とするとわかりやすいかもしれません。

デザインカンプとの違い

デザインカンプとの違いは、完成度と確認の目的にあります。

デザインカンプは、Webサイトの最終的な見た目を静止画で確認するための資料で、主に色やレイアウトなどのデザイン面を調整する段階です。

一方モックアップは、デザインカンプをもとにスマホやPCなどのデバイス枠に合成して表示し、実際の画面で見たときの印象やサイズ感を確認できる点が特徴です。

つまり、デザインカンプが「見た目の確認」であるのに対し、モックアップは「現実の使用感を想定した確認」を目的としています。

プロトタイプとの違い

プロトタイプとは、モックアップに動的な機能を加えた「試作品」のことです。

モックアップが静的なデザイン要素だけであるのに対し、プロトタイプではボタンをクリックした際の動作やアニメーションなど、実際の操作感も確認できるようになっています。

プロトタイプを用意しておけば、モックアップよりもさらに実際のサイトに近い形で仕上がりを確認することが可能です。

一方でプロトタイプはモックアップより手間がかかるため、必ずしも作らないといけない訳ではありません。

しかし、最近では専用のツールにより、簡単な操作でモックアップをプロトタイプに仕上げることもできるようになっています。

プロトタイプを作れるようになるとプレゼンテーションなどの場で周囲に差をつけることもできるため、覚えておくと役に立つかもしれません。

モックアップを活用するメリット・目的

まだモックアップの作成に慣れていない場合、「モックアップを作ることにどれだけのメリットがあるの？」「わざわざ作る目的はなに？」と疑問に思ってしまう人もいるかもしれません。

実際、モックアップを制作することには多くのメリットがあります。ここではモックアップを作る主な目的やメリットを4つ紹介します。

完成イメージを共有できる

モックアップ最大のメリットは、完成したデザインのイメージを関係者間で共有できることです。

たとえば「メインビジュアルにメインイメージとボタンを設置」と言葉で説明されただけの場合、「画像のサイズは？」「ボタンの色は？」など多くの疑問が浮かびます。

伝えた側は頭の中で明確なイメージがあっても、言葉だけではそのイメージが伝わり辛い場合もあるでしょう。

それを第三者に正しく視覚的に伝えるために用いられるのがモックアップです。

また、全体のレイアウトを簡易的に表現するのがワイヤーフレームなのに対し、モックアップはより完成形に近いデザインを完成前に再現することができます。

このように完成イメージを具体的に共有することで、デザインの方向性について早い段階で確認を行うことができ、完成後の修正にかかる手間を減らすことができます。

デザインの品質が上がる

デザインの品質が上がるという点も、モックアップを作るメリットのひとつです。

モックアップを作らずにいきなりWebサイトを完成させようとしてしまうと、行き当たりばったりなデザインになってしまいがちです。

また、コーディングが完了してからデザインを変更しようとすると、コードの影響で上手く変更ができなかったり、サイトが崩れてしまう恐れもあります。

コーディングなどのサイトの構築は、まずデザインをしっかり完成させてから行うことが理想的です。

そのため、先にモックアップでデザインを作っておけば、実装前に色使いやレイアウト、余白のバランスなど細かな調整を行うことができます。

結果としてより洗練された高品質なデザインに仕上げることができるでしょう。

修正コストを減らせる

モックアップで先にデザインを固めておけば、実装段階に入ってからのデザインのやり直しを防ぐことができます。

実際のデザインを見たクライアントから「やっぱり配色を変えたい」「レイアウトを見直したい」などの変更希望があることは日常茶飯事です。

この時、モックアップを作らずにWebサイトを完成させてしまっていると、コードを修正する手間が発生してしまいます。

そうなると開発側も人件費などの余分なコストが発生してしまい、クライアント側も完成予定が遅れて困ってしまうかもしれません。

修正コストを減らすことは、開発側とクライアント側の両者にメリットがあります。

さらに事前に「モックアップでデザインを確定した後のデザイン変更は追加費用が必要」などの規定を定めておけば、土壇場の修正依頼によるトラブルの防止にもなります。

成約率アップにつながる

モックアップの活用は、クライアントとの成約率アップにもつながります。

契約を迷っているクライアントから「完成イメージがわかるサンプルが見たい」と求められることは少なくありません。

その際、ラフ案やワイヤーフレームだけを見せるよりも、実際のデザインがひと目で伝わるモックアップを提示する方が印象は格段に良くなります。

しかもモックアップを使えば、完成イメージを共有しやすく、打ち合わせやプレゼンもより具体的に進められます。

また、企業や個人でWeb制作を行う場合、自身のサイトにモックアップを掲載しておくのも効果的です。
高品質なモックアップ素材を使用すれば、デザインの魅力をより引き立て、ユーザーの興味を惹くことができるでしょう。

このように、見た目が美しく分かりやすいモックアップは、信頼感を高め、問い合わせや購入といった行動にもつながりやすくなるためおすすめです。

Webサイト制作におけるモックアップ作成の流れ

ここまではモックアップとは何かという解説と、そのメリットについて紹介してきました。

実際にモックアップを作成する場合、どのような手順で進めればいいのでしょうか？

次はWebサイト制作におけるモックアップ作成の流れをご紹介します！

1. ヒアリング

まずはどのようなWebサイトを作りたいかのヒアリングから始めます。

クライアントの要望やサイトを作成する目的、ターゲットユーザーなどをしっかり聞き出し、サイトの方向性や必要なコンテンツを洗い出します。

たとえば「高級感のあるデザインにしたい」「若者向けにポップな雰囲気で」など、デザインのトーンやブランドイメージに関する要望もしっかり確認しましょう。

ヒアリングを行う場合は、事前に必要な情報をリストアップしたヒアリングシートなどを用意しておくと効果的です。

これらのヒアリングを丁寧に行うことで、この後の工程がスムーズになります。

自身のサイトを作る場合もヒアリングと同様に必要な情報を揃えるようにしましょう。

2. ビジュアル要素の選定

続いて、サイトの見た目となるビジュアル要素を決めていきます。

ヒアリング内容を踏まえて、どのようなビジュアルのサイトにするのかを検討します。

ビジュアル要素を決めるのにまず大切なのは、メインターゲットやそのサイトで取り扱うコンテンツの持つイメージです。

たとえばメインターゲットが「20～30代の美容好きの女性」で、サイトで扱うコンテンツが「新規オープンのサロンの公式サイト」だとします。

この場合、どのようなビジュアルのサイトにするのが良いでしょうか？

競合サイトはもちろん、メインターゲットが好みそうな他のコンテンツや流行などをリサーチし、カラーやフォントや写真素材などのイメージを絞っていきます。

ビジュアルに統一感を持たせるためにも、この段階できちんとスタイルガイドを作成しておくことをおすすめします。

3. ラフ案の作成

デザインの方向性が固まったら、次はサイトのラフ案を作成します。

ラフ案とは、サイトの大体の形や配置を決めるためのざっくりとした下書きのようなものです。

デザインソフトを使っても、紙に描いてもどちらでもOKです。

基本的にサイト構成には大きく分けてヘッダー、メイン、フッターのブロックがあり、それぞれのブロックの中に要素が配置されます。

（PCの場合はサイドナビが加わる場合もあります）

それぞれのブロックに何を載せたいかを決めれば、ヒアリングやリサーチを経て決めたコンテンツ案を要素として配置していきます。

この段階では細部にこだわる必要はありません。

全ての要素の最適な配置が決められればラフ案の完成です。

4. ワイヤーフレームの作成

ラフ案が完成したら、今度は正式なワイヤーフレームを作成します。

ワイヤーフレームとはWebサイトの構成やレイアウトを線や枠で表現した設計図のことです。

ここでサイト全体の構成や各ページに載せる情報を整理しながら、ページごとのレイアウトをきっちり再現していきます。

ワイヤーフレームでは見た目の装飾はせず、各ページで「何をどこに配置するか」を明確にしていくことが重要です。

5. デザインカンプの作成

ワイヤーフレームが完成したら、次はデザインカンプを作成します。

デザインカンプとは、Webサイトの最終的なビジュアルデザインを静止画として表現したものです。配色、フォント、画像素材、余白の取り方など、実際のサイトと同じ見た目を目指してデザインを整えます。

クライアントにとっても完成イメージを掴みやすく、デザインの方向性をすり合わせるための重要な工程です。

この段階では、まだ仮のテキストやダミー画像を使っても構いません。最終的な素材が揃っていなくても、全体のトーンやレイアウトを把握できるよう意識して仕上げましょう。

6. モックアップの作成

デザインカンプが完成したら、次はモックアップを作成します。

モックアップは、デザインカンプをもとにWebサイトの見た目や構成をより現実的に確認できる状態にしたものです。

これにより、実際のデバイス上で表示されたときのサイズ感やレイアウト、インターフェースの配置などを確認しやすくなります。

クライアントへの提案時にも役立ち、「実際にこう見える」という具体的なイメージを共有できるのが最大のメリットです。

作成する際はトップページだけでなく下層ページも用意し、サイト全体の統一感や導線を確認できるようにしておくと、完成度の高いデザイン制作につながります。

7. 共有・フィードバック

完成したモックアップは、必ずクライアントやチームメンバーと共有してフィードバックをもらいましょう。

自分の中では満足な仕上がりだったとしても、他のメンバーやクライアントの視点で思わぬ改善点が見つかるかもしれません。

特にクライアントに提出する前に、チーム内の他のメンバーにチェックして貰うことは非常に大切です。

その際はできるだけ第三者の目線になって、ユーザーが使いやすいデザインになっているかを評価してもらいましょう。

実装後にデザインを変更するのは大変なので、できるだけモックアップの段階で課題を見つけ修正していくようにしてください。

モックアップを作るときのポイント

Webサイトの品質や成約率を上げるために欠かせないモックアップ。

より良いモックアップ作りをするためには忘れてはいけないポイントがあります。

最後に、モックアップを作るときに特に重要なポイントをいくつかご紹介します！

各デバイス向けに作る

モックアップ制作の際に重要なポイントは、各デバイス向けのモックアップを用意するということです。

現在、Web制作の現場ではレスポンシブ対応がほぼ必須となっています。

サイト自体はレスポンシブなのにモックアップはPC版しか用意しないとなると、スマートフォンなど他のデバイスではどういった表示になるかが伝わりません。

また、各デバイスのモックアップがないと実装時に思わぬデザインになってしまう恐れもあるため、それを防ぐためにもデバイスごとのモックアップは必要です。

最低でもスマートフォンは必須、できればタブレットサイズのモックアップも準備しておくようにしましょう。

トップページ以外も用意する

複数のページがあるWebサイトを作成する場合は、トップページだけでなく下層ページのモックアップも作るようにしましょう。

「デザインの雰囲気が伝わればいいから」と思って手を抜いてしまいがちですが、他のページのイメージが曖昧だと認識違いで思わぬ仕上がりになってしまうことがあります。

そうなってから修正対応に追われるくらいなら、最初から各ページのモックアップを用意しておいた方が遥かに効率的です。

全ページは時間的に難しいという場合も、少なくともサイトに使う全てのパーツのデザインがわかる分だけのモックアップは用意しておくようにしてください。

モックアップ作成に適したツールを使う

モックアップ制作は、専門のデザインツールを活用するとより効率的です。

例えばFigmaやAdobe XD、Sketchといったデザインツールを使えば、ワイヤーフレームからモックアップ作成まで一貫して行うことができます。

ツール内にはテンプレートやパーツ、デザイン用の素材なども用意されていることが多いため、効率的に高品質なモックアップを作ることができます。

モックアップ用素材を活用する

クライアントに提出する際、より高品質なサンプルに見せたい場合はモックアップ用素材を使うといいでしょう。

専用のデザインツール内や素材サイトでは、多くのモックアップ用素材が配布されています。

たとえばPCやスマートフォンの画面の枠内にWebページのモックアップを埋め込む素材を使えば、より実際の画面を見ている感覚で見ることができます。

良質なモックアップ用素材を使えばデザインの説得力も上がるため、事前に調べてお気に入りの素材を用意しておくといいでしょう。

まとめ

Webサイトの完成度を上げるために欠かせないのがモックアップです。

またモックアップは一度完成したら終わりではなく、第三者のチェックを通してブラッシュアップを重ね、より優れたデザインへと磨き上げることが重要です。

質の高いモックアップを効率よく作るには、しっかりポイントをおさえて専用ツールなどを使いこなすようにしましょう。