モックアップとは?あると便利な理由や作成時のポイントを解説

アプリ開発をスムーズに進めるためには、画面設計の時点で社内のコンセンサスを十分にとっておく必要があります。開発がほぼ完了する段階になって、デザインや動作の作り直しを迫られるような事態は避けたいところ。そのためにモックアップやプロトタイプを作って、コンセンサスをとるケースは少なくないでしょう。モックアップやプロトタイプによって画面のデザイン、動きをイメージでき、修正点も洗い出しやすくなるからです。

そこで、今回はモックアップの意味や目的についてご紹介します。アプリ制作に必要な理由から、モックアップ作成時のポイント、作成ツールの選び方、メリット・デメリットまで詳しく解説します。

【無料ebook】モックアップ作りなど、モバイルアプリの企画書のいろはをおさらい?


モックアップ作成などアプリ開発を一から始める方必見!社内向けや開発会社向けの資料時に作成が必須となるモバイルアプリの企画書の作り方やポイントをワーク形式で学べる資料です。自身で開発される方も開発会社に発注する予定の方も是非!ご覧ください。

手をうごかしながらつくるモバイルアプリの企画書

モックアップとは?

モックアップの本来の意味は「模型」です。まだ機能が実装されておらず、実際に使うことはできないものの、外面の完成イメージを把握できるサンプルと捉えてください。

アプリ開発においては、アプリ完成後のデザイン・イメージを検証する目的で作られたビジュアル・サンプルをモックアップと呼びます。ユーザーが目にする画面と同じデザインを視覚的に確認するためのものなので、アプリとしての機能は不要です。なお、モックアップは、Web制作や紙媒体制作におけるデザインカンプと同等の意味と捉えて差し支えありません。アプリ制作、Web制作のいずれにおいても、制作現場ではモックアップとデザインカンプの目的に大きな違いはないといえます。

スマートフォンアプリの設計に必要なもの

ここでは、アプリの設計段階において準備しておきたい代表的なものを流れに沿って紹介します。モックアップがどの段階に位置付けられているのかを把握しておきましょう。

1. ラフスケッチ

アプリの企画がまとまり、要件の洗い出しができたら、大まかな画面遷移と画面イメージを作成します。この時点では、手書きのラフスケッチ程度で十分です。

2. ワイヤーフレーム

ワイヤーフレームとは、画面の基本設計図のことを指します。見た目の美しさといったデザイン要素は必要なく、ボタンや表示エリアをどのあたりに配置するかといったアウトラインをまとめましょう。

3. モックアップ

モックアップは、デザイン・イメージを検証する目的で作られたビジュアル・サンプルです。プログラムの実装はこの時点で必要ありません。

4. プロトタイプ

プロトタイプはいわば試作品で、モックアップにある程度動きを追加したものです。プロトタイプは、ユーザビリティや操作性をチェックする上で欠かせません。ただし、あくまでも試作品のため、利用できる機能が制限されていたり、ほかのサービスとの連携はできなかったりするのが一般的です。

 

モックアップやプロトタイプが、アプリ開発に必要な理由

アプリ開発においてモックアップやプロトタイプを作成する目的を知っておくことは、開発をスムーズに進める上で重要です。モックアップやプロトタイプを作成する主な目的としては、下記の2点が挙げられます。

社内コンセンサスをとるため

開発が進んだ段階でアプリデザインを見直すことになれば、改修に要する工数は膨大なものになりかねません。後工程でデザインの段階から改修を求められることのないよう、あらかじめ完成イメージを提示して、了承を得ておくことがモックアップを作る主な目的です。

リリース時の完成版を想定したデザインにすれば、社内で決定権を持つ人物もユーザーと同じ目線でチェックすることが可能です。社内で決定権を持つ人物が技術面に詳しくない場合でも、実際のUIデザインを見てもらえば承認を得やすくなるでしょう。

アプリ公開前のデザインを評価するため

公開前のアプリを評価する際は、目的に応じてモックアップとプロトタイプを使い分けることが大切です。テキストの表示サイズや配色のほか、ボタンなど各要素の配置・サイズはユーザーにとって快適か、ボタンなどの導線は視認性が高いかといったことはモックアップを使って評価しましょう。評価は必ず複数名で行い、関係者の主観が入らないようにすることが大切です。デザイン面での評価であれば、モックアップで十分に対応できます。

ユーザビリティまで含めて評価する場合は、プロトタイプを用意するのが一般的。アプリ開発に直接関わっていない別部署の社員や外部の協力者にアプリを操作してもらい、レビューを依頼します。このとき、「ボタンをタップしても反応しない」といった意見が挙がらないよう、プロトタイプの位置付けを評価者に周知しておくことが大切です。

 

モックアップ作成時のポイント

モックアップを作成するにあたっては、いくつか押さえておきたいポイントがあります。下記の内容を踏まえて、アプリのUIデザインを効果的に検討できるようにしましょう。

画面の作成漏れがないか確認する

モックアップは、遷移先の画面数分だけ漏れなく作成する必要があります。アプリ起動後の画面から遷移するすべての画面が確実にそろっているか、念入りにチェックしておくことが大切です。

