Adobe初のUI/UXデザインツール「AdobeXD」の使い方を見てきました！【CSS Nite in Kobe】

先日CSS Nite in Kobe Vol.23 「〜WebサイトやモバイルアプリのUXの設計、UIのデザインからプロトタイプの作成、共有まで〜 Webデザイナー、ディレクター必見「Adobe XD」の使い方じっくり解説」に参加してきました。

講師はAdobeのマーケティング担当である轟 啓介さん。セミハンズオンという事で、参加者はノートPCを持ち込み、実際にAdobeXDを操作してXDの魅力を体験しました。

AdobeXDとは？

さて今回のテーマは「AdobeXD(アドビ エックスディー)」。
正式名称はAdobe Experience Design(アドビ エクスペリエンス デザイン)ですが、もうすっかりXDで定着しました。

Adobe初のUI/UXデザインツールという事で、スマホサイトやスマホアプリのUI/UXの制作やプロトタイプ制作などを行う事ができる製品になります。

現在はまだBeta版で、2016年の3月にMac OS版が登場。その後Windows10版が登場しました。

プロトタイプ作成の意味

AdobeXDはプロトタイプ作成にもってこいのツールです。
しかし、プロトタイプを作るメリットはどんなものがあるのか、理解している方は少ないのでは無いでしょうか？XDを使う前にその点をしっかり押さえておく必要があるという事で轟さんはプロトタイプの作成の意味を２つの例からお話してくださいました。

セブンイレブンのコーヒーメーカー

３・４年前に話題になったので、知っている方も多いと思いますが下の画像はセブンイレブンのコーヒーメーカーです。プロデュースしたのはアートディレクターとして超有名な佐藤可士和さん。
完成されたコーヒーメーカーはシンプルで洗練され、スタイリッシュなデザインになっています。

セブンイレブンに設置されてからしばらくして、各店舗が下の画像のようにテプラまみれになってしまいました。どうやらボタンを押し間違えるお客さんが跡を絶たなかったみたいです。

シンプルでかっこいいデザインですが、お客さんからしてみると不便で、R＝RegularとL=Largeというのも分かりにくいため、ボタンの押し間違いが多発してしまった事例です。

「使いやすさ」＞「かっこよさ」という事例です。この場合、プロトタイプを事前にしっかり作っておく事でコンビニでコーヒーを飲む利用者がどのような考えで利用しているのかより明確になり、このような失敗も防げたかもしれません。

顧客が本当に必要だったもの

下の画像はIT業界、ネットで有名な「顧客が本当に必要だったもの」という画像ですが、これはブランコを例にして、開発者側それぞれの解釈のズレと最終的に顧客が必要だったものは何だったのかを表した風刺画になります。見てもらうと分かるように、それぞれの担当が誤った方向に進んで行ってしまっています。

このように制作フローは複雑な伝言ゲームになっています。完成のイメージが何となくのままプロジェクトが進んでいってしまっては、大変な事になります。そんな自体を避けるためには、プロトタイプを早い段階で作って完成イメージを共有しておく事です。

先ほどの例でいくと、プロジェクトリーダーが早い段階でブランコの模型などを作って顧客に見せ、ズレを修正してからそれをチームで共有といった流れを入れるだけで全然違った結果になりそうですよね。

そして、この「顧客が本当に必要だったもの」の面白いところは顧客自身も、自分たちが必要になるものの説明をきちんと出来ていない点です。つまり顧客が言う事は基本的に何だかモヤモヤしていてそのまま形にする事は出来ない。それをうまくまとめるためにも、プロトタイプがあると役に立ちますし、顧客に見せた時にすぐ理解してもらえます。

プロトタイプですぐに理解してもらえる

アメリカの格言に「A prototype is worth a thousand meetings (1つのプロトタイプは1000回のミーティングに匹敵する)」というものがあります。
実際に動きがあり、触れるものを作った方が根本的な問題点や、細かい部分にまで気づく事が出来ますし、何より完成品のイメージを一発で共有する事が出来ます。

