AdobeXDとは？

UI/UXなどワイヤーフレームといわれるWebコンテンツの設計図的なドキュメントを作成するに適したツールです。

そのほか、リンク遷移やフラットデザイン制作などにも適した機能が実装されており、パワーポイントやエクセルをはじめとしたOffice系のツールを使用せずに、多彩なプロトタイプを直下的に作成することが可能です。 特にAdobeのPhotoshopやIllustratorを使用した人であれば、レイヤーやレイヤースタイルなども最低限の機能がついているので、レスポンシブ対応のフラットデザイン制作も可能になっています。

利用するにはAdobeかGoogleアカウントが必要で、ログインした後にアプリをダウンロードすることが可能です。

AdobeXDは、主に以下のことができます。

• ワイヤーフレーム制作
• プロトタイプ制作(リンク遷移可)
• UI/UXデザイン
• Webデザイン
• プレゼン用ドキュメントほか

とにかく直感的に瞬時にワイヤーフレームができます

AdobeXDのメリットと特長

AdobeXDを使用してみて、といっても付属するチュートリアルですが、主にすごくよかった点は以下になると感じました。 やや専門的な用語が混じっていますが、あわせて解説しています。

• グリッド調節が超ラク
• アートボード設定が超ラク
• コンテンツの複製が神
• マスクが神
• 色の変更が神
• フォント変更が神

• グリッド調節が超ラク

グリッドとは格子状に揃えることで、配置という言葉がわかりやすいでしょうか。 通常デザインツールでは格子状にオブジェクト(文字や写真など)を揃える設定をしたり、配置を整えたりしますが、AdobeXDでは標準でグリッドに自動吸着してくれるので、オブジェクトをピッタリと揃えることがスムーズに行えます。

• アートボード設定が超ラク

アートボードとは作業台みたいなイメージでしょうか。画面幅のことですね。Webサイトだと横幅1000-1200ピクセル前後、スマホだと320-768ピクセル前後、タブレットだと768-1024ピクセル前後など複数の最適なデザイン幅があるのですが、XDの場合では、これらの画面幅のアートボードがデフォルトでそれぞれそろっています。ドラッグドロップですぐにいくつでも面数を追加できるようになっています。

• コンテンツの複製が神

コンテンツの複製はとても楽でした。コピペは勿論、リピートグリッドといって、コンテンツを人幅の間隔のマウススクロールで複製できます。同じコンテンツが並ぶ場合は、グループ化したコンテンツ(グリッド？)をマウス操作でいくらでも複製できて、あらかじめ等間隔で揃えて作成されるので、同じ書式タイプのコンテンツが並ぶときなどは重宝しますね。

• マスクが神

オブジェクト(シェイプ)を用意して画像を投げ込むだけで、形通りマスクがかかります。 丸形や長方形だけでなく星形などの図形ツールもあり、角丸や点線など瞬時に加工ができるのもとても便利でした。

• 色の変更が神

AdobeXDの中でもとりわけすごいと感じたのがアセット機能です。一瞬でグリッド内のグリッドの色を指定して一括置換できます。 色合いの違うWebデザインやフォントのワイヤーフレームを瞬時に制作することができそうです。

• フォント変更が神

フォントについても同様で、アセット機能で指定した同一フォントを一瞬で置換できます。異なる組み合わせのフォントを使用して、Webデザインやフォントのワイヤーフレームを瞬時に制作することができそうです。

XDは基本8つの機能と2つのデザインモードがベースとなっていますが、簡易的な印刷データやWebデザイン類も対応が可能です。

• 選択
• 図形ツール
• テキスト
• ペン
• アートボード

XD見栄えのよいワイヤーフレームやプロトタイプ作成に最適

XDの主な機能

XDのチュートリアルなら30分もあれば基本的な機能を習得できるかもしせん。 おもに、

• 選択
• 図形ツール
• テキスト
• ペン
• アートボード