作成漏れを防ぐには、ワイヤーフレームの段階で必要な画面数を確定しておかなくてはなりません。配置する予定のすべての導線から遷移する先の画面が用意されているか、必ず複数名の目で確認しましょう。

関係者たちのイメージとずれていないか確認する

UIデザインが開発関係者のイメージとずれていないか、こまめに確認を入れることも大切です。モックアップの完成後にイメージが大きくずれていることが発覚することのないよう、常にモックアップ作成の途中段階で確認を入れることを意識してください。

デザインの現物がない状態で行われる打ち合わせでは、各人が使う言葉の定義にずれや温度差が生じかねません。曖昧な点があれば、モックアップの作成過程で細かく確認を入れたほうがいいでしょう。

レイアウトはファースト・ビューに注力する

アプリを起動後、最初に目にする画面(ファーストビュー)は、アプリのUIのうち最も重視されるべき要素です。アプリの印象を大きく左右するため、レイアウトはファースト・ビューに注力しましょう。

使い勝手が悪いと判断されやすいアプリの特徴として、起動後に何をすればよいのかユーザーが戸惑う点が挙げられます。直感的な操作が可能になっているか、ボタンの配置や大きさ・配色などを念入りにチェックすることが大切です。

認識されやすいボタンや導線を作る

アプリを初めて利用するユーザーにとって、認識されやすいボタンや導線が配置されていることも重要なポイントといえます。ユーザーの行動を促す重要な要素のため、初見のユーザーが操作方法を直感的に理解できるかどうかを重視しましょう。

 特に、導線が複数ある場合は注意が必要です。ボタンの役割が一目でわかる表示になっているか、視認性に問題はないかなど、客観的な視点でチェックしておくことが求められます。アプリ開発に関わっていないスタッフに協力してもらうなど、第三者の視点でチェックを進めると課題を発見しやすいはずです。

 

モックアップ作成ツールの選び方

外部業者にモックアップを準備してもらえる場合は問題ありませんが、発注先が決まっていなかったり、予算が確定していなかったりすることもアプリ開発ではよくあります。

とはいえ、デザインやプログラミング経験がないアプリ担当者の方が、モックアップを作るのは容易ではありません。実際には、モックアップ作成ツールを活用するケースが多いのではないでしょうか。アプリ開発向けとしては、「MockUPhone」などのモックアップ作成ツールが広く使われています。

モックアップ作成ツールは、複数名で進捗状況を確認しやすいものを選ぶことが大切です。モックアップの作成過程で情報共有が滞ると、関係者間で認識の食い違いが生じる可能性があるからです。

なお、モックアップ作成ツールを選ぶ際には、複数のツールを同時に試しておくことをおすすめします。無料体験が可能なツールもありますので、下記のポイントを参考に、使い勝手を確認しておきましょう。

<モックアップ作成ツールを選ぶ際のポイント>

  • 日本語表示に対応しているか
  • 見やすいコメント機能が備わっているか
  • 編集履歴を確認できる仕様になっているか
  • 常に最新版を共有できる仕組みになっているか
  • 有料版に移行した際の料金や契約期間は適正か

 

モックアップ作成ツールのメリット・デメリット

モックアップ作成ツールを活用するメリットは、デザインやコーディングが不要という点が挙げられるでしょう。一方で、「ツールの使い方を覚えるのに時間がかかる」「無料版もあるが機能が限定されている」「日本語に対応しているツールが少ない」といった課題も抱えているのが実情です。

上記のデメリットを解消するには、クラウド型のアプリ開発ツールの活用がおすすめです。多くのクラウド型開発ツールでは、モックアップやプロトタイプに近いものを作成できる機能があり、開発を進めながらシームレスにモックアップやプロトタイプが準備できます。

例えば、本メディアを運営する株式会社ヤプリが提供するアプリプラットフォーム「Yappli」では、iOS、Androidそれぞれのプレビュー用アプリが用意されている点が大きな特徴。OSの違いによって画面表示や動きが異なることも多いのがアプリ開発の難点ですが、プレビュー用アプリがあれば実機で画面や操作のチェックもできます。モックアップ作成ツールのデメリットを解消し、開発をスピーディーに進めるためにも、ぜひYappliの活用をご検討ください。

 

まとめ:クラウド型のアプリ開発ツールでシームレスにモックアップの作成を

アプリ開発において、モックアップは社内のコンセンサスを得るために重要な役割を担っています。開発工程の手戻りなど、時間のロスを避けるためにも、精度の高いモックアップの作成は欠かせません。

一方で、モックアップやプロトタイプを準備することは、デザインやプログラミングの経験がない方にとってハードルが高いと感じるでしょう。そこで、クラウド型アプリ開発ツールを活用すると、モックアップのブラッシュアップに不可欠な情報共有や、改修のプロセスを円滑に進めることができます。今回解説してきたポイントを参考に、ぜひクラウド型アプリ開発ツールでシームレスなモックアップ作成を実現してください。

>>こちらの記事もよく見られています

【初めてのアプリ開発】手順から費用の目安、主な開発会社まで詳しくご紹介