動きを説明する時に関しても「ここのメニューがシュッと出てくるんですよ」とか「ここを押すと右からメニューが…」「先ほどのページからこっちに移動して…」と言ってもなかなかうまく伝わりません。
プロトタイプがあればすぐに理解してもらえます。

デザインカンプじゃ駄目なのか？

さて、ここでプロトタイプじゃなくてデザインカンプじゃ駄目なのか？という疑問が出てきますが、想像力豊かなクライアントはなかなかいなく、デザインカンプを見せた時はOKだったけど、実装して動きがついた時のものを見せると「なんか思ってたのと違う」なんて言われる事もあるんだとか。

つまりデザインカンプでは、どれだけ綺麗に作っていてもそこに動きはなく、どうしても動きの面をクライアントの想像力に委ねてしまう事になります。

プロトタイプ制作にXD

さて、長々とプロトタイプの必要性に関して説明してきましたが、いくらプロトタイプが重要だと分かっても「予算をかけられない」「時間をかけられない」「学習コストがかけられない」など様々な問題からプロトタイプ制作はどうしても後回しになってしまいます。

それを解決するのがAdobe XDというわけです。
まずはAdobe XDの特徴を挙げてみます。

1. とにかく軽い
   • PhotoshopやIllustratorとは比べものにならない軽快さ。
   • MacOSとWindows10と環境を絞った変わりに最新の技術を使用して開発しているため、そもそものプラットフォームが古いPhotoshopやIllustratorには無い軽快さを実現したんだとか。
2. めちゃくちゃ簡単
   • 学習コストはほぼ無しに等しい。
   • PhotoshopやIllustratorを使ったことがある人ならすぐ使いこなせます。
3. サクサク早い
   • UI/UXデザインに必要な機能のみに絞っているため、動作が軽いです。
   • アートボードを大量に作っても大丈夫！

そしてAdobe XDは見た目のデザインを行なった後に、画面遷移をデザインする事も可能なのです。そして出来上がったデザインをスマホに表示して実際の動作を確認できます。
実際にスマホで触らないと分からない事だってたくさんあります。例えばボタンの位置がどれくらいの高さなら押しやすいか…などなど。

AdobeXDはそうしたUIデザインを行い、プロトタイプとして実際のリソース環境(スマホアプリならスマートフォン)で動かす事ができ、チームで共有してフィードバックを得る事ができるのです。

Adobe XDのインストール

現在ベータ版のAdobe XDですが、Adobe XDの公式ページからダウンロードできます。

www.adobe.com

Adobe Experience Design CC（ベータ版） | プロトタイプおよびワイヤーフレーム作...

http://www.adobe.com/jp/products/experience-design.html

Webサイトやモバイルアプリのデザインとプロトタイプの作成が、これ1本でできるAdobe Experience Design CC（ベータ版）、UXデザイナー向け初めてのオールインワン製品です。ダウンロードしてお試しください。

操作方法

ここから先はAdobeXDで実際に何ができるのか見ていきます。
(Windows10版にはまだ実装されていない機能も少しあるみたいです)

起動画面

まずXDを起動すると下のような画面が表示されます。ここで画面サイズを選択するのですが、基本はiPhone6/7サイズみたいです。

基本的な操作を学びたい場合は左下の「チュートリアルを開始」からチュートリアルを進める事も可能です。このチュートリアルを一度してみるだけで、XDの操作はほとんど理解できると思います。それくらい操作が簡単なんですよね。

基本操作

まずはAdobeXDの基本操作を見ていきましょう。
起動画面から画面サイズを選択すると下の画面が表示されます。(今回はiPhone6/7サイズを選択)

Adobe製品を使ったことがある方、特にIllustrator・Photoshopを使ったことがある方なら、この画面を見ただけである程度どこをどうすれば何ができるのか分かるのではないでしょうか？

ツールバー

Adobe XDの左にあるのがツールバーでここからツールの切り替えを行います。
IllustratorやPhotoshopと比べると圧倒的にツールの数は少ないですが、それでもある程度やりたい事ができてしまいます。

