モックアップの作成方法は？確認すべきことや作成ツールの選び方について

モックアップとは？

一般的にモックアップ（Mockup）とは「模型」を意味します。

工場製品においては見た目は完成品とほぼ変わらず、内部のシステムは未実装で機能しないものを指し、WedサイトやWebアプリ・モバイルアプリといったシステム開発においても同様の意味で使用されています。

機能や動作は未実装で画面のデザインやレイアウト・ボタンの配置などの視覚的なものを表現し共有するサンプルをモックアップと呼びます。

システム開発の現場ではデザインカンプと同義で使われることも多く、一般的にワイヤーフレーム完成後にモックアップを作成します。

サンプルを完成品により近づけるためにHTML等で作成するケースも存在します。

モックアップの目的と必要性

WedサイトやWebアプリ・モバイルアプリでは、完成品をよりイメージしやすくするために用いられます。

クライアントからの文章ベース（口頭指示も含む）指示による製品を作成・実装するのには限界があります。特にデザイン部分に関してはクライアントと開発側での認識に乖離が生じ、ワイヤーフレームの情報だけでは認識の共有が困難になることから最悪の場合、完成後にデザインの修正が入ることもあります。

モックアップの段階であればデザインの調整が行いやすく、このような事態を防ぐことができるため必要とされているのです。

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

多くの人が上記三つを同じような目的で使用していますが、これらは全て異なり別の段階で用いられるデザイン要素です。

ワイヤーフレーム (Wireframe)

アプリケーションやウェブサイトの画面デザインを表現し、シンプルで基本的な線描画の設計図を指します。

情報設計を視覚化するために使用され、ユーザーがサイトやアプリを操作するための基本的な要素を示します。

スケッチやデジタルデザインツールで作成され流ことが多く、線と図形を使って各画面のフレームを描き、機能を説明する注釈を入れます。

プロトタイプ (Prototype)

開発者やデザイナーらが最終的な製品の機能や外見を模倣する抽象的なサンプルであり、最終製品のシミュレーションを指します。

実際のコードやデザインを使用して、ユーザーが製品のアイデアを試すことができるようにしたもので、デザイナーと開発者がアイデアを検討しフィードバックを得るために使用されます。

モックアップ (Mockup)

製品の完成形に非常に近い見た目をデザインしたものを指します。

モックアップは、色や画像、フォントなどの詳細な要素を含んでおり、最終的な製品がどのように見えるかを表現します。実際の製品を開発する前に、デザイナーとクライアントの間でアイデアを評価するために使用され、スケッチやデジタルデザインツールを使用して作成されます。

モックアップとワイヤーフレームの大きな違いは、見た目にデザインを施さない点です。

モックアップとプロトタイプの大きな違いは、静的な「模型」であるか、動的な「試作品」であるかという点です。

デザインの流れ

まずは真っ白な紙に大まかな「スケッチ」をすることから開始し、どこにどんな機能を配置するのか大枠を決めて可視化した「ワイヤーフレーム」を作成。そのワイヤーフレームに色や画像、ロゴなどを追加して「モックアップ」にします。そして最後に機能やインタラクティブな要素を加えることで「プロトタイプ」が完成します。

モックアップを作成するメリット

1. コミュニケーションの改善

デザイナーと開発者のコミュニケーションを改善するために非常に有効です。

開発者が実際の動作や機能を持つ初期バージョンのソフトウェアを作成する前に、デザイナーが作成したモックアップを使用することで、どのようなUXを作成するかについての共通理解を確立することができます。

2. 問題の特定

モックアップを使用することで、開発者はアプリケーションの要件に基づいて機能を検討し問題点を特定することができます。

実装開始前に問題の特定ができるため、サービスの課題の早期発見に繋がり、より迅速に問題解決を行うことが可能となります。

3. 設計の改善

モックアップを使用することで、デザイナーはアプリケーションのレイアウトやデザインについてのフィードバックを得ることができ、アプリケーションの設計を改善することができます。

デザイナーがアプリケーションの設計についてよりよい判断を下すことが可能となり、設計の改善に役立ちます。

4. ユーザーテストの実施

モックアップは、ユーザーテストを実施するためにも使用することができます。

ユーザーテストは、ユーザーがアプリケーションをどのように使用するか、どのように反応するかを理解するために行われます。

モックアップを使用してユーザーテストを実施することで、アプリケーションの問題点を特定することができ、UI/UXを改善することが可能となります。

モックアップの作成方法

モックアップは、

• モックアップ作成ツールを使用して１から作成する
• モックアップジェネレーターを使用して画像を当てはめていく

といった２つの作成方法があります。以下でそれぞれを解説します。

