見出し画像

InVision StudioでAbemaTVのインタラクションを再現してみた。

はじめに

こんにちは。デザイナーのハセシュンです。

先日、待ちに待ったInVision Studio(Early access版)への招待が来ました。

個人的には、ティザームービーで見た「アニメーション機能」を特に楽しみにしていたのですが、本当にあそこまでできるの?と半信半疑だった方も多いのではないでしょうか。

ということで今回は、「AbemaTVのインタラクション」を題材にInVision Studioで実際にデザインしてみた感想を書いてみたいと思います。

ちなみにAbemaTVを選んだ理由は、以前UI観察をしていて、マイクロインタラクションの設計にこだわりが感じられる素敵なアプリだな、と思っていたからです。

実際に作ったモノ

こちらが今回InVision Studioを使って作成したUIアニメーションです。AbemaTVを横向きにして視聴している時の画面を再現しました。

チャンネル切り替え時の様子

ダブルタップでフルスクリーン表示になる様子

ご覧のように、これまでSketchでUIをデザインした後にAfter Effects, Flinto, Principleといったアニメーションツールを使わなければ実現できなかったような細かいインタラクションが1つのツールで手軽に作成できました。

インタラクションデザインの3ステップ

簡単に今回のアニメーションの制作手順を説明すると、次の3ステップになります。

1.  状態別のアートボードを作成
2. ターゲットにインタラクションを設定
3. タイムライン機能でアニメーションを微調整

例えば、チャンネル切り替えのアニメーションでは4つのアートボードを作成しました。

このとき、各アートボードのレイヤー構造とコンポーネントの命名が統一されていないと、後のインタラクション設定がうまくいかないので注意しましょう。

各アートボードが作成できたら、インタラクションツールで要素を選択しアニメーションのトリガーとなるジェスチャーやトランジションの時間などを設定します。

この2ステップだけでも十分見栄えの良いアニメーションはあっという間に完成します。

しかし、InVision Studioの凄いところはここからさらに細かい表現を"Edit Timeline"から調整できるところでした。

具体的には、アートボード間で共通する全ての要素に関して

・アニメーションの関数
・アニメーションの開始タイミング
・アニメーションの秒数

を個別に設定することが可能です。

この機能のおかげで、スワイプしているチャンネルのスクリーンの初速を次に入ってくるスクリーンよりも速くする、という微妙なニュアンスも再現することができました。(あくまでも観察に基づく仮説なので実際の実装がそうなっているかは分かりません)

タイマー機能で自動遷移

また、ユーザのジェスチャーなしでアニメーションを発火させたい場合には、アートボードにタイマーを設定することができます。

つまり、スプラッシュ画面、ローディング画面、プッシュ通知、アラートなどもこのタイマー機能を使えば簡単に再現できてしまうのです。(ありがとうInVisionさん....)

今回の場合だと、チャンネル切り替え後に番組名などが表示され、数秒後に消えるというアニメーションをタイマー機能で実現しています。

プロタイプの共有・実機確認

アニメーション機能に加えて素晴らしいなと感じたのは、「プロトタイプの共有・実機確認」機能です。

InVision Studioではツール内からプロトタイプを共有するためのリンクをボタンひとつで生成することができます。

このリンク先では、単にプロトタイプを触れるだけでなく、Zeplinのようにエンジニアが知りたいデザインの詳しい情報を確認したり、画像やアイコンなどのアセットをダウンロードすることもできるようになっていました。

また、同じWiFi内であれば、InVisionAppでQRコードを読み取ると自身のスマホでプロトタイプを確認することも可能です。

おわりに

InVision Studioはアニメーション機能だけ見ても、これまでのUIデザインツールの常識をいい意味で大きく覆してくれることを実感しました。

製品版のリリースがますます楽しみです。

正式にリリースされたら

・Design System Managerによるコンポーネントの管理
・Freenhandを用いたチームメンバーとのライブデザイン機能

なども要チェックですね。

余談ですが、InVision Studioの登場によってUI模写ならぬインタラクション模写をする学生さんやデザイナーが増えるかもしれない、と思ったり(笑)

