これからのアニメーションと、XD
上の画像かこちらをクリックすると、Twitterの動画を見ることができます。
この記事は、2019年3月20日に開催されたAdobe XDの勉強会「Adobe XD ユーザーグループ 東京 vol.22」にて私が発表した資料になります。
概要
「アニメーションって流行っているみたいだけど、これから先も役に立つの？」「一過性のものなんじゃないの？」そんな不安をお持ちの方、いませんか？
このセッションでは「これからのアニメーション（特にインタラクション）」にスコープを当て、将来の利用シーン予想とXDの役割についてご紹介します。
※アプリケーションの具体的な操作方法については、あまり触れていません。
はじめに
前提1：アニメーションとは
アニメーションといっても広義すぎるので、ここでの「アニメーション」についての定義です。今回は、Web系の参加者が多かったので「Web関連で利用するとき」に限定します。「映像コンテンツではないですよ」ということです。
そうみると、アニメーションの役割は3つに分類できると考えています。
1.情報伝達の補助（インタラクションなど）
2.演出（飾り、表現的豊かさ）
3.コミュニケーション（制作工程での意思疎通。例：XDのビデオ録画機能）
今回は、特に「1.インタラクション」に関連したお話を重点的にしようと思います。
前提2：「これから」ってどのあたり？
すごく個人的な話ですが、今年（2019年）で40歳になります。
そこで、考え始めたんです。「この先、あと何年働くんだっけ？」と。
20年以上あるぞ。
20年あったら、世の中イロイロ変わりそう。
今の手持ちのスキルだけでは、食っていけないだろうな。
何かスキルのアップデートしないと。
でも、時間は有限。
できるだけ「長く使えるスキル」に投資したいな。
という「将来への不安」が、今回のテーマの根幹になります。
なので、「これから」＝「これから働き抜く時間」を指していて、
「この先、アニメーションは働き抜く力になってくれるのかい？」という話をしようと思っています。
いざ「これから」へ
現在（2019年）。20年後、だいたい2040年です。もしかしたらそれ以上働いているかもしれません。（いや、きっと働いている。。。）
これまでを振り返ると「（無線移動体）通信技術」の進化が、だいたい10年間隔でありました（2G、3G、4G、5G）。ということは、今後10年間隔で、同じような進化があるかもしれないですよね？（6G?、7G?、8G?）
「先のことを予想するには、過去を知ろう」ということで、ウィキペディアで調べてみると、スマホやSNSなど、今も主流なプロダクトやサービスが始まった時期が2005年〜2015年の間。「リリースから10年で市場に馴染む」といったところでしょうか。
これまでのサービスやプロダクトは「スマホのための技術」が主流でしたが、これからはどうでしょう？
IoT時代に「スマホだけ」ってわけにはいかないでしょう。「スマホ向け以外の技術」も増えてくるでしょう。当然、僕らの仕事のフィールドも変わるだろうな、と思うのです。
そこで「これから」に向けた技術の中で「僕らの制作物・成果物が活きる場」それを追っかけてみました。「今はスマホ中心だけど、他にでてこないかな？」ってお話です。
「今」変わり始めている端末
「スマホ以外に何かインタラクションを必要とする場面はないかな〜？」と、過去のイベント展示などでみてきたものなどを引っ張り出してみました。そのいくつかをご紹介します。
CASE.1「透過ディスプレイ」
引用：株式会社E3（デジタルサイネージジャパン2016展示より）
まず1つ目「透過ディスプレイ」です。背景が透けて見えるディスプレイで、映像を流すだけでなくタッチ操作が可能なタイプもあります。
※株式会社グローバルインフォメーション：透明ディスプレイの世界市場 - 2023年までの予測（2019.03/11）
・2018年：4億800万米ドル
・〜2023年まで：25億9,100万米ドルへ（見込み）
・年間複合成長率：44.7%見込み
CASE.2「曲形・異形ディスプレイ」
引用：シャープ株式会社：変幻自在の新しいディスプレイ「FFD - Free Form Display」ホームページより
こちらは、スマホなどで既にお使いの方もいるでしょう。四角以外の形をしたディスプレイが特徴のディスプレイです。
ただし、スマホ市場だけでなく、車載用としての市場をねらっているようです。
※富士経済：自由度の高い曲面や異形なども注目される車載ディスプレイ世界市場は2022年に7,184億円（2018.10/19）
・車載ディスプレイ世界市場は2022年に7,184億円
CASE.3「空中ディスプレイ」
引用：株式会社アスカネット：ASKA3Dホームページより
関連動画：DS976 - ASKA3D
関連記事：トラベルボイス「JTB店舗に体感型デジタルサイネージ導入、「空中ディスプレイ」で旅行イメージ喚起へ」
続いては「空中ディスプレイ」。何もない空中にディスプレイを浮かべる技術です。こちらも映像だけでなく、周辺にセンサーを設置することで、タッチ（何もないので、厳密にはタッチしてないけど）操作も可能です。
※富士経済：空中表示技術(空中ディスプレイ)と主要構成部材の市場を調査（2017/09/14）
2025年、空中ディスプレイ世界市場 4万6,543台
CASE.4「VR（ Virtual Reality）」
参考：VR Inside：VR/AR/MRの未来を創るビジネスニュースメディア「5分でわかる！VR・AR・MRの違い！そしてSR・XRとは？」
これら4例を先ほどの年表に当てはめると、下記の時期になります。
その時、UIはどう変わるの？※個人的な予想です
1つ目：「スペーシング」が変わる？
今は、スマホの小〜さなエリアで考えているけど、将来、いろんな端末が市場に広がることで、もっと広いエリアをインタラクションとして使うことになるんじゃないかな〜と予想しています。
つまり設計的には「スペーシングが変わる」と考えています。「単純な広さ」だけじゃなく「空間としての前後」を考えるケースもでてくるでしょう。
2つ目：「指を動かすから、腕を動かす」へ変わる？
操作時の動き（アクション）の大きさも変わるかもしれませんね。操作する端末の物理的サイズが変わるので「指を動かすから、腕を動かす」になるかもしれません。
3つ目：「コンテンツに応じた表示サイズ」が可能になる？
今は、スマホやPCの「固定サイズのフレーム」を目一杯使うことで設計していますが、フレームに縛られずに表示できるようになると、コンテンツの内容に合わせて表示サイズが変形した方が、良いかもしれませんね。
今のスマホやPCで制作していると、どうしても「余白が許せない問題」がでてきますが、そういた問題が減るかもしれません。
具体的にどうやって作るの？
では、具体的にどうやって、新しいディスプレイを想定して制作すれば良いでしょうか？
サンプルの動画を作ってみましたので、こちらの作り方をご紹介します。
XDで「インタラクション」を、After Effects CCで「想定される利用シーン」を再現
流れとしては、
1.XDでインタラクションを設計
2.XDのインタラクションを「ビデオ録画」する
3.想定シーンをビデオ撮影する
4.After Effects CCで、合成し、イメージ動画完成
まずは、XDで「インタラクション」画面の設計をします。
これを、ビデオ録画し、動画ファイルを作成します。
この時、あとで編集しやすいように、インタラクションに不要な背景（ペットボトルラックの画像）をグリーンバックに変えて録画します。
次に、想定するシーン（購入シーン）をビデオ撮影します。スマホで十分だと思います。
あとは、After Effects CCでこの2動画を合成します。
箇条書きになりますが、
1.XDのインタラクション動画を「キーイング：リニアカラー」で切り抜き
2.撮影素材を「トラッカー：3Dカメラ」で位置をトラッキング
3.指の重なりを「ロトブラシ」で切り抜き
合成方法については、Twitterに動画をアップしていますので、こちらの動画をご覧いただくとわかりやすいと思います。
まとめ：その時、なぜXDが必要なの？
今現在（2019年）、インタラクションを必要とする場面はスマホに集中していますが、今後、インタラクションを必要とする端末が増えてくることで、インタラクションを設計・検証する機会が増えることが予想されます。
「これから、働き抜く時間」の中で、インタラクションを作る・検証する機会は増えると考えています（予想！）。
それはつまり「XDのようなプロトタイプを作る技術を使って、検証する機会が増える」と言えるんじゃないでしょうか（予想！）。
だから、「インタラクションというアニメーション技術を学ぶことは、将来、自分の資産になる」そう考えています（予想！）。
当然、これらは私個人の予想ですので、バッチリ外れる可能性もあるでしょう。
その答え合わせは...
20年後にやりましょう！（笑）
発表者：Osamu SATO