Adobe XDがやたら気になっていて、夜も眠れない…事もないくらいの日々を過ごしていたら、知り合いの知り合いから、UIデザインとか、色々お願いできないか？というお話がありました。
Adobe XDを試す絶好のチャンス！と思って使ってみたら、「ちょっと世界が変わるんじゃない？」と割とガチめに思ったので、レビューします。
目次
Adobe XDって？
正式名を、Adobe Experience Designっていいます。
AdobeのCreative Cloudに加入していたり、Adobe IDがあれば、だれでも無料で試してみることができます。
百聞は一見に如かず、まずはこの動画を見てみて下さい。
これまでPhotoshopやIllustratorでもりもりゴリゴリ作っていた人ほど、衝撃を受けるんじゃないでしょうか。
僕は、動画の10秒くらいから出てくる「リピートグリッド機能」の賢さ、15秒くらいのところで出てくる画像の一括配置と自動マスク処理、「プロトタイプ」表示の際に設定できる画面遷移の設定、URLに書き出してモックをすぐに共有できる手軽さまで、神機能すぎて白目を向きそうになりました（笑）
実際使ってどうだった？
まずこの、Adobe XDを立ち上げたら「やってみてね」と促されるチュートリアル画面を見てください。
Adobe XDのUI自体もめっちゃシンプルです。
左のほうにごちゃごちゃとツールバーがあったり、下のほうに情報もりもりのプロパティエリアとかがあったり、そういうの無いんですよね。ホンマにこれで作れるんですかい？って逆に不安になるくらいシンプル。
で、これこれ。これも見てほしいんです。
僕が青いボタンをドラッグして配置しようとしてるわけですが、隣のオブジェクトとの距離（24px）とか、その隣のオブジェクトとの距離（24px）とか、そういうのが絶妙なタイミングでマージンを自動計測して表示してくれます。「オブジェクトをちゃんと等間隔に配置してや！」と教えてくれるんですよ。
こんな感じで、UI設計に特化しているからこその嬉しい仕様がモリモリです。ほんとに。
この感動を伝えたくて、右手でマウス操作しながら左手スマホでぷるぷるしながら撮ったんですが、伝わりますかね。笑
Adobe XDを使うとどんなメリットがある？
僕がAdobe XDを使ってみて感じた良い点は、下記です。
- まずソフトが軽くてサクサク。立ち上がりも速い。
- 他のAdobeソフトに近い操作感、同じショートカットで迷わず使える。（学習コストが低い）
- 基本ベクター画像なので、マルチデバイス対応が楽。（スマホ版がサクッと作れる）
- マージンを自動で計測してくれる。これが本当に助かる。（次項で画像付きで触れます）
- UIキットも豊富。例えばAppleも下記のようなUIキットを用意してくれており、XDの中からサクッとアクセスしてUIキットをダウンロードできます。
- プレビューが楽。Photoshopなら一回jpg書き出ししてなんたらして、みたいなのがワンクリックでオンライン共有できる。
- →だから、早い段階でメンバーやクライアントにプロトタイプを共有するときにもめっちゃ楽。
- 実際の画面に近い状態で、クライアントに画面遷移を触ってもらいながらプレゼンしたりも出来る。
- 画面設計者、デザイナー、意思決定者が別にいるときでも、スピーディーに修正できる。
- MacもWindowsも対応。プラットフォーム気にする必要なし！
- 文字組み、文字周りの調整はほぼ出来ない。カーニングも、アンダーラインも縦書きも無し。
- 写真のレタッチ、色補正なんかは出来ない。
- レイヤー効果の概念がない。（ドロップシャドウ、光彩、など）
Adobe XDのデメリット、駄目なところは？
Adobe XDがイケてるところばかり書きましたが、まだまだ改善してほしいなと思ったポイントもあります。
レイヤー効果とか、このあたりはおいおい実装されてくると思います。（そういうのはPhotoshopでやってね、という設計思想なら、実装されないかもしれませんが。笑）
まとめ。まずは使ってみて、UIデザインの未来を実感すべき。
デメリットもありますが、それを補ってあまりあるメリットの数々。Adobe XDは、WebデザインやUIデザインのメインストリームになり得るポテンシャルを感じます。
最近はだいぶ進化して“イマドキ”のWeb用にデータも作りやすくなったPhotoshopやIllustratorですが、ソフトもデータも重い（1psdファイルで40MBとかざらです）のは相変わらずで、UI作るのにはいらないよね！？っていう余計な機能が多いのは否めません。
それに比べ、Adobe XDの手軽さ、軽快さはやばいレベルだと思います。
UIって何で作るとおいしいの？って考えて、いっときSketchを使ってみたこともありましたが、対応しているOSがMacだけで自分の用途を完全には満たしてくれなかったこともありましたが、XDはMacもWindowsもドンと来いなのも嬉しいです。
今後UI制作の案件があれば、僕もドンドン積極的に使って、Adobe XDの知見を深めて行きたいと思います。
