プロトタイピングツール「Prott」「Flinto for Mac」少し触ってみた

2017.3.24 / 

こんにちは。REASデザイナーのオカザキです。

皆さんはプロトタイピングツールは何か使用されていますか?
実はREASのクリエイティブでは今までプロトタイプを作る機会が少なく、プロトタイピングツールにはあまり縁がありませんでした。


が、先日、プロトタイプ試用によるユーザーレビューを頂く機会があったため、画面遷移するだけの簡易プロトタイプを「Prott」で作成してみました。その流れで以前から気になっていた「Flinto for Mac」も小一時間使用してみたので、今回はこの二つのツールで簡易プロトタイプを作成し何ができるのか比較します!

ProttとFlintoを少し触ってみた

 

 

 

前提:簡易プロトタイプで表現したいこと


今回使用するサンプルデザインはこちらの計3画面。
バナーやユーザーリストのあるTOPと、オーバーレイ、プロフィールページ。
画面遷移サンプル

 

▼今回表現したい6つの動き

  1. お知らせボタンタップでオーバーレイ表示させたい
  2. バナーカルーセルはフリックでバナーを切り替えたい
  3. スイッチON/OFF切り替えたい
  4. ユーザータップ時、プロフィール画面を右からスライドで表示させ、右スワイプで閉じたい
  5. 画面全体スクロール(ヘッダー/フッター/右下検索ボタン固定)
  6. フッター中央ボタンはスクロール時サイズ変化させたい

 

シンプルでよくある動きですが、ProttとFlinto for Macではどこまで表現できるでしょうか。

 

※今回は主に画面遷移や使用感を確認するだけの簡易プロトタイプ作成が前提なので、ワイヤーフレーム作成機能などは使用していません。
※作り方は各サービスのヘルプを参照してください。

 

 

 

プロトタイプ比較結果


とういうことで、下記は実際に作成したプロトタイプの比較動画です。
ほぼ一緒に見えて地味に違うので、注意深く見ないと違いを見逃すかもしれません…

 

 

違いを見分けられたでしょうか?

 

Prott
簡易な画面遷移体験ができる。

 

Flinto for Mac
インタラクション含め完成版に近い操作体験ができる。

 

という感じかなと…
求めるプロトタイプのレベルに応じて使い分けると良いと思います。

 

 

 

作成画面の簡易比較


前述した「今回表現したい6つの動き」をどんな感じで作成したのか、作成画面の簡易比較も少し紹介します。
※作成方法ではないので、詳しい使い方は各サービスヘルプを参照してください。

 

0. 作成画面

Prott
レイヤー機能なし。Sketch連携できますが反映されるのは画面画像のみです。各種トランジション設定はわかりやすく用意されているので初心者でも扱いやすいです。

Prott作成画面

Flinto
Sketch連携した際、Sketchのレイヤー構造を引き継げます。トランジション・ジェスチャー・その他パーツプロパティを詳細に設定できます。

Flinto for Mac作成画面

 

 

1. お知らせボタンタップでオーバーレイ表示

Prott
トランジション設定に「オーバーレイ表示する」という項目が設けられているので、それを設定するだけでOK。

Flinto
オーバーレイに限らず画面遷移時にトランジション追加したい場合「トランジション編集」で遷移開始/終了時の状態をそれぞれ作成することで表現できます(文字で書くと説明しづらい…)

オーバーレイ

 

 

2. バナーカルーセルはフリックでバナー切り替え

Prott
同一画面でカルーセル表現はできません。

Flinto
「スクロールグループ」機能でグループ毎に横/縦スクロールを設定できます。

スクロールグループ

 

 

3. スイッチON/OFF切り替え

上記の動画で見るとマイクロインタラクションの有無がわかりやすい部分です。

Prott
ON/OFF画像2枚用意して画面遷移させて表現できます。

Flinto
パーツの状態変化は「ビヘイビア」機能で作成でき、もちろんインタラクションの細かい設定もできます。

スイッチ

 

 

4. 画面を右からスライドで表示させ、右スワイプで閉じたい

Prott
「トランジション設定」で上下左右どこからでも表示でき、ジェスチャー指定もできます。

