feb19.jp

Nobuhiro Takahashi
Designer / Engineer

実録・300 枚規模の画面を持つ全然リーンじゃないプロジェクトの UI デザインを Prott と InVision でプロトタイプ作った感想

友人と作っている某アプリの UI デザインをしてるときに Prott / InVision 使って感じた良いとこ悪いとこをまとめました。ご参考になりますと幸いです。

Sketch / Photoshop で作った画面をアップロードし、結線して遷移を再現し、みんなで共有するという使い方をした場合の比較です。

Prott

Prott よいところ

  • 日本製で日本語サポート手厚い
  • 画面にあるメッセージウィンドウからサポートの人に質問して迅速に回答が帰ってくる
  • 人に勧めるならこちらでサポートしたくないし日本語の方がいいよね
  • ウェブインターフェースもドラッグアンドドロップで結線するだけの直感的で UI でスクリーンのファイル名適当でもOK
  • シンプルに出来ているので誰でも使える感
  • Mac アプリとかもあって GUI とか手厚い
  • 作業スクリーンと結線対象の他スクリーンという構造が割と直感的
  • 広いディスプレイを使って作業画面を最大化しサムネイルを最小にするとスクリーンを見渡せるので捗る
  • モバイルアプリがあってモバイルで作業できる(けど僕はしたいと思わない=300枚だから)

Prott よくなってほしいところ

  • プレビュー時スクリーン遷移をすると、都度ロードが走ってアプリライクな挙動にならない
  • タイマー遷移のスクリーン結線ができない
  • 途中のスクリーンからのプレビュー共有ができない(、かも。ここは僕が無知なだけかも)できました(プレゼンテーションモードから URL を取得)
  • 作業画面やや重く、数十枚規模で画像をアップロードするとブラウザが固まる(マシンのせいかも)
  • サクサク結線していきたいものの、結線直後に出てくるポップオーバーが広く画面に重なるのでやや邪魔
  • 結線中に適当なところをクリックすると自分自身にスクリーン結線をしてしまうのが鬱陶しい
  • アプリ間移動のトランジションエフェクトがなんとなく欲しい
  • トランジションとエフェクトのアイコンがわかりにくい(マウスオーバーしないとラベルが出ないからかも)

まとめると

  • 作業が視覚的・直感的にこなせる
  • サポートが激アツ
  • プレビューが弱い

InVision

InVision よいところ

  • 機能が豊富:タイマーの自動遷移、結線をテンプレ化できる
  • プレビュー時の挙動が都度ロードでないのでアプリライク、紙芝居アニメとか再現できる
  • 途中のスクリーンからもプレビュー共有できる
  • スクリーン名を綺麗につけておけば、スクリーン名から検索しやすくなっている
  • インクリメンタル検索が早かったり、ショートカットキーでパチパチ作業できる
  • 言うても慣れれば誰でも使える
  • 慣れてくると GUI から意識が乖離できて、結線先を画面全体から探して操作ということがなくなり効率的
  • なんか Trello っぽい機能もあるらしい(使ったことないっていうか Trello でやってるからいらないと思ってるけど)
  • Google Docs みたいにみんなで同時に作業できるマルチプレイ対応(したことないけど)

InVision よくなってほしいところ

  • 英語なのでなんだかんだでメンバーに嫌がられる、またはよくわかってもらいにくく、結果メンバーへのサポートを自分がしないといけないかもしれなくて恐怖
  • 各結線でスクリーン名をちゃんと指定しないといけないので、デザインデータ上か出力ファイル名をちゃんとしないといけない(当たり前だけど)
  • サムネイルのペインが横スクロールでややスクロールしづらい
  • Photoshop/Sketch ファイルを自動で処理してアートボードでインポートしてくれるが日本語とかは謎の中華フォントに変換される上に処理がめっちゃ遅いのでとても使い物にならない
  • 初回に一気に読み込むので初回のロードは比較的遅い、意識高くプレビューしすぎてると通信制限食らうかもしれない

まとめると

  • ちょっと作業がややこしく英語
  • プレビューがネイティブアプリ並みのぬるぬる挙動
  • アプリの実際の挙動に近いのはこっち

Prott vs InVisionまとめ

開発者的には Prott で遷移がわかるので十分ですし日本語で楽ですが、体験者的には InVision の方が自然にテストができます。用途によって使い分ける感じがいいんですかね。ウェブなら Prott でも OK だけど、ネイティブアプリ向けの開発であれば InVision を選択した方がいいかなと思います。

Flinto

Prott や InVision と同様に使えるプロトタイプツールとして Flinto がありますが、Flinto は一挙両得との噂で次回は Flinto 試してみようと思います。
Flinto は Prott と InVision のように数プロジェクトであればある程度無料で使えるのとは違い、30 日まで無料体験が可能でそれ以降は有料になるのが気になっておりました(某スーパー UI デザイナー氏曰く「アカウント使い捨てたらいいっすよテヘペロ」とのことでした)。

そんなことより

300 枚規模の画面を持つプロジェクトは炎上するのでやめましょう。

Navigation

prev: 数式作成ツール Math Type がめっちゃ便利
next: iPhone / iPad 向けのクロマチックチューナーアプリ「Tuner」を作りました。

Recently Entries