今では、スマホでも簡単に見ることができるホームページ（以下web）。
webを持たずにビジネスをしている人や会社の方が少ない時代になっています。そんなwebを作る時に役立っているのがAdobe XD（以下、XD）となっています。
僕たちもwebを創る時は必ず、XDを使っています。多くのブログでXDのことを取り上げて書いているので、今更読んでも、なんて思われる方も多くいると思いますが、僕たちなりの視点でXDの便利なところや、なぜ必ずXDを活用しているのか、どうやって活用しているのかを今回、紹介していきます。
そもそもAdobeXDとは
そもそも、AdobeXDって何？と思われる方もいるかもしれないし、Webに常日頃、従事していない人も見に来てくれていることもあるので「そもそも...」なところを紹介します。
AdobeXDは、
Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。XDを使用することで、デザイナーはより早く、正確に、高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。
Adobe公式サイトよりです(o^^o)
特化した制作ツール
Webを創る時は、色んなツールを使います。僕たちが使っている主だったところだと、
Photoshop
Illustrator
Dreamweaver
があります。これらのソフトはWebに止まらず、グラフィックや映像なども作れるため専門的な多くの機能が備わっています。そのため使うには多少なりともクリエイティブに対しての知識は必須となります。しかしXDはこれらソフトとは違い、Webやアプリを制作するのに適した機能が多くを占めるため直感的に、簡単に操作することができます。
効率が格段によくなる
ディレクターのワイヤーフレーム制作や原稿準備にも適しています。ディレクターが作ったワイヤーフレームと同じファイル（データ）上でデザイナーがデザイン制作することが可能です。これまでは、ディレクターからの原稿やワイヤフレームをそれぞれに適したツールで開き、制作ソフトに落とし込んで制作していました。修正が発生すればその都度、修正原稿をもらって差し替えて...の工程が繰り返されていましたが、XDを活用すればデザイナーだけに任せなくとも、誰でも修正等が可能になり、チームメンバーの（制作）時間を有効的に使えるようになります。
これらはAdobeXDの共有機能を使うことになります。実際のXDの使い方（ハウツー）は別記事に後日まとめて紹介しようと予定しています。
とにかく軽くて動作がスムーズ
Illustratorでは1ページのデザインデータの容量が200MBを超えることも度々あり、Photoshopに関しては数百MBになることもあるため、データを開いたり、メンバー間で共有するまでに多くの（無駄な？）時間を要していました。複数ページのWebを管理する際には、容量を多く必要とするためスペックが乏しかったPCでは苦労もありました。
ただ、XDのデータはめっちゃ軽いんです！起動も早いんです！！複数ページのWebを作っていてもサクサク動きます。仮に必要なページが20数ページあっても、XDファイル1つで全ページを俯瞰することができます。その後、制作できたものはプロトタイプとしてクライアントチェックにそのまま提出することができます。XDに付いているコメント機能によりクライアントからのフィードバックもXD上で完結できます。実はXDの最大の魅力はここにあります。
プロトタイプが簡単に作れる
Webを創る際に最も多くの時間を要するのが、クライアントとのやりとりになると思います。クライアントの求めているものを創る過程での意思疎通、方向性にズレがないかなどを細かく調整し続ける必要があります。そのミーティングの時間にどれだけコストを掛けずにできるかは、プロトタイプの有無によって非常に変わってきます。
Webにおけるプロトタイプとは
実際にユーザーが閲覧しうる端末で簡易的にレイアウトや操作性を確認できるもの、となります。
僕たちは、XDはデザイン作成ツールという立ち位置ではなく、プロトタイプの作成ツールだと思っています。プロトタイプの作成ツールだからこそ、UIデザインが作りやすくなっていると思っています。
そのため、クリエイティブやビジュアル的にデザイン性の高いものを創る時は、IllustratorやPhotoshopを使うことを僕たちは強くお勧めします。実際に僕たちは、IllustratorとPhotoshop、そしてXDを併用してWeb制作をしています。
デザインカンプとの違い
デザインカンプではダメなの？と思われる方もいると思いますが、プロトタイプとデザインカンプの大きな違いは、動かせるか動かせないか、です。あくまでも僕たちの所感ですが、実際動かせない静止画のデザインカンプから緻密に想像してくれる想像力豊かなクライアントは少ないです。良質なフィードバックを得るためには、「触れるもの」の方が遥かに得やすくなります。
上記でも紹介した通り、XDには共有機能があります。共有機能で作成したURLを通じて、ディレクターでもクライアントでも、XDのデータ上にフォードバックを書き込むことができます。これが『良質のフィードバックができる』ことに繋がっています。
さらにプロトタイプの場合、実際に動作感を体感できるため、手戻り修正の発生の可能性も低くなり、結果的に公式リリースの近道にもなっています。
コストを掛けずに作れる
動くものを作るって、プログラミングをするの？という話になりがちですが、それでは多くのコストがかかってしまうので、体力がない企業以外は正直、厳しいと思います。基本的に誰でも触れるプロトタイプを作れるツールとして登場したのがAdobe XDになります（と思っています）。コストを掛けずに作れることも大きな魅力です。
実機で確認できる
そうそう、XDの共有機能で作成したURL...と書きましたが、このURLがあるためPCだけでなく、スマホでもプロトタイプを確認することができます。手元の実機で実際にWebが確認できるということも非常に大きな魅力であり、強みです。制作時でも実際の見栄えを確認しながら作れるため、デザインの迷いなんかがかなり少なくなります。
さいごに
あくまでもAdobeXDの魅力を紹介してきました。実際の使い方（ハウツー）は市販されている書籍や、多くのブログで紹介されているので、敢えて紹介しなくても良いかとは思っています。ただ、使っていて「お！これ良いな！！」なんて思ったり感じたことは今後、XD並にサクサクっと、紹介しようと思います。
今回の記事が、Web作成する時に、AdobeXDを使う時にお役に立てば、嬉しく思います。最後まで読んでいただき、ありがとうございます。