XD」は、アドビシステムズ社が提供するWebサイトやアプリなどのデザイン、プロトタイプを作成出来るツールです。XDの需要は近年伸びつつあります。「Webディレクター&デザイナー編」の前後編でお伝えしようと思います。XD」を知らないなら、是非、この機会に覚えておくとよいでしょう。XDを使いこなせるだけで、作りたいイメージをパッと形にすることが可能です。XDの使用が増えると想定されるので、今のうちに覚えておけばWebディレクターとしての市場価値が上がるかもしれません。XD」は冒頭でもお伝えしましたが、Webサイトやアプリなどのデザイン、プロトタイプを作成出来るツール。色々な使い方が出来ますが、Webディレクターの業務として考えるなら、まずは凝ったデザインというよりラフを描いて企画書へ添付する、どんなプロジェクトなのかイメージできるようにUIイメージを全体に伝えることなどがあるでしょう。XDで作成できるようになると、Webディレクターとしての業務スピードはもちろん、プロジェクト全体のスピード感につなげていくことが可能となります。XDを使いこなせるメリットとして大きく3つあります。自分でデザインを行うことができる3、開発者にもイメージを伝えやすく、実装効率アップこの3つのメリットをそれぞれ詳しく見ていきたいと思います。■メリット〈その1〉『クライアントの要求をすばやく形に出来るWebディレクターの仕事で1番大事なのは「プロジェクトを円滑に進めること」。プロジェクトをスタートさせる前の企画段階では、意外とスピード感が落ちがちです。考える時間も大切ですが、場合によっては、それが企画自体にイメージがまったく沸いていないゆえのこともあります。この段階で鮮明にイメージを伝えられれば企画もスムーズに進行し、その後のプロジェクトも円滑に進められるようになります。ここで外せない登場人物「クライアント」。これは純粋に取引先の相手だったり、社内の企画立案者などもクライアントとして考えることが出来ます。XDは効果を最大限に発揮してくれるのです。いうのも、相手がイメージするものをすぐに形に出来るからです。アプリ開発なら『こんなイメージでアプリを作りたいんだよね』と依頼され、次の日にはアプリの画面が出来上がり提出すれば、クライアントが大喜びする顔が浮かびますね。パソコンを持っていくことで会議の場で、すぐにデザインを変更する事も可能です。クライアント側としては「しっかりこちらのイメージが伝わっているか」という懸念点があります。初めの段階でイメージを形に起こしてすり合わせておけば、クライアントの安心感を獲得でき、かつ無駄な作業や修正がなくなるわけです。これだけでも、十分プロジェクトの進行スピードは大きく違ってくるのは言うまでもありません。他者にわかりやすくイメージを伝えるのは大変な作業です。Webディレクターが自らイメージを伝えるとなれば「自分でラフを描く」、こんなデザインでと「デザイナーにイメージを依頼する」などの方法があります。企画書に添付するUIイメージ1つをとっても、デザイナーに依頼する場合はデザイナーとのすり合わせや作業の時間も必要になってきますし、何よりも全体の業務効率は決して早くありません。うまく伝わっていなければイメージの完成度も低くなりがちです。仮にもし、自分で軽いデザインが行えたら、デザイナーに頼まずにすみサクッとUIイメージを制作、企画書に添付する事ができてしまうのです。XDはデザイン初心者でも、比較的簡単にUIデザインを制作出来ますし、UIパーツも用意されているので、ある程度の形に上げられることが特徴であり、強みでもあります。現在は「Photoshop」や「Illustrator」を使用し、開発者へイメージを伝える現場が多いと思います。それで業務を行うことは十分可能ですが、もっと効率よく共有することで開発効率をグンとアップさせることも出来ます。XDで作ったデザインは『Zeplin』というツールと連携させることで、実際のパーツの配置位置・フォントサイズがすぐに確認出来ます。Zeplinを見るだけで、より手早く実装出来てしまうので、開発者にとってはフロント側の実装がしやすいということになります。XDのデザイン配置が実際のアプリに実装されるため、開発者に渡すデザインは、デザイナーに依頼してしっかり作り込んだものが良い場合もあります。XDを使う時は、ベースとして共通イメージを確立させる場合で、いわゆる「共通言語」に似たようなもの。プロジェクトに関わるすべての人が何を作ろうとしているかを把握しやすいようにする為の手段(ツール)です。凝ったデザインをゴリゴリ描くような感じではなく、出来る限りイメージに沿った全体的な「ラフデザイン」を制作し、プロジェクト全体で共有すると言った使い方が正しいでしょう。XDでトレースすることで、オフライン上でも画面確認が出来ますし、画面遷移に起こせば、『今どこの画面の、どれについてを話しているか』ということも一発でわかります。XDは、一からUIデザインを行って「プロトタイプ」を制作し共有、というのが基本的な使い方です。プロトタイプを制作したら共有URLを発行し、クライアントにその共有URLを伝えるだけでこのプロトタイプをすぐに確認してもらう事ができます。共有URLにはパスワードがかけられ、セキュリティ面でも安心です。この制作したUIデザインは「書き出し」をすれば、一画面ごとの画像化や各UIパーツごとの書き出しも可能です。そのため、企画書などでメニューバーのところだけ画像で説明したい場合も、メニューバーのところだけを書き出して、企画書に添付も出来ます。XDを使うなら、とにかく『共通認識を持たせること』に特化した使い方が1番合っていると言えます。XDを利用したプロトタイプ作成は、クライアント・開発者へイメージの伝えやすさがぐんとアップ、開発もスムーズになります。業務効率を上げることも可能なので、まだ使用したことがない人は是非、使ってみることをオススメします。無料で使い始めることも出来るので、一度は試してみてほしいツールです。次回はデザイナーの立場から、このツールについてお話します。この記事を読んだ人はこんな記事も読んでいます2020.02.04【キャリアアップ】Webデザイナーが持つべきプラスのスキルとは?■Webデザイナーを取り巻く現状と『キャリアアップ・チェンジ』現在もWebサイトは日々増え、さらに人手不足の昨今、Webデザイナーとしての仕事がすぐになくなることはないでしょう。ワイヤーフレームを作る時に誰しもが1度は陥ってしまうと思われるのが『デザインを考え始めてしまい、ワイヤーフレーム作成が進まない』ということ。■ダミー画像作成をするなら『placehold.jp』「フレームワーク」ができて「モックアップ」用のダミー画像をいれる時、どのような方法をとっているでしょうか。Markup」は、「HTML・CSS」を併せてチェックできるツール。モダンで見やすく、使い勝手のよいオンラインチェックツールです。「現状に満足しない」ことが挙げられます。受賞歴あり取引実績ありガッツリ稼ぎたい面接2回以内・課題なし直クライアントお弁当持参OKグラフィックデザイン経験者歓迎この条件で検索する。