More than 5 years have passed since last update.

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

Last updated at 2016-05-26Posted at 2015-10-07

はじめに

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

その他参考になる記事

455

457

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up