Adobe XDは、Adobeが提供しているデザインオールインワンツールです。UI/UXデザイナーは特に活用したいツールとなっており、日本語にも対応しています。デザイナー以外もデザインを構築する機会も多く「デザインの知識がなくても本当につかえるの？」といった心配もあるかと思います。
そこで今回は、Adobe XDの使い方について解説します。

Adobe XDとは

Adobe XDとは、Webサイトはもちろん、モバイルアプリなどのデザインに適しており、正確で高い品質の作業をバックアップしてくれるツールです。コーティング知識がなくとも利用できる、スピード感と直感的な操作を実現しています。

その秘密はテンプレートにあります。好みのものを組み合わせればオリジナリティのあるプロトタイプの作成も可能です。

作成したデザインはチームメンバーへの共有も可能。Windows・Mac・iOS・Androidといった、様々なデバイスへシームレスに反映できるツールとなっています。
また、一部の機能に制限はあるものの、スタータープランを選択すれば無料で利用できます。まさに気軽に導入でき、抜群の操作性を誇るツールと言えるでしょう。

Adobe XDの機能

では、Adobe XDの機能の一部を紹介します。

Adobe XDでできることは大きく分けて以下の3つです。

  • ワイヤーフレームやデザインカンプの作成
  • プロトタイプ作成
  • デザインの共有やコメント

Adobe XDのアートボード作成

Adobe XDのアークボードは、モバイルアプリやWebサイトのページなど、プロジェクト用にデザインする各画面を表示します。
ここでは「通常のアートボード作成」と「スクロール可能なアートボード作成」について解説します。

通常のアートボード作成

初めてファイルを作成する時は、ホーム画面のプリセットからアートボードのサイズが選択可能です。もし、カスタムサイズを設定したい場合は、カスタムを選択しピクセル単位でサイズを指定しましょう。

既存のファイルにアートボードを追加する時は、まずアートボードツールをクリック。その後、右側のパネルのいずれかのプリセットをクリックし、設置する場所をさらにクリックします。
また、既存のアートボードを選択して、コピー＆ペーストでも作成可能です。

スクロール可能なアートボード作成

デザインを作成する時に、アートボードの長さが不足しているためコンテンツのすべてを表示できない場合があります。
その場合は、アートボードを長くし、デザインに応じてオプションを選択。そうすると、上下にスクロールして最も適したデバイスサイズに対応できます。
ただし、現在のところ、水平スクロールには対応していないので注意しましょう。

Adobe XDの各ワークスペース名称と機能

Adobe XDのワークスペースには、Mac版とWindows版があります。

image1.png

出典：
ワークスペースの基本

簡単に各名称と機能について解説していきます。

Adobe XDのメインメニュー

メインメニューには以下のものが含まれています。

  • ファイルメニュー
  • 編集メニュー
  • オブジェクトメニュー
  • 表示メニュー
  • ウィンドウメニュー
  • ヘルプメニュー
    それに加えて各メニューには、サブメニューがあります。

デザインモード

デザインモードではアートボードの作成とデザインが可能。
他のツールで作成されたアセットやWebで作成されたアセットを読み込んだり、グラフィックの作成ができます。

プロトタイプモード

プロトタイプモードではアートボード同士のリンク・デザインのビデオデモの作成ができます。ただし、これは現在のところMacのみとなっています。
さらに、プロトタイプの作成・共有・フィードバックの取得も可能です

アプリケーションツールバー

アプリケーションツールバーでアクセスできるのは以下のようなものです。

  • デザインモード
  • プロトタイプモード
  • カンバスのズームレベル
  • プレビュー
  • 共有オプション

ツールバー

ツールバーでアクセス可能なのは以下の通りです。

  • 選択ツール
  • 描画ツール
  • テキストツール
  • アートボードツール、
  • アセットやレイヤーパネル

プロパティインスペクター

プロパティインスペクターによって、オブジェクトのプロパティを定義して可能。オプションによってオブジェクトを操作できます。
背景・塗り・境界線・整列といった指定ができ、複数のオブジェクトを組み合わせることも。
また、リピートグリッドオプションの使用によって、繰り返すエレメントのレイアウトもできるようになっています。
他にも、スクロール時の複数エレメントの位置の固定や、オブジェクトの幅と広さの変更などを行うことができます。

ワークエリア

ワークエリアにはカンバス、またはアウトボードが作成したアセットと一緒に含まれています。また、アートボード周囲のグレー領域であるペーストボードでは、作業中や既存のアートボードに含めない作品の配置も可能です。
また、Windows版はこちらです。

image2.png

出典：
ワークスペースの基本

Windows10版のインターフェイスは若干の違いはあるものの、Mac版のインターフェイスとほぼ同様です。

Windows版には最上位レベルメニューとオブジェクトメニューがなく、代替としてオブジェクトの右クリックから現れるコンテキストメニューの使用が可能です。
また、左上隅にはファイルの作成や保存・アセットの書き出しができる、ハンバーガーメニューの設置がしてあります。

