WEBデザインやWEB制作において学習を進めていくとデザインする際に何かいいツールがないかな？
とか「Adobe XD」って便利だよという声がきこえてくることがあると思います
今回はそんなAdobe XDについてやさしく説明していきます
Adobe XDとは？？
まず初めに、『XDはなにが出来るツールなの？』という疑問にお応えするため、XDの機能や特徴について解説していきます
Adobe XDについて
Adobe（アドビ）社は、フォトショップやイラストレーターといったデザイン目的のソフトウェアを開発している企業です。WEBデザイナーや動画編集者をはじめ、多くのクリエーターから支持を集めています
Adobe XDはWebサイトやアプリのUI/UX設計に最適化されたデザインツールです
UI/UXとは、サービスの画面とサービスを通じた体験をセットにして使うときの用語です
- UI：「ユーザーインターフェース」の略で、ユーザーとサービスの接触面のこと。ユーザーの目に触れたり、使用したりする部分
- UX：「ユーザーエクスペリエンス」の略で、ユーザーがサービスを利用することで得られる体験のこと
XDは、Adobe Photoshopが持つような画像の豊富な加工機能を削ぎ落としているため、軽量でサクサク動きます。XDの開発の目的はWEBサイト・アプリに特化したツールとして開発されています
とても使いやすく、今後デザイナーが使うツールの主流になると予想されており、人気が高まっているツールです
Adobe Photoshopが分からない方はこちらをどうぞ！
XDの特徴
- レイアウト・デザイン作成
- プロトタイプ
- 共同編集・コメント
XDはレビュー機能や共有機能が豊富で、Web制作に関わるクライアント・ディレクター・エンジニアなどとコミュニケーションをとりやすく、仕事をスムーズに進めることができます
XDのデザイン機能はシンプルで直感的な操作性で、非デザイナーの方にも使いやすくできています
例えばかんたんな図形なら、”パワーポイント”みたいな感覚で作ることが出来ます
XDで行うデザイン作業の多くは、他のAdobe製のデザインツールでも代替できます
しかしXDには『プロトタイプ』という実際のWebサイトのようにページ遷移やアニメーションを簡易的に再現できるができる独自の機能があり、このプロトタイプ機能を通して、デザインの作成段階からUI/UXを初めとする各種検証ができる様になります
XDに向いていないこと
- Photoshopのような高度な画像処理機能
- テキスト周りの細かな調整機能（カーニング）
これらの機能を使う制作物、例えばメインビジュアルやバナーの作成は、XDよりもPhotoshopの方が向いています。なお、XDはPhotoshoと連携もできるので、一部をそれらの別ツールと併用して作っていくケースもあります
XDはメインの用途としてUI/UXデザインをするために開発されたツールなので、上記のような機能は今後のアップデートに期待しておきましょう
他のデザインツールと比較してみましょう
Adobeのデザインツール
| Adobe XD | 用途：WEB制作・アプリ開発 得意：デザイン・UI/UX設計・レイアウト 苦手：複雑なデザインや図形の作成 |
|---|---|
| Photoshop | 用途：デザイン全般 得意：写真の加工・イラスト作成 苦手：複雑な図形・ベクターデータの作成 |
| Illustrator | 用途：ロゴ・印刷物・看板 得意：複雑な図形・ベクターデータの作成 苦手：写真の加工・イラスト作成 |
基本的にはいずれもデザイン作業を目的にしたツールです
必ずしも上記にあてはめた使い方がされている訳ではありませんが、それぞれの得意分野が異なることが分かります
XDの利用方法
利用方法はいたって簡単です
https://www.adobe.com/jp/products/xd.html
上記のURLをクリックすると以下のページにアクセスできるので
購入するを押すと利用できるようになります
ただしAdobe製品は月々料金がかかってくるので注意が必要です
XDをインストールするにはAdobeアカウントが必要です。Adobeアカウントを持っていない方はここで作成しておきましょう。なお、Adobeアカウントの作成自体は無料です
まとめ
今回はAdobe XDについてでした
Photoshopとはまた違ったアプリです
それぞれの利点を活かしながら効率よくWEB制作を進めていきましょう！
それではまた！
コメント