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

BY 公開

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

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


img_9526

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

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

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

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

adobexd_updates

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

サンプルで学ぶ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の便利なところです。セッションでは、プロトタイプモードの紹介として、あらかじめ作成しておいた画面デザインに遷移を追加しての動作を確認したり、操作の手順を録画してムービーとして保存する様子がデモされました。

・アートボード間の遷移(36:28)

c11-prototype
Adobe XDをデザインモードからプロトタイプモードに切り替えます。すると、ボタン等のオブジェクトから任意のアートボードにドラッグして線を引いて、そのオブジェクトをクリックした時の遷移先を指定できます。

・プレビュー(37:17)

c12-preview
プレビュー機能を使うと、ウィンドウ内に表示された画面デザインをクリックしながら遷移の様子を確認することができます。操作を録画しておいて、ビデオとして書き出す機能も付いています。

・共有(37:42)

c13-share
共有URLを発行すれば、誰でもブラウザーからプロトタイプを体験できます。実際のユーザー環境で確認することで、より有益なフィードバックを得ることが期待されます。

便利なリソース集

セッションでは、デザイン作業を効率化するための便利なリソースがいくつか紹介されました。アドビが提供する「UIキット」の他にも、ワイヤーフレームやUIデザインに使える部品や、デザインテンプレートなど、様々な外部リソースがが公開されています。

addobexd_uikit
Adobe XDの標準UIキット。iOSやマテリアルデザインのUI部品が提供される

また、便利なショートカットキーの一覧ページも紹介されていました。これも覚えておくと便利そうです。

Adobe XDの使い方を覚えたら、Adobe AppBox Awards 2016に参加してみませんか?皆様のご応募お待ちしております。

Adobe AppBox Awards 2016 開催 ー 今年はAdobe XDで作成されたプロトタイプも審査対象に!

Adobe AppBox Awards 2016

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。