Blogブログ

2018/03/28 WEB

UI/UXデザインツール「Adobe XD」|Webサイトの使い勝手を共有しやすい

Yum

イメージ

2017年の秋に正式版がリリースされた、WebサイトやアプリのUI/UXデザインツール「Adobe XD」。
使ってみました。

配置が簡単

ツールはWebデザインでよく利用する機能に絞り込んで作られています。
シンプル!

Adobeを使い慣れた人は(慣れてなくても?)あまり迷わず使えると思います。

予め書いた四角形に画像をドラックアンドドロップするとぴったりサイズでマスクがかかったり、
枠線やシャドウなどよく使う効果もポチっとワンクリックでつけられます。
Webのテンプレートによく必要になる、同じ形のリピートもあっという間。
中央揃えなどグリッドに揃えるのも簡単。
Illustratorの様にアートボード(ページ)を並べて全体を見渡せるのも良いところ。

 

あと、とにかく動作が軽いです。

ページ移動の確認が簡単にできる

気持ち良いサイトづくりに欠かせないページの導線設計。
ページ移動の確認が簡単にできます。
これまでは、HTMLで簡単にコーディングをして…となかなか作るのが大変でしたが、こちらはデザイン上のボタンから直接ページ同士にリンクを張り、そのままAdobeのテスト用サーバにアップ、Webブラウザで動作の確認ができます。

①プロトタイプ画面に切り替え
②ボタンを選択して出てきた青いポッチを引っ張って
③リンク先のページにもっていくだけ。
④右上の共有ボタンから、すぐに公開してWebで確認ができます。
公開されたものがこちら
https://xd.adobe.com/view/3f51390d-f378-4109-aad4-d96dac3700cf/

Web用画像の書き出し

書き出しも簡単。
スライスツールなどを使うことなく、オブジェクト選択するだけで、2倍サイズやsvgなど書き出しができます。

Webサイト制作での利用

ワイヤーフレームなどの計画にはXDは便利だと思います。
(ただこのツールでワイヤーを作ってしまうと、綺麗すぎて逆にデザインの発想の妨げになるのではないかという気も…。
Photoshopのペンで書いたワイヤーラフを貼り付けてページ移動を確認する使い方もいいかなとも思います。Photoshopの様なえんぴつ(フリーハンド)ツールがほしいかも? )

Webデザインツールとしては、
シンプルなものであればできると思いますが、複雑な素材づくりはIllustratorやPhotoshopを利用する必要があるので、単体では厳しいと思います。
あくまでもUI/UXデザインツールですね。

と思っていたら、Adobeにワークフローイメージがありました。
https://helpx.adobe.com/jp/xd/help/adobe-xd-overview.html
ワイヤーフレーム作成(初期計画)というより、コーディング前のチェックに利用するイメージでしょうか。計画段階と最後の調整の両方に使っても良い気がします。

ちなみに、現在Webデザインの制作にどんなソフトが使用されているかというと、
AdobeのIllustratorとPhotoshopが主流かと思います。
また、SketchやFigmaなども使いやすく、こちらも人気がある様です。
どのソフトベストというのはなく、それぞれのソフトが得意なことがあるので、案件の進行方法、サイトの特性、などによって柔軟に選択・利用できる様にしておくのが良いかと思います。
ただし、Webサイトは作って終わりではなく、メンテナンス期間が5年10年と長いため(15年近くご利用になられたサイトもあります)、長期で互換性がありそうなソフトを選びたいところではあります。
ソフトに依存しない作り方にできるところはしたいですが。

XDもまだまだ実務で使用していかないと気づかない事が沢山あると思いますが、良いUIを作るために必要な時が来たら利用してみたいと思います。