こんにちは！
みなさんは先日行われた「Adobe MAX」はご覧になられましたか？
WEBデザインや映像制作など、デザインに携わる人ならば、必ずお世話になっているAdobe社。
そのAdobe社が、年に一度世界中の様々な分野のクリエイターを集めて行うデザインの祭典がAdobe MAXです。
それが今年はなんと、全世界オンライン配信で行われました！

様々なトピックのプログラムを配信していたのですが、その中でも、今回ご紹介したいのは、Adobe XDについてです！
Adobe MAXでもXDについてのプログラムが多数用意されており、力を入れているのを感じました。

そもそも、XDとはなにか？

簡単に言うと、WEBサイトやモバイルアプリの、デザインやプロトタイプの作成、共有、それら全てを一貫して行えるツールです。
実際に、WEBやアプリのデザインだけではなく、動きや導線を視覚的に再現したプロトタイプの作成、また、それらを誰とでも共有しレビューを行えるという点がかなり魅力的だと思います。

そんなXDに、Adobe MAXに合わせて、アップデートが行われました！
そこで、実際に使ってみた感想を書いていきたいと思います！

3D機能を使ってみた！

今回のアップデートでは、なんと3D機能が実装されました！
3Dと聞くだけで、ちょっとわくわくするのですが、では、実際にこの機能が何に使えるんだろうということで、とりあえず使ってみました！

まずは、アイコンの画像を用意して、円形になるように配置します。
そして、3D機能を使い、それぞれのアイコンを-90°横に回転させるとこのようになります。

これで奥行きができました。

次に、全てのアイコンを一つにグループ化し、そのグループを横に回転させると…

このように、立体的なアイコンのリストができあがります！

このアイコンリストはスクロールのように、回転させることもできます。

それでは、この3D素材を使って簡単な動きを付けたプロトタイプを作成していきます。

まずは、ページのレイアウトを決めて、アイコンごとのページを作成します。

そして、プロトタイプのページに移り、アイコンの上の矢印から次のページへと導線の指定を行います。
この作業を前のページにも適用し、計6ページを導線で繋ぎます。

するとこのようなプロトタイプの完成です！

これで、上下の矢印をクリックすると、アイコンがスクロールし、テキストも変化するという動きを付けたプロトタイプを共有することができます。

もともとの利点である、プロトタイプの時点で視覚的に動きを共有できるという点に3D機能を加えると、提案の幅はかなり広がります。
しかも、ここまでの作業の流れを感覚的に行えることも大きな利点ではないでしょうか。

このようなデザインや動きに興味を持たれた方は、ぜひ一度ご連絡ください！