モックアップとは？4ステップの作り方、無料で使えるサイト、注意点を紹介

Webサイト、業務システム、モバイルアプリケーションなど、デジタルツールを制作、開発する際には「モックアップ」が必要になります。モックアップとは、デザインの検証のために作成するテスト用のサンプルのことです。

しかしWebサイト制作やシステム開発に慣れていない場合「なぜモックアップをつくる必要があるの？」「どうやってモックアップを作ればいいの？」などの疑問を持つ方も多いことでしょう。

そこでこの記事ではモックアップについて、作成するメリット、作り方、無料でモックアップを作れるツールなどについて解説します。

また弊社・ファンリピートでは、毎月2社限定でアプリのモックアップを無料作成しております。お困りの方は以下からお気軽にご依頼ください。

あわせて読みたい

アプリデザインイメージ作成依頼フォーム 弊社では、アプリデザインイメージを無料で作成しております。顧客管理デモアプリなど、お客様のニーズに合わせたデザイン案を提供いたします。 顧客管理デモアプリのモ...

モックアップとは？

モックアップとはWebサイト、業務システム、モバイルアプリケーションなど、UIが必要になる際に作成するデザインサンプルのことです。

「最終的な製品のデザインイメージを確認する」「クライアントに提案する際にイメージしてもらう」といった用途で作成します。

モックアップがプロジェクトに与えるメリット

モックアップを作成することによるメリットを以下の3つに分けて紹介します。

• 完成形のイメージを共有
• クライアントとのコミュニケーション向上
• 修正点の早期発見

完成形のイメージを共有

モックアップをつくることでUIのイメージをクライアントに伝えられます。必要なプロダクトやホームページなどは、UIが分からないと、具体的な挙動のイメージができません。

早い段階でモックアップを作成して共有することで、クライアントがイメージを膨らませやすくなります。その結果、プロジェクトを安心して進められますし、満足度も高まるのがメリットです。

クライアントとのコミュニケーションがスムーズになる

開発途中にモックアップの作成工程を追加することで、クライアントとコミュニケーションがしやすくなります。社内開発の場合は、利用する部署が対象です。

クライアントとコミュニケーションを取れると「大幅な修正が必要なくなること」のほか、以下のメリットがあります。

• 関係値を構築できるためクライアント側のストレスを軽減できる
• ハレーションを回避できる
• 満足度が高まり、良く幅広い仕事を依頼してもらいやすくなる
• 市場（社内）での評判が高まる

受託開発の場合は、成果物の進捗を伝えることが必須です。そのうえでモックアップをつくることで、プロジェクトを透明化できます。

修正点の早期発見

モックアップをつくることで本番環境前に、完成形のデザインイメージを検証できます。UIが変わると、機能まで変更しなければいけないこともあります。

そのため、すべての開発が完了した後でデザインを共有してしまうと、修正があった際に大がかりになってしまうのが大きな問題点です。

一方でモックアップを作ってサンプル段階でクライアントに確認してもらうことで、早いうちに修正を完了でき、作り直しのリスクを軽減できます。

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

モックアップに似ている言葉で「ワイヤーフレーム」や「プロトタイプ」があります。それぞれの違いについて紹介します。

モックアップ、プロトタイプ、ワイヤーフレームの違いを以下の表でまとめました。

項目	ワイヤーフレーム	モックアップ	プロトタイプ
目的	大まかな機能・構造の確認、基本的なレイアウトの設計	デザインやビジュアル要素の確認	機能の動作確認、ユーザー体験のテスト
詳細さ	基本的なページ構造とレイアウトのみ	カラー、フォント、画像などを含む詳細なデザイン表現	デザインに加えて、動作や機能を実装する
使用する段階	設計の初期段階、機能やレイアウトの検討	デザインが固まってきた中盤の段階で視覚的な確認を行う	製品の最終段階や実装段階、ユーザーテストやフィードバック収集を行う

モックアップとワイヤーフレームの違い

ワイヤーフレームとはWebサイトやシステムの設計図を指します。

