inVision Studioで最高にイカしたUIデザインを
最近Webトレースを日課にしています。古屋です。
今回はタイトルにもある通り、個人的にとてもワクワクしている「inVision Studio」を触ってみたいと思います。
この時を数ヶ月待っていたのです。
inVision Studioとは
プロトタイプ作成・レビューサービスであるinVisionが提供する次世代のUIデザインツールです。
もともとプロトタイプ作成やレビュー等のコミニュケーションツールを提供していましたが、そもそもの画面をデザインしたり作成するといった領域の機能は有していませんでした。
なので今まではSketchやその他デザインツールで作成したファイルをinVisionにインポートして利用するという方法しかありませんでした。他のデザインツールありきのサービスということですね。
そんなinVisionがUIデザインツールとして新たに開発しているのが
「inVision Studio」
です。
ではこのinVision Studioは、他のUIデザインツールと何が違うのでしょうか。
世界で数百万人が利用する今イケてるinVisionが提供するツールなのでよっぽどなのだろうと思ったのですが、本当によっぽどでした・・・。
まずはティザーサイトを見ていただけたらと思います。
基本的なデザインツールとしての機能に加えて高速プロトタイピングなどについて触れられていますが、もっともインパクトがあるのは高度なアニメーション作成という箇所ではないでしょうか。ヌルヌルとアニメーションしているのが分かります。
プロトタイピングの段階で一つのツールのみでここまで作成できるツールはありませんでした。
UIトレースしてみる
ということで早速使ってプロトタイプを作成していきたいと思いますが、実はこのinVision Studio、現段階(2018年8月)では正式版がリリースされていません。そのためツール自体の操作画面のスクショなどの共有はおすすめされていないようです。
なので成果物の共有のみのとなります。
今回はUIやデザインの勉強も兼ねてiOS版Youtubeアプリをトレースしてみることにしました。
以下から実際に作成したプロトタイプを確認することができます。
URLにアクセスし「play」を押下してみてください。
https://projects.invisionapp.com/prototype/youtube-cjkbe1vb50005b501qux6vczv
見ていただけると分かるように全機能の完全トレースはできていませんが、動画の再生機能や再生画面を縮小した際のアニメーションなどにスコープを当てて作成しました。
以下サムネイル部分のアニメーションです。
この画面でいうと動画再生画面をスワイプダウンするとミニプレーヤーになって下にスライドするという部分がアニメーション機能を使用している部分として分かりやすいかと思います。
今回作成した画面は、
これと
この画面です。
2枚目の画面では下段タブのすぐ上部にミニプレーヤーが表示されています。
実際にアニメーションを設定する方法ですが、こちらがやることとしては1枚目の動画部分をスワイプダウンした際に2枚目の画面に遷移するという指定をしているだけです。
ではどういう仕組みかというと、実は1枚目の画面には2枚目のミニプレーヤーオブジェクトをコピーして見えない要素として上部に設置しています。
これをinVision Studio側でお互いのオブジェクトは同一と判断し、画面遷移に合わせてオブジェクトを移動してくれています。
言葉で説明するのがとても難しいので、興味のある方は以下inVisionが提供している学習用ビデオを観てみてください。
とても簡単にアニメーション設定できるのが分かると思います。
またアニメーション発火方法についても複数のパターンが用意されています。
動画再生時のナビゲーションが時間経過で隠れるアニメーションはYoutubeアプリを利用したことのある方には馴染み深いと思いますが、このアニメーションもinVision Studioなら一発です。
2.5秒経過後に画面遷移をするというアニメーション設定をしています。
タイムライン機能
またこのアニメーション機能のさらに凄い点がタイムラインでアニメーションを制御できる点です。
これも実際の操作画面を見た方が早いので以下の動画で確認してみてください。
今回のUIトレースではミニプレヤーが移動し始めるタイミングなどをこの機能を使って再現しています。
Webサイトやスマートフォンアプリといったコンテンツの中で使用するアニメーションに限って言えばこれらの機能を利用することでほとんど再現可能なのではないでしょうか。
また今回はアニメーション作成についての説明のみになってしまいしたが、作図やオブジェクトの作成についても基本機能が揃っていて直感的に作成することができました。(今回のプロトタイプも全ての画面やアイコンをinVision Studioのみ使用して手でトレースしています。)
その他、inVision Studioを利用して作成されたプロダクトについて公式ブログで定期的に紹介されているので、さらに知りたい方は見てみると良いと思います。
https://medium.muz.li/made-with-studio-19-fd7c3abbc888
https://medium.muz.li/made-with-studio-18-bfb2a220b515
まとめ
このようにinVision StudioはさすがinVision！と言えるようなイケイケツールであることは間違いありません。
ただデザイン素人レベルでも使いにくいツールがあったり、明らかな不具合、また動作が重くなる場面もあったりとまだまだ発展途上な部分もあると感じました。
ですが何と言ってもまだ製品版が出ていないアーリーアクセス版なので、これからどんどん進化・改善されていくことと思います。
そしてそんなinVision Studioのアーリーアクセス版がMacユーザー向けに提供されています。(Windows向けも開発されています。)
一度触ってみる価値はあると思いますので、みなさんご興味があればDLしていじってみてください。(なんといっても無料！)
https://www.invisionapp.com/studio
今回は実際の操作画面を見せられないのであまりinVision Studioの魅了をお伝えすることができなかったかもしれませんが、僕は製品版が出るのが今から楽しみで仕方ありません。それまでアーリーアクセス版を使い倒したいと思います。
参考
