モックアップ作成サービス＆ソフトウェア 25選
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ!
Webサイトの制作やソフトウェアを作成する際には、PhotoshopやGUIビルダーを使ってモックアップ（ワイヤーフレームとも言います）を作るのが一般的です。それによってプランナー、プロダクトオーナー、エンジニア、デザイナーといった各プロジェクトメンバーがシステムの雰囲気を掴むことができ、意見を具体的にすることができます。文章で書かれているだけの状態に比べて数倍の効果が臨めるはずです。そのような作業を行う時に最もよく使われるのはAdobe PhotoshopやFireworksかと思います。もう少し具体的になればDream Weaverを用いることもあります。デザイナーの方が主体性をもって取り組む場合は良いのですが、デザイナーの方以外でモックアップレベルの作業を進める場合や、頻繁に構成を変えて試す場合は編集しづらいフォーマットであると何かと不便です。
そこで使われるのが専用のモックアップ作成ソフトウェアになります。今回はローカルアプリ、Webサービス、テンプレートと分けて取り上げてみたいと思います。自社サービスの企画やクライアント提案などでご活用ください。
ローカルアプリ
ローカルアプリの有利な点はオフラインでも利用できることと、WebサービスでありがちなFlashインタフェースにこだわらないために操作がスムーズなものが多いことです。有料のものもありますが、無料（オープンソース含め）を使えば複数人でデータを共有できるメリットもあります。
Pencil
https://addons.mozilla.org/en-US/firefox/addon/8487
PencilはFirefoxアドオンとして動作するモックアップ作成アプリケーションです。ほぼ独立して動作するのでFirefoxアドオンという意識は殆どないかと思います。画像を埋め込んだり、ページ内リンクもできるなど、かなり高機能です。できあがった図はHTML、PNG、Word、PDF、OpenOffice.org形式などで出力ができます。
DENIM
http://dub.washington.edu:2007/projects/denim/
DENIMは画面を手書きで作成するモックアップソフトウェアです。ボタンやラジオボタンを配置したり、作成したページを線で結んでいくことでリンクを作ることもできます。作成したページはブラウザ上で擬似的に動かすこともでき、モックアップレベルでの動作確認にも使えて便利です。
iPhonePrototype
http://sourceforge.net/projects/iphoneprototype/
iPhonePrototypeはFirefoxアドオンとして動作するiPhone用のモックアップ作成ツールです。コンポーネントも多数用意されていますので、見た目も整ったモックアップを作成することができます。アイコンを配置したり、ソフトウェアキーボードを配置したりして実際のアプリになった時の構成を確認できます。
Serena Prototype Composer
http://www.serena.com/products/prototype-composer/home.html
Windows向けのソフトウェアやWebサイトのモックアップを作ることが出来ます。Serena Prototype Composer自体はそれだけでなく、アクションをつないでフローを作成したり、アサインしたメンバー管理機能もあります。プロトタイプ作成機能が付いたプロジェクト管理と言ったソフトウェアです。本格的なソフトウェアですが、使いこなせれば相当便利そうです。
fluidIA
fluidIAはまだ開発途中ですが、アジャイルUIプロトタイプ作成ソフトウェアです。ページの中に文字やオブジェクトを配置して画面を作っていきます。細かなデザインは作成できませんが、各ページにアクションを追加したり、フローを組むことで全体的な流れを確認できるようになっています。HTML/JavaScriptで作られていて、保存するためにはIEまたはFirefoxで動かす必要があります。
以下は有料のソフトウェアです。
Balsamiq Mockups
http://www.balsamiq.com/products/mockups
個人的には最もよく使っているソフトウェアです。ちょっとラフなアイコン、コンポーネントになっているのであまりかしこまらずにモックアップの作成が行えます。Webサイトの他、iPhoneアプリ用のコンポーネントも提供されています。さらにサードパーティー製のコンポーネントが追加できるようになっていて、Andoridアプリや複雑なテーブル組なども作成できるようになっています。
MS Visio
http://office.microsoft.com/ja-jp/visio/
MS Visioを使ってWindowsやWebサイトのデザインを行うケースは多いようです。Professionalレベルではないと十分なステンシルが提供されていないのが問題ではありますが、企業であれば持っておいて損はありません。閲覧だけであればビューワーが無料で配布されています。
Mockup Screens
Mockup Screensはモックアップを作るためだけのソフトウェアで、かなり優秀です。テーマを切り替えるだけでラフなデザインからWindows風インタフェースに変更することができます。フォーム同士をリンクすることでクリックした時のアクションを擬似的に試したり、オブジェクトにメモを付けることもできます。コンポーネントも多数登録されていて、ドラッグアンドドロップだけで追加できます。結果はPDFやHTMLなど多数の形式で出力できます。
OmniGraffle 5
http://www.omnigroup.com/products/OmniGraffle/
OmniGraffle 5はMac OSX用のMS Visioといった雰囲気のソフトウェアになります。ワークフロー図やマインドマップ的な操作もできますし、モックアップを作ることもできます。ステンシルではiPhone向けのものも提供されています。Mac OSXでモックアップを含めたドロー系ソフトウェアを使われるなら選択肢にあがってくるかと思います。
Axure
AxureはWindows用のソフトウェアで、主にWebサイトのデザインに向いています。細かなWebデザインはもちろん、メニュー部を動作するようにしたり、ページ同士をつなげることもできます。さらにページ中にコメントを載せることも可能です。その他、サイトマップを作成したりする機能もあるのでWindows用Webサイトデザインツールとして便利そうです。
ForeUI
ForeUIはWindowsやMac OSX向けソフトウェアを開発するのに使えるモックアップ作成ソフトウェアです。単なるデザインだけでなく、フローチャートに沿ったアクションを定義することで、タイマーアプリケーション程度なら実際に動作するレベルで作ることが出来ます。動作はHTMLレベルで可能になっています。iPhone向けのウィジェットが公開されており、自分が作ったウィジェットを共有する機能もあります。
Webサービス
Webサービスの場合は、ローカルアプリケーションと異なり複数人で作業を行えるのが利点です。チャット機能を備えている場合も多く、ブラウザ上でチャットしながらモックアップの精度を高めていくことができます。複数の拠点に分かれていたり、開発依頼先と一緒にモックを決めていくような時に便利です。本格的なモックアップ作成ツールになると月額有料課金型が多いですが、一部では優秀ながらも無料で使えるものがあります。
Mockingbird
MockingbirdはHTML/JavaScriptで作られたWebサイト用モックアップ作成サービスです。Flash特有のもたつきがありません。ページにリンクを付けることも可能です。複数人でシェアする機能もあります。Googleマップ風のオブジェクトや動画再生プレーヤ風のコンポーネントも用意されています。ちょっとラフなデザインをささっと作りたい時に使えそうです。
Mocklinkr
Mocklinkrはモックアップ自体のデザインを行う訳ではなく、既にデザインされた画像をアップロードして、その画像の一部と別な画像をリンクさせるWebサービスです。それによって各リンクをクリックしたときの導線を試せるようになります。システムの流れを確認したりする時に便利です。
MockFlow
MockFlowはWebサイト向けのモックアップ作成ツールで、多数のコンポーネントが予め登録されています。共有機能があり、複数人で同時に編集が出来るようになっています。作成したモックアップはPowerPointやPDFでエクスポートが可能です。面白いのはオフライン版としてデスクトップ向けアプリも提供している点です。
Jumpchart
Jumpchartはデザインのモックアップではなく、コンテンツのモックアップを作成するサービスです。ナビゲーションを作ってテストしたり、コンテンツを埋めてみて、その内容とバランスをチェックしたりするのが目的になります。
Web Site Wireframe Tool
http://wireframe.talltree.us/default.asp
四角いオブジェクトを配置し、その色を変更したり文字を追加してワイヤーフレームを作成するサービスです。機能的には他のサービスに比べると劣って見えてしまうので、使いどころが難しいかも知れません。が、モックの時点ではオブジェクトに複雑な形を求めることはないので、四角と文字そして色だけでも実は十分なレベルのモックアップが作成できるかと思います。
iPhone Mockup
iPhone MockupはiPhoneアプリのデザインに特化したツールです。イラストと鉛筆の二種類がテーマから選択できます。イラストの方がしっかりとしたデザインに、鉛筆はラフなデザインでアプリのモックアップを作成できます。
HotGloo
HotGlooはWebサイトのモックアップ作成に特化しています。複数ページを作成してサイトマップを作ったり、960gsに沿ったデザインも作成できるようです。作成したモックアップはPDFとして出力できます。月額14ドルからのWebアプリケーションです。
Cacoo
CacooはWebベースのMS Visio的なサービスです。日本製なので日本語も利用できます。ワイヤーフレームはラフなもの（手書き風）と正確なものとが用意されています。フローチャートやネットワーク図も描けるので、まとめてドロー系を管理するのに便利です。
Lovely Charts
Lovely ChartsもCacooと同じく全般的なドローが可能です。ワイヤーフレームの他、フローチャートや人の関連図を描いたりすることができます。ワイヤーフレームは特にWeb特化という訳ではなく、Windowsアプリケーションのようなものも作成できます。
iPlotz
iPlotzは数多くのコンポーネントを持っているのが特徴で、グラフだけでも数種類あります。また、画像などもアイコンだけでなく、自分の持っているものをアップロードして配置することが可能です。作成したモックアップは他のユーザが意見を書き込むこともできます。意見はタスクにして、プロジェクト管理的に使うことも可能です。
JustProto
JustProtoもサービスとしてはiPlotzと似ています。プロトタイプの作成、および他プロジェクトメンバーからのフィードバックが可能です。ページは無制限に作成できますが、ファイル管理の容量やコラボレーションするメンバーの数が月額プランによって異なってきます。
ProtoShare
ProtoShareもサービスとしてはiPlotz、JustProtoと似ていますが、プロトタイプが単なるデザインだけでなくメニューを動かしたりリンクを動作させたりとかなり作り込むことが出来るのが特徴です。他のメンバーはマーカーを付けて意見をいったり、そこでディスカッションできるようになっています。ユーザ単位で29ドル/月と、他のサービスに比べると少し高くなっています。
テンプレート
テンプレートは専用のソフトウェアではなく、プレゼンテーションソフトウェア向けのファイルになります。Webサイトのデザインについてプレゼンテーションにスクリーンショットを載せて説明を書き加えることは良くありますが、それをモックでこなせるようになります。モックであれば画面の一部だけを取り出したり、目立たせる部分だけ書くこともできるのでより分かりやすい資料ができるようになります。
Mockapp template
MockAppはKeynoteやPowerPoint向けにiPhoneアプリ用のテンプレートを提供しています。プレゼン資料と組み合わせることで、より具体的な提案や企画ができるようになります。またKeynote向けにはGoogle Waveアプリのモックアップが作れるテンプレートもダウンロードできます。
PowerPoint Prototyping Toolkit
http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/
PowerPoint Prototyping Toolkitはその名の通り、PowerPoint向けにWebサイトやWindowsアプリのモックアップを作成できるツールキットになっています。プレゼン資料中にモックアップを埋め込めるので、見た目に分かりやすく、デフォルメしながらWebサイトのデザイン提案などができるはずです。
まとめ
モックアップの作成はほんの数年前に比べると一気に進化しており、多彩な選択肢ができるようになっています。一人が高価なソフトウェアを使って作り上げるのではなく、複数人でオンライン上で話し合いつつデザインの概要を決めていければもっと早く具体的なアイディアの落とし込みができるようになるはずです。企業などで幾つかのプロジェクトで使う場合にはWebアプリケーションを使った方がナレッジも溜まるので良さそうです。自社のサービス向けなど、限られた回数しか使わない場合はフリーウェアやオープンソース・ソフトウェアを使うのが良いかと思います。自社やサービスの形態に合わせて最適なものを選んでみてください。
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ!
