まだ使っていないの?ディレクターなら使っておきたいAdobe Xd

ディレクター要チェック!Adobe Xdとは


インターネット広告やSNS広告など、デジタルマーケティングで出来ることが多くなっている中で、Webサイトを持ちたいという企業も多くなり、Web制作会社では、企業が営業活動をしなくても勝手に案件がどんどん入ってくるという制作会社も多いのではないでしょうか。
その中でも、ホームページの制作案件を中心としてWeb会社では、ディレクターのディレクション能力を問われるところも多いでしょう。
Webサイトの制作案件が多い中で、ディレクターは案件を手際よくまとめ、指示を出し、円滑に制作を進める必要があり、その中でディレクターの手腕も求められるでしょう。
そんなWebディレクターとしては、指示を的確に出すことや、案件をまとめていくことだけではなく、時には営業マンとしてクライアントとの商談をすることもあるでしょう。
そんな時におすすめなのはAdobe Xdというアプリで、Adobe社から出ているこのアプリを利用すると、ディレクターとしてさまざまなメリットがあります。
今回は、そんなAdobe Xdについてご紹介していきます。

Adobe Xdとは


まず、Adobe Xdとはどのようなものなのか、製品の紹介などをしていきます。

どんな製品?

Adobe Xdは、Adobe社から出ているアプリで、Adobe社として有名なアプリと言えばPhotoShopやIllustratorなどがありますが、今ではこのPhotoShopやIllustratorとパッケージとして利用できるようになっており、Adobe CCという製品の一部として提供されています。
そのため、これまでPhotoShopやIllustratorなどの操作をしたことがある方であれば、比較的操作しやすく覚えやすいアプリと言えるでしょう。

Adobeって他にもたくさんアプリがあるの?

Adobe Xdだけではなく、Adobe社では様々なアプリを提供しており、代表的なものと言えばAdobe InDesignなどがあります。
InDesignは、Illustratorに似たアプリですが、雑誌などの冊子を作るときに便利に利用できるもので、Illustratorが一枚もののデザインを制作するのに適しているというのに対し、InDesignは複数ページに渡る冊子を作るのに適しています。
その他、Dream WeaverといったWeb制作をするために必要なアプリなども提供しています。

Adobe Xdで出来ること

次に、Adobe Xdで出来ることを見ていきましょう。

ワイヤーフレーム作成

Adobe Xdで出来ることの一つにワイヤーフレームの作成があります。
ワイヤーフレームとは、Webサイトを作る上でレイアウトなどを表現するもので、Webサイトの商談をする際などに必要なものです。
このワイヤーフレームを作る上で、様々なアプリで作ることができますが、Adobe Xdで制作することがおすすめです。

ワイヤーフレームとは?

ワイヤーフレームとは、Webサイトを作るための工程として、レイアウトの設計やデザインの構築、そこからコーディングをするなど、校庭が様々ありますが、その中のレイアウト設計やデザイン構築などをするのに役立つツールとなります。
また、Webサイトを制作するために商談をすることになりますが、クライアントにどのようなWebサイトになるのかを提案する際に、一般的にはPowerPointなどで提案資料を作りますが、ワイヤーフレームがあった方がレイアウトのイメージもつきやすく、出来てから「こんな感じになると思わなかった」ということにもならないでしょう。
そういった意味では、ワイヤーフレームはとても重要な役割を持っています。

他のアプリでも作れるけど…

ワイヤーフレームは他のアプリでも作成することができます。
例えば、ExcelやWord、PowerPointなどのMicrosoftの製品でも制作することができ、もちろんAdobe社から出ているPhotoShopやIllustratorでも作成可能です。
しかし、Adobe Xd以外のアプリで作成するのには時間が掛かることや、ワイヤーフレームを作るためのアプリとして開発されているわけではないため、ワイヤーフレームを作るための機能としては充実しているわけではありません。
Adobe Xdを使ったことが無い方は、使ったことが無いアプリよりも使い慣れているアプリで作りたいと考えると思いますが、一度Adobe Xdを使えば、その魅力を感じることができるでしょう。

プロトタイプ作成

次に、Adobe Xdではプロトタイプ作成もできます。
プロトタイプとは、デザインなどが完成したWebサイトの完成イメージで、プロトタイプを見せて最終確認をするという方も多いでしょう。
このプロトタイプは様々なアプリで作成できます。

プロトタイプとは?

プロトタイプとは、Webサイトの完成イメージを表現したもので、デザイン性を少なくしたワイヤーフレームに近い形のプロトタイプと、写真なども配置して最終系にとても近い形のプロトタイプがあります。
Web制作においては、プロトタイプを見せるときには最終系に近い形で表現することが多く、実際のデザインを確認して、これが最終決定となるようにクライアントに見てもらうことができます。

他のアプリでも作れるけど…

