昨今、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のイントロダクション
動画をみると、動くプロトタイプがどれほど簡単に作成できるかに驚きます。
- 要素を配置
- リンクをつなげる
- トランジションを設定する
この操作の繰り返しで、どんどんプロトタイピングが出来上がっていきます。
Flinto for MacとPrincipleの魅力
この2ツールの共通して素晴らしいところは、プログラミングの知識をいっさい必要としないところです。
コードをいっさい書くことなく、インタラクティブなプロトタイプを作成できるので、ソフト内で出来ることに比べて、学習コストがすこぶる低いことが、この2ツールの最高なところです。
「画面遷移やインタラクティブアニメーションを、企画段階でサクッと作る」ということ以上は、今の所できないようですが、チーム内のイメージ共有やクライアントへのプレゼンテーションには、とても効力を発揮するのではないでしょうか。両ツールとも、プレビューの録画機能がついており、gifや動画ファイルへの書き出しが可能となっています。
Dribbbleで各ツール名で検索すると、Flintoや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の良いところ
- 矩形・円形・テキストの描画ができる。
- UIはSketch3に近い。
- アニメーションをタイムラインで制御できる。
- リアルタイムプレビュー画面が常に前面に表示される。
- あるプロパティに対して別のプロパティのアニメーションを付けることができる（「X軸移動に対して透明度を変化」など）
- 実機プレビュー用のiOSアプリが無料!!!!
Principleの気になったところ
- バックリンクの作成がひと手間かかる
- 3D表現ができない。（プロパティにZ軸がない）
- アートボード配置の融通があまりきかない。（オブジェクトと重なったりする）
まとめ
Flinto for MacとPrinciple、両ツールとも完全には使いこなせておりませんが、他のプロトタイピングツールに比べて、導入のし易さは抜群だと思います。
初期段階でプロトタイプが必要な人や、タイムライン操作が苦ではない人はPrinciple、静的デザインは既に出来ていて、そこにトランジションを付けたい人はFlinto for Macなど、使い分けは必要なようです。
F8で発表されたOrigami Studioや、最近リニューアルしたFramerなど、気になるプロトタイピングツールがまだまだありますので、試用をしたらまたご報告しようと思います。
あ、AdobeからもAdobe Experience Design CCのプレビュー版がリリースされております。
試用が全然追いつきません汗
