見出し画像

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やアプリの制作プロセスの1つとして、アニメーションを備えたプロトタイプを簡単に作成し、より優れたUI/UXを設計することを目的とした機能です。

ですが、その概念を無視して、ただ「アニメーションを楽しむ」ために使ったらどうなるのか?限界に挑戦してみたくなったのです。

XDVJをプレイするための下準備

1. ループアニメーション
予め、アニメーションがループされる「アートボードの組み合わせ」をいくつか用意しておきます。(今回は、6個の組み合わせを使いました)

2. インスタンスでグラフィック制作
Adobe XDの機能の1つ「コンポーネント化」を使います。
親の「コンポーネント(マスターコンポーネント)」を複製配置した「インスタンス」を使って、グラフィックを作ります。

この状態で「マスターコンポーネント」を操作すると…

こんな感じに、全ての「インスタンス」が同時に動きます。
下準備は、これで完了です。

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. 手を動かす以外にデザインを楽しむ方法

筆者:Twitter:@OsatoCom


ありがとうございます❗️素直にウレシイです❗️
11
アートディレクター/デザイナー。神奈川県出身。 Webサイトの受託制作をメインに、B向け/C向け問わず、全方位のジャンルでクリエイティブワークを展開中。 ときどき、Adobe XD関連で喋ったりしています。

こちらでもピックアップされています

読むものリスト
読むものリスト
  • 7本
コメント (1)
「電気で絵を描くんじゃねぇ!」心に刺さりました。なにか漠然と伸び悩んでいた自分に必要な言葉だったように感じました。壁を一つ乗り越えたと言ったら大げさですが、なにか殻を破いた気分です。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。