プロトタイプもワイヤーフレーム同様、Excelで作ることもAdobe製品で作ることも可能ですが、このプロトタイプにおいてもAdobe Xdで作ることがおすすめで、その理由としては様々なものがありますが、操作が簡単であるということや、プロトタイプの作成に向いているという点がおすすめの理由です。

Adobe Xdの利点

次に、ここからはAdobe Xdを利用する利点を見ていきましょう。
Adobe Xdを利用する利点には、「立ち上げが速い」「操作が簡単」「重くなりにくい」「無料プランもある」などがあります。

立ち上げが速い

まずは、Adobe Xdを利用する上で大きなポイントとなるのは、立ち上がりが速いという点です。
様々なアプリケーションが世に出ていますが、Adobe Xd以外のアプリケーションでは、アプリが立ち上がるのに時間が掛かり、作業スピードの速い方は特にストレスを感じるでしょう。
しかし、Adobe Xdは、立ち上がりが速いため、ストレスを感じることなく利用できるという点は利点と言えるでしょう。
Adobe Xdには複雑な機能はあまり含まれていないため、最小限の機能での操作が可能となっており、アプリの立ち上がりも速くなるのでしょう。

操作が簡単

次に操作性の部分でAdobe Xdには利点があります。
PhotoShopやIllustratorなどは、複雑な機能がたくさん含まれており、幅広い知識を有することで多くの機能を活かして制作をすることができるでしょう。
しかし、その一方で複雑な機能が多いため覚えるのが大変で、初めの一歩を踏み出すためのハードルは高いとも言えます。
そのようなアプリと比べると機能は少ないため、最小限の機能で必要な制作ができることで、操作性の簡単さにより使いやすさを感じられるでしょう。
操作が簡単であるということは、普段デザインやコーディングを行っていないディレクターにとっても簡単に操作ができるということになり初めの一歩を踏み出しやすいアプリと言えるでしょう。

重くなりにくい

次に、重たくなりにくいというのもアプリとしては利点と言えるでしょう。
Excelなどでワイヤーフレームやプロトタイプを作ろうとすると、Excelはそもそも表計算機能が充実しているアプリで、デザインを作るためのアプリではないため、図形などを沢山配置した場合に、データが重たくなったり、使い勝手が悪いと感じたりすることもあるでしょう。
しかし、Adobe Xdは、ワイヤーフレームやプロトタイプを作るために作られたようなアプリなので、想定している機能を使っても重くなりにくく、他のアプリと並行して利用しても重くなることやフリーズしてしまうことは少ないでしょう。
もちろん、これは利用しているパソコンの性能にもよるため、あくまでも他のアプリと比べてという意味です。

無料プランもある

そして、Adobe Xdは、無料プランもあり、無料で使用することもできるツールということも利点としては挙げられるでしょう。
ワイヤーフレームを作るアプリは無料のモノもありますが、ワイヤーフレームを簡単に作れるアプリが無料で利用できることは、利用する側としては大きな利点と言えるでしょう。

このような点からAdobe Xdを利用するのには利点があり、ディレクターとしてもAdobe Xdを利用することで、多くのメリットを感じ、今までのビジネスをより広げる手助けをしてくれることでしょう。
特に商談などにおいては、Adobe Xd一つ使えるだけで素晴らしい提案をすることができるでしょう。

ディレクターこそAdobe Xdを使うべき理由


次に、Webサイトの制作を行うディレクターがAdobe Xdを利用するべき理由を見ていきましょう。

共有作業がしやすい

Adobe Xdが利用できるようになったことで、制作側との共有作業がしやすいという利点があります。
ディレクターの仕事としては、制作の運用管理をすることが必要となりますが、Web制作の案件が多数入っている場合、制作側にすべてを任せようとすると、商談のスピードも遅くなったり、複数案件を上手に回したりすることもできないことがあるでしょう。
そのため制作側との共有作業ができるようになることで、Web制作に関する工数を少なくすることや、納期に間に合わないということも防ぐことができるでしょう。
共有作業が出来ることで作業分担ができるだけではなく、情報共有することも出来るため、メリットとしては大きいでしょう。

機能がシンプルだからわかりやすい

次に、昨日がシンプルであるということも、利点と言えるでしょう。
ディレクター業をしていると、Web制作のついての知識はもちろんのこと、それ以外の知識も多くつくと思いますが、実際のコーディングやデザインというのはディレクターの技術として持ち合わせていないこともあるでしょう。
そのため、デザイナーが使うようなPhotoShopやIllustratorなどのアプリを苦手としているディレクターも少なくないでしょう。
そのようなディレクターでは、あまりITツールを使いこなすのが難しいイメージもあると思いますが、Adobe Xdは、PhotoShopやIllustratorに慣れていない方でも使えるようなシンプルな使い方ができ、操作性も簡単なため比較的抵抗なく使い始めることができるアプリです。

