はじめに

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

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

Prott

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

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

用途：アニメーション

最近になって Google が買収して無償化された PC アプリおよび Web サービス。
Xcode をインストールしておくと iOS シミュレーターで直接動作させることが可能。iPhone / Android 実機に専用アプリをインストールしておくとそちらでも同期させられる。
現在のところは一画面に特化しているので複数画面、画面遷移までは扱えない。

Flinto

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

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

Atomic

用途：アニメーション

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

Framer

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

POP

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

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

CanvasFlip

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

Sketch

用途：UIデザイン

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

Replia

用途：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

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://qiita.com/items/e64a390ab3bb1752771f

Creo

Fluid UI

Proto.io

Justinmind

Marvel

UXPin

Form

Mitya

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

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

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

ペーパープロトタイピング・パッド。
（ピクセル定規は売り切れ？）

Prott Sketch Book

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

UI Stencils

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

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