Adobe Systemsアドビ システムズが世界最大のクリエイティブカンファレンスAdobe MAX 2016(米サンディエゴ)で、Experience Design CC(Adobe XD)の大規模な機能追加を発表しました。本記事では、速報としてAdobe XDの新機能を現地スタッフがレポートしつつ、クリエイターの視点から魅力や使い所を紹介します。

Adobe MAX 2016の基調講演

▲Adobe MAX 2016の基調講演

XDはAdobe製のUXデザインツール

XdはAdobe製のUXデザインツール。モバイルアプリやウェブサイトのプロトタイプを簡単な操作で制作できるデスクトップのソフトウェアです。昨年のAdobe MAX 2015で「Project Comet」という名前で発表され(参照「Adobe MAX 2015 基調講演レポート」)、今年初旬よりプレビュー版として公開されていました。

Adobe XDは画面設計ができるUXデザインツール

▲Adobe XDは画面設計ができるUXデザインツール。パフォーマンスがよいため、多くの画面を開いての編集が可能。「リピートグリッド」と呼ばれる、繰り返し要素のレイアウト機能が目玉

待望のレイヤー機能とシンボル機能が搭載

IllustratorやAnimateにあるようなレイヤー機能やシンボル機能が搭載されました。シンボルを修正すれば、配置した複数のインスタンスを一斉に編集できます。シンボルの更新が全てのアートボードへ反映されるので、共通パーツを管理するのに適しています。

Adobe XDのシンボル機能

リアルタイムで編集結果が他のインスタンスに適用されるなど、Adobe XDのパフォーマンスの良さが主張されていました。

デバイスプレビュー機能

Adobe XDにデバイスプレビュー機能が搭載。デスクトップでの編集をリアルタイムでスマートフォンで確認可能です(Photoshopのデバイスプレビューと似た機能)。

デスクトップとスマートフォンのディスプレイの大きさが異なるので、実機で確認することがデザインにおける必要不可欠なワークフローです。Adobe XDは編集しながらスマートフォン画面でプレビュー確認ができるのでデザインの精度が向上するでしょう。

Adobe XDのデバイスプレビュー機能

▲ デスクトップの編集がモバイルにリアルタイムで反映されている

オンラインコメント機能が実装

Adobe XDの作品に対してオンライン上でチームメンバーがコメントできる機能が搭載されました。ブラウザ上の画面で、それぞれのデザインファイルに対してコメント追加が可能になります。チーム間でのフィードバックが効率化されるため、より素早いプロトタイプの作成につながります。

UWPアプリとしてWindowsに対応、Surface Studioに最適

今までAdobe XDはmacOS版のみしか提供されていませんでしたが、Windows版が発表されました。実演では10月に発表されたばかりのMicrosoft Surface Studioが使われています。

Microsoft Surface StudioでUWPのAdobe XDを紹介

ペンツールではその場で曲線を描いてアイコンのプロトタイプが作れるなど、直感的な操作が魅力的であると紹介。

Adobe XDとSurface Studio

Windows版のAdobe XDはUWPアプリ(ユニバーサルWindowsプラットフォームで動作するアプリ)として開発されているとのことです。Windows版は今年中にベータ版として登場する予定です。

Adobe XD Windows版のリリースについて

開発中のスタイルガイド機能

ブランドの統一や複数人作業でのブレを防ぐためにはデザインガイドラインの存在が必要不可欠です。Adobe XDにもデザインガイドラインを実現するための新機能が開発されています。

ライブラリにはフォントやテーマカラー、アセットを登録可能。登録した情報はインスタンスと紐付いているため、テーマカラーを変更すればアートボード内のカラーを同時に変更できます。

161102_adobemax_xd_kano_styleguide1

161102_adobemax_xd_kano_styleguide2

▲ テーマカラーの変更が各アートボードに反映されている様子

また、パブリッシュするとウェブページとしてスタイルガイドを出力可能。PhotoshopやIllustrator、HTMLコーディングなどのワークフローにも利用できるでしょう。

161102_adobemax_xd_ikeda_-152
▲スタイルガイドとしてHTMLページを出力可能

開発中のバージョニング機能を紹介

現在開発中のAdobe XDの機能として、XDファイルのバージョン管理が可能なバージョニング機能が紹介されました。画面上部のシークバーでバージョンの行き来が可能になります。

161102_adobemax_xd_ikeda_-157

▲ シークバーを動かすと以前のバージョンを復元できる

例えば「2つ前のバージョンで作成したパーツを、最新のデザインにも反映したい」といったケースに役立ちます。一つのXDプロジェクトファイルのみでバージョン管理ができるので、各バージョンのデザインを残したいがために別名でファイル保存をする必要がなくなります。

開発中の複数人での共同編集機能を紹介

現在開発中のAdobe XDの機能として、複数のチームメンバーで同時にプロジェクトファイルを編集する機能が紹介されました。基調講演では2つの異なるマシンで、双方の編集がリアルタイムに同期できていることを実演。

161102_adobemax_xd_ikeda_-166

▲異なるマシンで編集が同期されている様子を紹介

161102_adobemax_xd_kano_collaborate
▲共有中のプロジェクトファイルは編集中であることを示すバッジが表示される

編集中の要素のロックが可能で、他のメンバーとの作業の重複を防げます。100人の同時編集にも耐えれるよう、軽さにこだわって設計したとのことでした。

オンラインでの複数同時編集機能と言えばGoogleドキュメントを連想しますが、Adobe XDのコラボ編集機能の搭載によって、クラウドへ積極的なAdobeの姿勢が見えてきました。

最後に〜Adobe XDへの注目度は高い

多彩な新機能が発表されたAdobe XD。今回の基調講演の中でもAdobe XDの説明に割り当てられた時間が長く、Adobeが力を入れて取り組んでいることがわかりました。今に至るまでAdobe XDにはユーザーから23,500の投票、500の機能リクエストが集まり、100の機能を追加したとのこと。業界の注目度の高まりに応じて、Adobe XDは大きく進化していくことでしょう。ICS MEDIAでは、Adobe MAX 2016の最新情報をレポートします。ぜひ引き続きチェックくださいませ。