サイトアイコン TECHNICAL CREATOR

InVision Studioでどんな機能が使えるのか、ムービーとティザーサイトから考察してみた

ryopan

InVisionから唐突に発表されたInVision Studio。昨日の速報に続いて、この記事ではInVision Studioにはどんな機能が備わっているのか、基本的なものから特徴的なものまでを、プロモーションムービーとサイト内のスクリーンショットから考察してみようと思います。

昨日お届けした速報記事

一瞬、自分の目を疑った。「InVisionが新プロダクト…？まさか…」今もキーボードを打つ手が少し震えています…。InVisionがつい先ほど、新しいデザインツールのティザーサイトを公開しました。InVision Studioとは一体…？TechCrunchの記事によると、現在プロトタイピングツールInVisionは世界中で300万人以上のユーザーを抱えているそうで（すごい）今まではプロトタイピングとコラボレーションの機能を持ったツールであり、またSketchのプラグインを開発するチームを買収するなどの動きはありましたが、画面をゼロからデザインするツー...
世界最強のデザインツール、その名も「InVision Studio」誕生。Adobeとの最終戦争... - TECHNICAL CREATOR

プロショーンムービーはこちら

基本機能

まずはサイトで使われているスクリーンショットから基本的な機能を考察していきます。

 

レイヤーパネル

画面左にあるのはいわゆるレイヤーパネルですね。

Login、Sign up、Walkthroughはそれぞれアートボードを指しているのでしょう。
ということは、Sketchのように1つのキャンバス内で複数のアートボード（画面）をレイアウトできるということですね。よく見るとLoginにはホームアイコンが表示されています。これはおそらく、InVision Studio内で遷移モックを作成する際に最初に表示される画面として設定されているマークだと推察されます。
アートボードのリストの上部には「Search “Page 1”」という表記、そしてさらにその上にはアイコンが2つ並んでいます。
Search〜の部分は、PVを確認すると通常はページ名が表示されているようです。そして左にはバックボタンがありますから、おそらくSketchと同様にページ単位での管理もできるのではないかと思われます。右端には+ボタンがあるので、そこからアートボードを新規追加するのでしょう。Search〜の状態になる条件は今のところ不明です。
2つのアイコンですが、左はアートボードとレイヤー、右はSketchで言うシンボルのリストの表示切り替えをおこなっているようです。
切り替えを行うと下記のように変化します。切り替え後の画面については後ほど考察します。

 

キャンバス、ツールバー

続いて、作業領域であるキャンバスと、キャンバス上部にレイアウトされているツールバーを見てみます。

左端（上記画像では上段）にあるのはカーソルとズーム倍率。どちらも切り替えができるようですね。カーソルはハンドツールになるのでしょうか？
中心（中段）にあるのは、左から遷移作成モード、？、アンカーポイント編集、はさみ、パスファインダ × 4、マスクと思われます。左から2番目だけ謎です。

PVで確認したらはさみとアンカーポイント選択の並びが逆だ！

右端にあるのは、遷移モックの実機確認？、ブラウザ上のシミュレータで確認、共有（おそらくFreehand & Prototype？）と思われます。

PVでもFreehandとPrototype、Inspectorとの連携が紹介されています。

あとはSketchなどでもおなじみの、オブジェクト・アートボード間のマージンを測ることもできるようです。

 

インスペクタパネル

続いて画面右にあるインスペクタを見てみます。シェイプを選択した状態の時ですね。

最上段からそれぞれ、

となっています。
ちなみに、ツールバーの時にもありましたが、どうやらサイト内で使われている画面とPVで使われている画面では微妙にパネルのレイアウトが違うようです。PVを見ると、上記の設定に加えて最下段に「Export（アセットの出力）」があります。また、位置固定の見映えも違っていますね。

アートボードやテキストを選択するとインスペクタが変化します。

テキスト選択時は

が設定できるようになるようです。

続いてアートボード選択時のインスペクタはどうなるかと言うと、こんな感じ。

アートボード用に加わった設定として

