UXデザインツールAdobeXDを使ってみたら3時間でスマホとPCページが出来た話

UXデザインツールAdobeXDを使ってみたら3時間でスマホとPCページが出来た話

AdobeXDってご存知ですか?
Adobeから発表された新しい、UXデザインツールです。

Web業界にいらっしゃる方はきっとみんな知っていると思うんですが、コレPhotoshopやSketchなどデザインカンプやワイヤフレームを簡単に作れるツールなんですよ。

そのAdobeXDがMac版限定ではあるんですが、日本語版が公開されたので少しだけ使ってみて、SakanaTechの次期ブログデザインを考えてみました。

こんにちは、プログラミングもデザインも全部できるようになりたい、らいか(id:sakanatech)です。

 

AdobeXDで作れたもの

AdobeXDでこんなものが作れました。

UXデザインツールAdobeXDを使ってみたら3時間でスマホとPCページが出来た話

あと、AdobeXD凄いな!って思うのが、プロトタイプも作れるんですよ。
どこをクリックしたら、どの画面に遷移するのか。というのを伝えることが出来ます。

デザインカンプだけでなく、すごく簡単ではありますが画面遷移を実現したプロトタイプをユーザーに提供することは、ユーザーとの認識祖語をなくすために大きく活躍することができます。

 

ココが便利

 

プロトタイプでユーザーと認識合わせ

このAdobeXDに搭載されている、プロトタイプ機能
とても、すごい機能で今後のWEB制作の現場における「ユーザーレビュー」や「プロトタイプレビュー」の形式を大きく変えるんじゃないかと非常に大きな可能性を感じています。

プロトタイプでは、このyoutubeにアップした様に動画形式で動きを保存することができます。

<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/bSfMMSaMPm0″ frameborder=”0″ allowfullscreen></iframe>

<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/OOMZ7d5Hwes” frameborder=”0″ allowfullscreen></iframe>

いやほんとにすごくて、このカンプが大体3時間くらいで作れたのと動画録画機能も当然様に実装されていて、さくっと録画して、さくっとyoutubeに公開することができる。

特に、WEB制作では制作側を悩ませるユーザーからの突然の修正依頼。

それって、ユーザーコントロールや追加修正の費用など営業での不手際も当然あるのですが、何よりもユーザーとの成果物やゴールの認識共有がしっかりと行えていないからこそ、突然の修正依頼が飛び込んできてしまいます。

突然の修正依頼を解決するためには、こまめに成果物のイメージを認識合わせしたり、特に最近のWEB制作で重要なのが「動き面での認識合わせ」です。

 

しかし、動きを確認するためには往々にしてフロントエンドの作りこみや、場合によってはバックエンドを含めた作りこみが必要になり、デザインカンプを作っている工程では当然プロトタイプを作るための時間や費用を捻出するのが難しいです。

その問題を一手に解決してくれるのが、AdobeXDです。

なにやら、Adobeの宣伝の様になってしまっていますが、それほどこのツールに感動したのでアツく語っています。

 

共有機能でチーム内レビューを効率的に

デザインカンプのチーム内レビューやコメントの受領って体系化できていますか?

いまでしたら、Photoshopで作成したデザインカンプファイルをディレクターやチーム内に展開してメンバからデザインに対するコメントやユーザーが実現したいことが実現できているデザインかのチェックをしてもらっていますが、今後AdobeXDが普及した場合、前述したプロトタイプで表現できる動きの部分も含めてチーム内に簡単に情報共有することができ、コメントを受領することが出来ます。

現在は、チーム内に共有することが出来る程度ではありますが、この機能が共有(Share)ではなく、レビュー機能として成長しコメントの受領や改善点に矢印をつけれるようになるなど、レビュー&コメントに特化した機能として製品版では成長してほしいなと感じています。

 

とにかく軽い

使っていて特に強く思ったのが、「軽いな!」という点でした。

従来のAdobe製品ってそこそこのPCスペックがあっても、やっぱり重く感じるんですよ。
Macでも、重く感じることが多くあったのですが、このAdobeXDは軽いです。

プレビュー版だから軽いということだったら少しだけ残念なのですが、これほど大きなカンプを何枚も並べていても全然重さを感じない。

むしろサクサク動作して完全にストレスフリーでデザイン作業だけに集中することが出来ます。

Photoshopのデザインカンプ作成で重さの原因になっていたのは、大量のグリッドだと言われていますがグリッドを1から作る必要のないAdobeXDでは軽快な動作で作業を行うことが出来ました。

この動作が軽いという点は、日々の仕事の効率に非常に重要で、どうしても処理が遅いと人間側もストレスを感じてしまい100%のパフォーマンスを出せなくなってしまいます。

 

ココが不便

1点だけ。不便な点があります。

Microsoft製品をよく利用しているので、特に強く感じただけなのかもしれませんが、
「最前面にする」「最背面にする」などの機能がありません。似たような機能をうまく使えば実現できないこともないのですが、

表示優先度の変更を、別の機能をうまく使う必要って本当にあります?

 

この機能については、ぜひともボタン一つ、二つで実装できる様にしてほしいです。

 

AdobeXD今後の予定

今後のAdobeXDは2016年中にWindows10版をリリースするとのことです。

WindowsでWEB制作を行っている人にとっては朗報なんじゃないでしょうか?

DreamWeaverもBracketsのテキストエディタ機能を内包したアップデートを2017年に控えていますし、今年と来年はWEB制作のやり方が大きく変わる2年になるんじゃないでしょうか?

今後もAdobe製品にはお世話になるはずなので、動向に注目が必要です。

 

らいか
AdobeXDは今後も積極的に使っていきたいツールです。Photoshopを一から覚えて使いこなすよりもAdobeXDを覚えた方が総合的な習熟コストが小さい気がしますし、今後はAdobeXDでデザインカンプやワイヤフレームを作ることが主流になるんじゃないかな?

UXデザインツールAdobeXDを使ってみたら3時間でスマホとPCページが出来た話

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。