魔法のようにウェブやアプリのUI/UXをデザインできるプロトタイピグツール「Adobe Experience Design」、ベータ版を無償公開

　米Adobe Systemsは14日、UI/UX向けプロトタイピングツール「Adobe Experience Design CC（Adobe Xd）」のベータ版をAdobe ID（無料で作成可能）登録ユーザーに公開した。Mac OS X 10.10以降で利用可能。15日には、アドビシステムズ株式会社がメディア向け説明会を開催し、その主な機能・特徴を紹介した。

「Project Comet」改め「Adobe Experience Design CC」という名称で正式提供される。略称は「Adobe Xd」

　Adobe Xdは、ウェブサイトやアプリのUI/UXをインターフェイスデザインからプロトタイピングまでオールインワンで提供するツール。「Adobe MAX 2015」で「Project Comet」として紹介されたプロジェクトの製品版となる。これまで複数のツールを組み合わせて作ることの多かったUI/UXのデザイン作業を一貫して行えるだけでなく、修正が発生した場合の時間・手間を低減する。

　ソフトを起動したら、まず「iPhone」「iPad」「Web」「カスタムサイズ」の4つから作成するデザインのサイズを選択する。利用頻度の高いUIも各OS別にまとめられており、必要な物をコピーするだけでデザイン可能。また、チュートリアルを兼ねたサンプルデータもあり、UIデザインの基礎がなくてもUIを組み立てていくことができる。

アドビシステムズ株式会社の轟啓介氏（マーケティング本部Creative Cloud個人マーケット部マーケティングマネージャー）

ソフトを起動すると作成する画面サイズを選択する画面が表示される

サンプルファイルはチュートリアルにもなっており、UI/UXデザインを行ったことがないユーザーでも分かりやすく操作できる

iOS/Androidで使用頻度の高いUIはすでにキットとして用意されている

　Adobe Xdには、「デザイン」と「プロトタイプ」の2つのモードが存在する。デザインモードでは、UIや構成する画面のデザインを行う。画面の追加はスムーズで、iPadやApple Watchなどサイズの異なる画面をアートボードに展開可能。PhotoshopやIllustratorで作成した素材を取り込めるほか、矩形ツールや円形ツールなどが実装されており、必要なUIアイテムをAdobe Xd上で作成できる。Ai形式やSVG形式などのベクターファイルはパスの編集も行える。

　また、検索結果などで表示される文字など、同じデザインで複数のアイテムを配置する場合に、1つのアイテムから複製する「リピートグリッド」を搭載する。コピーしたアイテムは「プロパティ」と「コンテンツ」に属性が分かれており、間隔調整やアイコンの位置などは1つのアイテムを調整するだけで、コピーしたすべてのアイテムに反映される。文字や画像などのコンテンツは、コピーしたものを含めて独立しており、個別に編集することができる。

Photoshopで作成した画像を矩形ツールで指定した箇所にトリミングして配置してくれる

アートボードは複数の画面をスムーズに配置可能。異なる画面サイズもOK

基本的なアイテムは矩形ツールや円形ツールを使用することで作成可能。画面は、マップアプリなどでよく利用されるピンマークを作成しているところ

矩形ツールにはハンドルが設けられており、角を丸くすることもできる

Illustratorで作成したデータやSVGデータを直貼り可能。複数のアイテムが一緒になったデータでも、個別に編集することができる

検索結果など、同じデザインで複数のアイテムが配置される場合に便利な「リピートグリッド」機能

コピーしたいアイテムを選択し、機能をオンにすることでマウスのドラッグに合わせてアイテムをコピーできる

「リピートグリッド」は、「プロパティ」と「コンテンツ」で構成される。プロパティは、アイテムの幅やアイコンの位置などが該当し、1カ所の幅を調整するとすべてのアイテムに反映される。コンテツは、画像や文字などが該当し、個別で編集可能だ

　プロトタイプモードは、作成したUIや画面デザインの推移を設定する。例えば、「このボタンを押したら指定したページにジャンプする」といった設定を行う場合、ボタンから伸びた青い線を該当のページに接続するだけで完了する。その際、画面のスライドする方向、イージングの設定、移動時間などを細かく指定できる。ウェブ、iOS、Androidそれぞれに最適化した画像のエクスポート機能も備える。

　完成したデザインは、プレビューで動きを確認可能。デザインを共有することもでき、タイトルとアイコンを付けてAdobeのサーバーにホストするとリンクを生成する。ユーザーはメールやSNSなどでリンクを共有でき、受信側はウェブブラウザーで確認可能。スマートフォンで閲覧すれば、実体験に近い動きをチェックできる。また、修正が必要な場合はAdobe Xd上で修正し、再度アップロードしてリンクを再取得すればすぐに反映される。

プロトタイプモードでは、作成したボタンがどのページにジャンプするかなど、作成したデザインに機能を持たせることができる

リンクは紐状の青い線で表現され、ボタンから線を伸ばして該当するページに接続することで設定が完了する

接続した一覧を表示することもできる

プレビュー機能で、実際の画面遷移を確認することができる

共有機能もあり、Adobeのサーバーで生成したリンクを共有すると、ウェブブラウザーで確認できる。スマートフォンで閲覧すれば、より実体験に近い確認が可能

InVisionなど既存のプロトタイピングツールのパイを奪うことは考えていない

　プロトタイピングツールとしては「InVision」や「Prott」など、すでにスマートフォンのUI/UXを直感的に作り上げることができるツールが存在する。Adobe Xdにも似た所があるが、決定的な違いは、デザイン制作からプロトタイピング、データ共有まで1つのソフトウェア上で実現してしまう一貫性と手軽さ、ほかのAdobe製ソフトとの連携にある。

　轟氏によると、既存のプロトタイピングツールと、Adobe Xdとはパイを食い合わないように展開したいと考えているという。Adobe Xdは、「パワーポイントが使えればすぐに使える」ぐらいに初心者でも使いやすく設計されており“UXデザイン”の間口を広げる目的がある。すでにInVisionなどを使用しているユーザーは、Adobe Xdと使い勝手を比べてもらい、使いやすい方を選んで欲しいとしている。

　Windows版を含む正式バージョンは年内リリースを予定している。今回リリースしたベータ版は、機能も限定的でUIもシンプルなものになっているが、毎月アップデートを提供することで機能追加を行う予定。また、ベータ版ユーザーからのフィードバックを受けて改良を実施する。4月には、Adobe Xd開発チームが来日し、日本ユーザーの要望をヒアリングする予定だ。

「Adobe Experience Design CC」の開発背景には、UI/UXデザインにおける分断されたワークフローの改善がある

「Adobe Experience Design CC」のロードマップ