Adobe XDのオブジェクト作成の仕方

左側のツールバーに展示してある描画ツール使用して、オブジェクトの作成ができます。この描画ツールによって、単純なアイコンやグラフィックであれば素早く作成可能。
さらに、選択ツールを用いると特定の線やシェイプ・オブジェクトの選択によって編集もできます。

Adobe XDの画像の配置の仕方

画像の配置には練習用のサンプルファイル（kotohajime_wire.xd）があるので、ダウンロードしてみましょう。見本のファイルを参考にして、既存のワイヤーフレームに画像の配置が可能です。

オブジェクトに配置した場合でも、実際の作業もそれほど難しくありません。作成したオブジェクトに配置したい画像をドラッグアンドドロップした後、その上にオブジェクトを配置します。「オブジェクト」→「シェイプでマスク」を選択すると、自動的に画像がオブジェクトの形で切り抜かれて完了です。

Adobe XDのリピートグリッド

リピートグリッドは、Adobe XDの最も大きな特徴です。
リピートグリッドを使用するとメニューや記事のリストなどの規則性のあるレイアウトに複数の画像やテキストを一気に配置可能。

実際の操作は、画像とテキストのグループをまとめて選択し、リピートグリッドボタンをクリック。その後、リピートグリッドのハンドルを下方向または右方向にドラッグします。さらに、複数の画像ファイルをまとめて選択し、画像エリアのいずれか1つにドラッグ&ドロップ。テキストの挿入も可能になっています。

Adobe XDの書き出し

Adobe XDでは、デザインアセットとアートボードへの書き出しも可能ですMacでは、ファイル／書き出しを選択。Windowsでは、ハンバーガーメニューにある「書き出し」をクリックします。
加えて、レイヤーパネルでアートボードを選択し、右クリックで書き出しを選びます。

マークされたアセットの書き出しができるバッジや選択されたアセットの書き出しができる選択済み・デザイン内のすべてのアートボードの書き出しも可能です。
また、複数のオブジェクトを一つのアセットとして書き出す場合は、オブジェクトのグループ化を行います。

WebやAndroidといった目的のプラットフォームとファイル形式を選択してディレクトリ指定した後に出力ファイルを保存します。
メッセージが表示されたら解像度を指定し書き出しをクリックしたら完了です。

Adobe XDのアップデート

Adobe XDの最大の特徴は頻繁なアップデートです。
かなりの頻度でアップデートを行っており、2019年10月にも新機能が追加されています。このアップデートでも多くの機能が追加されていますが、XD23.0以降に対応した機能として、そのうちの3つを紹介します。

  • ブレンド効果
  • 位置とサイズの微調整
  • 重なり合うレイヤーの順次選択
  • ひとつずつ解説していきます。

ブレンド効果

XD23.0以降では、非破壊的なブレンド効果の適用によって画像やグラフィックアセットの設定が可能になりました。
このブレンド効果によって、オブジェクトのデザインカラーの変更ができるようになり、さらに活気のあるデザインに仕上げられます。

位置とサイズの微調整

キーボードショートカットと矢印キーの組み合わせにより、グリッドサイズ単位でUI要素の位置とサイズを変更できるようになりました。

Shift+矢印キーで選択範囲を10px単位で移動可能。
サイズの変更はcommand+矢印キーで1px単位の変更ができます。
また、選択範囲を10px単位でサイズ変更する時の操作は以下の通り。

Mac Windows
command+Shift+矢印キー Alt+Shift+矢印キー

正方形グリッドが有効な場合は、グリッドへスナップするように選択範囲を移動した後、以下の操作で移動や変更が可能です。

  • Shift+矢印キー→グリッドサイズ単位で移動
  • 上記の表の操作→グリッドサイズ単位で選択範囲のサイズを変更
    それぞれ、左上隅に要素が固定されます。

重なり合うレイヤーの順次選択

重なり合うレイヤーの順次選択は、commandキーもしくはCtrlキーを押しながらクリックでキーボードショートカットのビヘイビアーが拡張。
デザインカンバスとデザインスペック上で、Z軸の上から順にオブジェクトを選択できます。
また複数のレイヤーが上下に積み重ねられている場合、同様の操作を選択したレイヤーの下にある次のオブジェクトを選択。一番下のレイヤーに到達してから、同じショートカットキーの使用で最上位レイヤーに戻せます。

このように、簡単なショートカットキーで、様々な機能が直感的に使用できるようになっています。

まとめ

このように、Adobe XDは専門知識なく簡単に扱えるツールです。もちろん本業のデザイナーさんでも十分に利用できる機能やデザイン性も持っています。また、先ほどお伝えしたように、Adobe XDには無料のプランもあります。気になる方はぜひ一度試してみるとよいでしょう。