Webサイトやモバイルアプリのデザインを行う人に特におすすめなのが「Adobe XD」です。Adobe XDなら、見た目のデザイン（UIデザイン）と動きのデザイン（UXデザイン）の両方を行うことができ、まさにそれこそが、Adobe XDをおすすめする大きな理由のひとつでもあります。ここでは、そんなAdobe XDの特徴や利点、注意点などを詳しく解説しています。

Adobe XDの基本的な3つの特徴

Adobe XDは「オールインワンのUX・UIソリューション」であると評されています。その理由として挙げられるのが「デザインやプロトタイプを一括して行える」といった機能に代表される基本的な3つの特徴です。

デザインモードとプロトタイプモード

Adobe XDはオールインワンのUX・UIソリューションであるといわれています。少し詳しく説明すると、UXは「UserExperience（ユーザーエクスペリエンス）」の略で、ユーザーがなんらかのサービスなどを通じて得る体験そのものを指します。また、UIは「UserInterface（ユーザーインターフェース）」、すなわち「ユーザーの目に直接触れ、具体的な操作や使用の対象となる部分」のことです。UXとUIの質を高めることが、サービスの「使いやすさ」「使用時の楽しさ、心地よさ」に直結します。

Adobe XDなら、サービスの利便性、快適性の決め手となるUX・UIの双方にアプローチすることが可能です。Adobe XDにはデザインモードとプロトタイプモードの2種類があります。デザインモードでは見た目のデザインが、プロトタイプモードでは動きのデザインが可能です。これら2種類のモードによって、Adobe XDはモバイルアプリやWebサイトのデザイン手順を誰にとってもシンプルかつ容易なものにしてくれます。

共有機能を活用することで作業が円滑になる

Adobe XDは2種類の「共有機能」を備えています。これらの機能があることで、自分以外の制作関係者とのデザインに関するやりとりをスムーズに行えるのです。1つ目は「プロトタイプの共有」と呼ばれる機能です。「プロトタイプの共有」機能を利用することで、設計をオンラインで共有し、関係者へスピーディに公開することができます。公開方法はいたってシンプルで、クリック操作のみで足ります。また、公開された設計はブラウザで閲覧可能というのも魅力のひとつです。関係者がたとえAdobe XDを持っていなくても、インターネット環境とパソコンなどの媒体さえあれば閲覧やコメントの投稿ができます。

2つ目が「デザインスペックの共有」という機能です。デザインスペックとは、見た目のデザインに関わる細かいデータの部分を指します。デザインスペックの代表例が色のコードや線の太さ、フォントサイズなどです。デザインスペックもブラウザから閲覧可能であるため、円滑な情報共有を行うことができます。また、Web制作に必要な画像（アセット）をデザインスペックからダウンロードすることも可能です。

Adobe製品に慣れた人なら学習効率が高い

Adobe XDの特徴の3つ目が「学習効率の高さ」です。Adobe XDは、特に日頃からAdobe製品の操作に慣れている人にとって非常に使いやすいツールだと言えます。また、ショートカット機能においてIllustratorやPhotoshopと共通する部分が多いため、操作性に一貫性を求める人にもおすすめです。

Adobe XDによる学習効率をさらに高めたいのであれば、Adobeが公式に提供している学習キットを利用するのもよいでしょう。Adobe製品を日常的に使っている人で効率的にデザインの学習をしたいなら、Adobe XDを試さない手はありません。

デザインモードの使い方と注意点

いくらAdobe XDの操作性が優れているといっても、デザインモードを使いこなすにはいくつかのポイントを押さえておかなければいけません。ここでは、デザインモードを使いこなすための基本的なポイントや使用上の注意点について解説していきます。

機能がシンプルで使いやすい

デザインモードを使いこなすために押さえたいポイントの1つ目は「シンプルなデザインと複雑なデザインの使い分け」です。Adobe XDでは、IllustratorやPhotoshopと同様に、「アートボード」への描画により作業を進めていきます。ただし、Adobe XDはIllustratorなどと比べて使用できる機能が絞り込まれているため、シンプルなデザイン作成に使用するのがおすすめです。パスの扱い方にはコツがあり、そのコツをつかめたならAdobe XDだけでも作業はできますが、やはり複雑な作業はIllustratorを使ったほうがやりやすいでしょう。