普段何気なく触っている画面の小さな変化をじっくり観察するいい練習になったので、またやってみたいと思います。

記事に関するコメントやご指摘がありましたらコメント欄もしくはTwitterにお願いします。

Twitterのアカウントはこちら

2018/4/4 追記
InVision Studioの紹介記事は、現在「Studio自体のUIは載せない」方が良いというご指摘がありましたので、画像は「Studioを使って作ったデザイン」部分のみに修正させて頂きました。



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

いつも記事を読んでいただきありがとうございます。ブログをいいねやシェアをして頂けることが何よりのサポートです。次回もお楽しみに!

ありがとうございます!次回もお楽しみに〜〜!
72
Shunichi Hasegawa | Digital Product Designer | user interface / illustration / motion

コメント8件

katsuさん

返信が遅くなってしまいすみません!

以下、個人的な経験をベースにしたアドバイスではありますが、少しでも参考になれば幸いです。

① Invisionでは表現しきれないアニメーションを実現するのにオススメのツール

Sketchと相性が良く、インタラクティブで複雑なアニメーションを実現できるツールとしては「Principle」もオススメです。

Principle for Mac
http://principleformac.com

有料のアプリになりますが、シンプルなインターフェースでAfter Effectsやコーディングが必要なツールなどに比べると学習コストは低いと思うので、まずは無料体験版を試してみてはいかがでしょうか。

海外のYoutube動画には良質なチュートリアルもあるので、良かったら参考にしてみてください。

Principle App Crash Course
https://www.youtube.com/playlist?list=PLWlUJU11tp4deQOnSFNn_ekpS9GA5_7yP
② UI/UXを学ぶ方法

UI/UXといっても、その範囲はとても広いのでどんな学習法がいいかは目的によると思います。

デザインツール自体の習熟やより魅力的なUIを作る力を伸ばしたい、ということであれば大きく分けると次の3つをオススメします。やはり、一番大事なのは「手を動かす」ことです。

① 有名なサービスのUIトレースをして考察し、世の中のスタンダードを知る
② 既存サービスの改善(リデザイン)
③ オリジナルの作品を作ってみる

現在、katsuさんはメディア系アプリを制作していらっしゃるとのことですので、既に③のフェーズに挑戦していますが、デザインに行き詰まった時は①②のアウトプットを通じて新しいインプットをしていくようにするとさらにいいUIが作れるようになると思います。

参考:05 上達する方法は「模倣し盗む」、そして「作る」こと
https://note.mu/design_school/n/nf97c3a3132a8?magazine_key=m636b0cb71357
③ エンジニアとのコミュニケーションについて

実装したいアニメーションのイメージに近いものが既に他のアプリやサービスで使用されている場合は、必ずしもデザイナーがアニメーションを作成する必要はないかと思います。エンジニアに直接そのアニメーションを見せてざっくりと実装してもらいつつ、細かい部分をコミュニケーションしながら一緒に調整していく、というプロセスでも問題ないと思います。

また逆に、こうした実装/コミュニケーションコストを削減する方法として、デザイナーがAfter Effectsで作成したアニメーションをそのままLottieというツールで書き出し、エンジニアに渡すという手もあります。詳しくは下記の記事をご覧になってみてください。

After Effects未経験者向け!Lottieで再生できるアプリUIアニメーションを作ろう
https://note.mu/hanzawa/n/n67dadfae9dcb
haseshun 様

お忙しい中ご返信いただきありがとうございます!

「Principle」、初めて知りました!わざわざ動画まで紹介していただきありがとうございます。
ぜひ試してみます!

トレースとリデザイン、なるほどです。今まで他のサービスのUIを全く同じように真似することはしていなかったので、形だけでなくその裏の意図も読み解きながらガンガン手を動かします!

アニメーションの件もご回答ありがとうございます!
幸いにも作りたいアニメーションが他のサービスで既にあるため、今回はコミュニケーションベースで制作していきたいと思います!

まだ学び始めたての者の拙い質問に、ご丁寧に答えていただきありがとうございました!haseshun様の記事や他のサービスをフル活用させていただきデザインに励みたいと思います。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。