2. 「表現×技術」その限界との向き合い方
本記事は、 2019年8月17日（土）に開かれた「Adobe XD ユーザーフェス 2019 Final」で発表した私（佐藤 修 Osamu SATO ）のセッション内容を元に、記事化したものになります。
イベント当日の模様は「こちらの動画（Adobe CC道場）」をご覧ください。
3部構成で発表しましたので、記事も3つに分けてお届け。
今回は、その2つ目『「表現×技術」その限界との向き合い方』についてです。
はじめに
今回のシリーズ1つ目『1. デザインにアニメーションを取り入れる方法』では、比較的カンタンな実装でできる（Webブラウザとして表現できる）、かなり現実的なアニメーションのお話をしました。
しかし、Adobe XDの「自動アニメーション」ってスゴく優秀で、実装できることだけだと遊び足りない！
そう思って「実装できる/できない」の縛りを解いて、「純粋にAdobe XDでアニメーションを楽しむ！」という事をしてみました。何をしたか？
XDVJ
ジャン！『XDVJ（XD Video jockey）』
Adobe XDを使ってVJをやってみました！
こんな感じです
実際にプレイした動画はこちらからご覧いただけます。
・動画（Adobe CC道場より）
・Twitter（@Osato.com）
ここから、少しAdobe XDの話をしましょう。
（「Adobe XDの使い方は、いいや」という方は読み飛ばして頂いて大丈夫です。本題はXDVJではないので）
XDVJの作り方
こちらは、全部で1:30くらいのプレイ動画なのですが、ただ「アートボード」を繋いだものを再生しただけではないのです。
インスタンスで絵作りしたデスクトッププレビューを表示しながら裏ではペーストボードに配置したマスターコンポーネントを操作したりコンポーネントの置き換えをしながら更にタイミングよくアートボードの表示を切り替えていたのです…
ハイ、「なんのこっちゃ？」ですよね？
順に説明しましょう。
まず、Adobe XDに詳しくない方のために「自動アニメーション」について。
Adobe XDの「自動アニメーション」は、2つのアートボードを繋いで、その差分を「いい感じに繋げたアニメーションにしてくれる」機能のことです。
詳細はこちら（Adobe XD マニュアル）
本来は、Webやアプリの制作プロセスの１つとして、アニメーションを備えたプロトタイプを簡単に作成し、より優れたUI/UXを設計することを目的とした機能です。
ですが、その概念を無視して、ただ「アニメーションを楽しむ」ために使ったらどうなるのか？限界に挑戦してみたくなったのです。
XDVJをプレイするための下準備
1. ループアニメーション
予め、アニメーションがループされる「アートボードの組み合わせ」をいくつか用意しておきます。（今回は、6個の組み合わせを使いました）
2. インスタンスでグラフィック制作
Adobe XDの機能の１つ「コンポーネント化」を使います。
親の「コンポーネント（マスターコンポーネント）」を複製配置した「インスタンス」を使って、グラフィックを作ります。
この状態で「マスターコンポーネント」を操作すると…
こんな感じに、全ての「インスタンス」が同時に動きます。
下準備は、これで完了です。
Let's XDVJ Play!
「デスクトッププレビュー」を表示し、これをオーディエンスに見せる用とします。
タイミングよく「アートボードの選択」を変えたり「マスターコンポーネント」を変形させることで、無限の表現を永久に続けることができます！
さらに、「アートボードの外側」つまり「ペーストボード」にオブジェクトを追加作成しても「デスクトッププレビュー」には表示されません。アートボードの中に入れるまでは、オーディエンスには見えないので、好きなだけ追加オブジェクトを用意できます。
こうしてできたのが、XDVJなのです！
改めて、プレイした動画はこちらからご覧いただけます。
・動画（Adobe CC道場より）
・Twitter（@Osato.com）
遊びから学ぶ発見
こういった「遊び」をしたことで、発見した表現がいくつかあります。
例えば「曲線アニメーション」。
Adobe XDでは難しいとされている「曲線移動」のアニメーションは、XDVJをしていて発見しました。
おそらく、現実的実装を気にしながら作っていたら、思いつかなかったかもしれません。
「曲線アニメーション」解説はこちら。
自分にとっての限界が、誰かにとっての限界とは限らない
XDVJを始めたきっかけ。
それは「実装できる/できない」の縛りを解いて…というものでした。こういった実装的に非現実的なことをしていると、こんな声が聞こえてきます。
「それ、どこで使うの？」
「実装できなきゃ、やる意味なくない？」
もちろん、ここで私が言いたいのは、「XDVJやろーぜ！」とか「実装リスク無視しよーぜ！」ではありません。ですが、私はこう思います。
「表現」の限界を自分で作っていませんか？
「デザインで表現すること」と、それを「再現するための実装技術」のバランスは、いつの時代でも難しいところがあります。しかし、こんな経験はありませんか？
自分では「難しくて無理かも…」と思うアイディアを出してしてみたけど、他の人にとっては「それ、カンタンにできるよ」て言われてしまった。
「自分にとっての限界が、誰かにとっての限界とは限らない」のです。
こういう限界論が生じた時、私はいつも恩師の言葉を思い出します。
それは、こんな言葉でした…
なかなか、ショッキングなワードですね…
別に「デジタルペイントしちゃダメ！」って事じゃないです。
では、どんな意味で言われたのか？少し補足しましょう。
「電気で絵を描くんじゃねぇ！」
学生時代に、パソコンでの作業がまだ不慣れだった頃、デザインをしてた時に先生から言われた言葉です。
「君の作品は、パソコンでできる物を作っているだけだ」
「頭の中に最高の表現を描くのが先。それを形にする手段としてツールを使いましょう」
つまり
「電気で絵を描くな！」
「パソコンでできる事だけで、デザインするな！」
「表現の限界をツールで決めちゃダメだ！発想力が豊かにならないぞ！」ということです。
しかし、学生ではない今、仕事でやってる以上「できる範囲で制作する」ことは間違っていませんし、むしろ正しいです。私も同意です。
でも、一方で「知っている事」「できる事」だけに縛られていても成長がないのでダメだと、私は思います。
先日、松本人志さんがこんな事を呟いていました。
『出来ることを何回続けても
出来ないことが出来るようにはならないよ』
（松本人志さん Twitterより一部抜粋）
僕らの業界も同じだと思います。
「知っている事」「できる事」だけでWebサイトやアプリを作っていても、成長や発展はしないと思いますし、他との差別化もできません。発想と技術の相乗効果に期待する時間を作っても、いいんじゃないでしょうか？
だってみんな、まだ20年以上働くでしょう？
時間と可能性はたっぷりある！（笑）
余談ですが「20年後に、なぜマイクロインタラクションが必要か？」という話を、こちら「これからのアニメーションと、XD」に書いていますので、ご興味のある方はぜひ！
【発想】表現の限界 ≠ ツールの限界
【挑戦】今ある選択肢からの脱却と差別化
デザインの限界をカンタンに決めないで、もっと可能性に期待してみてはいかがでしょうか？その積み重ねがきっと、将来の資産に育っていってくれることでしょう。
できることでアイディアを考えるのではなく、
頭の中に最高の表現を描くのが先
という「発想」の持ち方についてのお話と
「知っている事」「できる事」に縛られずに
新しい可能性に向けて行動しよう！
という「挑戦」の仕方についてのお話でした。
最後まで、お読みいただきありがとうございました。
次回は『3. 手を動かす以外のデザインの楽しみ方』についてです。
とても盛り上がった「Adobe XD ユーザーフェス 2019 Final」
イベント当日の模様は、下記をご覧ください！
・動画（Adobe CC道場）
・Adobe XD User Fes 2019 Finalのツイートまとめ（#XDUFes2019 ）
Adobe XD ユーザーフェス 2019 Final まとめ
1. デザインにアニメーションを取り入れる方法
2. 「表現×技術」その限界との向き合い方
3. 手を動かす以外にデザインを楽しむ方法