モックアップ作成ツールを使用する

１から作成できるメリットとしては、デザインの自由度が高くなる点が挙げられます。

クライアントから一般的に認知されたデザインと異なったものを要求された場合に役立つでしょう。

オンラインツール（Webツール）を使用して、複数人共有でリアルタイム編集を行うことができるツールも存在します。

変更履歴を残すことも可能であるため、常に最新版を共有することが可能です。

モックアップジェネレーターを使用する

クライアントによってはより実際の状況に近いデザインを見てもらうことが必要な場合があります。そんな時に役立つのがモックアップジェネレーターです。

パソコン画像やスマートフォン画面にモックアップ画像をはめ込むことができるため１から作成したモックアップよりもイメージが容易であるというメリットがあります。

よりリアリティを求めるクライアントに対して有効であると言えます。

モックアップの作成後に確認すべきこと

カラーやレイアウトが不自然ではないか

作成したモックアップ全体を見て、使用しているカラーやレイアウトに不自然な点がないか確認しましょう。

モックアップをHTML等で作成している場合は、ブラウザの互換性等の確認も可能です。ブラウザの種類によってレイアウトが崩れないかなども確認できるとさらにいいモックアップになります。

さらに、多種端末対応システムであればレスポンシブデザインが必要な場合もあります。こちらについては事前に確認しておくことが重要です。

クライアントの要望に沿ったものになっているか

クライアント要望のデザインに忠実であるか確認しましょう。

フォントや色、レイアウトボタンの形等々、元となったデザインと一致しているのか細部に注意を払う必要があります。

また、ユーザビリティについても確認が必要です。ユーザーが直感的に操作できるようボタンやリンクが適切に配置されているのか、情報が適切に整理されているのかも改めて見直しましょう。

コンバージョンに繋がる導線を作れているか

ECサイトであれば、商品の購入。サービス掲載サイトであれば申込や問い合わせのためのフォーム送信。会員登録が必要な場合の登録画面等、コンバージョンに繋がる導線を正しくデザインできているか確認しましょう。

モックアップジェネレーター・作成ツールを選ぶポイント｜無料サイトは使える？

モックアップを作成する際にどんなツールを選定すればいいのでしょうか。

どんな機能を持ったツールが適しているかは使用する人それぞれ異なります。 ほとんどのツールが無料体験版の提供を行なっているため実際に使ってみながら自分に合ったツールを探しましょう。

今回は一貫して押さえておくべきポイントを３つご紹介します。

UIが使用しやすいか

ツールを選定する上でユーザビリティが優れているかどうかを確認することは非常に大切です。日本語UIに対応しているか、操作方法が直感的であるか、オブジェクトの配置や変更が簡単か、ショートカットキーで操作が可能かなどを確認してみてください。

コスト面は妥当か（無料ツールあり）

サービスによって利用金額はさまざまです。月額500円程度のものから2000円程度のものが多い傾向にあります。またインストール版を購入することで月額料金がかからないものもあります。

こちらのサイトに主要なツールが料金とともに網羅されていますのでぜひご検討ください。

無料ツール（一部制限あり）のものを活用して作成することも可能です。

• Cacoo：https://cacoo.com/ja/home
• moqups：https://moqups.com/
• wireframe.cc：https://wireframe.cc/
• justinmind：https://www.justinmind.com/

機能面に不足はないか

目的や用途にあったツールを選ぶことが重要です。

Webアプリのモックアップを作成するツールを選ぶか、スマートフォンアプリのモックアップを作成するツールを選ぶかで性能が大きく変わることもあります。

また、複数人で作業を行う場合はコラボレーション機能があるかどうかも確認しましょう。複数のユーザーが同時にモックアップを編集・閲覧できることによって作業効率が飛躍的に向上します。

まとめ

サービスコンセプトに合ったデザインになっているか、イメージとかけ離れていないか、クライアント・デザイナー・開発者の擦り合わせや評価・フィードバックなどに役立つ重要なステップであるモックアップ。

各自の共通認識を合わせることができ、問題の早期発見、さらにはユーザビリティに至るまで多くの課題を洗い出し解決に導くデザイン要素だと言えるでしょう。

モックアップを作成することで開発をスムーズに進められるだけでなく、ユーザーにより良いシステムを提供することできます。

システム開発のフローの中でも重要な役割を担うので、作成する上でのポイントをしっかりと理解し活用しましょう。

クリーヴァでは、SucSak（サクサク）という、月額制でシステム開発チームのレンタルサービスを行なっております。CTOレベルの技術者がやりたいこともシステム化をサポートすることも可能です。

ご興味を持たれた方は、以下URLより弊社サービスをご覧ください。