AdobeXD01

Adobe XDとは?使ってみたのでどんなツールかまとめました。

WebデザインやアプリのUIデザインができる Adobe XD を使ってみました。
この記事ではAdobe XDについてご紹介していきたいと思います。

Adobe XDとは?

https://www.adobe.com/jp/products/xd.html
IllustratorやPhotoshopのAdobe社が2017年秋にリリースしたUI/UXデザインツールです。
ちなみにWebデザインやモバイルアプリのデザイン専用のツールとなっています。

では、今まではAdobe製品だとどのツールを使ってWebデザインをしていたかというと
PhotoshopやIllustratorになります。しかし、各ツールは機能が豊富で
Webデザインに対応できるのですが、専用ツールではないため、
Webデザインやモバイルアプリのデザインに
合わせた設定変更を行う必要があります。

では各ツールの特徴について説明して行きます。

Photoshop
https://www.adobe.com/jp/products/photoshop.html

ちなみにPhotoshopは写真の加工を得意としたツールです。
扱う画像データはビットマップとなります。
このデータ形式は拡大、縮小すると画像が劣化することから
最近の様々な画面サイズへの対応が求められる
WebやモバイルアプリのUIデザインには不向きではあります。
とはいえWebデザインはPhotoshopで行なっている人が非常に多く、
企業でWebデザイナーをするならPhotoshopのスキルが必要になるでしょう。

Illustrator

https://www.adobe.com/jp/products/illustrator.html

一方Illustratorは図形を用いた画像作成を得意としたツールです。
幅広い用途に使われていて、ロゴ、アイコン、ポスター、看板、商品のパッケージなど
世界標準で使われています。印刷物をメインにするならIllustratorです。

扱うデータはベクターデータとなっています。
これは拡大、縮小に強いため、Webデザインやモバイルアプリの
UIデザインに対応できます。とはいえWebやアプリ専用ツールではないため、
UIデザインをする上では適切な設定へ変更する必要があります。

xd

https://www.adobe.com/jp/products/xd.html

最後にAdobeXDはUI/UXの専用デザインツールであり、
操作方法もシンプルで直感的な操作ができます。
とっつきやすくて初心者にも優しいツールとなってます。

でAdobeXDで作成する画像はベクターデータとなっているので、
拡大、縮小に強いです。

また、UIキットといういろんな画面やアイコンなどパーツのセットがあるのですが、

これが便利です。モバイルだと表示されるアンテナのアイコンや充電のアイコンなど

使い回しできるものがたくさんあるので、デザイナーはオリジナル部分のデザインにすぐに

取りかかれるので作業時間の短縮に繋がりますね。

うーん。便利!

Adobe XD のプラン

plan

https://www.adobe.com/jp/products/xd/compare-plans.html

Adobe XDは定額制のプランを購入することで使用できます。
でXDの気になるお値段ですが、
なんとスタータープランは無料となっています。
うーん。これは助かりますね。
以下はどのプランでもAdobeXDが使えます。

  • スタータープラン:無料
  • 単体プラン:1,180 円/月(税別)
  • Creative Cloudコンプリートプラン:4,980 円/月

スタータープラン

学生とかデザインを勉強したいけど、最初から
お金をあまりかけれない人も気軽に試すことができます。

1ヶ月無料体験版とかと違って期間を気にせず利用できるのも無料プランの良いところですね。
でスタータープランの中身ですが、どのプランでも機能は全て同じことができます。
ただ、共有するデザイン数、プロトタイプ数がそれぞれプランによって違ってきます。
スタータープランでは一つずつです。

そして、クラウドストレージの容量が2GBとなっている点が違いです。
とは言え、プロが使うAdobe製品を無料で使用できるのは
なんとも太っばらです。気軽に試せるので一気に利用者数が増えそうですね。

単体プラン

Adobe XD単体で使用できるプランです。
こちらは、スタータープランと違い、共有するデザイン数とプロトタイプ数に制限がないプランです。

Creative Cloudコンプリートプラン

こちらのプランはPhotoshopやIllustratorにDreamwaverなど
クリエイティブ活動に必要なAdobe製品がほとんど使えるプランです。

Adobe XDでできること:ワイヤーフレーム

