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

# はじめに

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](https://developer.apple.com/downloads/?q=Graphics)** に同梱されている。（要 Apple 開発アカウント）
これに Facebook Origami と組み合わせるという方法もある。

[Qiita: QuartzComposerでiOSアプリプロトタイピングする必要があるのか #vgadvent2014](http://qiita.com/items/abf907de8a9a3a56162c)

## 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の新機能「レスポンシブ・デザイン・モード」でスマホ表示やユーザーエージェント偽装が簡単に](http://www.danshihack.com/2015/10/04/junp/safari-9-responsive-design-mode.html)

## 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 のステンシル、スケッチパッド。ペーパープロトタイプの道具として。

# その他参考になる記事

- http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
- http://qiita.com/items/8dd80f70029ce2c02ee8
- http://www.cooper.com/prototyping-tools
- https://en.wikipedia.org/wiki/Comparison_of_software_prototyping_tools
- http://socialcompare.com/en/comparison/mockup-wireframing-design-tools
- http://www.techdoll.jp/2012/08/02/wireframe_templates/
- http://blog.codecamp.jp/wireframe_tools_for_application/