UI/UX、ワイヤフレーム制作に便利なツールのまとめ
今回はアプリのUI/UX・ワイヤフレーム制作のためのプロトタイプツールについて、自分メモ的にまとめたいと思います。
InVision
WEB＆モバイルアプリ向けのプロトタイピングツールです。プロジェクト管理やバージョン管理が可能です。 複数人での共同作業にとても優れており「InVision」では指示箇所に手描きで追記したり、テキストや音声でチャットしたり 別のツールを使うことなくアプリ内でコミュニケーションを完結できます。 基本利用料は無料で、保存容量無限などの機能が追加されたエンタープライズ版もあります。 外部サービスとの連携も充実していて、Dropbox/GoogleDrive/GitHubとの同期や、slack/HipChatなどのチャットサービスとの連携が可能です。現在は英語版のみです。
Flinto
大まかな利用方法は、グラフィックアプリなどで静的なUIを制作した後、FlintoのWEBサービス内から画像をアップロードし、画面ごとにボタンなど反応するエリアを選択して、リンク先をつないでいき、画面間の動きを付ける流れです。後はスマートフォンに専用アプリをインストールして、本物のアプリのように動作が確認できます。お試し期間として1ヶ月間は無料です。 アプリはiOS版のみ。英語版のみです。
Pop
紙に手で描いたペーパーモックアップをスマートフォンのカメラで撮影して取り込むか、グラフィックツールで制作した静止画像をアップロードした後、画面間の遷移などの動きを付けるタイプです。Dropboxとの同期も可能です。英語版だけでなく、日本語にも対応しています。これは貴重だと思います。 アプリもiOS/Android/Windowsをサポートしています。
Prott
こちらも紙に手で描いたペーパーモックアップを撮影したり、デザインツールでUIを制作した後、画像データをアップロードして動きを付けるタイプです。国内企業発のサービスです。 日本企業が日本語でサポートしている点はとても安心感があります。 Slack/Hipchat/Dropboxなどの外部サービスを連携できたり、Sketch向けにはプラグインの提供もあります。アプリはiOS/Androidをサポートしています。
marvela
シンプルで使いやすそうなUIです。 モックアップ用のアプリ(iOS/Android)も提供しています。 アプリもiOS/Android/Windowsをサポートしています。
Cacoo
WEBブラウザー上で図の作成・編集・共有ができるオンライン・ドローイングツールです。 どちらかといえばUXデザイナーが使うプロトタイプツールというよりも、ディレクターがワイヤーフレームを作成することに向いています。 あらかじめ、ワイヤーフレームに必要なライブラリーが用意されている点も非常に使い易いです。 作成した図形を共有し、箇所ごとにコメントを返してもらうなど、サービス内で図形の確認作業も可能となっており、常にWEB上に共同編集できる形で、最新版のワイヤーフレームを管理できます。 このサービスは2015年11月現在も使っています。
Sketch3
試してみたいのですが、使えていません。デスクトップ向けのアプリとなっており、アプリケーションはMac対応版のみ。ベクターベースで画面作成を行い、アプリOS毎・画面サイズ毎など一度にまとめて画像を書き出したりできます。個人的にはアプリに特化したFireworksみたいな雑な捉え方をしています。認識を間違えていたらすみません。（ええ、多分間違えています。）アプリの価格は2015年11月17日現在、99$(¥12,570)です。
Fluid UI
本サービスは、課金して使っていました。 こちらもプロトタイプツールですが、初期で用意されているボタンなどの配置イメージのパターンが充実しています。エンジニアだけどプロトタイプをつくらないといけないという赤魔導士や、手書きもグラフィックツールもいまいち手間がかかるんだよねという方にはお勧めできるかもしれません。
Proto.io
グラフィックツールで作成した画像にエリア指定やリンク指定を行い、デモを作成する流れです。 特にPhotoshopとSketchには、プラグインが用意されており連携もスムーズです。 月額課金制でFreelancer/Startup/Agency/Corporateの4つのプランが用意されています。 15日間のお試し無料期間があります。
Atomic
現在はβ版ですが、シンプルなUIで使い易そう。正式リリースが楽しみです。
Justinmind
こちらはSketchと同様にローカルにインストールするタイプのアプリケーションです。Adobeのツールのようなインタフェイスをしています。
Moqups
Cacooに近いイメージです。ボタンやセレクトボックスなどのパターンが初期状態で用意されており、ディレクターやエンジニアが画面設計時にWEBやアプリのワイヤーフレーム作成に向いていると思います。
Project Comet
http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html
遅れた感はあるもののAdobeのツールが2016年に予定されています。クラウドサービス化したAdobeのツール群の1つとして登場するため、他ツール連携を考慮すると一気に定番になる可能性が高いです。 個人的には色々、契約を増やしたり、時間が経つ毎に細かく比較していくのも面倒だし、どのサービスもパクリパクられで似た感じなら、できればAdobeに1本化したいなと思っているのが正直なところです・・・
あとがき
これだけ長々と紹介した後でアレなのですが、手描きかグラフィックツール（Sketch3/Photoshop/Illustrator）を使って静止画作って、動きつけるプロトタイプツールを使うのであれば、正直言って基本機能はどれも充実してきているので、どれでもよいかなと思っています。あくまでもツールなので、大切なのは最終的なアウトプットされるプロダクトだと思います。チームやプロジェクトにフィットした選択をすることが大切だと思います。
そして、これまた全てを無に帰すようなコメントですが、ワイヤーフレームの作成ツールについては、完全に個人的な問題なのですが人生の合計でPowerPointで1万枚位資料をつくっていますので、慣れ過ぎた結果、他のツールはレスポンスや時間かかり過ぎて使ってられないということに気付いたこの頃です。共有もPowerPointOnlineとかOneDriveに上げればできてしまいますし・・・いや多分もっとスマートなやり方ありますよね。描いたPowerPointをインポートできるサービスができれば絶対使うんですが・・・（ちなみにアウトプットはcacooができます）
それはそうと、圧倒的な資本を持つAdobeから決定的なツールがでれば、他のサービスはどうなるんだろうな・・・ ふとそんなことを思いながら無表情で天井のシミを見つめているガバオでした。