UIデザインのアニメーションまで共有できるモック作成ツールまとめ
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。
その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。
（参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編））
プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は前述の方法を使わず、Macアプリでプロトタイプを作成できるツールをいくつかご紹介します。それぞれ機能が異なるのでみなさんの制作現場で活躍しそうなのもがあるかどうかチェックしてみてください！
Prott
Goodpatchが開発しているプロトタイピングツールのPrott。プロジェクトを作成して、コミュニケーションをとりながら、プロトタイプを作成できます。画面サイズはiPhoneからiPad、Andoroidまで広く対応しています。2014年10月よりiOSアプリを公開しました。チームで開発するための機能が充実しているので、是非、アプリ開発のフローにProttを取り入れて頂けたらと思います!
FileSquare
このアプリに画像をアップロードすることで、画像の特定の箇所と他の画面をリンクさせることができます。リンクさせた箇所をクリックすることで画面が遷移するので導線の確認が可能です。このアプリはデザイン上にコメントを残すことが可能なので、細かくフィードバックを得ることができます。
FLINTO
他のツールと同様に画像アップロード、他の画面とリンク可能なツールです。他と異なる点が、制作したモックアップにアクセスできるURLが生成され、それをiOSデバイスに送信することで本物のアプリのように動きを確認できます。生成されたURLを開くとホーム画面に追加するよう求められ、追加することで本物のアプリのように、アイコン付きでホームに追加されます。
CONCEPT.LY
他のツールと同様に画像アップロード、他の画面とリンク可能なツールです。このアプリはチームメンバーとの共同作業がしやすいようです。
LiveMock
他のアプリ同様、画像の特定の箇所と他の画面とリンクさせることが可能です。このアプリは画像にコメントを残すことが可能です。さらにプロジェクトを複数人で管理可能で、チームメンバー、お客さんからのフィードバックもこのアプリで確認できる。
fluid
他のアプリのように画像をアップロードしてリンク機能が使えるツールですが、これはアプリ作成でよく使われるパーツがあらかじめ用意されているので、それらを並べるだけでもアプリのモックアップを作成できます。
balsamiq
このツールは他のとは少し違っていて、画像をアップロードするのではなく、あらかじめ用意されている手書き風のパーツを組み合わせたり、文言を入れることでモックアップを作成するツールです。サイトの導線を簡単に伝えるにはいいツールかも知れません。
axure
画像やオブジェクトを配置して、モックアップを作成できるツール。他のアプリと同様にリンク機能があります。このアプリがおもしろいのは作成したモックアップをHTML, CSS, Javascriptなどで書きだすことが可能で、完成品をWebで見ることができます。実際にWebで確認できるのは嬉しいですね。
BRIEFS
画像の特定の箇所と他の画面をリンクさせられるだけでなく、アニメーションなどもモックアップで表現出来ます。作成したモックアップを他の人に送ることで、専用のiOSアプリからアニメーションや動きのあるモックアップを確認することができます。本物のアプリのようなモックアップが作成できるのですが、iPhone、iPadのモックアップしかつくれないのが残念です。
以上です！
いかがでしたでしょうか？これらのツールは少し高価ですが、動きを伝えるにはとても有効な手段だと思います。個人的にはBriefsで作るモックアップがかなり本物に近くて驚きました。弊社サービスのprottは自信を持ってお勧めしますが、いろいろ試してみた上で、みなさんのお仕事に役立つものが見つかると幸いです！