「Adobe XD」は、アドビシステムズ社が提供するWebサイトやアプリなどのデザイン、プロトタイプを作成出来るツールです。Web業界ではPhotoshopやIllustratorが多数派かと思いますが、このAdobe XDの需要は近年伸びつつあります。
そこで今回は、この「Adobe XD」とはどんなものか、 「Webディレクター＆デザイナー編」の前後編でお伝えしようと思います。
目次
■Webディレクターの仕事効率アップ!! 覚えて損はない『Adobe XD』
「Adobe XD」とは、Webサイトやアプリなどのデザイン、プロトタイプを作成出来るツール。色々な使い方が出来ますが、Webディレクターの業務として考えるなら、まずは凝ったデザインというよりラフを描いて企画書へ添付する、どんなプロジェクトなのかイメージできるようにUIイメージを全体に伝えることなどがあるでしょう。
これらをAdobe XDで作成できるようになると、Webディレクターとしての業務スピードはもちろん、プロジェクト全体のスピード感につなげていくことが可能となります。
■Webディレクターが『Adobe XD』を使えるメリットとは？
WebディレクターがAdobe XDを使いこなせるメリットとして大きく3つあります。
1、クライアントの要求をすばやく形に出来る
2、 自分でデザインを行うことができる
3、開発者にもイメージを伝えやすく、実装効率アップ
この３つのメリットをそれぞれ詳しく見ていきたいと思います。
■メリット〈その1〉『クライアントの要求をすばやく形に出来る
Webディレクターの仕事で1番大事なのは「プロジェクトを円滑に進めること」。
特にプロジェクトをスタートさせる前の企画段階では、意外とスピード感が落ちがちです。もちろん、じっくり考える時間も大切ですが、場合によっては、それが企画自体にイメージがまったく沸いていないゆえのこともあります。
この段階で鮮明にイメージを伝えられれば企画もスムーズに進行し、その後のプロジェクトも円滑に進められるようになります。
そして、ここで外せない登場人物「クライアント」。これは純粋に取引先の相手だったり、社内の企画立案者などもクライアントとして考えることが出来ます。
このような『相手』がいる場合に、Adobe XDは効果を最大限に発揮してくれるのです。というのも、相手がイメージするものをすぐに形に出来るからです。
例えば、アプリ開発なら『こんなイメージでアプリを作りたいんだよね』と依頼され、次の日にはアプリの画面が出来上がり提出すれば、クライアントが大喜びする顔が浮かびますね。また、パソコンを持っていくことで会議の場で、すぐにデザインを変更する事も可能です。
また、クライアント側としては「しっかりこちらのイメージが伝わっているか」という懸念点があります。初めの段階でイメージを形に起こしてすり合わせておけば、クライアントの安心感を獲得でき、かつ無駄な作業や修正がなくなるわけです。これだけでも、十分プロジェクトの進行スピードは大きく違ってくるのは言うまでもありません。
■メリット〈その2〉『自分でデザインを行うことができる』
他者にわかりやすくイメージを伝えるのは大変な作業です。Webディレクターが自らイメージを伝えるとなれば「自分でラフを描く」、こんなデザインでと「デザイナーにイメージを依頼する」などの方法があります。
企画書に添付するUIイメージ1つをとっても、デザイナーに依頼する場合はデザイナーとのすり合わせや作業の時間も必要になってきますし、何よりも全体の業務効率は決して早くありません。さらに、うまく伝わっていなければイメージの完成度も低くなりがちです。仮にもし、自分で軽いデザインが行えたら、デザイナーに頼まずにすみサクッとUIイメージを制作、企画書に添付する事ができてしまうのです。
Adobe XDはデザイン初心者でも、比較的簡単にUIデザインを制作出来ますし、UIパーツも用意されているので、ある程度の形に上げられることが特徴であり、強みでもあります。
■メリット〈その3〉『開発者にもイメージを伝えやすく、実装効率アップ』
現在は「Photoshop」や「Illustrator」を使用し、開発者へイメージを伝える現場が多いと思います。当然、それで業務を行うことは十分可能ですが、もっと効率よく共有することで開発効率をグンとアップさせることも出来ます。
Adobe XDで作ったデザインは『Zeplin』というツールと連携させることで、実際のパーツの配置位置・フォントサイズがすぐに確認出来ます。Zeplinを見るだけで、より手早く実装出来てしまうので、開発者にとってはフロント側の実装がしやすいということになります。
ただし、1つ注意点としては、Adobe XDのデザイン配置が実際のアプリに実装されるため、開発者に渡すデザインは、デザイナーに依頼してしっかり作り込んだものが良い場合もあります。
■Webディレクターが『Adobe XD』を上手に使う方法
WebディレクターがAdobe XDを使う時は、ベースとして共通イメージを確立させる場合で、いわゆる「共通言語」に似たようなもの。プロジェクトに関わるすべての人が何を作ろうとしているかを把握しやすいようにする為の手段（ツール）です。
ですから、凝ったデザインをゴリゴリ描くような感じではなく、出来る限りイメージに沿った全体的な「ラフデザイン」を制作し、プロジェクト全体で共有すると言った使い方が正しいでしょう。
また、新規のものだけではなく、既存の改善でもAdobe XDが使えます。例えば、既存のUIをAdobe XDでトレースすることで、オフライン上でも画面確認が出来ますし、画面遷移に起こせば、『今どこの画面の、どれについてを話しているか』ということも一発でわかります。
■Adobe XDでは『プロトタイプ』を作ることが基本
Adobe XDは、一からUIデザインを行って「プロトタイプ」を制作し共有、というのが基本的な使い方です。
プロトタイプを制作したら共有URLを発行し、クライアントにその共有URLを伝えるだけでこのプロトタイプをすぐに確認してもらう事ができます。そして、共有URLにはパスワードがかけられ、セキュリティ面でも安心です。
この制作したUIデザインは「書き出し」をすれば、一画面ごとの画像化や各UIパーツごとの書き出しも可能です。そのため、企画書などでメニューバーのところだけ画像で説明したい場合も、メニューバーのところだけを書き出して、企画書に添付も出来ます。
WebディレクターがAdobe XDを使うなら、とにかく『共通認識を持たせること』に特化した使い方が1番合っていると言えます。
■まとめ
Adobe XDを利用したプロトタイプ作成は、クライアント・開発者へイメージの伝えやすさがぐんとアップ、開発もスムーズになります。また、業務効率を上げることも可能なので、まだ使用したことがない人は是非、使ってみることをオススメします。
とりあえずで、無料で使い始めることも出来るので、一度は試してみてほしいツールです。
次回はデザイナーの立場から、このツールについてお話します。
