今までWEBサイトやランディングページのデザイン・レイアウト全てをillustratorで行っていたのですが、効率化のため、現在他ツールへの移行・まずはXDの使い方を習得中です。

ウェブUIデザインツール研究！illustrator→XD移行レポート

まず、XDはillustratorやPhotoshopのように細かいデザインはあまり得意ではないため、全体の枠組みはXDで作成し、パーツはillustratorで作成するという方法で使い分けて行うのが良いとされています。

具体的に、XDでは何ができて、何ができないのかをまとめてみました。

XD・illustrator・Photoshopの違いとは？

AdobeXDとは、UI/UXに優れたウェブサイトやアプリなどのデザインを簡単に作成することのできるデザインツールですが、

IllustratorやPhotoshopは画像・デザインの編集の幅の広さが特徴なのに対し、XDは効率重視で、ワイヤーフレームを作る場合や、UI/UXのデザインの作成に向いています。

XDでしかできないこと

1.レスポンシブデザイン機能

今までPCの場合・スマホの場合のデザインを個別に作成することもありましたが、XDを使えばレスポンシブデザインが短時間で効率的に作成できます。

2.リピートグリッド機能

WebサイトやUIデザインに多い、繰り返しのコンテンツ配置の作成に便利な機能です。

1.プロトタイプ機能

作成したデザインのページ間の遷移のリンクを指定してプロトタイプを作成、プレビューすることができます。

ホバーやクリック、スクロール時のアニメーションなどサイトを開いたときにどのような動きをするのかといった、実際の動作も確認することができます。
クライアントへはもちろん・チームでの作業時に動きを口で説明するのは大変ですし、伝わりにくいものですが、デザイン段階で実際に動きを共有することで認識のズレを防ぐことができます。

プレビュー機能

USBでスマホやタブレットなどのデバイスを繋ぐと、修正箇所をリアルタイムで反映させながらデザインの表示確認ができます。

できないこと

一方、XDではできないこともあります。

レイヤー効果や画像補正

Photoshopのレイヤー効果機能や画像補正機能はXDにはありません。
そのため、画像の編集はPhotoshopを併用し行う必要があります。

テキストの細かい調整

テキストの縦書きや、1文字1文字のカーニングなど細かい調整をする機能もありません。
文字周りのデザインを細かく行いたい場合には、Adobe XDは不向きのようです。

XDでおおまかなWebデザインは出来ますが、バナーのデザインなどには不向きとなっており、PhotoshopやIllustratorとの連携が必要なようです。

また、カラーマネジメントができないなどデメリットも踏まえた上で上手に活用していけば、よりスムーズに、より高品質な制作が可能となります。

プランニングA WEBチーム　野々下