MAX 2021：Adobe XDプロトタイプがビデオとLottieアニメーションの再生をサポート
Adobe MAX 2021で、Adobe XDプロトタイプがビデオとLottieアニメーションの再生をサポートしました。ユーザーから最も要望の多かった機能がとうとう実装します。これにより、本番環境と近いリアルな動きをAdobe XDで再現できます。
本日のAdobe MAX 2021で、Adobe XDプロトタイプがビデオとLottieアニメーションの再生をサポートしたことを発表しました。これにより、実際のエクスペリエンスにさらに近い動きをするAdobe XD プロトタイプを作成できるようになります。この機能は今日から、Adobe XD の最新バージョンに導入されます。
新機能をご利用いただくには、Adobe Creative CloudデスクトップアプリでAdobe XDをアップデートするだけです。Adobe XDをまだお持ちでない方はダウンロードして無料でお試しいただけます。
実物に近いリアルな動きをするプロトタイプの効果は絶大です。それは、自分のビジョンを伝え、関係者の意識を合わせ、開発チームには自分のデザインがどんな実装を意図しているかを示してくれます。プロトタイプは「1,000回のミーティングに値する」とよく言われますが、適切なデザインツールで作成すれば、無駄な時間をさらに大きく減らせます。
一方で、デジタル体験におけるモーションの利用が一般化しています。ユーザーオンボーディング（新規ユーザーに使い方をガイドする局面）での遊び心のあるアニメーションから、Webページのトーンを演出するバックグラウンドビデオまで、モーションは有用で、コミュニケーションを促進し、ユーザーを楽しませる機会を提供します。しかし、ほとんどのUI/UXデザインツールはモーションのサポートに関して不十分です。連番の静止画で動きを表現するなど、デザイナーが細部を「こんな感じ」で表現せざるを得ないことが多いのです。これでは、意識合わせはできても、最終的にどう見えてどう感じるかはコードが書かれるまで確認できません。その結果、デザインから開発に移る段階でモーションが想定外の実装をされてしまった、ということがよくあります。
そこで本日、Adobe XDでビデオとLottieのサポートを開始しました。これにより、クリエイティブなプロセスの早い段階でモーションを組み込み、実際のWebサイトやアプリのようなルック＆フィールのプロトタイプを、余計な手間をかけずに作成できます。ビデオやアニメーションをAdobe XDプロトタイプで使用する機能は、Adobe XD UserVoice（英語）で最も要望の多かった機能であり、この機能をコミュニティにお届けできることを嬉しく思っています。
ビデオとLottieアニメーションをAdobe XDプロトタイプに追加する方法
Adobe XDでは、デザインにビデオやLottieアニメーションを配置できるようになりました。それらのモーションは、Adobe XDプロトタイプをプレビューする際と、プロトタイプの共有リンクをブラウザで開いたときに再生されます。コンピューターからファイルをデザインカンバスに直接ドラッグ＆ドロップするか、Adobe Creative Cloudライブラリ上に構築したデザインシステムがあればそこからオブジェクトを読み込めます。読み込んだ後は、アニメーションをループさせたり、ビデオやアニメーションの再生タイミング（自動、タップで開始など）を設定したりするなど、動作をカスタマイズできます。ビデオの場合はシンプルな編集ツールを使ってトリミングしたり、カスタムサムネイル画像をアップロードしたりすることもできます。
デザイナーは、Adobe XDのプロトタイプに読み込んだビデオやLottieアニメーションの再生動作をカスタマイズできます。
Adobe XD用LottieFilesプラグイン
本日のアップデートと併せ、新しいAdobe XDプラグイン「LottieFiles for Adobe XD（英語）」の提供を開始しました。このプラグインを使えば、Webサイトやアプリのデザインに使えるLottieアニメーションを簡単に探すことができます。LottieFiles（英語）は、世界中のデザイナーからの投稿を集めた世界最大のLottieアニメーションのコレクションを提供するプラットフォームです。LottieFiles for Adobe XDプラグインからは、無料のLottieFilesコレクションにある何千ものLottieアニメーションにアクセスできます。さらに、Adobe After Effectsで作成し、Adobe After Effects用のLottieFilesプラグイン（英語）を使って共有したLottieアニメーションにも、このプラグインからアクセスできます。
Adobe XDプロトタイプの自動アニメーション、スクロールグループ、音声プロトタイプといった強力なツール群に、新たにモーションが加わったことで広がる可能性に非常に期待しています。その可能性の一端は、Adobe XDのエバンジェリストのハワード ピンスキー（Howard Pinsky）が教えてくれます。ぜひ、彼のYouTubeチャンネル（英語）、Twitterアカウント（英語）、Adobe Liveストリーム（英語）にご注目ください。
今回のAdobe XDアップデートに含まれる他の新機能もご紹介します。
- Behanceに共有：Adobe XDの共有モードから直接、プロトタイプをBehanceに公開できるようになりました。世界最大のクリエイティブネットワークからフィードバックを得ることができます。
- アセットの整理：ライブラリパネルでカラー、文字スタイル、コンポーネントなどのアセットのグループ化が可能になりました。ブランドガイドやデザインシステムの整理や構築に便利です。
- 書き出しの改善：書き出しの品質の向上と、Adobe XDから画像を書き出す際の柔軟性とコントロールの向上を目的に、いくつかのアップデートと最適化をおこないました。
この記事は2021年10月26日（米国時間）に公開されたMake prototypes move with video and Lottie animations in Adobe XDの抄訳です。