また、Adobe XDのデザインモードで積極的に使いたいのが「リピートグリッド機能」です。リピートグリッド機能では、何度も使っていきたいカタマリをひとつ作りさえすれば、あとはドラッグだけの簡単な作業でそのカタマリをいくつでも複製できます。リピートグリッド機能を上手に使うことで作業効率がアップし、プロトタイプの作成もスムーズになるため、覚えておきましょう。

ほかのAdobe製品との連携

デザインモードを使いこなすためのポイント2つ目が「ほかのAdobe製品との連携」です。とにかくAdobe XDでの作業効率を高めたいのであれば、可能な限り連携を利用していきましょう。たとえば、Adobe XDでpsdファイルをそのまま開くことができます。このとき、ファイルのレイヤー構造も基本的には保たれるため、別のアプリケーションで作成したデザインファイルであっても簡単にAdobe XDへ引き継ぐことができるのです。

また、Adobe XDでは、画像をシンプルな形に切り抜いたり、色の濃淡を調整したりといった基本的なデザイン作業が可能です。しかし、人物画像を切り抜いたり、複数のフィルターをかけて色の調整を行ったりといった複雑な作業はPhotoshopのほうが向いています。イラスト編集であれデザインの調整であれ、Adobe XDで基本的な作業はできますが、それ以上の複雑な作業を行うならIllustratorやPhotoshopを頼ったほうがスムーズでしょう。

デザインモードの注意点

デザインモードの使用にあたっては、注意点が2つあります。

1つ目の注意点が「psdファイルの取り扱い」です。psdファイルは扱い上「一枚絵」になるため、レイヤー構造を保ったファイルとして編集できない場合があります。Adobe XDでの編集に向いているファイルかどうかの見極めはどうしても必要です。

2つ目の注意点は「Adobe XDで編集したファイルはXD形式でしか保存できない」点で、これを知らずにAdobe XDで編集を行うのは若干リスキーといえます。XD形式での保存となると、元のファイルとはまったくの別物になってしまいますし、XDファイルはPhotoshopでは開けないというデメリットもあります。

このデメリットを解決できるのが「CCライブラリ」です。CCライブラリにアセットを入れておけば、そのアセットをPhotoshopとAdobe XDの両方で利用できます。Photoshopでアセットを作り、Adobe XDで開いたCCライブラリに入れておけば、アートボードにそのアセットを配置することも可能です。

プロトタイプモードの使い方と注意点

プロトタイプモードにも、デザインモードと同様に使いこなすためのポイントがあります。それらのポイントと、プロトタイプモード特有の注意点を理解しておくことで、Adobe XDでの作業もさらにはかどるようになるでしょう。ここでは、プロトタイプモードの基本的なポイントおよび注意点を解説します。

視覚的な操作が可能

プロトタイプモードによって、視覚的な操作が可能になります。まず、プロトタイプを作成するためには、アートボード同士やボタンなどの部品とページをつないでいくという作業が必須です。つなぎたいもの同士を、画面上に伸ばした「ワイヤ」でつなぐことでページの遷移ができるようになります。ワイヤでつなぐ際には、画面をどのように遷移させるかについての「選択肢」が選べるので、自分のビジョンに沿った形でのプロトタイプ作成が可能です。また、プレビュー画面で実際の動きを確認しながら作業できるため、要所の確認をこまめに行えます。ある程度作ってしまってから欠陥に気付くといったリスクを避け、安心して作業したい人にとっては非常に嬉しい機能ではないでしょうか。

コピー＆ペーストで作業を効率化できる

Adobe XDのプロトタイプモードにおいて効率化を図りたい人は「コピー&ペースト」の活用をおすすめします。同じ動きを何度も入れ込みたい場合、同じアセットを何度も繰り返して使うという二度手間が生じがちです。その手間を省いてくれるのが「マルチペースト」機能で、この機能を使えばアセットをより簡単に使い回せるようになります。

注意点としては、やはりAdobe XDは「単純作業向き」であることが挙げられます。画面の遷移をさほど必要としない作業の場合、Adobe XDのプロトタイプモードを最大限に活かすことは難しいです。そのため、1ページで完結するようなランディングページの作成といったシーンでは、IllustratorやPhotoshopを使用するほうが、作業効率の面でもおすすめと言えます。シンプルな作りのスマホアプリやWebサイトの作成であればAdobe XDが向いているため、作成する対象によっての使い分けが重要でしょう。

Adobe XDの利用方法