と、Macユーザーを意識しているのか、かなり直感的なインターフェースと機能になっています。 ExcelやPhotoshopの機能が簡略化させて必要な機能のみに整理しているようなイメージでしょうか。

あとはデザインとプロトタイプと、メインメニューが分岐されていますが、こちらも用途に合わせて変更するようなイメージで、基本的な使い方にあまり差異はありません。

レイヤーという管理方法を採用しているので、PhotoshopやIllustratorを使っている人なら違和感ないですが、初めての人にはちょっとわかりづらいかもしれないですね。 ほか、レイヤースタイル(色付けしたり形を揃えたり、透明度調整やドロップシャドウ)がありますが、すこし使い込めば理解しやすいわかりやすい構造です。

これからPhotoshopやIllustratorを覚えようという人にもおすすめ

AdobeXDのデメリットや難点

さて、万能感がつよいAdobeXDですが、デメリットというか用途や機能、今後についてはいくつか難点や改善点などがありました。

AdobeXDにもういくつか懸念点がありましたが、以下で詳細について説明します。

• PSDやAIファイルへの書き出しができない

読み込みや機能制限がありますが、レイヤーを維持したままXDでPSDやAIファイルを開くことが可能で、エクスポートする場合にはPDF化してから再読み込みさせる必要があるようです。もちろん複数のアプリを経由するので、レイヤースタイルやエフェクト類は正常に再現されません。

• ショートカット使用が多すぎる

チュートリアルにもあるのですが、トラックパッドを使うことが前提に説明が記載されていました。ほかはキーボードのショートカットキーを多用しないとまともに操作できません。キーボード操作が得意な人にはとても使いやすいでしょうが、その逆の人の場合はちょっと使いづらいかもしれないです。

• デザインメインには向かない

ある程度のワイヤー制作が可能なので、デザイン制作で使用している場合もわりと多いようです。 おもにフラットデザインで画像とテキスト、あとは図形などがあればよい場合はXDだけでも十分かもしれません。 ただグラフィックをメインに考えると全然別アプリとなるので、Webデザインでも画像加工や複合的な機能が必要な制作にはまったく向いていません。というか、物理的に対応ができないでしょう。

• 無償版がいつ終了するかわからない

たしか最初はAdobe製品では従来通り、期限付きの体験版のような形式でダウンロードできたのですが、最近ではスタータープランとして無償版を利用できるようになっています。有料版は毎月課金型になっており、1ヵ月1,180円か1,980円で利用可能(2023年2月確認時/2023年5月時点で単体プランは廃止されているようす)です。 ただスターターキットはいつ終了するかわからないので、数年後には使用できなくなる可能性がないとはいいきれません。Adobe MUSEのような前例もあります。

と、わりと無理にデメリットを抽出しましたが、ワイヤーフレームやプロトタイプを作成するには、いちばん最適なツールのひとつであるといえるでしょう。

ショートカットさえマスターすれば神レベルでワイヤー作成できるかも？

総括。すなわち、まとめ

まとめとなりますが、AdobeXDはぜひ使用したいツールです。 特にワイヤーフレームやプロトタイプの作成はショートカットキーをマスターすれば各段に効率がアップするでしょう。 ただ、ワイヤーフレームやプロトタイプを作成する機会はそれほど頻度が高く、重要度が高いわけではないので、製品自体が秀逸でも更新されなくなっていくことも考えられます。

クラウド型のアプリなので、アップデートが停止されたら使用できなくなるかもしれませんが、完全に有料化されているので、どの程度のアプリ寿命を想定して判断するかはわりと重要になるかもしれません。

有償プランでも、それほど利用頻度がない人の場合は、毎年15000~25000円ぐらいの費用が発生するので、すこし高価なアプリになってしまうかもしれないですね。とはいえ、対価には十分見合う機能性だと感じます。

Adobe XDクラウド同期は不要。Figmaを使用しクラウド制作。

ということで特別なアドバンテージを感じなくなったためAdobe XDを非使用対象としました