アドビ システムズは、3月19日に記者説明会を開き、UI/UXデザインツール「Adobe XD」について紹介。担当のシニアディレクター アンドリュー・ショーテン氏とプロダクトマネージャーのジョナサン・ピメント氏、シニアエクスペリエンスデザイナーのアレックス・ポレテク氏がXDの注目機能とUI/UXの最新トレンドをデモを交えて紹介した。
Adobe XDは、モバイルアプリやWebサイトのUI/UXデザインツールで、1つのプラットフォーム上で「デザイン」「プロトタイピング」「シェア」が実現できる。2017年のAdobe MAXで正式版（バージョン1.0）が発表されて以来毎月アップデートしてきたが、本説明会ではその最新バージョン（2018年3月時点）とUI/UX全体の動向について紹介された。
UI/UXの最新トレンド
UI/UXの最新動向として、アンドリュー・ショーテン氏がまず挙げたのが、デザイナーの役割の変化だ。昨今では、IllustratorやPhotoshopを使って、スクリーンにピクセルを作り上げていく「デザイン」の作業だけでなく、最終的な「プロダクション制作」まで一貫してデザイナーが作業を続けていき、Webにも対応させている。
また、アメリカでの動向として、「見た目」から「経験」重視のデザインが求められてきている現状を説明。コンテンツをWebやアプリ、ウェアラブル端末など多様なスクリーンに届けなければいけない。それだけではなく、VRやARなどの新しい技術によって、ユーザーの経験は非常に多岐にわたってきている。WebデザイナーにもよりUX重視のデザインが求められるという。
こういった動向の中、ユーザー体験全体のデザインをエンドツーエンドで実現できるツールが必要だと考え、生まれたのがAdobe XDだ。
ショーテン氏はXDについて「1つのプロジェクトで何千というスクリーンに対応できる拡張性も備えている」と説明。最新のハードウェア・ソフトウェアへの対応はもちろん、現在日本市場向けへの対応も進み、Windows、Mac両方にローカライズしたバージョンになっている。既にソニーとヤフーが実証を行っている最中で、「作業全体のスピードがこれまでと比べて速くなった」「一か所で作業が行えるのでチームのコラボレーションが改善した」といった成果が上がっている。
デザイナーとデベロッパーの齟齬をなくす「シェア」機能
また、XDの目玉は、1つのプラットフォーム上で「デザイン」「プロトタイピング」「シェア」ができる点だ。
「デザイン」の面では、PhotoshopやIllustratorのアセットをXDの中で開くことができるため、元々Photoshop等を使用してデザインを行っていた人も現行作業を簡単に引き継げることなどを挙げた。XDをCreative Cloudでも使えるようになったことで、デザイナーはこれまで培ってきたスキルを今度はXDの中で生かせると説明した。
また「プロトタイピング」では、デザイナーは、アプリケーションやWebページの見た目だけではなく、「どういうことが感じられるのか？」といった体験まで確認できる。
さらに「シェア」では、ワンクリックでデザインスペックの共有が可能で、デベロッパーにアセットを実装してもらうなどといった依頼がスムーズになる。デベロッパー側からしても、複雑なPhotoshopのドキュメントから必要な情報を苦労して抜き出したり、デザイナーにPDFのドキュメントの作成を依頼したりする必要がなくなる。また、共有されたデザインスペックでは、色やフォントだけでなくオブジェクト同士の距離まで詳細に確認できる。
1月にはサードパーティとの統合が発表されており、さらなる機能の広がりが期待できる。PhotoshopだけでなくSketchで作成したデザインもXDの中で開くことができるようになった。
XDの注目機能
続いてプロダクトマネージャーのジョナサン・ピメント氏がデモを交えて、ポイントの機能について紹介した。
デザイン
まず、3月のアップデートでより簡単になったPhotoshopとの連携について説明。
XDの［ファイル］メニューの［開く］を選択してPhotoshopのファイルを開くと、アートボードとレイヤー、アセットが自動的に編集可能な状態でXDに変換される。ここからコンテンツに変更を加えることができ、スタイルや色の変更も可能。さらに、プロトタイピングに必要なXD独自のフィーチャーを適用できる点で有用だと示した。
続いて、PhotoshopやIllustratorなどの外部アセットを読み込む方法として、Creative Cloud ライブラリを使用する方法も解説。［ファイル］メニューから［CC ライブラリを開く］を選択すると、PhotoshopやIllustratorからアセットを追加済みのライブラリをXDで開くことができる。
ライブラリの中には「カラー」「キャラクター」「スタイル」「イメージ」が入っており、使いたいものをドラック＆ドロップで持ってくると、リンクグラフィックとして扱えるようになる。また、XDに読み込んだイメージにPhotoshopやIllustratorで何か変更を加えたら、自動的にXDにも反映される。
例えば、Illustratorで作成したアイコンをXD内で開いた状態で、何か変更を加えたい場合には、右クリックし［編集］を選ぶ。そうすると、自動的にIllustratorが起動する。変更を加えて［保存］を押せば、これも自動的にXDに反映される。IllustratorとXDを行ったり来たりする時間が短縮でき、効率的に作業ができるというわけだ。
プロトタイピング
XDの大きな特徴の1つであるプロトタイピングは、ユーザーがどのようにWebやアプリを使うのか、そのフローをデザイナーが表現するものだ。
ピメント氏が、すでにデザインしたサインアップの画面を用い、ユーザーが一体どういったフローで画面を遷移していくのかプロトタイピングで示すデモを行った。
プロトタイピングを行うにはまず、「デザイン」モードから「プロトタイプ」モードに切り替える必要がある。その後、キャンバス上のオブジェクトが選択できるようになる。
そして、画面遷移を表現するには、リンクしたいオブジェクトから伸ばしたワイヤーをあて先となる画面にに引っ張ってくる。また画面が上下左右の方向にスライドする、といったアニメーションもカスタマイズ可能だ。
ワイヤーをつなげ、カスタマイズが完了したら右上の［プレビュー］ボタンを押す。すると、ユーザーが実際にデバイスでどのような画面遷移で進んでいくのかシミュレーションできる。画面をクリックしながら進むと、全ての画面の表示が確認できる。ピメント氏は「静止的だったデザインを簡単に、もっとインタラクティブにできる」と説明した。
最後に、アドビのデザインチームがXDを使って実際に自社製品をデザインしている様子を、シニアエクスペリエンスデザイナーのアレックス・ポレテク氏が説明した。XDのチームはもちろん、PhtoshopのチームやCCのチームもXD使ってデザインを行っているという。
ポレテク氏によると、「実際、XDでプロトタイプをしたあと、ユーザーにシェアし、フィードバックをもらってデザインを行っている。業界のユーザーがどういった部分を拡張してほしいのかも聞いている」という。さらにシェアの機能にも触れ、「アドビのチームメンバーは国を越えて散らばっているので、メンバー間・チーム同士の共有をXDで行っている」と説明した。
またポレテク氏は、「自分たちで自社製品を使い続けることで、プロダクトの提唱者となれると考えている。XDという製品について正直に、これからも広げていきたい」と話し、発表を締めっくくった。
この記事は参考になりましたか？
- この記事の著者
-
CodeZine編集部（コードジンヘンシュウブ）
CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
