クリエイティブなWeb制作に
役立つ情報メディア

もう怖くない!Webディレクター向け Adobe XD入門

皆さん、Adobe XD使っていますか?
毎月アップデートされどんどん便利になっているところから、Adobeさん側でもこのツールにかなり力を入れていることが伝わってくるでしょう。

UXデザイナー界隈などではすでに「使えるツール」として定着した感のあるXDですが、まだまだ使ったことが無い人、どんなツールかよくわかっていない人も多いと思います。

そこで今回は「まずはWebディレクターからAdobe XDを導入していこうぜ」をテーマに、XDの魅力や便利な使い方などを説明していきます。

Adobe XDは『デザインツール』では無い

Adobe XDを巡る大きな誤解に「Adobe XDはデザインツールである」という点があるかと思います。

どんどん機能も追加されて便利にはなっていっていますが、デザイナー視点で見ればPhotoshopやSketchと比べると足りない機能が山ほどあります。

ですがここで、「Adobe XDはPhotoshopの下位互換」と思ってしまうと、Adobe XDの本質を見誤ってしまいます。

以前にAdobeのセミナーに参加したときも、Adobe側もスタンスとしては「細かい加工はPhotoshopやIllustratorでやって、それをAdobe XDに持ってくる」という使い方を推奨していました。

PhotoshopやIllustratorの代替物では無いので、足りない機能は素直に専門のツールを使いましょうということですね。
逆に言うと、どんなにAdobe XDがアップデートしようとも、PhotoshopやIllustratorと同じことができる日は来ないとも言えます。

では、Adobe XDとは何なのかというと、Web制作における

企画から制作完了まで、関係者全員の意思疎通をスムーズに行うためのハブ

だと思います。

まずは『ワイヤーフレーム作成ツール』として使ってみよう

とは言え、いきなりデザイナーさんに「今日からAdobe XD使ってね」というのもなかなかハードルが高いですし、あんまりAdobe XDの恩恵にもあずかれないと思います。

そこで、まずはディレクターが、ワイヤーフレームを作成するツールとして使ってみましょう。

ワイヤーフレームを描く場合、PowerPointか、ちょっとデザインができる人ならSketchというのが一般的かと思います。

では、それらと比べてAdobe XDのメリットはどんなところにあるでしょうか?

Adobe XDのメリット①:動作が軽い

これは、ディレクターだけでなくデザイナーにも言えるメリットですが、Adobe XDの特徴として、とにかく動作が軽いという点が挙げられます。

Adobeさん側でも「軽さ」はかなり重点を置いている部分のようで、なんでもアートボードを数千枚開いていてもきちんと動作するとか・・・

とにかくツールとして、軽いというのはそれだけで絶大なメリットがあります。

Adobe XDのメリット②:機能としてちょうどいい

先ほど、デザイン機能としてはPhotshopやSketchより劣ると書きましたが、ワイヤーフレームの作成としてはそれが逆にメリットとも言えます。

PowerPoint以上Skech未満という部分が逆にちょうど良く、低い学習コストでいい感じに精度の高いワイヤーフレームを作ることができます。
また、Wires jpのような、テンプレートとなるUIキットもネット上に公開されていますので、それらを使えばさらに簡単にワイヤーフレームを描くことができます。

Adobe XDのメリット③:プロトタイプ作成してURL共有!

そしてやっぱりAdobe XDの一番のメリットと言えば、プロトタイプ機能です!

ワイヤーフレームの段階で画面遷移まで作成して、確認用URLを発行。ワイヤーフレームの段階からクライアントも含めて、PC/スマホでの実機確認ができるので、「いざ、デザインに起こしてみたら色々要素が足りないのでレイアウト変更したい」とか「実際にコーディングされたページを見たら使いづらいので仕様変更したい」といったWeb制作手戻りあるあるを劇的に改善することができます。

共有したURL上からコメントも記載できるので、疑問点や修正点のやり取りなどもAdobe XD上で完結!なんども画像をPowerPointに貼り付けて、そこにコメントも毎回書き込んで・・・といったディレクターならではの地味に面倒な作業からも開放されます。

Adobe XD、実は無料で使えます

2018年5月より「スタータープラン」が追加され、Adobe CCに契約していなくても使うことができます。

2018年11月現在。Adobe公式サイト(https://www.adobe.com/jp/products/xd/compare-plans.html)より。

URL共有できる数が1つなので、実際に業務として無料で使い続けるのはなかなか難しいですが、「とりあえず使ってみたいけど、実はAdobe CCに契約していなくて・・・」という方には朗報ですね。

詳しくはこちらの公式ページをご覧ください。

まとめ

いかがでしたか?
Webディレクターの方でしたら、「プロトタイプ作成して、URL共有」がいかに便利で強力な機能かおわかりいただけると思います。
他のAdobeのソフトを触ったことがある人であればすぐに使えると思いますので、興味が湧いた方はぜひトライしてみてください。

Adobe XDで、みんなが幸せになれる、円滑な進行管理を目指しましょう!

犬たろう by
Webとかアプリとかのディレクターをやっている犬(パグ)です。わんわん。