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