注目のプロトタイピングツールまとめ-アプリのUIデザイン
こんにちは。デザイナーの飯山です。
夏の暑さも都内では落ち着きすっかり秋めいてきました。9月のシルバーウィークの過ごし方に想像を膨らませる今日この頃です。
さて、今回は数多くあるプロトタイピングツールの中から注目のツールをまとめてご紹介したいと思います。「なぜ？」「なにそれ？」という方もいらっしゃるかもしれないので、シナップでのプロトタイピング活用事例について少し触れたいと思います。
SINAPではR&D活動に取り組んでいます。新しい技術や制作手法を用いてトライ&エラーを繰り返すR&D活動では、アジャイル型の開発で進めていることもあり各種プロトタイピングツールをその時の目的に応じて使用しています。
R＆D活動の近況はSINAP Journalでも掲載していて、SINAPのR&Dチームのひとつで取り組んでいるブラウザで読める電子書籍公開サービス『パン』β版にも掲載されてるのでご興味ある方は是非ご覧ください。
【SINAPでのプロトタイピングについて】
プロトタイピングの目的
設計・デザイン・実装を行う各場面でディティールを作り込む前に、プロトタイプとしてチームメンバーで共有し、イメージの擦り合わせを行うのが目的のひとつです。 事前に「やること」と「やらないこと」を決め、さらに「やること」の中でも優先順位付けをしてプロダクト開発上のムダを省きます。 SINAPではメンバーが皆、リーンスタートアップの手法を学んでいるのですが、ここでいうところのMVP(必要最低限機能)の構築を実践しているわけです。
気をつけるべきは、プロトタイプの作成には極力時間を費やさないことです。口頭やメモで伝えて解決できるのであればプロトタイプを作成する必要がない場合もあります。むしろ、チームメンバー同士で話し合って仮説を立てたり、検証した結果を分析したり課題解決のための学習に時間を使うべきで、それを効率的に行う手段として割り切ることが大事です。
プロトタイピングのタイミング
設計段階でワイヤーフレームの画面遷移を検討したり、ボタンをタップした後の動きなどインタラクションの検討をする際にプロトタイピングを行っています。デザイナーがUIなど詳細なデザイン作成に入る前や、エンジニアがデザインを反映する実装を行う前ということが多いです。
プロジェクトの進め方にもよりますが、アプリ開発やWebサービス開発などマーケットの状況変化に対応すべきプロダクトを生み出す際に、プロトタイピングは効果を発揮しやすいと感じます。
【注目のプロトタイピングツール】
前置きがながくなりましたが、プロトタイピングツールをご紹介します。今回、大きく2種類にわけてまとめてみました。
「お手軽プロタイピング編」
画面の静的イメージを元にして画面遷移やその際のトランジションを伝えたい時にオススメ。
「こだわりプロトタイピング編」
ボタンをタップした時などの画面内のUIアニメーションを細かいニュアンスもしっかり伝えたい時にオススメ。
InVision
- Site URL：http://www.invisionapp.com
【新機能のアップデートが著しいプロトタイピングに留まらないコラボレーションツール】
InVisionはプロジェクトメンバーとのプロトタイピングをデザイン面で大いにサポートしてくれるワークフロープラットフォームです。
デザインデータの同期方法が豊富で様々なアプリケーションと連携しています。「InVision Sync」やPhotoshopプラグインの「LiveShare PS」をインストールすることで、同期やスクリーン取り込みが簡単に行え、バージョン管理もできます。DropboxやGoogleドライブからの取り込みも対応していて、今後はAdobe Creative Clouldにも対応予定のようです。
リアルタイムフィードバック機能により、デザイン画面を共有してコメントを交わせるのも特徴的です。 UIデザイナーに嬉しい「SOCIAL SHARE」機能では、InVisionからDribbbleへ投稿ができます。Behanceへの投稿も対応予定のようです。
新たな機能として、スクリーンごとの進行状況を視覚的にステータス管理できるカンバン機能「Workflow」や、Lookback.ioのアカウントと連携してiPhoneで操作中の画面とユーザーの表情を録画できるユーザーテスト機能や、共有イメージギャラリーの「Boards」など、活用シーンもさらに拡がるのではないでしょうか。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
POP
- Site URL：https://popapp.in/jp
【ペーパープロトタイピングに最適！】
手書きで書いたラフスケッチをモバイルアプリのカメラで撮影してスクリーンとして取り込めるので、簡単にプロトタイプの作成ができます。手書き用スケッチパッドのPDFデータもPOPサイトからダウンロードできます。 DropboxやAdobe Creative Cloudと連携でき、これらのクラウド上にある画像データを取り込むこともできるのでとても便利です。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
Prott
- Site URL：https://prottapp.com
【使い勝手が良く、ワイヤーフレーム機能が便利！】
UIのデザインと設計に特化しているGoodpatchさんが開発しており、かゆいところに手が届くとても使い勝手の良いプロトタイピングツールです。
リンク先の画面を線で繋いで設定する点、スマートフォンアプリのカメラ撮影で手書きのワイヤーフレーム画像も取り込める点などPOPと同様に使えます。
他には無いワイヤーフレーム機能が魅力的で、ドラック&ドロップで要素を配置して簡単にワイヤーフレームを作成できます。コンポーネントをグループ化して登録しておけるので繰り返し使うパーツには効率的です。この機能を使えるのはProプラン以上になりますが、1ヶ月のトライアル期間で試すこともできます。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
Marvel
- Site URL：https://marvelapp.com
【埋め込みや公開もできる優れたシェア機能！】
InVisionに似た操作感でプロトタイプが作成でき、Dropbox上のPhotoshopや対応プラグインがあるSketchはデザインデータの取り込みも簡単にできます。 Marvelは、inVisionと同様にLookback.ioのアカウントと連携してモバイルアプリでユーザーテストを録画できるURLを送ることができます。また、埋め込みコードの抽出もでき、ショーケースのような見た目で公開することもできたりとシェア機能に優れていています。
モバイルアプリは音とキャラクターが可愛らしく心地よい操作感です。POPやProttと同じくカメラ機能から取り込むことができますが、他社との違いのひとつとして、フリーハンドで描画ができてスクリーンとして取り込むことができます。また、手書き用の台紙としてスケッチペーパーのPDFが公開されているのも便利です。 有料プランでは、Androidアプリのapkファイルとして書き出すこともできたり、これからのアップデートも楽しみなツールです。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
Atomic
- Site URL：https://atomic.io
【優れたGUIでインタラクションだけでなくUIデザイン作成も軽快！】
ニュージーランドで開発されているツールで、2015年8月現在はGoogle Chromeで動作するbeta版を無料で使用できます。9月には料金プランが明らかになるようです。
全て英語ですが、たくさんの機能がすっきりまとまったGUIなのでとても使いやすく、ブラウザ上で動作していることも忘れてしまうくらいです。
機能としては、css抽出可能なUIデザイン、イージングなど詳細なインタラクション設定、プロジェクトファイルへのコメント追加、プロジェクトへのユーザー招待、リンクURLによるシェアなど一通りの画面デザインとインタラクションを含めたプロトタイプが作れてしまいます。
ヒストリーで制作過程を遡れるのもとても便利で、PhotoshopとSketchからコピーして画像としてペーストもできます。ベクター素材やIllustratorからのコピー・ペーストはまだ対応していないようです。
現時点でかなり便利ですが、スマホ実機でリアルタイムプレビューができないので、今後のアップデートにも期待したいです。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
Pixate
- Site URL：http://www.pixate.com
【Googleお墨付きで無料で使えて実機確認もスムーズ！】
先日Googleの傘下に加わったことでも知られるPixateは、ネイティブアプリの複雑なアニメーションをコードを書かずにプロトタイピングできます。
プロトタイプの作成や編集はデスクトップアプリ「Pixate Studio」をインストールしてローカル環境で行い、iOSシミュレーターで作成中のプレビューができます。モバイルアプリをシンクさせれば作成中の実機確認もスムーズに行えます。
作成したpixateファイルはクラウドサービスの「Pixate Clould」に保存もでき、共有リンクのシェアが可能です。共有先での実機確認にはモバイルアプリが必要となりますが、操作中の画面を録画できるのでユーザーテストとして記録をすることもできるのも魅力的です。
サンプルデモが豊富でファイルをダウンロードできるので、アニメーション構成の参考として学習もしやすいと思います。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
Principle
- Site URL：http://principleformac.com
【Sketchユーザーなら直感的に操作できてオススメ！】
Sketchを触った事ある方なら操作画面が似ているので簡単にUIデザインから作れます。Sketchからパーツのコピー・ペーストもシームレスでした。
パーツごとにアニメーションを設定でき、線で結んでリンク先を繋ぐ点はPOPやProttと近いです。タイムラインと線グラフで視覚的に確認しながら、アニメーションの速さやイージング調整をできる点はとても使いやすいと思います。
実機確認ができるiOSのMirrorアプリは日本のApp Storeでは未対応のようですが、デスクトップ上のプレビューでは録画もできます。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
Proto
- Site URL：https://proto.io
【豊富なアセットパーツで簡単にワイヤーフレーム作成、細やかなアニメーションの制御も可能！】
ProtoにはiOSやAndroid以外にも様々なライブラリがあり、UIエレメントはアセットパーツが豊富に用意されています。任意のカラム数を入力してグリッドシステムを表示しながらアセットパーツを配置することもできるので、整ったワイヤーフレームが簡単に作成できそうです。
色調補正の機能もあり、画像の色味を変えたりぼかしやシャドウを加えることも可能でです。アセットマネージャーではギャラリーからサンプル画像やアイコンを選択したり、具体的なモックアップをある程度まで作成できます。
Principleのようにタイムラインでアニメーションの微調整もできたりと機能が盛りだくさんです。
| 料金 （月払の場合） |
|
|---|---|
| アプリケーションの種類 |
|
まとめ
各サービスの機能追加も日々行われ使いやすくなるのは、いちユーザーとしても楽しく嬉しい限りですが各種ツールの使い方を学ぶのも大変だと思います。私自身、モックアップは手書きで進めたり、部分的な動きはKeynoteやAfter Effectsで済ませてしまうこともあります。プロトタイピングなどのツールは大好きなのですが、最終的なゴールに辿り着く効率的な方法を考えていくマインドは日々持ち続けたいなと思います！
