注目を集めるアドビの新しいデザインツールAdobe Experience Design（以下Adobe XD）の使い方を網羅して大人気となったアドビ轟氏によるMAX Japan 2016のセッション。その中で、製品機能の紹介に使われていたサンプルが一般に公開されました。これさえ一通り確認すれば、Adobe XDの基本はばっちりという優れものです。
そこで、この記事では、サンプルの説明を中心にセッションの様子をお伝えします。録画も公開されていますので、記事と合わせてご覧ください。（下の画像をクリックすると、新しいウインドウが開きビデオが再生されます）
はじめに：Adobe XDは使いたいときが使い時
Adobe XDは、UIデザインとプロトタイプの作成と共有ができて、動作が軽くて使い方が簡単な、と言葉にするとややでき過ぎのような、ともあれ、UI/UXデザインに関わる人には気になるツールであることには違いないでしょう。まだプレビュー版ですし、Windowsバージョンも未公開の状態ではありますが、轟氏によれば「とにかく使える場面では実践投入して！」大丈夫とのこと。その理由は、開発する機能の数を絞る代わりに「品質を優先させる」開発手法にあるようです。
”Adobe XDはプレビュー版でもクオリティはVer 1.0レベル。機能が足りているなら実践投入を！”
また、毎月「少しずつ機能を追加した新しいプレビュー版を公開」を繰り返しているのには、短い間隔で更新を積み重ねることで、ユーザーの声を反映しやすくするという狙いも含まれているそうです。
ユーザーの声を集める場所としては、User Voice使われています。実際にサイトを見てみると、要望の多い機能は殆どが開発中もしくは開発予定となっており、Adobe XDへの要望がある人は、こちらに投稿や投票してみると良さそうです。ちなみに「今なら日本語での投稿もOK」だそうです。
サンプルで学ぶAdobe XDの基本機能
それではいよいよAdobe XDの使い方を実際に見ていきましょう。Adobe XDとサンプルデータは以下のボタンからダウンロードできます。それぞれのトピックには、ビデオでデモによる操作を確認しやすいよう、対応する経過時間を併記してあります。
1. 基本デザイン操作
Adobe XDを起動して、適当なアートボードを選択すると、デザインモードが表示されます。アートボードの左右に配置された、ツールバーとプロパティインスペクタを使ってデザインを作成するモードです。
ここでのデモは、シェイプやテキストを描画し、複数のシェイプを合成するなどの基本的なデザイン操作の紹介でした。中でも、Adobe XDの特徴でもある、リピートグリッドの使用方法のデモは必見です。
・描画ツール（14:22）
・パスの処理（19:59）
・画像の配置とマスク（24:03）
・リピートグリッド（26:10）
2. 基本レイアウト操作
デザイン操作の紹介の後は、アートボード上にシェイプをレイアウトする際に役立つ機能がデモされました。シェイプの並びを揃えるグリッド機能や、シェイプと外部との間隔を計測する機能です。その他にも、シェイプを上下左右に整列する機能や重なり順を変える機能も利用できます。
・グリッド（35:00）
・間隔の計測（35:58）
3. プロトタイプ機能
画面デザインを作成したら、画面間の遷移を定義したり、それをプロトタイプとしてネット上に共有できるのは、Adobe XDの便利なところです。セッションでは、プロトタイプモードの紹介として、あらかじめ作成しておいた画面デザインに遷移を追加しての動作を確認したり、操作の手順を録画してムービーとして保存する様子がデモされました。
・アートボード間の遷移（36:28）
・プレビュー（37:17）
・共有（37:42）
便利なリソース集
セッションでは、デザイン作業を効率化するための便利なリソースがいくつか紹介されました。アドビが提供する「UIキット」の他にも、ワイヤーフレームやUIデザインに使える部品や、デザインテンプレートなど、様々な外部リソースがが公開されています。
また、便利なショートカットキーの一覧ページも紹介されていました。これも覚えておくと便利そうです。
Adobe XDの使い方を覚えたら、Adobe AppBox Awards 2016に参加してみませんか？皆様のご応募お待ちしております。
Adobe AppBox Awards 2016 開催 ー 今年はAdobe XDで作成されたプロトタイプも審査対象に！
