ウェブUIデザインを作成するツールとして、XDやFigmaが人気となっておりますが、今でもIllustratorでデザイン制作されている方も少なくないかと思います。
実際弊社でもAdobe Illustratorを使用してデザインを行っています。

しかし、Illustratorは高度なデザインの編集には向いていますが、UIデザインにはファイルが重くなりがちなことや、レスポンシブデザインの作成には各デバイス用のデザインを個別に作成するなど、どうしても作業ロスの発生が起きてしまい、スムーズな業務を進められないケースが多いように感じています。

時代の流れに乗って、効率化のために別ツールの移行を検討し「様々なツールの中何が適しているのか」「過去の作成済みのデータが新たなツールで扱えるのか」「急な切り替えが可能なのか」など、今後数回にわたりレポートしていきたいと思います！
今回は事前調査編として、今のところ第一候補のXDについて調べました。

Adobe XD

画像提供元：https://www.adobe.com/jp/products/xd.html

すでに主流となっているXDは、illustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば、すぐに使いこなせるUI/UXデザインツールです。「思考の速さでデザインする」というスローガンを掲げるほど素早い動作が特徴です。
また、毎月アップデートがあり常に進化を続けており、新機能が追加されてますます便利になっています。

XDの特徴

・PhotoshopやIllustratorで編集・データを取り込むことが可能
・プロトタイプ(WEBサイトなどの実装後を確認できるもの)や、UIデザインの制作に特化
・動作が軽い、直感的に操作が可能
・チュートリアルがあるため、学習コストがかからず誰でも扱える
・3D変形を行うことができ、奥行や遠近感のあるデザインを制作することが可能
・一度作成したら、どのデザインでも再利用可能なボタンや、サイズ変更可能なカードを構築することができ、一度の編集でデザイン全体に同期させることができる
・デザイン内の要素をクリックやドラッグで体感的に複製することが可能

弊社では、現在使用中のPhotoshopやIllustratorと連携させることができること、よくクライアントから要望いただくプロトタイプの作成が可能なことから、XDが有力かと考えています。

コンポーネント

一度要素を作成すれば、別のデザインにも再利用ができ、「詳しく見る」や「more」といったボタンや、スタッフ紹介やブログ記事のサムネイルとタイトル・本文が入っている要素を作っておけば、複数のデザインに流用することが可能。

スマホプレビュー

XDの大きなの魅力の一つはこれかと思います。スマホ用のデザインを行う際、macとスマホをUSBで接続すると作業中のデザインがスマホで表示され、リアルタイムで変更が反映されるとのこと。毎回書き出して、スマホで読み込んでいたため、スマホデザインの時間が短縮できます。

プレビュー・共有

デザイン中にプレビュー画面を立ち上げることができ、実際のサイトを見てるような感覚で確認できます。
また、オンライン上にアップし発行されたURLにて、クライアントにチェックしていただくのも可能です。

手間が格段に少なくなるのもメリットですが、リンクが貼れたり、ナビゲーションの固定位置表示ができたりします。固定のデザインを画像だけで再現するのは難しいものでしたが、それがコーディング後に近い形でチェックしてもらえます。

これまでは「ここはスクロールしてもずっとついてきて同じ位置に表示されます」とご説明していましたが、作業効率も上がり、クライアントも、より実際の動作で確認することが可能になりイメージしやすくなるかもしれません！

いくつか代表的なXDのメリットを挙げてみましたが、他にも文字のスタイルや、色などを簡単に保存して使いまわす機能など、webに最適化しているツールといったようです。

移行へのテンションを上げるためメリットについて調べてみました。次回は使ってみた感想などをレポートしていきます。

プランニングA WEBチーム　野々下