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

更新日:2017年10月19日

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

昨日お届けした速報記事

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

基本機能

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

 

レイヤーパネル

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

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などでもおなじみの、オブジェクト・アートボード間のマージンを測ることもできるようです。

 

インスペクタパネル

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

最上段からそれぞれ、

  • 整列 / 分布
  • 選択したオブジェクトのX位置 / Y位置 / 謎のピン?アイコン
  • 選択したオブジェクトのWidth / Height / レイヤーロック
  • 選択したオブジェクトの回転角度 / レイヤーの固定位置(おそらくSketchのResizingと同等)
  • 描画モードの種類
  • 透明度
  • 角R
  • 塗り色 / 塗り色の追加
  • 線色 / 線位置 / 線幅 / 線の追加
  • シャドウ色 / シャドウXY位置、ブラー、スプレッド / シャドウの追加
  • インナーシャドウ(おそらくシャドウと同等の設定)
  • インタラクション

となっています。
ちなみに、ツールバーの時にもありましたが、どうやらサイト内で使われている画面と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ドキュメントの生成フローとしては

  • キャンバス上のオブジェクトを選択して、ツールバーの六角形アイコンからLibrayドキュメント化・あるいはスタイル化する
  • ドキュメント化されたオブジェクトやスタイル化された属性はLibraryのリストに並ぶ(ひょっとしたら生成時にフォルダの新規作成や格納先の指定もできるかも)
  • LibraryリストでLibraryドキュメントやスタイルを整理する
  • 作業中、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月のリリースが心待ち!

書き手:よしたけ りょう
主にデザイナー。カメラや写真やガジェットが好きです。
Twitter: ryopan

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事