Android
UI
MacOSX
iOS
プロトタイピング

プロトタイピングツール集

More than 3 years have passed since last update.


はじめに

iPhone の登場から日本でも次第にアプリや Web における UI, UX というものが重視されるようになりましたが、昨今はプロトタイピング・ツールが盛り上がりつつあるようです。毎年いろいろなツールが登場してきているので、ここでは特に気になったプロダクト(一応モバイル方面、特に iOS/Mac に近い所)を自身のメモも兼ねて挙げていきたいと思います。


プロトタイピング・ツール / サービス


Prott

https://prottapp.com/

用途:ワイヤーフレーム設計、ペーパープロトタイプの取り込み、画面遷移設計、共有

Goodpatch が開発したプロトタイピングツール。エディターでワイヤーフレームを描くこともできれば、Sketch からデータを読み込むこともできる。リンクをつないで Web やモバイル端末でプレビューすることも可能。

Sketch プラグイン

https://blog.prottapp.com/post/ja/sketch-integration


Adobe Experience Design CC (旧Project Comet)

http://www.adobe.com/jp/products/experience-design.html

http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html

http://www.atmarkit.co.jp/ait/articles/1510/06/news055.html

用途:UIデザイン、画面遷移

Adobe 製のプロトタイピングツール。


inVision

用途:画面遷移、共有

http://www.invisionapp.com

http://www.atmarkit.co.jp/ait/articles/1502/02/news017.html

プロジェクト管理、バージョン管理機能もあるらしい。


Pixate

http://www.pixate.com

用途:アニメーション

最近になって Google が買収して無償化された PC アプリおよび Web サービス。

Xcode をインストールしておくと iOS シミュレーターで直接動作させることが可能。iPhone / Android 実機に専用アプリをインストールしておくとそちらでも同期させられる。

現在のところは一画面に特化しているので複数画面、画面遷移までは扱えない。


Flinto

https://www.flinto.com/mac

用途:アニメーション設計

Keynote の感覚で開始と終了を指定するだけで簡単にイージングの効いたアニメーションが作れるツール。Prott のようにリンクの接続も可能。


Atomic

https://atomic.io

用途:アニメーション

Web で動作するプロトタイピングツール。アニメーションをタイムラインで細かく定義することができる。


Framer

http://framerjs.com

CoffeeScript でプロトタイピングできるツール。

コードを書いてリアルタイムにパラメーターを変更しながらアニメーションを作れる。パラーメターを変更するGUIも用意されている。


POP

https://popapp.in/jp

用途:ペーパープロトタイプの画面遷移

台湾発のスタートアップが開発した、ペーパープロトタイプの画面遷移を簡単実装できるアプリ。

iPhone 実機でも実装できる。


CanvasFlip

http://www.canvasflip.com

インド発のプロトタイピングツール。

http://thebridge.jp/2016/05/canvasflip-gives-designers-ux-analytics-without-user-feedback-pickupnews


Sketch

http://www.sketchapp.com

用途:UIデザイン

UI デザインに特化した Mac アプリ。Photoshop よりも直感的に操作できる。使い方次第でそのままモックの制作にも。iOS 実機でのプレビューも可能。様々なツールが Sketch 対応を謳っているので、GUI をやる人はデベロッパーであれ必須アプリにしたいところ。


Replia

http://www.replia.io

用途:Photoshop, Sketch のデータからネイティブコードを生成

日本のスタートアップが開発した、Photoshop や Sketch のデータを読み込んで Xcode プロジェクトファイル(Objetive-C/Swift/nib)に出力できる Mac アプリ。

簡単なモック程度であれば AutoSizing ベースのネイティブアプリ化はできる印象。


Quartz Composer+Facebook Origami

https://ja.wikipedia.org/wiki/Quartz_Composer

https://facebook.github.io/origami/

Quartz Composer 自体は意外と歴史のあるビジュアル・プログラミング環境。入力映像に Core Image フィルタをかけたりできるものだが、使い方次第ではプロトタイピングにも使える模様。Quartz Composer は ADC で追加配布されている Graphics Tools for Xcode に同梱されている。(要 Apple 開発アカウント)

これに Facebook Origami と組み合わせるという方法もある。

Qiita: QuartzComposerでiOSアプリプロトタイピングする必要があるのか #vgadvent2014


Origami Studio

http://thenextweb.com/dd/2016/04/14/facebook-origami-studio/

Quartz Composer がメンテされず放置されているため、改めてアプリとしてリリースする模様。


Safari

用途:iOS Web / レイアウト確認等

Safari 9 の「レスポンシブ・デザイン・モード」が iOS Web 向けのデバッグに役立つ。iOS 限定ではあるが、同じベンダー(Apple製)、同じエンジン(WebKit)なので Chrome よりもレンダリング結果は近いかもしれない。

Safari 9の新機能「レスポンシブ・デザイン・モード」でスマホ表示やユーザーエージェント偽装が簡単に


Keynote

http://www.apple.com/jp/mac/keynote/

https://itunes.apple.com/jp/app/keynote/id409183694?mt=12

用途:ワイヤーフレーム設計、簡単なアニメーション

Keynote はプレゼンテーション用ソフトウェアだが、なめらかなアニメーションを簡単に実装でき、iCloud で同期する iOS アプリもあるのでモバイル端末でも確認しやすい。Apple はプロトタイピングではまず Keynote を推奨しているが(WWDCのセッションで言っていた)、より複雑なことをやりたいなら他のソリューションの方が良いと思う。


iOS シミュレーター

用途:iOS Web / レイアウト確認、モックアプリの動作確認

Xcode に付属するアプリ。iOS のデバッグビルドを動作検証するためのシミュレーターだが、機能は限定的とはいえほぼ iOS と同じように動作する。

Pixate などのツールと合わせて使用したり、Web なら Mobile Safari を使って確認することに使える。


Chrome

用途:Web / レイアウト確認等

Safari 9 は iOS 限定だったが、Chrome のデベロッパーツールは iOS / Android どちらにも対応している。


未整理・未確認


Pencil

http://pencil.evolus.vn

用途:画面遷移図

解説記事: http://qiita.com/items/e64a390ab3bb1752771f


Creo

http://creolabs.com


Fluid UI

https://www.fluidui.com


Proto.io

https://proto.io


Justinmind

http://www.justinmind.com


Marvel

https://marvelapp.com


UXPin

http://www.uxpin.com


Form

http://www.relativewave.com/form/


Mitya

http://www.mitya-app.com


ペーパープロトタイプ向けの道具

ソフトウェア以外のものなど。


THE GUILD ペーパープロトタイピング・パッド

https://theguild.stores.jp

ペーパープロトタイピング・パッド。

(ピクセル定規は売り切れ?)


Prott Sketch Book

https://prott.stores.jp

iPhone の枠が印刷されている、ペーパープロトタイピング向けのスケッチブック。


UI Stencils

http://www.uistencils.com

iPhone / iOS のステンシル、スケッチパッド。ペーパープロトタイプの道具として。


その他参考になる記事