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

  • 444
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

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

その他参考になる記事