2019.08.17
特別企画 [PR] Web Designing 2019年10月号
Adobe XDで進化する Web・アプリの開発プロセス より高速に、よりクリエイティブに? 共同制作の質を大きく向上させる新定番ツール
2017年、それまでのデザインツールとは一線を画すコンセプトで登場した「Adobe XD」。当初はプロトタイプが作成できる点が強調されて紹介されるケースが多かったが、多くのユーザーの声に応えて機能強化が図られるにつれ、企画からデザイン、実装に至る開発フローの「効率化」と「質の向上」を同時に実現できるツールとして、大きな進化を遂げている。今回はそのXDが「制作現場に効く」理由をピックアップして紹介してみたい。まだ使ったことのない人はもちろん、リリース当初に利用して以来触れていないという人にもぜひ読んでいただきたい。
Photo●黒田 彰
Adobe XD
Webサイトやアプリ、音声デバイスのUI/UX開発のためのデザインツール。ワイヤーフレーム、デザインカンプ、プロトタイプの作成とクライアント・制作チーム間での共有を一つのアプリで実現。
https://www.adobe.com/jp/products/xd.html
01 作業が進んでも操作は軽快なまま
従来のデザインツールは、作業が進むにつれて動作が重くなることが多かったが、XDは扱うアートボードの量が増えても軽快に動作し、ストレスなく作業することができるよう設計されている★1。また、用意されているツールは従来のアドビのアプリケーションを引き継ぎつつも、より直感的で洗練された操作感を実現しており、いったん慣れてしまえば迷うこともない。さらに繰り返しが発生するコンテンツを簡単に複製できる「リピートグリッド機能」や「レスポンシブリサイズ」のように、これまで面倒だった作業を効率化する機能も搭載され、作業の効率化に寄与している。アドビはXDの大きな特徴として「思考の速度でデザインできる」ことを挙げているが、作業が進むにつれ、そのメッセージが大げさでないことを実感できるはずだ。
★1「XDは軽快な動作ができることを優先して開発を進めています。例えば1つの書類に1,500枚のアートボードを作成しても、標準的なPCの画面描画速度である60fpsをキープできる。この感覚を、ぜひご自身の目で確認してみてください」
02 「プロトタイプ駆動」を今すぐ実現できる
XDはサイトマップの作成からワイヤーフレーム制作、デザインといった作業を一貫して行うことができるアプリケーションだが、どのステップにおいても、簡単に仕上がりをイメージしたプロトタイプを作成し確認することができる。ディレクターやデザイナーがどんなイメージを描いて制作を進めているのか、ページはどのように遷移するのか、といった点をすぐに確認することができるのだ★2,3。チーム内はもとより、クライアントも交えてイメージを共有すれば、作業全体の質を大きく高めることができるだろう。
読者の中には、「プロトタイプ駆動」などと言われても導入の敷居が高いと感じる人もいるかもしれないが、制作にXDを導入することで、無理のない移行が可能となるのだ。
★2 「XDのプロトタイプは、ワンクリックで更新ができます。ですから、クライアントとのミーティング中に、指摘を受けた点を改善し、すぐにプロトタイプに反映するといったことも可能です。その回転速度の速さは制作の質を大きく上げてくれるでしょう」★3 「作成したプロトタイプはPC上ではもちろん、PCと繋ぐことでスマホ上でも確認ができます(左ページ写真)。実機で確認ができるためイメージの共有が進むはずです」
03 デザインの一貫性を保つことができる
自社で制作するWebサイトやモバイルアプリの見た目やUI/UXに関する一貫性を保つために、さらには作業の効率化を実現するためにカラーや文字スタイル、コンポーネントの共通化を図る「デザインシステム」の導入を進めている制作会社は多いだろう。XDにはそうしたデザインシステムを実現し、容易に運用するための機能が搭載されている。
カラー情報やフォントスタイル情報、さらにはパーツやボタンなどの共通パーツを登録しておく「アセット」。そのアセットを共有することで、ルールの共通化を図ることができるのだ。しかも、ルールを定義した元の書類のアセットの内容を更新すると、それを使用している書類全体に通知が届き、変更が促される仕組みが搭載されているため、更新を忘れるといったこともない。XDを利用すれば、社内におけるデザインシステムの実現を無理なく進めていくことができるはずだ。
04 コミュニケーションの質を高めるコラボレーション機能
XDというアプリケーションはそもそも、制作時の共同作業をいかにスムーズに進められるかという点を念頭に置いてつくられている。そのためクライアントが制作途上のデザインにコメントを書き込んだらすぐに修正を行い、プロトタイプに反映させるといったスピーディな制作スタイルも可能となる。また、こうした機能をうまく活用すれば、これまで現状を説明するだけだった会議の席を、デザインやUI/UXのブラッシュアップの場に変えることもできるのだ★4。
また、デザイナーとコーダー、エンジニア間のコミュニケーションについても、手間をかけることなく正確に情報を伝えられる機能が用意されており、仮にコーダー、エンジニアの手元のPCにXDがインストールされていなくても、ブラウザ上からデザインに必要な情報やテキスト、画像の取得ができるように設計されている。
デザイナーとディレクター、デザイナーとコーダー、さらには制作チームとクライアントと、よりスムーズな制作フローの確立を行う。XDのコラボレーション機能の本質的なメリットはそうした点にあるのだ。
★4 「近い将来、一つのファイルをリアルタイムで共同編集できる機能の搭載が予定されています。作業の重複を防ぎながら、より精度の高いコラボレーションが可能になります」番外 「現在、全国11カ所でXDのユーザーグループが活発な活動を行っています。皆さんもぜひご参加ください。私も頻繁に顔を出しています!」
企画協力:アドビ システムズ 株式会社