導入のためのPrototype tools比較(InVision/Figma/Adobe XD)

諸般の都合で一回現時点の比較検討をした方が良さそうだったので、ざっと調べてみました。気が向いたら随時アップデート予定。

いやいやこっちのが絶対いいから！！的なご意見あればお待ちしております。助かります。

## InVisionhttps://www.invisionapp.com/
価格表: https://www.invisionapp.com/plans
フォーラム: https://support.invisionapp.com/hc/en-us/community/topics
現在はプロト, WF作成あたりがメインで、今後PJメンバー間での情報共有, アートディレクター向けの守備範囲に機能拡張しようとしている印象。

(大まかな機能は下記)
プロトタイプ作成(CraftプラグインでSketch/Photoshopと同期可)
イメージボード作成
ホワイトボード
WF作成
モックなどへのFeedback＋進捗ステータス管理
座標, 色, 文字スタイルなどの出力
変更履歴管理
InVision DMS(early access): デザインシステムマネジメントツール
InVision Stuido(early access): アニメーション重視プロト

Pros
利用率の高さ(ナレッジ共有できれば学習コストが下がるのが早い)
アクティブなフォーラム的な場所があるhttps://invisioncommunity.com/
Slackなどと連携できる(FBコメントついたらnotification流れるとか)
作成したプロトの権限制御付きシェアが結構柔軟(→もし社外の人とかに共有したいとなった時結構重要)
InVision自体の描画力はかなり非力。(その分、CraftというSketchのプラグインでsketchと連携しやすくなる様頑張っている)

Cons
日本語対応していない
プラグインの開発とかがInVision社。プラットフォームの拡張に若干の閉塞感があるかも。
無料プランで作れるのは1projectまで
無料で使える範囲が結構狭め(機能を試すには十分な範囲ではある)

## Figma
https://www.figma.com/
価格表: https://www.figma.com/pricing/
フォーラム: https://spectrum.chat/figma ※他社のWebサービスに乗っかる形でwebフォーラム的なものを運用している模様
→ WF～超シンプルなグラフィックを同時編集できるようにするツール。
Collaborationできる！という面が現在(2018年)の一番の推しで、Web版とインストール版が両方ある。
※Enterpriseプランが2018リリース予定。

Pros
フラットデザインならギリギリ対応できる描画力を内包している
(軽くいじってみた感じ、Sketchが使えればツール自体の初期学習は殆ど不要な印象です)
共同編集ができる →デザイナーさん&ディレクターさん、デザイナーさん&エンジニアさんとかで直接同時にデータをいじれる
2editorまで無料(コメントはできるViewerは無制限)
チーム間共有できるライブラリが作成できる
30日間分のVersion historyを自動保存
zeplinと連携させて座標出力もある程度できる

Con
- (SketchやPhotoshopと比べると)もちろん描画力はちょっと貧弱
コンポーネント管理の自由度/気の利き具合はSketchのが上
ENしかない
(Web版だと)Localフォントがまだ素直に読み込めない模様

初期状態で日本語が入ってない　→ローカルのフォントを入れることはできます

https://www.gekkoseisaku.com/blog/web-design/2637/

(Bussinessアカウントにするとできること)
無制限プロジェクト
無制限バージョンヒストリー
チームコンポーネントライブラリの作成
Slackとの統合？
Sketch読み込ませると多少壊れる(角Rとか、レイヤーごとの透過度とか)

使ってみた系記事(JP)
http://www.intrix.co.jp/blog/2017/08/17/figma_overview/
http://www.sonicjam.co.jp/blog/hitori/001622/

## XD
https://www.adobe.com/products/xd.html
値段: (無料の1Editorライセンス or Adobe CC)
機能リリースニュース: https://www.adobe.com/jp/products/xd/features.html
機能追加リクエストフォーラム: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests
ご存知adobe製プロトツール。フラットデザインレベルのグラフィック描画力は内包している。

Pros
Photoshop (Illustrator)とのデータ連携
機能開発の速度
多分Adobeの他ツールとショートカット類はある程度揃えられているはず
(将来的な部分も視野にいれると)JSX等々によりadobe以外の人たちでの改善速度も早そう
日本語に対応

Cons
チームで使う場合のランニングコストは多分一番高い
今この瞬間的な視点で見ると、他の選択肢と比べて特別高機能だったりする訳ではない
(デザイナーがいじると、グラフィック完成形位まで持っていかないといけない気分になりそう)