MEMOPATCH

UIデザインの動きまで共有できるモックアップ作成ツールまとめ

  • このエントリーをはてなブックマークに追加

先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。

 

その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。
(参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう(前編), (後編)

プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は前述の方法を使わず、Macアプリでプロトタイプを作成できるツールをいくつかご紹介します。それぞれ機能が異なるのでみなさんの制作現場で活躍しそうなのもがあるかどうかチェックしてみてください!

 

Prott

スクリーンショット 2014-09-30 21.49.42https://prottapp.com/

Goodpatchが開発しているプロトタイピングツールのPrott。プロジェクトを作成して、コミュニケーションをとりながら、プロトタイプを作成できます。画面サイズはiPhoneからiPad、Andoroidまで広く対応しています。2014年10月よりiOSアプリを公開しました。チームで開発するための機能が充実しているので、是非、アプリ開発のフローにProttを取り入れて頂けたらと思います!

FileSquare

filesquare http://www.filesq.com/

このアプリに画像をアップロードすることで、画像の特定の箇所と他の画面をリンクさせることができます。リンクさせた箇所をクリックすることで画面が遷移するので導線の確認が可能です。このアプリはデザイン上にコメントを残すことが可能なので、細かくフィードバックを得ることができます。

FLINTO

flinto https://www.flinto.com/

他のツールと同様に画像アップロード、他の画面とリンク可能なツールです。他と異なる点が、制作したモックアップにアクセスできるURLが生成され、それをiOSデバイスに送信することで本物のアプリのように動きを確認できます。生成されたURLを開くとホーム画面に追加するよう求められ、追加することで本物のアプリのように、アイコン付きでホームに追加されます。

CONCEPT.LY

concept http://concept.ly/

他のツールと同様に画像アップロード、他の画面とリンク可能なツールです。このアプリはチームメンバーとの共同作業がしやすいようです。

LiveMock

livemock http://www.livemock.com/

他のアプリ同様、画像の特定の箇所と他の画面とリンクさせることが可能です。このアプリは画像にコメントを残すことが可能です。さらにプロジェクトを複数人で管理可能で、チームメンバー、お客さんからのフィードバックもこのアプリで確認できる。

fluid

fluid http://www.fluidui.com/

他のアプリのように画像をアップロードしてリンク機能が使えるツールですが、これはアプリ作成でよく使われるパーツがあらかじめ用意されているので、それらを並べるだけでもアプリのモックアップを作成できます。

balsamiq

balsamiq http://www.balsamiq.com/

このツールは他のとは少し違っていて、画像をアップロードするのではなく、あらかじめ用意されている手書き風のパーツを組み合わせたり、文言を入れることでモックアップを作成するツールです。サイトの導線を簡単に伝えるにはいいツールかも知れません。

axure

axure http://www.axure.com/

画像やオブジェクトを配置して、モックアップを作成できるツール。他のアプリと同様にリンク機能があります。このアプリがおもしろいのは作成したモックアップをHTML, CSS, Javascriptなどで書きだすことが可能で、完成品をWebで見ることができます。実際にWebで確認できるのは嬉しいですね。

BRIEFS

briefs http://giveabrief.com/

画像の特定の箇所と他の画面をリンクさせられるだけでなく、アニメーションなどもモックアップで表現出来ます。作成したモックアップを他の人に送ることで、専用のiOSアプリからアニメーションや動きのあるモックアップを確認することができます。本物のアプリのようなモックアップが作成できるのですが、iPhone、iPadのモックアップしかつくれないのが残念です。

以上です!

いかがでしたでしょうか?これらのツールは少し高価ですが、動きを伝えるにはとても有効な手段だと思います。個人的にはBriefsで作るモックアップがかなり本物に近くて驚きました。弊社サービスのprottは自信を持ってお勧めしますが、いろいろ試してみた上で、みなさんのお仕事に役立つものが見つかると幸いです!

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。