プロトタイプ・UIデザインにはAdobe XDを使おう！使用感と機能をご紹介！

こんにちはナカジマです。6月だというのに北海道はまだまだ肌寒いですが、日差しがようやく暖かくなってきました。今回は、ベータ版が1月にリリースされ、注目されている「Adobe XD」をちょこっとご紹介したいと思います。ちなみに、monomodeのディレクターもAdobe XDを使用しています。

Adobe XDとは？

正式名称は「Adobe Experience Design」（以下Adobe XD）。Webサイトやモバイルアプリのデザイン、プロトタイプの作成ができる便利なアプリケーションです。Adobe IDを持っている方は、どなたでも使用できます。（現在無償ダウンロード提供されています！）ワイヤーフレームとデザインからプロトタイピングとプレビューまでの過程を、Adobe XD内ですべて行えます。画面遷移や挙動を再現したプロトタイプを作成できるのがとってもイケてます！

実際に使用してみた感想

チュートリアルがありがたい！

起動すると最初に出てくる画面左下に、チュートリアルを開始できるボタンがあります。Adobe XDの機能はこのチュートリアルでほぼ問題なく使用できます！

軽い！

Photoshopのアートボード作成機能は、簡単なデザインでもかなりファイルが重くなるのですが、Adobe XDはファイルが軽いのか、アートボードをたくさん複製してもサクサク動きます。

機能がシンプル、かつ便利！

photoshopのクリッピングマスク機能やグリッドを均等に整合する際や、いちいちレイヤーをクリックしたりしなければできませんでしたが、Adobe XDではほぼドラッグでの調整が可能です！画像も、シェイプをクリックし、画像をドラッグするだけでクリッピングマスクのようになります。

地味に楽しいのが「リピートグリッド（グリッドの繰り返し）」。記事一覧ページなど、同じ要素の複製がなんとも辛くなる時がありますよね。Adobe XDは、複製したい要素を選択し希望範囲までドラッグするだけで何個も複製できるんです！しかも、各要素のマージンもドラッグで調節できるので、すごく楽に作業を進められます。

URLのみでメンバーと共有できる！

pdfやjpgに書き出して送付していると、修正するたびにデータを送付し気づいたらファイルが整理できない、最新版が埋もれてしまうなどの問題がありました。後者は命名規則をしっかりしていれば起こらない問題なのですが、古いデザインデータがダウンロードフォルダの中にあるのって整然とされていなくて嫌ですよね。Adobe XDではURLを送るだけでデータを共有できるので、フォルダの中データ地獄になることがありません。また、ノンデザイナーの方でも簡単に使用できることから、会話をしながらサクサクとプロトタイプを作成できるので、それぞれの役割をもったメンバー間のコミュニケーションが圧倒的に早くなります。Adobe XDにおいて、ここのメリットがかなり大きいように感じます。

1月リリースで追加された機能

・ゲストコメント機能(mac版)

デザイナーがプロトタイプをオンラインで共有した際に、ディレクターやクライアントはAdobe IDでログインしなくても、ゲストとしてプロトタイプ上にコメントできるようになりました。この機能により、デザインのフィードバックを収集しやすくなります。

・UIキット(Windows版)

Adobe XDでのデザイン作業をすぐに始められるように、Windows版のXDにもUIキットを用意しました。ハンバーガーメニューからアクセスできます。UIキットにはApple iOS、Googleマテリアルデザイン、Microsoft Windowsが含まれます。各UIキットにはナビゲーションやテキストフィールド、キーボードなど、デザイン作業を効率化する一般的なデザインパーツが収録されています。

・SVGの読み込み(Windows版)

ドラッグ&ドロップ、またはアプリケーションメニューの読み込みからSVGを読み込むことができます。PhotoshopやIllustrator、Sketchなどの他のデザインツールからデザイン素材を簡単に利用できるようになります。

・グリッドに吸着(Windows版)

アートボードにグリッドを表示でき、このグリッドがオブジェクトやテキストを整理するガイドとして使用できます。オブジェクトを描画した際、そのオブジェクトの端が吸着ゾーン内の場合、自動的にグリッドに吸着します。また、グリッドはオブジェクトやテキストを配置する際の距離感をイメージしやすくしてくれます。

(引用：https://blogs.adobe.com/creativestation/web-january-update-of-adobe-xd)

テンプレートも、あります！

Guacamole

https://avocode.com/guacamole/

デフォルトでApple iOSなどのUIキットがありますが、Guacamoleでも70種類以上のUI素材や150種類以上のアイコン素材などが利用できます。無料でダウンロードできるので、試しに入れてみるのは大アリです。

効率が良く、それでいてクオリティの高いものを制作をしたいと日々思っています。Adobe XDはそんな願いを叶えてくれるようなアプリケーションでした。新しい技術を取り入れてより良いモノをmonomodeで作っていきたいですね〜。ナカジマでした。