Adobe XDを使ったワイヤーフレームの作成はどんな感じ?

Adobe XDはワイヤーフレームを作成したりUI/UX向けのデザインが作られたりしますが、実際にワイヤーフレームをXDで作るとどんな感じなのかというのをまとめてみました。

 

Abode XDとは?

Webサイトやスマホアプリをデザインするときによく使用されるプロトタイプツールです。どちらかというとUI/UX向けに作られている感じです。

PhotoshopやIllustratorのようにデザインができるだけでなく、UI/UX面も考えて作られていて使いやすいです。

プロトタイプを作成できるもの高評価ですね。

 

XDの長所

扱いやすい

特に普段からPhotoshopやIllustratorを使っている人からしたら初使用でも使いやすいんじゃなかなと思います。

同じAdobe製品なのでなんとなく使いやすいように設計されているのかもしれませんね。

また、機能面も必要な部分が絞られているので使い慣れるまでに時間がかかりません。一度慣れてしまえばかなり扱いやすいのがXDの長所ですね。

 

リピートグリッドを使える

リピートグリッドとはあるパーツを同じようにいくつも複製(リピート)できる機能です。

例えばタイル状に記事を並べるデザインを作るときなんかはかなり作業がラクになります。

パーツ自体が同じ設計のサイトならこのリピートグリッドは大いに力を発揮するでしょう。

 

スウォッチが使いやすい

1クリックで簡単に色を変更できる、リアルタイムで色が確認できる、不透明度も視覚的に調整できるというように、XDはスウォッチがかなり使いやすくなっています。

新しい色をスウォッチに追加するのも+ボタンをクリックするだけで簡単。Abode製品の中でもスウォッチは特に群を抜いて使いやすい気がします。

 

みんなで共有できる

作った画像をチームなどで共有が簡単に、しかも素早くできます。

作成した画像はアードボードpngで書き出しすることができます。アートボード名とファイル名が同じになるのでわかりやすいですね。

 

シンボル機能が使える

シンボル機能を使えば共通のパーツの変更が全てアートボードに反映されます。

今まではシンボル化ができず、いちいちリンクする必要があったので、シンボル機能のおかげでかなり便利になったのは言うまでもありません。

 

デバイスプレビューができる

USBやCreative Cloudを使用することでPCでの操作反映後の状態をリアルタイムで確認することができます。

作業しながら確認する場合はUSB経由、アップロードしたものをプレビューするときはCreative Cloud経由で確認するのがいいでしょう。

外出時などでも更新状況を確認できるのは嬉しいですね。

 

XDの短所

ガイドが引けない

XDではPhotoshopやIllustratorのようにガイドを引くことができません。

まあざっくりとしたワイヤーフレームを作る分にはあまり気になりませんが、割と厳密なデザインが必要になる場合は不便かなーという印象です。

 

PhotoshopやIllustratorとの互換性低い

XDで作ったパーツをオブジェクトとして他のソフトに持っていけないので、移動したい場合はまた作り直すことになってしまいます。

ワイヤーフレームは「XDで作るならXDで作る、PhotoshopやIllustratorを使うならそうする」ときちんと決めないと余計な手間が増えそうです。

 

まとめ:XDは優秀

ワイヤーフレーム作成やUI/UX設計に関してはXDはかなり優秀なソフトだと思います。

普段はIllustratorなどを使っている人もぜひ一度XDを使ってみてください。操作が特化しているだけあって使いやすさも抜群です。

ソフト自体が結構軽いのでストレスなく使うことができ、効率化や作業全体のスピードアップにも貢献してくれるでしょう。

全体的に見てXDは優秀はソフトだと言えると思います。