wire
ワイヤフレームはWebの設計図です。
どこにどういうものを配置するかを決めるために作ります。

紙にペンで書いても良いし、
Photoshop、Illustratorで作る人も多いかもしれません。
WebサービスのCacooでも作成できますね。

Adobe XDではUIキット(Wires jp)をあるので、
ワイヤーフレーム作成もパーツが用意されているのでコピーでサクッと作れます。

https://blogs.adobe.com/creativestation/web-adobe-xd-ui-kit-wires-jp

wiresjp

Adobe XDでできること:UI/UXデザイン

ui
※チュートリアルのデザイン画面です。

ペンツールや長方形、楕円形ツールなどを使って、UIをデザインしていきます。

また、ワイヤーフレームの時のようにUIキットがありますので
それらパーツを使って、決まっているデザインの部分はコピーで作成することもできます。

Adobe XDでできること:プロトタイピング/モックアップ作成

prototype
出来上がったデザインからプロトタイプを作成することができます。

画面の流れやスクロールの仕方などを指定して
クリックした時にどこのページへ遷移するのかを指定しながら
作っていきます。

また、デバイスプレビューで出来上がったプロトタイプを
実機で動作確認することもできます。

Adobe XDでできること:プロトタイプの共有

share

作成したプロトタイプを共有することができます。
クライアントにプロトタイプを見てもらって、
コメントをもらうことがオンラインでできますね。

Adobe XDでできること:デザインスペックの共有

spec
コーディングに必要となる情報を共有することができます。
例えば、位置情報やサイズ、カラーや文字スタイルなどです。

この機能によってデザイナーとフロントエンドエンジニア の連携が
スムーズになります。

Adobe XDでできること:UIキットの活用

uikit
iOSやAndroidなどのパーツがUIキットとして用意されていますので
それらを活用することで、決まり切ったデザイン部分はパーツをコピーして
作成し、本来力を入れてデザインすべきオリジナル部分に
集中できるようになります。

Adobe XDでかわること

プロトタイプを作成する制作フローにAdobe XDだけ対応できる

Workflow

 

最近のWeb制作フローではプロトタイプを早い段階で
作成し、クライアントに確認してもらうフローに変わってきています。
これは、最終形に近い動くものをみてもらって
クライアントが求めているものとイメージが合っているかを
早く確認するためです。クライアントとデザイナーのゴールが同じ方向に向かうように
意識を合わせることがプロジェクトの早い段階でしたいためですね。

プロトタイプ

ワイヤーフレーム>プロトタイプ>コーディング>テスト>納品

早く完成後のイメージを共有できれば、もし、イメージが違っていても
すぐに修正ができますよね。

AdobeXDはWeb制作やモバイルアプリの制作に
必要なことを一つのツールでできるのが強みですね。

もちろんAdobeXDが登場する前から、
データの共有やプロトタイプを作成するツールは
あったのですが、いろんなツールの使い方を覚えたり
購入したりするのは大変でした。

ウォータホール

ワイヤーフレーム>デザインカンプ>コーディング>テスト>納品

一方従来のWeb制作フローではこのように
クライアントが動作を確認することができるのはプロジェクトの最後の方です。

もし、動作を確認して、クライアントとイメージが異なっていたら、
戻ってやり直さないといけなくなります。
修正が入るとプロジェクトが長くなるので、当然ですが人件費もかかってきます。

これがウォータフォールで制作した場合のデメリットとなります。

そういったこと防ぐためには、プロジェクトのできるだけ
早い段階でクライアントと作るべきものをお互いにずれていないか
確認することが必要です。

そのため、プロトタイプやモックアップを重視する
制作フローへと、変わってきました。

直感的に操作できるので、すぐに使えるようになる

また、XDはPhotoshopやIllustratorと比べると、
画面もシンプルで直感的に使えるため
少し勉強するだけですぐに使えるようになります。

そして、何と言っても動作が軽いというのが良いです。

まとめ

  • UI/UXデザイン専用ツールとして、シンプルで動作が軽い。
  • 機能が絞られているので、少しの勉強ですぐに使えるようになる。
  • デザインからプロトタイピングまで一つのツールで作成できる。

これからWebデザインを勉強するなら、押さえておきたいAdobe XDのご紹介でした。

投稿を作成しました 3

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る