話題のInVision Studioでアニメーションするプロトタイプをつくってみた。

Transcript

1. 話題のInVision Studioでアニメーショ ンするプロトタイプをつくってみた。 . invision studioってどんなデザインツール？いいところ３つ。 . 実際にアニメーション作成してみた。 . 作ったプロトタイプはURLで共有することができる。 . invision studioってどんなデザインツール？いいところ３つ。 ① 【強い】アニメーション作成が標準機能として備わっている。 （今まではSketchに外部プラグインを入れて使っていた） ② 【簡単】Sketchと同じ操作性で、乗り換えやすい。 （Sketchにアニメーション作成機能を加えた感覚） ③ 【便利】他の人とデザインデータの共有がしやすい。 （完成したデザインは、URLを共有することで他のPC、スマホからも閲覧する ことができ、その画面上からでもアニメーションを確認することができる） デメリット まだ新しいデザインツールなので、URL共有でのプロトタイプのアニメーション 動作が悪かったり動作に不安が残る。今後に期待。 . 実際にアニメーションさせてみた。 ① まずはデザインする（ここまでは普通） ② 実際のページ移動を想定しながら、ページとページを繋げる。 ③ 繋いだ１ページずつの間のアニメーションを指定する。(1p目から2p目、2p目から 3p目…） と、その前に公式チュートリアルで全体の流れ（①〜③）を確認。
2. そして実際に作ったものがこちら。 . 作ったプロトタイプはURLで共有することができる。（もちろんアニメーション有 り） 自分のプロジェクト一覧 (https://projects.invisionapp.com/d/main#/projects) さきほどのテスト作成したもの (https://projects.invisionapp.com/prototype/test- cjkxz9bba003j5o016axfc55i/play/9c653fe2) https://www.dropbox.com/s/pd5u1fpqvdxp0bj/vid-studio.mp4?dl=0 https://www.dropbox.com/s/hv5el2yamqjzymj/sdp0e-aiqoq.mp4?dl=0
3. 参考資料 InVision 公式ウェブサイト InVision Studio 公式ウェブサイト https://www.invisionapp.com/ InVision | Digital product design, workflow & collaboration • www.invisionapp.com https://www.invisionapp.com/studio The world’s most powerful screen design tool | InVision Studio • www.invisionapp.com