そして僕が驚いたのはいちいちツールの変更を行わなくてもダブルクリックすれば、勝手にツールがいい感じに切り替わってくれる事です。

例えばペンツールで描画したシェイプも選択ツールの状態でダブルクリックすれば勝手にペンツールに切り替わってアンカーポイントの変更もできます。
とにかくAdobe XDでは、何か変更したい時はとりあえずダブルクリックしてみると良さそうです。

右パネル

右の方にあるパネルには選択したシェイプや文字の調節が行えます。

1. 整列
2. リピートグリッド
3. パスの合成
4. 大きさ・位置情報
5. アピアランス
6. テキスト設定

右パネルでできる事をまとめてみるとこんな感じです。2番目のリピートグリッドはAdobeXDの新機能なのですが作業を簡略化できる便利な機能です。

リピートグリッド

リピートグリッドはAdobeXDで追加された新機能で、選択した要素を縦・横方向にリピート（繰り返す）機能の事です。

これは実際に使ってもらった方が分かりやすいのですが、例えば画像付きのリストや記事の一覧ページを作る時、Photoshop等だと一個要素を作成して複製していく…というのが一般的な作成方法ですが、AdobeXDではリピートしたい要素を選択してリピートグリッドにし、ハンドルを動かす事で要素のリピートが可能なのです。

一度試してみましょう。
今回は左に画像、右にテキストのあるリストを作成してみる事にします。よくWebサイトで見かけますよね。
まずはリピートさせたい要素を選択ツールで選択します。

次に選択した状態のまま、右パネルの「リピートグリッド」をクリックします。選択している要素を囲む線の色が青色から緑色の点線に変わったらOKです。
リピートグリッドには右と下の方にハンドルがあるので、このハンドルを動かす事で要素をリピートする事ができます。

右と下にハンドルをドラッグするだけでリストが出来上がりました。
そして、このリピートグリッドのすごい所は、位置や色・文字サイズ等を一箇所修正すると他の部分もその修正が適応される点にあります。
もしこれが複製で作成されたリストだったとしたら、一個一個修正していかないといけません。

作業効率が圧倒的に上がりますよね。

他にもAdobeXDのより詳しい操作方法や、開発方針などは下記のAdobeの記事を見ていただけるとよく分かると思います。

Adobe Creative Station

Adobe XDの基礎を完全マスターしよう！使い方を学べるサンプルを公開中：Adobe MAX...

https://blogs.adobe.com/creativestation/web-max-japan-2016-xd-features-and-roadmap

注目を集めるアドビの新しいデザインツールAdobe Experience Design（以下Adobe XD）の使い方を網羅して大人気となったアドビ轟氏によるMAX Japan 2016のセッション。その中で、製品機能の紹介に使われていたサンプルが一般に公開されました。これさえ一通り確認すれば、Adobe XDの基本はばっちりという優れものです。そこで、この記事では、サンプルの説明を中心にセッションの様子をお伝えします。録画も公開されていますので、記事と合わせてご覧ください。（下の画像をクリックすると、新しいウインドウが開きビデオが再生されます...

これでまだベータ版のXD

これだけクオリティが高いとベータ版だという事を忘れてしまいそうになりますが、これはまだベータ版です。XDは毎月アップデートを行なっていてその度に新しい機能が追加されています。

また、「Adobe XD: Feature Requests」ではXDに追加して欲しい機能のリクエストを行う事ができたり、他のユーザーが要望している機能を閲覧・支持する事もできます。

adobexd.uservoice.com

Adobe XD: Feature Requests: Hot (1034 ideas) – Adobe XD Feedback : Feature Re...

https://adobexd.uservoice.com/forums/353007-feature-requests

Adobe初のUI/UXデザインツールという事で期待が高まっているAdobeXD。製品版としてリリースされる時にどうなっているのか楽しみですしプロトタイプ制作が大きく変わりそうですね。

[CSS-Nite]