世界中のユーザーの声をもとに毎月進化し続ける
UI/UXデザインツール
「Adobe XD（アドビ・エックスディ）」は、「デザイン」「プロトタイピング」「共有」の3つのプロセスを一つのアプリ内で行えるUI/UXデザインツール。2017年10月の正式版リリースから1年が経過し、毎月のアップデートで60以上の新機能がすでに追加されているという。アドビ日本法人でウェブ領域のマーケティングを担当する轟啓介氏が、その中からいくつか特徴的な機能を紹介した。
まず言及されたのが、アプリケーションの軽さ。下図のようにたくさんのアートボードが配置されていても軽快に動作し、PC、タブレット、スマホと、さまざまなデバイス向けの画面設計を1つのファイル上で行える。
通常レスポンシブ対応のデザイン作業は煩雑になりがちだが、Adobe XDでは「レスポンシブサイズ変更」の機能を有効にすると、ドラッグするだけで画像の縦横比を崩さずにスマートな形で可変レイアウトの設定を行える。
デザインの効率化の面ではもう一点、シンボルの「外部ファイルへのリンク」機能が紹介された。従来もオブジェクトをシンボルとして共通化し、同一位置への配置やデザインの一括変更などが行えたが、この機能拡張により、例えば別ファイルとして管理されているスタイルガイドへの準拠などが簡単に行えるようになった。
世界中のユーザーからの要望が最も多かった機能の一つとして挙げたのは「マイクロインタラクション」。アニメーションなどを使い、ユーザーのアクションに対し適切なフィードバックを細かく与えることでUXを向上させる手法で、Adobe XDでは、このあたりの機能も強化している。デザイナーでもノンコーディングで簡単にアニメーションを設定できる。
具体的には、プロトタイプモードでワイヤー（Adobe XDで画面遷移を設定する線）を引き出し、アクションとして自動アニメーションを選択するだけ。Adobe XDは2つのアートボード間にある同一の名前のレイヤーを理解し、両者の配置やサイズを自動で埋めるアニメーションを作成してくれる。
また、JavaScriptで独自プラグインを開発できる機能拡張用のAPIが公開されている。共有用のレポジトリも用意されており、世界中のデベロッパーが開発したプラグインをAdobe XD上から簡単にインストールできる。デモでは、アートボートのスクリーンショットをモックアップの形状に合わせてはめ込める「Angle」というプラグインが紹介された。他にも、Googleスプレッドシートと連携し、タイトルや画像のURLが入力された表形式のデータをもとに、カタログ状のフォーマットに素材を一括で流し込めるプラグインの様子などが示された。
「身の回りには、スマホやカーナビ、AIスピーカーなど、音声コントロール対応のデバイスが増えてきている。つまり、デザイナーも音声UIに対応すべき時代が来ている」と語る轟氏。Adobe XDでも、音声コントロールを簡単に実装できることを紹介した。
プロトタイプモードに切り替え、ボタンからワイヤーを引き出し、トリガーとして「ボイス」を選択。音声コントロールを行うキーワードを打ち込み、適切なアクションを追加するが、ここでは遷移先でテキストの読み上げを設定。これを複数のアートボードで組み合わせるだけで、プログラミングすることなく「今日は何をしますか／新しいポッドキャストを紹介して」といったやり取りを音声で行うアプリのプロトタイプが作れる様子が示された。日本語対応も近日予定しているという。
