Adobe XDで効率アップ！基本知識と導入メリットをご紹介

はじめに

Webサイトやアプリのデザインを行う際、必要になるのがワイヤーフレームやプロトタイプの作成です。

ワイヤーフレームについては、PowerPointやExcelといったOfficeソフトを使って作成する方もたくさんいらっしゃると思いますが、今回はこれらを使うより2倍、いや10倍作業が捗る「Adobe XD」をご紹介しましょう。

UI/UXデザインツール「Adobe XD」とは

ご存知の方もいるかもしれませんが、Adobe XDは、2016年3月にAdobeからAdobe Experience Designとして公開、2017年10月に正式版がリリースしたアプリケーションです。

Adobe XDを一言で説明すると、Webサイトやアプリ関係なく、ワイヤーフレームからデザインカンプまで作成でき、その上、プロトタイプまで簡単に実装できる優れものです。

現在は画面サイズに依存しないWebサイトの構築、レスポンシブデザインが流行していますが、Adobe XDはそれに最適なだけでなく、ユーザーの満足度を高めるWebサイトを目指すための、UXの作り込みに特化した、Adobeの新ツールになります。

Adobe XDでできること

１．ワイヤーフレームからデザイン作成ができる

Webサイトやアプリの骨格、設計図になるワイヤーフレームを簡単に作成することが可能です。

操作は直感的で、修正も簡単なので誰にでも使える仕様です。

グリッドや位置を揃えることも簡単にできで、デザイナーでなくても、キレイに整ったワイヤーフレームができます。

Adobe XDはIllustratorやPhotoshopとの親和性がある点も大きなメリットです。I

llustratorやPhotoshopで作り込んだ画像やイラストをAdobe XDに当てはめることで、デザインカンプまで作成できてしまいます。クライアントに対してすばやく完成見本図を提示し、イメージの共有を行える点で、より制作進行がスムーズになりますね。

２．プロトタイプが作成できる

複数のページをアートボードに作成し、それらを繋ぎ合わせることによって、コーディングを行う一歩手前の段階であるプロトタイプを簡単に作成できます。プロトタイプをもとに、UXデザインをよりブラッシュアップすることが可能です。

３．共有が簡単

プロトタイプが閲覧できるページをウェブ上に公開可能で、クライアントや制作チームに一気に共有ができるので、即時確認でき、早いレスポンスも期待できます。セキュリティを気にする場合はパスワードを付けられるので安心です。

Adobe XDのメリット

先ほどはAdobe XDの基本知識とも呼べる特徴を3つご紹介しましたが、効率アップに繋がるメリットを詳しく見ていきましょう。

メリット１．従来のワークフローから脱却できる！

今まで、ディレクターがワイヤーフレームを作成するときには、PowerPointやExcelなどを使用していたかと思います。

PowerPointやExcelは、そもそもワイヤーフレーム作成のためのツールではないため、ところどころ利用上の不具合が起きます。

例えば、そもそも適した機能がない、サイト全体像が把握しづらい、パーツ（シンボル）化などができないため修正に手間がかかるなど、いくつもの不満点があったのではないでしょうか。

一方でAdobe XDは、ワイヤーフレームやデザイン作成に適した機能のみが搭載されており、サイト全体像はアートボードやプロトタイプで把握できるのはもちろん、パーツ（シンボル）化ができるので共通パーツの修正があった場合でも、1つ修正することですべてに反映されます。

大まかなデザインが決まり、本格的なデザイン段階に入った際、PowerPointやExcelをデザイナーに渡すと、デザイナーは1からPhotoshopやIllustratorでデザインを開始することになります。

ところがAdobe XDのデータを渡すことができれば、レイアウトやグリッドが確定した状態からスタートでき、デザイナーの工数削減にも繋がります。

メリット２．シンプルなUIで使いやすく動作が軽い

IllustratorやPhotoshopと比べ、Adobe XDはできることや機能は限られていますが、機能が少ない分、シンプルなUIが実現されています。動作もとても軽いので、ロード時間などで作業を邪魔されることはほとんどありません。そのため、使い勝手の良いアプリケーションとなっています。

また、IllustratorやPhotoshopを一通り操作できる方であれば、1から操作方法を学ぶことなく、スムーズに扱うことができるかと思います。その点で学習コストが低いのもメリットです。

メリット３．プロトタイプやコメント機能で制作進行がスムーズ

プロトタイプをクライアントに見てもらうことで、実際に動きや全体像を把握してもらえます。

コーディングを行い、テストサイトを作成した後に、動きやページの流れのイメージが異なっていたら、大きな手戻りが発生しますが、こうした事態を未然に防ぐことができるのです。

加えて修正の指示についても工数削減できます。今までワイヤーフレームやデザインの修正があった場合は、メールやPDFなどでわざわざ伝えていたところを、プロトタイプの閲覧ページでコメントできるので、スムーズな制作進行が可能になるからです。

まとめ

Adobe XDを導入すれば、ディレクターやデザイナーの効率がアップし、制作のワークフローの大幅な工数改善が期待できます。

Adobe XDは現在でも月に一度アップデートを繰り返していて、どんどん便利な機能が追加されています。

無料のスタータープランもあるので、皆さんも一度試してはいかがでしょうか。