モックアップは完成物について、カラーやオブジェクトを含めたデザインを試作として完成させます。一方で、ワイヤーフレームではデザインが決まっているわけではありません。画像やボタン、テキストのサイズや配置場所だけを定義したものです。

モックアップとプロトタイプの違い

プロトタイプはシステムやホームページについて、機能・デザインを含めて試作品として完成させたものです。機能を含めてクライアントに使ってもらうことで、認識を合わせます。

モックアップはデザイン・ビジュアルに限定したものですが、プロトタイプは機能までを作ったものとなります。ただし「想定ユーザーからフィードバックを受け取って、早期の段階で修正をする」という目的は同じです。

モックアップ作成のステップ

モックアップの作り方について以下の4つのステップに分けて紹介します。

1. ワイヤーフレームの作成
2. 素材の準備
3. デザインの適用
4. フィードバックの収集と修正

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

まずはワイヤーフレームを準備します。主に以下の項目を作りましょう。

項目	詳細
ページの基本レイアウト	各ページの構成要素（ヘッダー、フッター、サイドバー、コンテンツエリアなど）の位置を決定する。
ナビゲーションメニューの配置	メインメニューやサブメニューの場所とリンクの階層を示す。
ボタンなどの位置と機能	購入や問い合わせなどのボタン配置を決め、どのボタンやリンクがどこに繋がるかを示す。
レスポンシブデザインの基本構造	モバイルやタブレットのレイアウトをどのように変更するかも検討する。
テキストや画像の配置場所	具体的な内容は記載しないが、テキストエリアや画像エリアの場所を決める。

まだ具体的なビジュアルを決める段階ではありませんが、大まかな構造を定義しておきましょう。

2.素材の準備

続いてデザインに関する素材を準備します。必要な素材は主に以下です。

素材	説明
カラーパレット	デザイン全体で使用する色を定義し、ブランドや企業に合わせたカラーコードを用意する。
フォント・タイポグラフィ	テキストに使用するフォントとサイズ、スタイル（太字、斜体など）を決定する。
画像やイラスト	実際に使用する画像やイラスト、ブランドロゴ、アイコンなどを用意する。
UIコンポーネント	ボタン、フォーム、ドロップダウンメニュー、スライダーなどのインターフェース要素を準備する

こういった素材は、基本的にブランドや企業で統一されます。

前提として、制作・開発するホームページやシステム、アプリケーションを通して利用者に何を訴求したいのか、また自社商材の優位性は何なのかを定義しておくようにしましょう。そのうえで、論理的に素材を考える必要があります。

3.デザインの適用

素材が集まったら、実際にデザインに落とし込んでいきます。ワイヤーフレームで設計した箇所に素材を当てはめてデザインしていきましょう。

実際はワイヤーフレーム通りに上手く設計できないケースが多いです。デザイナーが主導して違和感ないように作り込んでいく必要があります。また、ボタンやリンクが正しく設計されているかを確認しましょう。

4.フィードバックの収集と修正

モックアップが完成したら、ユーザーに展開してフィードバックを受け取ります。フィードバックを収集するにあたって、専用のシートを作成することで抜け漏れを防ぐことができます。

例えば以下の項目でExcel、Googleスプレッドシートを作成したうえでユーザーに説明、展開をしましょう。

• どのページで修正が必要か
• どの項目で修正が必要か（デザイン、画像、フォント、サイズなど）
• 修正の優先度はどの程度か
• リリース後の修正でも問題ないか

フィードバックを収集した後は、実際に修正作業をします。モックアップは一度の確認で終了するわけではありません。修正した項目を再度、クライアントに展開してデザイン・ビジュアルに関する認識を合わせるようにしましょう。

おすすめのモックアップ作成ツール

実際にモックアップを作る際に使えるツールを紹介します。上手くツールを活用して、効率的に作成しましょう。

Cacoo

Cacooはオンラインで利用できるコラボレーション型の図やワイヤーフレーム、フローチャート作成ツールです。ウェブベースでチームメンバーとリアルタイムで編集を行えるため、共同作業に向いています。