Adobe XDのメリットの1つが「ローコスト」である点です。Adobe XDは無料で始めることもできるため、お試し利用してみたい人にもうってつけと言えます。無料で利用できるのは、Adobe XDの「スタートプラン」です。スタートプランというと、機能が制限された使いづらいバージョンをイメージされるかもしれませんが、そんなことはありません。Adobe XDのスタートプランでは「Adobe Fonts無料プラン」という限定のフォントセットや、CreativeCloudライブラリといった多彩な機能が使用できます。さらに、Adobe XDはアプリケーション自体の起動速度も速く、操作性もパソコンのスペックに左右されにくいという嬉しいメリットを備えているのです。

Adobe XDを使いこなす手順

Adobe XDを使いこなしていくためには、最初に、基本的な操作方法を理解しておく必要があります。

ワークスペースの作成とワイヤーフレーム

Adobe XDの起動後まっさきにすべきは「ワークスペースの作成」です。起動後にスタート画面で作成したい画面サイズを選ぶと、下地となるアートボードが出来上がります。アートボードとは、ワイヤーフレームやデザインを書き込んでいく画面のことです。設計図を描いていくためのまっさらなキャンバスをイメージするとわかりやすいかもしれません。一度選んだアートボードのサイズは、作成の経過に応じて変更できます。ページが長くなればサイズも大きくできるため、サイズ面でのストレスに悩まされることなく作業を進めていけるでしょう。

ワイヤーフレームの作成は、管理画面の左右に設置されたパネルを使って行います。まずは左側にあるパネルから、図形やテキストなどを選んでアートボードに挿入しましょう。それらの図形やテキストの文字サイズ、色、形状や配置などを、右側のパネルを使って設定していきます。これが、ワイヤーフレーム作成の基本的な流れです。また、Adobe XDでは「UIキット」というツールを無料で利用できます。UIキットは、Webやアプリで頻繁に使われるパーツを集めたお役立ちツールです。UIキットにあるパーツを組み合わせることで、ワイヤーフレームの作成がより簡単になります。

ページの作成とプロトタイプの設定

Adobe XDによって複数のページを作成し、それぞれを管理していくための手順を見ていきましょう。Adobe XDで下層ページを作成する際には、とある手順を踏むことでその後の修正漏れを防ぐことができます。その手順が、ヘッダーやフッダーなどの共通パーツのコンポーネント化です。コンポーネント化されたパーツは、たとえ複数のページで使われていたとしても、一度編集すればすべてのページでその編集結果が反映されます。コンポーネント化しておけば、修正などの作業が一括でできてしまうため、修正漏れを防げるうえに複数のページでいちいち共通パーツを修正していくといった手間も省けます。

アートボードを追加することで、複数のページを作成することができます。アートボードの追加の手順は非常にシンプルです。また、同一のファイル内で作成できるため、Webサイトの管理も一元化できます。では、各ページについて、どのタイミングで相互にリンクさせればよいのでしょうか。Adobe XDの場合は、「下層ページのワイヤーフレームを作成した段階」でリンクの手順を踏みます。この手順において活躍してくれるのが「プロトタイプ機能」です。プロトタイプ機能を用いることで、各ページのリンクづけが容易になるため、積極的に活用していきましょう。ちなみに、プロトタイプとは、Adobe XDで作成したワイヤーフレームの一要素として、ほかの画面へのリンクを設定できる機能のことです。

自動保存とクラウド機能の活用

プレビューをブラウザ上で共有できるのはAdobe XDの魅力のひとつですが、それだけではありません。Adobe XDでは、クラウド機能を使うことにより、ファイルの自動保存と共有を行うことができます。ここでいうクラウド機能とは、XDファイルの自動保存と共有に特化した「AdobeCreativeCloud」のことです。自動保存されるため、複数人や複数の拠点で作業している場合でも、それぞれが常に最新バージョンのファイルに触ることができます。また、ブラウザ上でのプレビュー機能により、Adobe XDを持たない関係者であってもインターネット環境さえあれば内容をすぐに確認可能です。セキュリティ面を重視したい場合は、閲覧権限をパスワードでロックすることもできるため、安心して共有化を進められます。

作業を進めるなかでは、ファイルを印刷したりデータとして閲覧したりするシーンがでてくるでしょう。Adobe XDはそういったシーンにも対応しており、ファイルをPDFデータやPING画像データとして出力できる機能も備えています。プロジェクトのメンバーやクライアントからのフィードバックも、Adobe XDのコメント機能を活用すればスムーズです。