• WEB

Flinto と Principleを比較~Web・アプリ開発にプロトタイピングツールを~

  • KAMOSHI
    KAMOSHI デザインちーむ
  • このエントリーをはてなブックマークに追加
Flinto と Principleを比較~Web・アプリ開発にプロトタイピングツールを~

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

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

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

今回は、ネイティブアプリとして使用できる【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や動画ファイルを配置できる(プレビューで再生することもできます)
  • リンクの作成方法が2種類!!(レイヤー・グループに設定とホットスポット作成)
  • バックリンクの作成が簡単
  • 実機プレビュー用の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のプレビュー版がリリースされております。

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

このエントリーをはてなブックマークに追加

KAMOSHIが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