Adobe XDとは？できることを徹底解説
Webデザインを行うにあたり皆さん何を使っていますか。 これまでUI・UXデザインにおいてはPhotoshopやIllustratorが使われてきましたが、近年では「Adobe XD」を使用するデザイナーが増えています。
Adobe XDとは？
Adobe XDは正式名称「Adobe Experience Design」といいます。2016年3月にベータ版として公開、2017年10月に正式版がリリースされたWebサイトやモバイルアプリのUI/UXデザインツールです。Adobe XDはアメリカのアドビ システムズという会社によって提供されている、UI/UXデザインに特化したソフトです。
Windows（ウィンドウズ）、Mac（マック）、Android（アンドロイド）、iOS（アイオーエス）などデバイスを問わず様々なプラットフォームで使用することができ、動作も軽く直感的に操作が可能なため画面数の多いワイヤーフレームの作成にも便利です。 WEBサイトやモバイルアプリなどの画面デザインやプロトタイプ作成に使われています。早く正確に高品質なデザインを作成することができるため、チームメンバーやレビューの担当者にスピーディーにプロトタイプの共有が可能です。
Adobe XDの二つのモード
Adobe XDには大きく分けて2つのモードがあります。デザインを作成するデザインモードとプロトタイプを作成するプロトタイプモードです。
デザインモード：
「Adobe Photoshop（アドビ フォトショップ）」「Adobe Illustrator（アドビ イラストレーター）」と同じくレイヤー構造になっており、ベジェ曲線やパスの結合機能、マスク機能も使用できます。 その他にも時間短縮に便利な機能が多数備わっており、繰り返す基本エレメントをスピーディーに作成することができるリピートグリッド機能や、簡単にレスポンシブデザインを作成することができるレスポンシブリサイズ機能などがあります。
プロトタイプモード：
デザインモードから数クリックでプロトタイプモードに切り替えることができます。 インタラクティブな動きの表現やオーバーレイ機能に加え、マイクロインタラクションの表現に役立つ自動アニメーション機能やドラッグジェスチャー機能の搭載により、これまで以上に品質の高いプロトタイプを作成することができます。 作成したプロトタイプは同画面から共有が可能で、編集者追加、プレビュー、デザインスペックの共有など、相手に合わせて共有することができます。また、操作をビデオに録画する事も可能です。
Adobe XDの大きなメリット
1.手間を大幅に削除
従来の複数アプリ利用による手間を大幅に削減できます。 ディレクターがワイヤーフレームを作成するときには、PowerPointやExcelなどを使用していたが、PowerPointやExcelは、そもそもワイヤーフレーム作成のためのツールではないため、ところどころ利用上の不具合が起きます。
2.シンプルなUIが実現
シンプルなUIなので使いやすく動作が早い IllustratorやPhotoshopと比べ、Adobe XDはできることや機能は限られていますが、機能が少ない分、シンプルなUIが実現されています。動作もとても軽いので、ロード時間などで作業を邪魔されることはほとんどありません。 IllustratorやPhotoshopを一通り操作できる方であれば、1から操作方法を学ぶことなく、スムーズに扱うことができるかと思います。その点で学習コストが低い。
3.プロトタイプ作成
プロトタイプやコメント機能で制作進行がスムーズ プロトタイプをクライアントに見てもらうことで、実際に動きや全体像を把握してもらえます。 ーディングを行い、テストサイトを作成した後に、動きやページの流れのイメージが異なっていたら、大きな手戻りが発生しますが、こうした事態を未然に防ぐことができるのです。 加えて修正の指示についても工数削減できます。今までワイヤーフレームやデザインの修正があった場合は、メールやPDFなどでわざわざ伝えていたところを、プロトタイプの閲覧ページでコメントできるので、スムーズな制作進行が可能です。
4.共有、連携
ほかのアプリケーションンとの連携がしやすい Photoshop、Illustrator、Sketch（スケッチ）といった他のデザインソフトとの親和性も高く、動画制作ソフトである「Adobe After Effects（アドビ アフターエフェクツ）」への書き出しも可能です。 そのほかにも「Jira（ジラ）」「Slack（スラック）」「Microsoft Teams」などと連携も可能です。
Adobe XDの代替品: Wondershare Mockitt
Wondershare Mockitt はプロトタイピングを作成し、リアルのユーザー体験をプレビューで再現できるオンラインのチームコラボレーションツールです。Adobe XDと同様、インタラクティブでアニメーション化されたプロトタイプをの設計できます、魅力的なデザインを、コーディングなしでWeb、PC、Mac、モバイル上のプロトタイプとUIデザインをプレビューと検証できます。
今回Webデザイナーが使用するツールを紹介いたしました。今までのツールを利用するよりもより効率的なツールを使用していただき、無駄な残業をせず自分の時間を使えるようにぜひ使用していってください。
