UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介します

Adobe Experience Design（以下、Adobe XD）の評判はいいって聞くけど、実際のところどうなの？ 使えるの？ そんな疑問がすっきりするAdobe XDで何ができるのか、Webサイトやアプリのワイヤーフレームやプロトタイプを作成するのに便利な機能を紹介します。

Wireframing and Prototyping in Adobe XD

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• UI/UXデザインに適したツールを探して
• Adobe XDとは
• Adobe XDのアートボード
• Adobe XDのシェイプ操作
• Adobe XDのオブジェクトのグループ化
• Adobe XDのリピート グリッド（Repeat Grid）
• Adobe XDのエクスポートとインポート
• Adobe XDでプロトタイプを作成
• Adobe XDについての評価

UI/UXデザインに適したツールを探して

私はメインのデザインツールとして、Photoshopを長年に渡り使用してきました。その中にはモックアップ、ワイヤーフレーム、もちろんイラストやグラフィックも含まれます。

しかし、それが私のWebデザインの仕事のための完璧なツールであるとは思いません。その理由については以前、記事に書きました（Should We Still Use Photoshop To Design Websites?）。

そう思いつつも、私は最近までワイヤーフレームやモックアップを作成するために、PhotoshopでUI/UXの仕事をしていました。インタラクションを伴うプロトタイプを作成するには、すべてのスクリーンをPNGにエクスポートし、InVisionのような他のアプリを使わなければなりません。
これはあまりにも面倒で効率が悪く、そして時間のかかる作業です。

そこで私は他によい方法がないか、多くの時間をかけて探しました。しかし多くの時間を投資する価値があるのは見つかりませんでした。Sketchに乗り換えようと思ったことはありますが、最終的にはAdobeのプロダクトに執着したいという結論になりました。

それらのプロダクトの間には明白なギャップがあります。AdobeはFireworksに取り組むのをやめ、それに代わるものを導入しませんでした。PhotoshopのアップデートもEdge Reflowなど、UI/UXデザイナーに役立つものではありません。

私には新しい何かがくる予感がありました。
そうです、わたし達はその何かにようやく出会えたのです。

Adobe XDとは

Adobe XD(Adobe Experience Design)は、2016年3月14日にPublic Preview 1が公開され、今日に至るまで毎月新機能が搭載されアップデートされています。2016年6月現在、プレビュー版はOS Xのみです。

Adobe XDとはどんなアプリかとひと言で説明すると、Webサイトやアプリのプロトタイプ・ワイヤーフレームを素早く作成できるデスクトップアプリケーションです。
Adobe XDには2つのモードがあり、1つはスマホ・タブレット・デスクトップのWebサイトやアプリのUIを制作できるDesignモード、もう1つはUI操作による画面遷移やそのエフェクトを設定し、プレビューができるPrototypeモードです。

Adobe XD

私は既にAdobe XDを使用しており、バージョンはまだ0.5ですが、確かな経験を持っています。Adobe XDはまだ完成されたアプリケーションではありませんが、非常に将来性の高いものであると言えます。

• とにかく速い

  これはまじめな話、笑ってしまうくらい速いです。
  私が始めてAdobe XDを起動した時、アプリのアイコンをクリックし、まぁ他のAdobeのアプリのようにしばらくロード時間があるだろうとのんびりしていたら、すぐにロードが完了しました。40個以上のアートボードがあるプロジェクトファイルでも、ブランクのPSDをPhotoshopで開くより圧倒的に速くロードします。

• そして簡単

  Adobe XDのインターフェイスは非常に直感的で使いやすく、学習する時間を必要としません。もしPhotoshopやSketchを使ったことがあるなら、すぐに作業をはじめることが可能でしょう。そしてすぐにチームのメンバーにヴィジュアルとして見せることができます。

• しかも高機能

  Adobe XDは一見、非常にミニマルに見えます。しかし実際は時間を節約するためのアイデアがいっぱい詰まっています。これらは必要としない時には見えません。サイズ、変形、コントール、編集など、すべてのボックスは、エレメントをクリックしたり、特定のアクションをした時だけ表示されます。機能のすべてが非常にシンプルで、直感的で、予期した通りにうまく操作できます。

私が大好きなAdobe XDの特徴をここにすべて、紹介します。

Adobe XDのアートボード

アートボードはSketch, Photoshop, Illustratorですでに使ったことがある人であれば、新しくないでしょう。Adobe XDのアートボードでは最初にスマホ・タブレット・デスクトップ用のスクリーンサイズ、そしてサイズをカスタマイズして始めることができます。

Adobe XDの起動画面

定義されたスクリーンは垂直方向の区切りに点線を表示し、正方形のグリッドを1クリックで作成することができます。

Adobe XDのアートボード

Adobe XDのシェイプ操作

Adobe XDでベクターの形はIllustratorほど充分な作業は行えませんが、ワイヤーフレームやプロトタイプを作成するレベルでは充分に作業できます。

Adobe XDでのシェイプ操作

Adobe XDのオブジェクトのグループ化

レイヤーやレイヤーグループはまだありません。しかしどんな要素でも素早くグループ化することができます。操作方法はIllustratorに似ており、子オブジェクトを編集する時はグループをダブルクリックします。
Adobe XDのグループ機能で私が気に入っているのは、グループでのサイズ変更がうまく機能することです。

グループのサイズ変更は賢い

Adobe XDのリピート グリッド（Repeat Grid）

これは私が今までに一度も見たことがない機能です。
Adobe XDでは「Repeat Grid」機能を使って、要素のどんなグループでも水平に、あるいは垂直にコンテンツを素早く繰り返すことができます。

「Repeat Grid」は右パネルから（使用中の表示は「Ungroup Grid」）

Adobe XDのエクスポートとインポート

Adobe XDからあなたの仕事を見せるには、2つの方法が用意されています。

1. アートボードをPNGかSVGでエクスポートしてファイルを送るか、InVisionのようなサードパーティのアプリにアップロード。
2. プロトタイプへのリンクを作成して知らせる。

Adobe XDのリンク作成

画像のインポートは、PhotoshopのJPEGやPNG、Illustratorのベクターをペーストで簡単にできます。Sketchの場合はSVGにエクスポートして、Adobe XDにインポートできます。

もし複数の画像を配置したい時は、ドラッグ&ドロップが簡単です。「リピート グリッド（Repeat Grid）」と合わせて使うと、非常に便利です。

選択範囲に一括で画像を配置、「リピート グリッド（Repeat Grid）」にも対応

Adobe XDでプロトタイプを作成

プロトタイプの作成は、Adobe XDの大きな特徴です。
プロトタイプの作成ツールとしてAdobe XDは非常に基本的で、その機能性を他のツールと比較することができません。

しかしながら、シンプルな点とオールインワンのアプローチは、利便性に優れていると言えるでしょう。インタラクティブなプロトタイプを作成するために、パーツやスクリーンをエクスポートをする必要はありません。メニューで「Design」から「Prototype」に切り替えるだけで作成できます。

上部メニューで「Design」から「Prototype」に切り替え

Adobe XDについての評価

あなたはAdobe XDで何ができ、何ができないのか理解されたと思います。まだベータバージョンなのでこれから多くの機能が加わると思いますが、非常にシンプルで簡単であることは忘れないようにしましょう。

高解像度のモックアップを作成したり、使っているデザインツールに今すぐ代わるものであるとは思いません。しかし、ワイヤーフレームやプロトタイプを素早く作成する素晴らしいツールであることは確かです。