が確認できます。アートボードをリサイズするとオブジェクトのResizing設定が反映されるのはSketchと同様ですね。
そういえばXY位置やWidth,Heightに小数点が含まれていますが、これは単にデモ版だからなのかどうかが気になります。

というわけで、ここまでが基本機能編でした。続いて、特徴的な機能の考察に移りたいと思います。

 

特徴的な機能

Libraryドキュメント

レイヤーパネルの表示を切り替えると出てくるシンボルっぽいもののリスト。Studioのページを読むと

InVision Studio’s shared component libraries guarantee instant access to your team’s design system. It’s never been easier to sync up, scale up, and stay up to date.

とあるので、正確にはシンボルではなく共有コンポーネントライブラリ？という呼び方になりそうです。ちょっと長いので今回は機能そのものをLibrary、Library機能で管理しているものをLibraryドキュメントと仮称することにしましょうか。
Libraryのリストをよく見ると、Sketchのシンボルのリストとは違う構造になっていることが推察されます。

例えば、Componentsというアートボードのようなリスト内にはFeedback indicatorsとFormsという2つのフォルダが格納されており、さらにその中に複数のフォルダやオブジェクトのようなもの？（赤い六角形アイコン）が格納されています。
つまりアートボードのようなものは単にフォルダ分けをしているだけであって、このリスト内でLibraryドキュメントを作成している…というよりは管理をしているのだと思われます。
また、興味深いのがリストの上部にあるLayer StylesとText Styles。ひょっとしたらスタイルもこのリストで管理できるのかもしれません。

そして六角形アイコンはツールバーにもありました。ツールバーにあるということは、キャンバス上のオブジェクトに対して何かしらのアクションを行えることが予想されます。つまり、Libraryドキュメントの生成フローとしては

という感じなのではないかと予想されます。

では、各フォルダやドキュメントの右端にある↑アイコンは何を意味しているのでしょうか。
説明にteam’s design systemとあるように、Libraryドキュメントはおそらくチーム内で共有できるのでしょう、変更のあったドキュメントを更新するかどうかダイアログが出てくるシーンがあります。

つまり、チームの誰かがLibraryドキュメントを更新した後、↑アイコンからpushをすることで、チームメンバーが更新内容をpullして変更するかどうかを選択できるのだと思います。しかもダイアログを見ると、リスト単位やフォルダ単位で変更するかどうかを選べるみたいです。これは更新の手間が省けて良さそうですね。
さらには誰がいつ更新したのかまで表示されています。SketchのLibraries機能では「誰が・いつ」までを確認することはできないので、チームでコンポーネントやスタイルを共有するシチュエーションでは地味に助かるのではないでしょうか。

 

Prototype機能の内包

最後は、InVisionの主要サービスでもあるPrototype（遷移モック）機能についてです。

Studio内でそのまま遷移の作成が可能となっています。

トランジションの種類やトリガー、イージングの編集が可能です。作成したトランジションはインスペクタパネルのInteractionsに追加されます。ひょっとしてトランジションの設定もLibraryで管理できたりするんですかね？

遷移を作成すれば、実機での確認やブラウザ上でのシミュレーションもできます。

コメントはStudio上ではなく、FreehandやInspectorと同様に、一度画面を移る必要があるみたいですね。

 

まとめます

ツールとしての基本機能はひととおり網羅しつつ、チームで共有できるLibraryや他のInVisionサービスへの接続など、これまでの資産をうまく活用したプロダクトであることが読み取れました。また、サイトの説明によればInVision Studioはアセットやプラグインらしきものを取り扱うストア機能もリリース予定だそうです。Sketchのようにコミュニティとして盛り上がるための土壌も準備しているということですね。

さてここまでリッチなツールが出てくると、いよいよ構築部分はどうするのという話題にもなってきます。InVisionは自分たちのことを「collaboration & workflow platform」と呼んでいますが、そちらの領域についてどのようなアプローチを取っていくのか、気が早いですが今から楽しみであります。まずは何より1月のリリースが心待ち！

モバイルバージョンを終了