Adobe XDとは

公開日:2023-07-01

「Adobe XD(Adobe Experience Design)」とは、アメリカのアドビ システムズという会社によって提供されている、UI/UXデザインに特化したソフトです。WEBサイトやモバイルアプリなどの画面デザインやプロトタイプ作成に使われています。早く正確に高品質なデザインを作成することができるため、チームメンバーやレビューの担当者にスピーディーにプロトタイプの共有が可能です。

Windows(ウィンドウズ)、Mac(マック)、Android(アンドロイド)、iOS(アイオーエス)などデバイスを問わず様々なプラットフォームで使用することができ、動作も軽く直感的に操作が可能なため画面数の多いワイヤーフレームの作成にも便利です。

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

Adobe XDには大きく分けて2つのモードがあります。デザインを作成するデザインモードとプロトタイプを作成するプロトタイプモードです。

デザインモード

「Adobe Photoshop(アドビ フォトショップ)」「Adobe Illustrator(アドビ イラストレーター)」と同じくレイヤー構造になっており、ベジェ曲線やパスの結合機能、マスク機能も使用できます。
その他にも時間短縮に便利な機能が多数備わっており、繰り返す基本エレメントをスピーディーに作成することができるリピートグリッド機能や、簡単にレスポンシブデザインを作成することができるレスポンシブリサイズ機能などがあります。
シンボルも作成できるため、アイコンやボタンなどの同じ要素を複数のアートボードで使用できます。

プロトタイプモード

デザインモードから数クリックでプロトタイプモードに切り替えることができます。
インタラクティブな動きの表現やオーバーレイ機能に加え、マイクロインタラクションの表現に役立つ自動アニメーション機能やドラッグジェスチャー機能の搭載により、これまで以上に品質の高いプロトタイプを作成することができます。

作成したプロトタイプは同画面から共有が可能で、編集者追加、プレビュー、デザインスペックの共有など、相手に合わせて共有することができます。また、操作をビデオに録画する事も可能です。

モバイルデバイスでのプレビューもできるため、モバイルアプリやスマートフォン用のデザインはすぐに手元のデバイスで確認できます。

その他の機能

Adobe XDには100を超えるプラグインがあり、より便利な機能を利用することができます。また様々なデバイスに対応したUIキット、デザイナーによるアイコンセットも提供されています。

音声コントロール機能も搭載され、需要の高まっている「Alexa(アレクサ)」などの音声ユーザーインターフェイス(VUI)に向けても質の高いプロトタイプが作成できます。

他のアプリケーションとの連携

Photoshop、Illustrator、Sketch(スケッチ)といった他のデザインソフトとの親和性も高く、動画制作ソフトである「Adobe After Effects(アドビ アフターエフェクツ)」への書き出しも可能です。そのためデザインだけではなく動画を使うデジタルマーケティングにも活用できます。

そのほかにも「Jira(ジラ)」「Slack(スラック)」「Microsoft Teams」などと連携も可能となっており、業務の効率化を測ることができます。

著者:デジタルハリウッド スクール 編集部