Flinto
オーバーレイの時と同じく「トランジション編集」で表示設定でき、下図の様に「戻る(バックリンク)」も簡単に設定できます。

スワイプ

 

 

5. 画面全体スクロール(一部固定)

上記動画だとPrott側は右下の検索ボタンが固定されていませんが、下記の様な仕様のためです。

Prott
上下のみ固定エリアを設定できます(下図だと上から83pxは固定)

Flinto
「スクロールグループ」機能で設定したグループのみスクロールできるため、一部パーツを固定という表現もできる。

スクロール

 

 

6. フッター中央ボタンはスクロール時サイズ変化させたい

Prott
できないよ…

Flinto
上記の動画では一瞬しか見れないのですがスクロール時に地味にサイズ変化してます。
「ビヘイビア編集」でサイズ違いを新規作成し(下図左)、スクロールジェスチャー時に変化するよう設定する(下図右)と表現できます(文字で書くと説明しづらい…)

ビヘイビア

この設定は果たして正しいのか実は自信ないですが、ちゃんと動いたのでOKかと思います。

 

という感じなのですが、ツールさわってない状態で見ても「何このアバウトな比較」な感じだと思うので、ぜひ「Prott」「Flinto for Mac」を試用してみてください!

 

 

総評


今回の比較を通じて受けた印象とまとめると…

 

Prott

プロトタイプ
単純な画面の切り替えだけど画面遷移体験はできる。

作成
Sketchと連携できる。
あらかじめ設定可能なトランジション・ジェスチャーが用意されているので、デザイナーでなくても誰でも簡単にプロトタイプを短時間で作成できる。

共有
iOS/Android実機、ブラウザでも作成したプロトタイプを共有できる。

 

デメリット
あくまで画面画像を使用したプロトタイプなのでパーツごとに細かい動き設定は難しい。
今回だと、スクロール時に右下の検索ボタン固定や、バナーカルーセル表現などは範囲設定的に設定が難しい。

 

 

Frinto for Mac

プロトタイプ
インタラクション含めページやアプリの完成系とほぼ同じ操作体験ができる。

 

作成
Sketchと連携でき、パーツごとに細かい動き(マイクロインタラクション・3Dアニメーションなど)を自由に作成できる。
インターフェイスがSketchとよく似ているので使い始めやすい。

 

共有
iOSアプリで可能

 

デメリット
デザインツールに慣れてる人向け。
動きの設定にこだわりだしたら当然作成時間がかかる。
共有方法が今の所iOSアプリのみでAndroidやブラウザで確認できる状態で共有できない。
そのため今回動画に納めたという経緯が…

 

 

最後に


見てわかる様に「Flinto for Mac」の方ができることが多いです。
だからと言って「Prott」よりオススメという意味ではありません。


その他のプロトタイプツールも含め、プロトタイプを作る目的や段階によって使い分けることが重要だと思います。
 UIデザインにおいて最初から常に「Flinto for Mac」を使ってマイクロインタラクションがしっかり入ったプロトタイプを作ることは実際ほとんどないはずです。
最初は紙ベース、次に単純な画面遷移プロトタイプ、次に操作感を更に検証するためのインタラクション入りプロトタイプ…など、プロトタイプ作成も段階にあわせて変わります。

 

またプロトタイプ導入はプロジェクトの初期から取り入れることで、問題点や失敗に早期に気づくことができ方向修正しやすいというのもありますが、デザイナーとして一番ありがたいのは各方面から様々な意見やアイデアが出てくるという点です。
ユーザー、ディレクター、エンジニア、マーケッターなどのアイデアを聞け、可能性も出し合えて、個人では考え付かないより良いものを作ることができます。

皆さんも是非、積極的にプロトタイプ導入してみてください!

 

と、偉そうに言っていますが、まだ自分も導入し始めた段階です。
今後REAS内でプロトタイプ作成フローを積極導入できるよう試行錯誤です!

 


 

REASに1mmでも興味をお持ちの方は是非お気軽に面談・面接にお越しください!

Skypeなどでの遠隔面談も対応しています。