スマートフォン向けのアプリを作る際、実際のアプリケーションの開発に着手する前に、アプリの操作感などを確認するために簡単なプロトタイプを作成する事があります。
私はこれまで主に、SketchとFlintoを使用して簡単なプロトタイプを作成していたのですが、ふとしたきっかけでAdobe Experience Design(XD)の存在を知り、これいいかも、と思ったので紹介しようかと思います。
Adobe XDの良いところ
スクリーン作成画面と画面遷移作成がひとつのアプリで完結する
Sketchはあくまでもスマホアプリのスクリーンを作成するアプリなので、画面遷移等が発生するプロトタイプを作成しようと思うと、Sketchを他のアプリと連携させる必要があります。Sketchと連携するアプリは色々とあるのですが、メジャーどころだとFlintoなどがあります。
Flintoは画面遷移作成ツールとして非常に強力なツールです。しかしながらSketchで作成した画面をFlintoに渡すためには、プラグインをインストールして、それを利用してデータの受け渡しをしなければなりません。基本的には数回クリックするだけで良いのですが、受け渡しにそれなりの時間がかかったりだとか、Sketchのデータがきちんと反映されなかったりだとか、微妙に不便に感じてしまう場合があります。
それに対して、Adobe XDの場合は、スクリーン作成と画面遷移設定がひとつのアプリの中で完結しており、タブを切り替えるだけでそれぞれの操作を行う事が出来ます。これによってスクリーン作成と画面遷移検討をシームレスに行う事ができ、作業効率がかなり良くなると感じて居ます。
Repeat Grid機能があるので似たような要素を一度だけ作れば良い
スマホアプリのスクリーンを作成する際によくあるのが、似た要素を何回も並べるというもの。これ、非常に面倒なんですよね。ところがAdobe XDにはRepeat Grid機能という物があります。下記のビデオの10秒ぐらいから出てくるんですが、これが非常に便利。
通常、こういうモノを作ろうと思うと、同じ要素をコピペして並べていくことになるんですけど、等間隔に並べようと思うと神経を使わなければならないし、そもそもデザインが変わるとすべてを修正しなければならないわけで、非常に面倒です。Adobe XDはこの点を自動化してくれるので非常に楽ちん。
Adobe XDの今後のロードマップ
Adobe XDは今後毎月アップデートされるとのことで、今後のロードマップが下記に公開されています。
これによると、今後下記のような昨日追加が行われるそう。
- デザイン機能の強化
グラデーション、テキスト機能の強化、エフェクト、ブレンドモードの対応など- カラーピッカーの改善
- レイヤーのサポート
- リンク共有方法の改善
- スクロール可能なコンテンツ
- マイクロインタラクション
(例:ボタンをロールオーバーした時のちょっとしたアニメ効果、など)- iOS、Android向けモバイルアプリ
デザインのリアルタイムプレビューとプロトタイプの検証- Creative Cloud ライブラリ連携
デザインアセットとスタイルの再利用と共有- Adobe Stock連携
5,000万点以上のストック画像やベクター素材などの利用- プラグイン向け拡張レイヤー/APIレイヤー
Javascriptを使った拡張- Microsoft Windows 10対応
2016年中にプレビュー版提供開始予定
個人的に、特にこれはというモノをあげると、プラグイン対応と、スマホでのプレビュー機能でしょうか。
特にプラグインで機能拡張出来ると色々と使い勝手がよくなるだろうなぁ、と。例えば、sketchでは画像やテキストなど、ダミーコンテンツを挿入してくれるプラグイン等があるのですがこういったプラグインがAdobe XDでも使えるようになると良いなぁと思っています。また、個人的にはFramerjsのようなスクリプト経由で制御出来る様になるとなお良いなぁとも。
さらに、スマホでのプレビュー機能に関して、現在はAdobe XDからWeb経由でシェアを行い、スマホのWebブラウザで確認するしか無いのですが、これはやはり臨場感に欠けるので、ネイティブアプリに対応してくれると嬉しいなぁと。
スクロール、レイヤーサポート、マイクロインタラクションもあれば便利だなぁという感じ。こうやって書き出してみるとまだまだ機能的に満足とは言えないものの、現段階でも使う価値は十分に有るなぁと感じていますし、将来的にプロトタイピングツールの決定版になる可能性を十分に秘めており、今後の発展が非常に楽しみです。