Adobe XDの基礎を完全マスターしよう！使い方を学べるサンプルを公開中：Adobe MAX 2016セッションレポート

注目を集めるアドビの新しいデザインツールAdobe Experience Design（以下Adobe XD）の使い方を網羅して大人気となったアドビ轟氏によるMAX Japan 2016のセッション。その中で、製品機能の紹介に使われていたサンプルが一般に公開されました。これさえ一通り確認すれば、Adobe XDの基本はばっちりという優れものです。

そこで、この記事では、サンプルの説明を中心にセッションの様子をお伝えします。録画も公開されていますので、記事と合わせてご覧ください。（下の画像をクリックすると、新しいウインドウが開きビデオが再生されます）

//video.tv.adobe.com/v/16319?autoplay=true

はじめに：Adobe XDは使いたいときが使い時

Adobe XDは、UIデザインとプロトタイプの作成と共有ができて、動作が軽くて使い方が簡単な、と言葉にするとややでき過ぎのような、ともあれ、UI/UXデザインに関わる人には気になるツールであることには違いないでしょう。まだプレビュー版ですし、Windowsバージョンも未公開の状態ではありますが、轟氏によれば「とにかく使える場面では実践投入して！」大丈夫とのこと。その理由は、開発する機能の数を絞る代わりに「品質を優先させる」開発手法にあるようです。

”Adobe XDはプレビュー版でもクオリティはVer 1.0レベル。機能が足りているなら実践投入を！”

また、毎月「少しずつ機能を追加した新しいプレビュー版を公開」を繰り返しているのには、短い間隔で更新を積み重ねることで、ユーザーの声を反映しやすくするという狙いも含まれているそうです。

adobexd_updates

ユーザーの声を集める場所としては、User Voice使われています。実際にサイトを見てみると、要望の多い機能は殆どが開発中もしくは開発予定となっており、Adobe XDへの要望がある人は、こちらに投稿や投票してみると良さそうです。ちなみに「今なら日本語での投稿もOK」だそうです。

サンプルで学ぶAdobe XDの基本機能

それではいよいよAdobe XDの使い方を実際に見ていきましょう。Adobe XDとサンプルデータは以下のボタンからダウンロードできます。それぞれのトピックには、ビデオでデモによる操作を確認しやすいよう、対応する経過時間を併記してあります。

__
Adobe XD ベータ版
ダウンロード

__
Adobe XD サンプルファイル
ダウンロード

1. 基本デザイン操作

Adobe XDを起動して、適当なアートボードを選択すると、デザインモードが表示されます。アートボードの左右に配置された、ツールバーとプロパティインスペクタを使ってデザインを作成するモードです。

ここでのデモは、シェイプやテキストを描画し、複数のシェイプを合成するなどの基本的なデザイン操作の紹介でした。中でも、Adobe XDの特徴でもある、リピートグリッドの使用方法のデモは必見です。

・描画ツール（14:22）

c1-shape

図形描画した後に形状の変更を簡単に行えるのがAdobe XDの特徴です。描画したシェイプをダブルクリックすると、編集モードになって、パスの変形やアンカーポイント移動等の作業ができます。

c2-text

テキストツールは、テキストエリア作成時にクリックするかドラッグするかで、2種類のテキストエリアを使い分けられます。

・パスの処理（19:59）

c3-path

2つのシェイプに対して、合体、型抜き、交差、中マドの操作が行えます。操作後にもダブルクリックすれば、それぞれのシェイプを編集できます。ただし元の色に戻すことはできません。

c4-outline

シェイプとテキストに合体等の操作をした場合、ダブルクリックでそれぞれを編集できるようになりますが、テキストはアウトライン化された状態になり、テキストとしての変更ができない点には注意が必要です。

・画像の配置とマスク（24:03）

c5-mask

画像をあらかじめ用意しておいたシェイプにドラッグ&ドロップすると、シェイプ全体を塗りつぶすように画像が配置されます。一方、「シェイプでマスク」の機能を使うと、シェイプの領域で画像をマスク表示できます。

・リピートグリッド（26:10）

c6-repeatgrid

テキストと画像の組み合わせのように、リピートさせたい単位を選択してから「リピートグリッド」ボタンをクリックすると、選択したユニットの下と右にハンドルが表示されます。これらをドラッグするだけでグリッド状の配置を作成できます。

c7-repeatimg1

グリッド作成後に、要素を追加したり移動した場合、その変更が全てのセルに適用されます。異なる画像やテキストを複数セルに一気に配置できる便利な機能も付いています。

c8-repeatimg2

一度の動作で複数の画像をまとめて配置できました。

2. 基本レイアウト操作

デザイン操作の紹介の後は、アートボード上にシェイプをレイアウトする際に役立つ機能がデモされました。シェイプの並びを揃えるグリッド機能や、シェイプと外部との間隔を計測する機能です。その他にも、シェイプを上下左右に整列する機能や重なり順を変える機能も利用できます。

・グリッド（35:00）

c9-grid

アートボードを選択した状態で「グリッド」をチェックするとアートボード上にグリッドが表示され、シェイプが吸着するようになります。Cmdキーを押しながらドラッグすれば、グリッド使用時でも吸着無しで移動できます。現在利用できるグリッドはマス目に間隔を指定するパターンのみです。

・間隔の計測（35:58）

c10-measure

Optionキーを押しながら、カーソルを移動したり、オブジェクトを選択すると、アートボード内の位置や、他のシェイプとの間隔を表示できます。

3. プロトタイプ機能

画面デザインを作成したら、画面間の遷移を定義したり、それをプロトタイプとしてネット上に共有できるのは、Adobe XDの便利なところです。セッションでは、プロトタイプモードの紹介として、あらかじめ作成しておいた画面デザインに遷移を追加しての動作を確認したり、操作の手順を録画してムービーとして保存する様子がデモされました。