モックアップとは
元来モックアップとは、本物そっくりの模型のことを指します。アプリやWebサイト開発におけるモックアップとは何か、なぜ必要なのかについて考えてみましょう。
アプリ設計フロー
アプリケーションを設計する上での、フローは以下のとおりです。
- 開発の企画・コンセプトの設定
- 手書きでラフスケッチを作成
- 画面の基本設計図（ワイヤーフレーム）を作成
- モックアップを作成
- プロトタイプ（試作品）作成
- 不具合のチェック、確認、修正
- 完成
アプリを設計する中で、モックアップを作成しますが、このワンステップがあることで開発者たちやクライアントまで、共通のイメージを持つことができます。
モックアップの必要性
モックアップを作成する一番の目的は、完成品のイメージを共有することです。モックアップは見た目は本物に近い画面デザインですが、プログラムを搭載していない試作品です。あくまで認識の共有のために作成するものですので、まだ動作する必要はありません。
モックアップを作って認識のすり合わせを行った結果、認識の違いが表面化したとしても、この段階でなら修正がしやすいので、大きな問題にはなりません。仮にモックアップで確認をせず、最終段階まで進んでから大幅な修正が出た場合、修正に時間がかかり、納期が大幅に遅れてしまいます。
一方で、まだ設計段階のフレームワークをプレゼンしても、完成形のイメージが湧かず、共有認識を持つことが難しくなります。モックアップを作ることで、イメージのずれを減らし、改善点を見つけやすくすることができます。
モックアップの作成
モックアップを作成するにはどうすればよいのでしょうか。納品するための完成形を作るわけではありませんから、時間をかけず、手軽に作れる必要があります。モックアップ作成するための便利なツールを活用するのがおすすめです。
作成にはツールが便利
アプリケーションやWebサイトなどの開発を行う際は、複数人のチームを組むことがほとんどです。チームの結成時にモックアップ制作の担当者が決まっていなかったり、モックアップに使える予算や時間が限られていたりという状況もあるでしょう。
そこで、便利なモックアップ作成ツールをおすすめします。デザインやコーディングの必要もなく、簡単にモックアップを作ることができるツールです。
作成ツールの選び方
モックアップ作成ツールを選ぶにあたり、良いものを選ぶためにチェックするべきポイントは以下のとおりです。
- 日本語UIである
- ツールバーがわかりやすく使いやすい
- オンラインでフィードバック可能
- 誰のフィードバックか履歴が残る
- 画像取り込み・はめ込みが簡単
- プロトタイプへスムーズに連携できる
- セキュリティ対策ができる
- テンプレートが豊富にある
- ランニングコストが負担にならない
これらのうち、自分にとってどのポイントの優先順位が高くなるかを洗い出し、実際に使ってみて作成ツールを選びましょう。
無料プランも使えるおすすめの作成ツール
モックアップはできるだけ手間や予算をかけずに作りたいところですが、ある程度のクオリティも求めたいところです。手軽に、良質なモックアップを作成できるツールを紹介します。
Webブラウザで利用のcacoo
Webブラウザで動作するモックアップ作成ツールです。日本語に対応しています。同時に共同作業ができることが大きな特徴であり、これによってリアルタイムで複数人がモックアップ制作をすることができます。
良心的な料金設定で月額でも比較的安価で使用できます。無料版プランもあるので、1度試してから導入してみてはいかがでしょうか。
スマホでも使うならMarvel
3種類のデバイス版が準備されており、Windows版はもちろん、iOS版、Android版と広く対応しているのがMarvelです。自分が使いたいデバイス版をインストールし、好きなデバイスを使ってモックアップ作成ができます。
モックアップからプロトタイプへの連携も同時にでき、手書きのスケッチをそのまま取り込める特徴もあります。年払いや月額のプランがありますが、無料版もあるので、試してみましょう。
フレームが豊富なFrame
フレームが36種類あり、PCやスマホなどに好きな画像を差し込むことができるツールです。画像はアップロードやURLからの取り込み保存したものが使えて、設定も直感的で分かりやすくなっています。
その場ですぐにスタートできるので、いつでもモックアップを作り始めることが可能です。無料提供なので、手軽にモックアップを作ってみたい人におすすめです。
HTML自動生成のBootstrap Studio
Windows、OSX、Linuxで動作するデスクトップアプリケーションです。自分で準備した素材をインポートすることも可能で、簡単にモックアップを作成することができます。
また、完成したモックアップは自動的にHTML+CSSが作られ、このアプリケーション内では間違いのないコードが生成されます。カスタマイズしたい部分は自動生成されたコードを元に編集することもでき、上級者も満足のアプリケーションです。
まとめ
Webサイトやアプリケーションの開発では、複数人が同時に制作進行していることがほとんどです。そのような場において、モックアップというワンステップを加えてプレゼンテーションすることで、関係者全員が共通イメージを持つことができます。
開発に当たってモックアップを作るメリットは大きく、作業のスムーズな進行にもつながりますので、便利なツールを使いながらぜひ開発フローに取り入れてみてください。