YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2019.08.30

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

「Adobe XD」は、アドビシステムズ社が提供するWebサイトやアプリなどのデザイン、プロトタイプを作成出来るツールです。Web業界ではPhotoshopやIllustratorが多数派かと思いますが、このAdobe XDの需要は近年伸びつつあります。
そこで今後に備え、今回はこの「Adobe XD」とはどんなものか、 「Webディレクター&デザイナー編」の前後編でお伝えしようと思います。

 ■Webディレクターの仕事効率アップ!! 覚えて損はない『Adobe XD』

現在、Webディレクターをやっている方でもし「Adobe XD」を知らないなら、是非、この機会に覚えておくとよいでしょう。Adobe XDを使いこなせるだけで、作りたいイメージをパッと形にすることが可能です。
今後のIT業界では、Adobe XDの使用が増えると想定されるので、今のうちに覚えておけばWebディレクターとしての市場価値が上がるかもしれません。

「Adobe XD」は冒頭でもお伝えしましたが、Webサイトやアプリなどのデザイン、プロトタイプを作成出来るツール。色々な使い方が出来ますが、Webディレクターの業務として考えるなら、まずは凝ったデザインというよりラフを描いて企画書へ添付する、どんなプロジェクトなのかイメージできるようにUIイメージを全体に伝えることなどがあるでしょう。

これらをAdobe XDで作成できるようになると、Webディレクターとしての業務スピードはもちろん、プロジェクト全体のスピード感につなげていくことが可能となります。


 

 ■Webディレクターが『Adobe XD』を使えるメリットとは?

WebディレクターがAdobe XDを使いこなせるメリットとして大きく3つあります。

1、クライアントの要求をすばやく形に出来る
2、 自分でデザインを行うことができる
3、開発者にもイメージを伝えやすく、実装効率アップ

この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を利用したプロトタイプ作成は、クライアント・開発者へイメージの伝えやすさがぐんとアップ、開発もスムーズになります。また、業務効率を上げることも可能なので、まだ使用したことがない人は是非、使ってみることをオススメします。

とりあえずで、無料で使い始めることも出来るので、一度は試してみてほしいツールです。
次回はデザイナーの立場から、このツールについてお話します。
 

Recommend この記事を読んだ人はこんな記事も読んでいます

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

2019.09.13

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

■前編はこちら【資格】フリーランスのWebクリエイターが資格取得するメリット~前編~■資格取得前にキャリアアップの形成計画フリーランスが「資格取得」を最大限に有効活用する上で、まずやらなければならないことがキャリアアップやフリーランス...

【資格】フリーランスWebクリエイターが資格取得するメリット~前編~

2019.09.09

【資格】フリーランスWebクリエイターが資格取得するメリット~前編~

■後編はこちら【資格】フリーランスWebクリエイターが資格取得するメリット~後編~■フリーランスと「資格」の関係「会社」という枠から離れたフリーランス活動で大切なことのひとつに 「現状に満足しない」ことが挙げられます。「資格取得」と何の...

【最新トレンド】現役デザイナー選出する2019年Webデザイントレンド

2019.08.23

【最新トレンド】現役デザイナー選出する2019年Webデザイントレンド

■ユーザーの視線を引きつける『太さと大きさを備えたタイポグラフィ』『太字で大きく表示されるタイポグラフィ』は、昨年ごろからジワジワと流行の兆しを見せはじめています。最も伝えたい・見せたいテキストを大きなサイズで配置することで、ユーザー...

【業務効率化】Webディレクター必見のGoogle検索新機能!

2019.08.15

【業務効率化】Webディレクター必見のGoogle検索新機能!

■Googleの新機能「アクティビティカード」とは?「アクティビティカード」とは、ユーザーが検索した過去のトピックスに再度アクセスしやすいように、一連の検索履歴をまとめて参照できる機能です。例えば、「旅行・ハワイ・シュノーケリング」と...

【新デジタル技術】海外で体験できるアナログとデジタルの融合!

2019.08.09

【新デジタル技術】海外で体験できるアナログとデジタルの融合!

■〈アメリカ〉“Lumin AR Tour” デトロイト美術館Copyright © 2018 Detroit Institute of Arts. All rights reserved デトロイト美術館で昨年1月より開始。...

【ケアレスミス防止】「モデリング&TOTE」でミスを減らす方法!

2019.08.01

【ケアレスミス防止】「モデリング&TOTE」でミスを減らす方法!

■ミスを繰り返すのは、実は…単なる自己暗示だった!?「あのWebデザイナー、センスがあっていつもいいデザインを上げてくれるんだけど、なぜか細かいミスが多いんだよね。性格が大雑把?なのかな…」このセリフにドキ...