昨今、PhotoshopやIllustratorなどの主要Adobe製品だけでなく、Sketch3やAffinity Designerなど、他の使いやすいグラフィックソフトが出てきたりで、UIデザインツール周辺ががどんどん賑やかになっている印象でございます。

そして、UIデザインツールの中で発展・競争が目まぐるしいと感じているのはプロトタイピングツールです。

画面の遷移を簡単に作成・プレビューできるProttやInVisionなどのWebサービス、操作に合わせてインタラクティブなアニメーションを作成できるPixateやFramerなど、プロトタイピングツールは、それぞれ得意・不得意を持ちつつも、どんどん進化しているように思います。

今回は、ネイティブアプリとして使用できる【Flinto for Mac】と【Principle】というツールを試用してみましたので、その所感と、それぞれの良い所と気になったところをまとめました。

Flinto for MacとPrincipleのご紹介

Flinto for MacとPrincipleの使い方

両ツールともおおまかな使い方は一緒です。

基本的には遷移する画面ごと、イベントごとにアートボードを作成し、そのアートボートを想定しているジェスチャー（タップ・スワイプ・ホバー等）で繋げていくという作成スタイルです。

下記の動画を見ると、どんなことができるのか分かりやすく紹介されています。

Flinto for Macのイントロダクション

Principleのイントロダクション

動画をみると、動くプロトタイプがどれほど簡単に作成できるかに驚きます。

1. 要素を配置
2. リンクをつなげる
3. トランジションを設定する

この操作の繰り返しで、どんどんプロトタイピングが出来上がっていきます。

Flinto for MacとPrincipleの魅力

この2ツールの共通して素晴らしいところは、プログラミングの知識をいっさい必要としないところです。

コードをいっさい書くことなく、インタラクティブなプロトタイプを作成できるので、ソフト内で出来ることに比べて、学習コストがすこぶる低いことが、この2ツールの最高なところです。

「画面遷移やインタラクティブアニメーションを、企画段階でサクッと作る」ということ以上は、今の所できないようですが、チーム内のイメージ共有やクライアントへのプレゼンテーションには、とても効力を発揮するのではないでしょうか。両ツールとも、プレビューの録画機能がついており、gifや動画ファイルへの書き出しが可能となっています。

Dribbbleで各ツール名で検索すると、FlintoやPrincipleで作られたプロトタイピングを見ることが出来ます。

Dribbble – FLINTO

Dribbble – Principle

Flinto for Mac

Flintoは、macOSのみ対応のアプリで、公式サイトかMac App Storeで購入することができます。14日間のお試し版もあります。
元々はWebサービスとして（現Flinto Lite）始まったようですが、ネイティブアプリとして様々な機能が追加されてリリースされたみたいです。

試用した所感としては、トランジションの追加や編集が直観的で、3D表現ができる（しかも簡単に）のが素晴らしいと感じました！
一方、ボタンなどの一要素に対するアニメーションは、少しコツがいるようで、慣れるまでにちょっと時間がかかりそうです。

FLINTO for Mac – デザイナーが待ち望んでいたプロトタイプツールの登場

Flinto for Macの良いところ

• トランジション（画面遷移時のアニメーション）の設定が簡単
• 3D表現ができる!!（回転にZ軸プロパティがある。）
• アニメーションgifや動画ファイルを配置できる（プレビューで再生することもできます）
• リンクの作成方法が２種類!!(レイヤー・グループに設定とホットスポット作成）
• バックリンクの作成が簡単
• 実機プレビュー用のiOSアプリが無料!!!!
• 日本語ドキュメントが増える予定

Flinto for Macの気になったところ

• 図形描画がまったくできない(単純な矩形でさえも!!)
  
  バージョン1.5より矩形の描画ができるようになっていました！丸角の調整もでき、円形も描画できるようです。
• ライブプレビューが隠れてしまう。（編集ウィンドウをアクティブにしても常に前面表示にしてほしい）
• 表現可能なアニメーションかどうか、判断がつきづらい（トランジション編集の熟練度によるところが大きい）

Principle

AppleのエンジニアだったDaniel Hooperさんが開発したプロトタイピングツールです。
こちらは比較的新しいアプリで、ドキュメントもFlintoほど充実してはおりませんが、Flintoではできない図形描画ができることから、もっともデザイナーと親和性の高いツールだと思いました。
使ってみた所感では、タイムライン操作になれている人はFlintoよりPrincipleの方が使いやすいのではと思いました。
残念ながらPrincipleもmacOSのみの対応アプリです。

Principle – Animated Design

Principleの良いところ

• 矩形・円形・テキストの描画ができる。
• UIはSketch3に近い。
• アニメーションをタイムラインで制御できる。
• リアルタイムプレビュー画面が常に前面に表示される。
• あるプロパティに対して別のプロパティのアニメーションを付けることができる（「X軸移動に対して透明度を変化」など）
• 実機プレビュー用のiOSアプリが無料!!!!

Principleの気になったところ

• バックリンクの作成がひと手間かかる
• 3D表現ができない。（プロパティにZ軸がない）
• アートボード配置の融通があまりきかない。（オブジェクトと重なったりする）

まとめ

Flinto for MacとPrinciple、両ツールとも完全には使いこなせておりませんが、他のプロトタイピングツールに比べて、導入のし易さは抜群だと思います。
初期段階でプロトタイプが必要な人や、タイムライン操作が苦ではない人はPrinciple、静的デザインは既に出来ていて、そこにトランジションを付けたい人はFlinto for Macなど、使い分けは必要なようです。

F8で発表されたOrigami Studioや、最近リニューアルしたFramerなど、気になるプロトタイピングツールがまだまだありますので、試用をしたらまたご報告しようと思います。

あ、AdobeからもAdobe Experience Design CCのプレビュー版がリリースされております。

試用が全然追いつきません汗