Adobe XDをもっと使いこなすヒント！ 第22回 プロトタイプ機能の進化
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回はいつもと趣向を変え、XDチームの製品マネージャーJonathan Pimentoがmediumに書いた、XDのプロトタイプ機能についての記事からピックアップしてご紹介します。
最初の機能. ワイヤーとプレビューウインドウ
Adobe XDの一番の特徴はデザインをその場でプレビューして確認できることです。そのためにプロトタイプモードに最初に用意されたのは、ワイヤーとプレビューウインドウでした。ワイヤーは遷移元のオブジェクトと遷移先の画面を接続するための機能で、操作フローの指定に使用します。
ワイヤーで接続する際には、トランジション効果をオプションとして選択できます。ディゾルブとスライドに加えてプッシュが選択可能です。下の例は3つのアートボードを順に表示しているだけですが、キーボードが下から出現する効果により、本物っぽい操作感が演出されています。
ワイヤーの設定が完了したら、画面右上の ▶️ アイコンをクリックするとプレビューウインドウが表示されます。ウインドウ内では、ワイヤーで指定した遷移を実際に体験できます。プレビューのはじめに表示されるアートボードを指定するには、目的のアートボードを選択してから、左上に表示されるホームアイコンをクリックします。
プロトタイプはモバイルデバイス上でプレビューすることもできます。また、インターネットに公開したり、録画して共有することも可能です。
追加された機能 その1. 固定要素
デザインモードで「スクロール時に位置を固定」をチェックすると、その要素の位置がプレビュー時に固定されるようになります。プレビュー画面をスクロールしたときに、一緒に移動せず、その場に留まる表現が欲しいという要望に応じて追加された機能です。
上の例では、画面上部のナビゲーションバーと、画面左側の黄色の要素が固定されています。固定した要素はレイヤーの重なり順どおりに表示され、ブラーや透過の効果がリアルタイムで描画されます。使い方次第で、いろんな興味深い表現をつくることができる機能です。
追加された機能 その2. オーバーレイ（アクション）
元々利用できたアクションは、トランジション、つまりアートボード間の遷移だけでした。そのため、この記事の最初の例では、キーボードを配置したアートボードをわざわざ用意しています。しかし、画面上にキーボードやメニューを表示するのはよくあるケースです。単純にキーボードやメニューだけ用意して、それを上に重ねて表示できると便利、ということで追加されたアクションがオーバーレイです。
上の例では、メニューを画面上に表示するためにオーバーレイが使われています。こうして一度つくったメニューのアートボードを、他の画面にも再利用できるのはオーバーレイの大きなメリットです。見ての通り、スライドするアニメーション（もしくはディゾルブ）の効果を指定することが可能です。
追加された機能 その3. 時間（トリガー）
トリガーに「時間」を指定すると、設定された時間の経過後に自動的にアクションが起動されます。これにより、ユーザーの操作無しでアクションを起動することが可能になりました。上の例では、はじめてアプリを起動したときに表示される「使い方ガイド」を再現するために、一定時間ごとに画面を切り替えるよう設定しています。
なお、「時間」のトリガーは、アートボードからアートボードへの遷移のときだけ利用できます。トリガーの欄を「時間」にしたら、ディレイの欄にトランジション開始までの待ち時間を指定します。
追加された機能 その4. 自動アニメーション（アクション）とドラッグ（トリガー）
自動アニメーションは、2つのアートボード間を遷移するときに、共通するオブジェクトの状態の変化を自動的にアニメーションとして表現するアクションです。例えば位置が異なるオブジェクトがあれば、そのオブジェクトが最初のアートボード上の位置から次のアートボード上の位置へと移動するアニメーションが再生されます。
アートボードから遠くにあるオブジェクトほど画面に登場するタイミングが遅くなります。また、移動距離が長いほど移動速度は速くなります。上の例は、こうした特性を上手く組み合わせて表現が構成されています。
自動アニメーションと同時に追加されたトリガーがドラッグです。ドラッグジェスチャーを可能にするための、ドラッグ操作でアートボード間を遷移できる機能です。遷移の途中の状態は自動アニメーション機能により補完されるため、滑らかな操作感を味わえます。上の例では、ドラッグ可能なカルーセルの表現に使われています。
追加された機能 その5. Voice（トリガー）とSpeech Playback（アクション）
Adobe XDに追加された最新のプロトタイプ機能は音声プロトタイプへの対応です。Amazon Echo Showのようなディスプレイ付きのスマートスピーカに向けたアプリデザインを想定した機能です。音声をトリガーにしてアクションを起動でき、またテキストを読み上げるアクションも利用できます。それらを組み合わせると、アプリと会話しながら、プロトタイプを操作することが可能になります。
まだ日本語には未対応ですが、近い将来の日本語対応が予告されています。楽しみに待ちましょう。（2019年1月のアップデートで日本語に対応しました）
次回からはいつもの連載に戻ります。お楽しみに！