Google製品やSlackなど、各種ツールとの連携ができるため、社内開発の際にも効率的に利用できます。

Adobe XD

Adobe XDは、世界的に高いシェアを誇るAdobeのワイヤーフレーム、モックアップ作成ツールです。

Adobe Creative Cloudの一つであり、Adobe XDで作ったワイヤーフレームをもとにAdobe Illustrator、Photoshopなどのデザインツールでモックアップとして完成できます。

Sketch

Sketchは、UI/UXデザインのために特化したデザインツールです。主にMacOS向けに開発されており、シンプルで使いやすいインターフェースが特徴です。プラグインが豊富で、デザインワークフローの効率化が図れます。

Adob​​e XDを上回るほどのプラグインが用意されており、作業者に合わせて柔軟にカスタマイズしながらモックアップを作成できます。

InVision

 InVisionは、主にUI/UXデザイナーが動的なプロトタイプを作るために使うツールです。「5分以内にプロトタイピングの基本が完成する」というキャッチコピーの通り、素材などをアップロードするだけで基本的なデザインを直感的に作れます。

Mockitt

Mockittは、動画編集ツールなどで知名度の高いWondershareがリリースしているモックアップ作成ツールです。ノーコードで直感的にデザインができるため、初心者にもおすすめできます。

モックアップを作成する際の注意点は？

モックアップを実際に作る際の注意点を紹介します。Webサイトやアプリケーションのデザインとして完成形になりうるため、注意すべき点を守ったうえで作成しましょう。

ファーストビューの重視

ファーストビューとは「ユーザーが最初に目にする部分」のことです。ファーストビューによって、ユーザーの遷移率、滞在率は大きく変わりますので、特に力を入れましょう。

ブランドとして訴求したい内容をすっきりさせたうえで伝える必要があります。過度に情報量を増やさず、シンプルさを意識したうえでモックアップを作りましょう。

ユーザー認識のしやすさ

ユーザーが、Webサイトやアプリケーションの目的、機能を理解しやすいようにデザインをしましょう。

「分かりやすいナビゲーションにする」「アイコンやボタンは平均的なものを意識する」などの点に気を付けつつ、ユーザーが正しく理解できるよう注意しましょう。

デザインの一貫性

Webサイトやアプリケーション全体で、デザイン要素を統一しましょう。例えば色、フォント、ボタンのスタイル、画像のテイストなどがばらついていると、ユーザーは違和感を覚えます。また低品質な印象を持たれてしまう可能性があります。

そのため、必ずシステム全体でデザインを一貫させるように意識してください。ミスが増える箇所でもありますので、開発チーム内でレビューをするようにしましょう。

アプリのモックアップを無料で作成します！

弊社・ファンリピートではお客様のご要望に応じて、アプリケーションなどのシステム開発を行っています。

毎月2社限定で、アプリのモックアップを無料で作成しています。まずはお客様が作りたいシステムを伺ったうえで、イメージ出来るようにモックアップを作成します。ご契約の前にモックアップまで用意できることは、弊社の大きな強みです。

顧客管理アプリ、財務管理アプリ、採用管理アプリなどの社内業務効率化システムなど、お困りごとがある方は、以下のリンクからお気軽にご相談ください。

あわせて読みたい

アプリデザインイメージ作成依頼フォーム 弊社では、アプリデザインイメージを無料で作成しております。顧客管理デモアプリなど、お客様のニーズに合わせたデザイン案を提供いたします。 顧客管理デモアプリのモ...

まとめ

今回はWeb制作、システム開発に欠かせない「モックアップ」について、詳しく紹介しました。

利用ユーザー、クライアントとの認識を合わせるうえで、モックアップは重要です。ビジュアルにするだけで利用イメージが高まりますので、今回ご紹介した手法を取り入れつつ、制作してみてください。

また、人材不足、リソース不足など、自社でアプリケーション開発などができない方はファンリピートまでお問い合わせください。毎月2社限定でモックアップを無料作成できますので、完成後の製品をイメージしつつ、安心して導入できます。
＞＞お問い合わせはこちら