クライアントに伝える能力が高まる

次に、クライアントに伝える能力が高まるということも大きなメリットとなるでしょう。
ディレクションの仕事は、企業によって様々ですが、クライアントとの商談も仕事の一つになることが多いでしょう。
その場合、社内のディレクションとしての力も勿論必要ですが、商談をうまくまとめていく力も必要となります。
例えば、商談において「言った言わない」を無くすためには可視化して見えるようにすることで、クライアントとのイメージを合わせていくことも出来ますし、商談した内容をメールで後程送って決まったことなどを共有することもディレクターとしては必要となります。
その商談の中でクライアントにイメージを持ってもらうためにはAdobe Xdを利用したワイヤーフレームを作ったりプロトタイプを作ったりすることが必要で、手書きのレイアウトよりもワイヤーフレームをしっかり作れるディレクターの方がクライアントは安心してくれることでしょう。

クライアントからの評価も高まる

そして、ワイヤーフレームやプロトタイプをしっかり見せて、商談を進めていくことで、クライアントからの評価も高まるでしょう。
ディレクターによってはAdobe Xdを利用してワイヤーフレームを作り、それを商談の中で出す人と、そうではなく手書きでレイアウトイメージを書いて、それを確認してもらうというケースがありますが、後者よりも前者の方がWebサイトを作る相手としては信頼がおけるでしょう。
どのようなサイトになるのかのイメージを強く植え付けるためにも、Adobe Xdを利用して見やすくわかりやすくイメージしやすいワイヤーフレームを作ることがポイントです。

Adobe Xdの主な機能

次に、Adobe Xdの主な機能について触れていきます。

デザイン編集

Adobe Xdでは、デザイン編集機能があり、その名の通りデザインを編集することが出来ます。
ワイヤーフレームやプロトタイプを作る上で、画像を配置したり図形を配置しあり、リンクを作成したりすることができるため、ワイヤーフレームに必要な機能は充実していると言えるでしょう。
また、デザイン性にも優れており、いわゆるビジネスソフトというイメージではなく、デザインソフトというものになるため、デザイン性や操作性は充実していると言えるでしょう。

リピートグリッド

リピートグリッドは特におすすめの機能ですが、たとえば、一つのボタンを作った時にそのボタンと同じ大きさの図形を等間隔に並べたり、繰り返し画像を複製したりすることができるのは、Adobe Xdの利点と言えるでしょう。
リピートグリッドを使いこなすことによって、Webサイトのワイヤーフレームやプロトタイプを簡単に作ることができるでしょう。

シンボル作成

Adobe Xdにはシンボル(現在はコンポーネント)という機能があり、この機能を利用することで、一つのボタンを変更したらその変更内容と同じように別のボタンも変更されるという機能があります。
グローバルナビなど、これを利用することで、修正した際にすべてのグローバルナビが変更されます。

こんなことも出来る!Adobe Xd


最後に、Adobe Xdを利用する上で、衝撃的な機能もご紹介していきます。

スポイト機能

スポイト機能とは、PhotoShopやIllustratorにもついている機能ですが、スポイトで吸い取るように他のオブジェクトの色を読み取ることができる機能で、チラシやWebサイトの制作をしていると、同じ色を使うということがとても多いため、これらをスポイトで吸い取ることで、色の設定が簡単に行えます。
Adobe Xdでは、Adobe Xd以外の外の色もスポイトでカラーを読み取ることが可能となっています。

自動アニメーション

次に、自動アニメーションという機能があります。
この自動アニメーションというのは、アートボードの連携をすることによって自動でアニメーションが作れるというものです。
アートボードを連携することができ、アートボードとアートボードがリンクして繋がっているように表現することができますが、その際にアートボードからアートボードへ切り替わるタイミングでアニメーションを付けてくれる機能があります。
あたかもWebサイトでリンクされているような印象をうけるアニメーションが設定されているため、ワイヤーフレームとしての表現を超えるものが出来るでしょう。

レスポンシブサイズの変更

そして、レスポンシブサイズの変更も簡単に行うことができるのも魅力の一つです。
空間関係を維持しながらサイズを変更できる機能があり、PC用で作ったワイヤーフレームを利用して、スマートフォンで閲覧した場合のワイヤーフレームや、タブレットで閲覧した際のワイヤーフレームを簡単に作ることができます。
まさにワイヤーフレームを作るために作られたアプリと言っても過言ではないほど、機能性に優れています。

まとめ

ここまで、Adobe Xdについて、その機能や利点などをご紹介してきました。
Adobe Xdは、ディレクターとして使っている人もまだまだ少ないですが、Adobe Xdを利用することによってワイヤーフレームやプロトタイプが簡単に作れるため、これからの商談を成功させていくための方法として、このようなツールを利用できるようにするということはおすすめです。
無料で使うこともできるので、まずは無料で体験してみると良いでしょう。