Main menu

Column コラム

アドビの新しいプロトタイピングツール「Project Comet」改め「Adobe Experience Design CC」プレビュー版登場。さっそく試してみました!

パブリックリレーションズ
石川 真弓

アドビの新しいUXデザインツール「Adobe XD(Adobe Experience Design)」プレビュー版登場。さっそく試してみました!

こんにちは。ロフトワークの石川です。
ワイヤーフレームやアプリの設計図は年に1度描く程度ですが、2015年のAdobe MAXでProject Cometについて発表されて以来、ベータ版の登場を密かに待ち続けていました。
そして突如パブリックベータが2016年3月14日にリリース。
名称は「Project Comet」改め「Adobe Experience Design CC」、通称「XD」と読むようです。

ワイヤーフレームを描くときは、WireFrame Sketcherや、InVisionあたりが有名(私はいまだにFireworks使ってますが)で、アプリのプロトタイピングツールは、Prottあたりに人気が集まっていました。
これまでアドビはPC上で本格的なプロトタイピングを行うツールを提供していなかったので、Creative Cloudを使うクリエイティブに関わる方々は気になって仕方ないはずです。
ということで、さっそくダウンロードして使ってみました!

※今回の記事は、プレビュー版をダウンロードして数十分触ってみたというファーストインプレッション的な内容になります。

Adobe Experience Design CC (Preview)のサイトに書いてあることをさっくり意訳で解釈していくと、Adobe XDは、素早く柔軟にUXデザインをできるツールで、数クリックでデザインからプロトタイプにスイッチできて、素早くワイヤーフレームとビジュアルデザインを描けて、リアルタイムにプレビューできて、チームに共有できるツールである。でもまだ始まったばかりなので、新しい機能を毎月搭載していく予定とのことです。

ダウンロードして使ってみる

Adobe Experience Design CC (Preview)のサイトからダウンロードできます。

ダウンロードにはAdobe CCのアカウントが必要です。

そしてダウンロードしてXDを立ち上げます。
最初にデザインを選ぶダイヤログが。
iOSの各画面サイズから、Android、Webサイトなど、作りたい画面のサイズを選ぶことができます。

画面描画のためのツールとしては、四角、丸、ライン、ペンツール、テキストツールがあります。
これらを組み合わせてワイヤーフレームなりを描画していきます。四角を角丸にしたり、前方のオブジェクトで切り抜いたり、統合したり、ということまで可能ですが、XD単体で可能な描画表現は限られている印象です。

その代わりといってはなんですが、IllustatorやPhotoshopで描画したオブジェクトはそのままコピペで貼り付けることができます。ちゃんと作りこみたい場合は、他のツールで画面デザインは作りこんで、XDに貼り付ける、という方法が良いのかな。
(でもIllstratorでメッシュで塗ってみたオブジェクトはコピペできなかった)

プロトタイプの画面に切り替えると、各画面遷移の設定を行うことができます。
画面をスワイプで切り替える設定をしたり、各オブジェクトをクリックすることで次の画面に遷移させるといった設定が可能。これを作り込んで行くことで、かなり精度の高いアプリのプロトタイプが制作できそうです。

さらにオブジェクトを等間隔の配列(マージンを後から共通微調整可能)をドラッグで出来るのも便利です。
さらにそこに写真を別々の要素として自動配置出来ます!

左はPCの画面上でのプレビュー画面です。「Record」ボタンは、実際にユーザーの操作の様子をそのまま録画できる機能。録画された画面遷移の様子の動画はmovファイルでエクスポートされます。「プロトタイプのユーザーテスト」にすごく使えそうですね。
また右は、実際に生成されたプレビューリンクをiPhone実機で見ている画面です。

操作感としては、スピードをアピールしているだけあって、かなり速い印象(もっと画面を作りこめばまた変わってくるかもしれませんが)。
画面もシンプルで、出来ることもまだ限られているので、誰でもすぐに使いこなせそうです。
Adobe Experience Design CCは、2016年3月14日にリリースされたてほやほやのパブリックベータということで、これから機能はどんどん実装されていくはずでしょう。
公式サイトには、「毎月新機能搭載します」と書いてありました。
「ボタン」や「バー」等といったサンプルフレームワークも、今後増えてくるといいなあと思います。

パブリックベータ中なので正式版がリリースされるまでは無料で使えるはず。
今の段階でもそれなりに実用性がありそうなので、WebディレクターなどWeb制作に関わる方、アプリ制作に関わる方はぜひ一度ためしてみると良いのではと思います。今はMac版のみの提供となります。

また、3月15日-17日、「Experience Design Online Conference – Live on Twitch!」という、このプロジェクトに関するオンラインカンファレンスが開催されるようです(全部英語になると思いますが)。
またアドビの轟さんによるクイック解説記事も参考になります。

余談ですが、ロフトワークではExperience Designというキーワードを大事にしている会社でして、XPD(EXPERIENCE DESIGN)という名のイベントシリーズを開催しています。
今回のAdobeのツールの名前の略称が「XD」と、微妙に被ってるようで被ってなくてよかったと思いました。

執筆者

パブリックリレーションズ石川 真弓

WEB制作会社勤務を経て、シックス・アパートで広報及びマーケティングに携わる。2013年7月より、ロフトワークとFabCafeのPR/プランナーとして、広報活動や各種プロジェクトのコミュニケーション戦略のプランニングを担当。本業の傍ら、個人ブログの運営やWebメディアでのライター業務、日本初のHDR写真をテーマにした書籍『HDR写真 魔法のかけ方レシピ』(技術評論社)を刊行するなど、週4日勤務社員とライター・ブロガー活動のパラレルキャリアを実践している。

最近執筆した記事

コメント

blog comments powered by Disqus