読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

アドビの新しいUXデザインツール Adobe XD (Preview 1) を使ってみました

日記 アプリ制作 Webデザイン UX

f:id:takahironakamori:20160316144553p:plain

2016年3月14日にAdobe Experience Design(以下、Adobe XD)のPublic Preview 1(Mac OS X版のみ)が公開されましたので、さっそく使ってみました。Adobe XDはAdobe IDがあれば無償で試すことができます。

www.adobe.com

AdobeさんによるAdobe XDの紹介は下記のページです。

blogs.adobe.com

僕にとってAdobe XDは、プロトタイプ作成時に力になってくれる予感がするツールでした。

プロトタイプ作成はペーパープロトタイプでやっています

アプリを作るとき、ウェブサイトを作るときもペーパープロトタイピングをよくやります。ペーパープロトタイピングの方法は下の書籍で勉強しました。

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

  • 作者: 深津貴之,荻野博章,丸山弘詩
  • 出版社/メーカー: インプレス
  • 発売日: 2014/07/11
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

ペーパープロトタイピングとは、アプリケーションやWebサイトといったプロダクト開発の際に、紙にインターフェイスを手書きしてプロトタイプを作成し、インターフェイスやデザインを検証する手法です。

(上掲書より)

紙にアプリやウェブサイトの画面を書くため、ラフスケッチやワイヤーフレームとよく似ているのですが、プロトタイプは少し目的が違います。

  • ラフスケッチの目的:アイデアを手早く具体化し検証すること。
  • ワイヤーフレームの目的:それぞれの画面の内容や位置付けを検証すること。
  • プロトタイプの目的:プロダクトの使い勝手を検証すること。

といわれています。僕の場合は、ペーパープロトタイプを作ることで、画面内の構成要素や画面遷移を確認したりもします。(最初のラフスケッチもワイヤーフレームも紙に書いていますというだけですが…。)しかし、プロトタイプの主目的は使いやすさを検証することという理解は重要です。

Adobe XDのPrototypeモードは使いやすさを検証するために

Adobe XDには、デザインモードとPrototypeモードがあります。

デザインモードは画面をデザインするモードで、iPhone、Androidなど主要なデバイスのアートボードやiOSやGoogle Material、WindowsのUIパーツを簡単に設置、デザインすることができます。Illustratorの簡易版に、iOS、Google MaterialなどのUIKitのパーツがついているという感じです。

Prototypeモードでは、デザインモードで作成した画面を利用して、アプリの使いやすさを検証することができます。

Prototypeモードでは、「このボタンをタップしたら、こっちの画面に移動して…」とデザインモードで作成した画面の遷移をデザインすることができます。

f:id:takahironakamori:20160316151212p:plain


さらに、プレビューを使うと指定した画面の遷移を確認することができます。

f:id:takahironakamori:20160316151034p:plain

また、作成したPrototypeは、xd.adobe.comへ簡単にアップロードすることができ、ブラウザで「このボタンをタップしたら、こっちの画面に移動して…」という動きを確認することができます。そのアップロード先のURLを利用すればプロトタイプを共有することができます。

僕にとってのAdobe XDはペーパープロトタイプを補完するためのツールになりそう

ペーパープロトタイプは紙に書くので、「ボタンをタップ」しても何も動きません。そこでiPhoneのアプリ作成を前提とすると下記のような流れができそうです。

  1. 紙に書いた画面をiPhoneで撮影します。
  2. Adobe XDのデザインモードで撮影した画面を配置しツールから透明のボタンを作成します。
  3. Adobe XDのPrototypeモードで透明ボタンを使って画面遷移を指定し、プレビューしたものをiPhoneでアクセスし、検証します。

この流れですと、比較的手早くアプリなどの操作感を確認することができそうです。

画面もAdobe XDのデザインモードで作成してもいいのですが、アプリ製作の段階にもよりますが、初期フェーズであればそこまできちんと作る必要はないので、紙で作った方が早いと思います。

Adobe XDはペーパープロトタイプでは検証できない部分をささっと作成することができます。プロジェクトの初期段階で「どのようなものが完成するのか?」のイメージを共有することができるのは非常にありがたいです。Adobe XDはツールになりそうです。僕はPrototypeモードの今後の発展に期待しています。

Adobe XDに似た他社のツールもありますが、Photoshopなどなど長年Adobeユーザーなので、「Adobeが作りました」って言われたら、やっぱり安心してインストールしてしまうなぁ…。