CodeZine(コードジン)

特集ページ一覧

アドビ、UX/UIデザインとプロトタイピングを一気通貫できる新ツール「Adobe XD」のプレビュー版を提供開始

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/03/15 17:40

 アドビシステムズは、3月15日に報道関係社向けの会見を開き、モバイルアプリやWebサイトのUX/UIデザインやプロトタイピングに特化したツール「Adobe Experience Design CC(以下、Adobe XD)」の最新情報を発表した。

 Adobe XDは、デザインとプロトタイピングの両機能を備えたデスクトップアプリで、3月14日からプレビュー版のダウンロードが可能になった。2015年10月に開催したイベントAdobe MAXにおいて初めて発表された「Project Comet」が前進となる。

Adobe Experience Design CC
Adobe Experience Design CC

 Adobe XDを開発した理由として、同社の轟啓介氏は「今まではUXデザイナー向けの一貫したツールがなく、デザインからプロトタイピングの過程において、複数のツールを組み合わさざるを得なかった。このようなワークフローでは、フィードバックの反映までに時間がかかってしまい、クリエイティビティに制約が生じる」と説明した。

アドビシステムズ 轟啓介氏
アドビシステムズ 轟啓介氏

 Adobe XDの機能としては、WebサイトやアプリのUIを制作するDesignモードと、UI操作による画面遷移などを設定し、プレビューができるPrototypeモードの2つのモードがある。

 例えばDesignモードでは、iOSやAndroidなどでよく使われるUIがプリインストールされており、PhotoshopやIllustratorで作成した素材やSVG画像をコピーし、Adobe XD上で編集することも容易。

 さらに、画像の配置についてもUXデザインにより最適化されており、矩形や円形のオブジェクトを用意しておけばオブジェクトの形状で自動マスクされ、例えば、プロフィール画像を配置するデザインなども容易に作成できる。

 Repeat Grid機能では、検索結果の一覧表示などを簡単に表示することができる。繰り返し表示をさせたいオブジェクトを全て選択し、「Repeat Grid」をクリックすることで、画面の大きさに併せて繰り返しアイテムを自動生成することができる。アイテムの一つを編集すればその編集内容は全体に適用されるうえ、個別の編集も可能。

Repeat Grid機能
Repeat Grid機能

 Prototypeモードでは、配置したアイコンなどに対して、画面遷移のトリガーを設定することができる。設定した画面遷移は専用ビューワーで確認できるほか、録画機能で操作を録画することもできるため、ユーザビリティーテストなどにも活用できる。

画面遷移の設定の様子
画面遷移の設定の様子

 また、制作したデザインは、シェア機能でアドビのホスティングするサーバーにアップロードすることもでき、クライアントやチーム内でレビューしたり、モバイル向けのデザインを実際の端末で確認したりすることができる。

シェア機能によってアップロードされたデモ(画像クリックで実際の動作を確認できます)
シェア機能によってアップロードされたデモ(画像クリックで実際の動作を確認できます)

 Web制作者や開発者にとって有益な点として、轟氏は「Adobe XDは、PowerPointで画面デザインを作れる方ならどなたでも使えるの簡単さなので、デザイナーを迎える予算のない開発チームなどにも使っていただきたい」と話した。

 Adobe XDは、現在Mac OS Xのみに対応しており、Adobe IDがあれば無償でダウンロードすることができる。製品版は、2016年後半に、Adobe Creative Cloudメンバー向けに提供開始予定。今後、Windows 10版や、iOS/Android向けアプリの提供も予定している。

 また、同社が提供するライブストリーミング放送「Creative Cloud道場」において、3月17日午後8時より、轟氏によるAdobe XDの解説が放映される予定。

 
【関連リンク】
Adobe Creative Cloud
Adobe Experience Design CC

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5