Adobe XD Advent Calendar 2016の2日目の記事です。
Adobe XDを用いて、空間を意識したデザインのプロトタイプを制作します。
おさらい
Adobe XDは、WebサイトやモバイルアプリのUIデザイン、プロトタイプの作成を、これ1本で実現するまったく新しいUXデザインツールです。（Adobe公式より抜粋）
2016年12月2日時点でMac版のみがベータ版として提供中で、Windows版は今年中に提供開始予定です。
また毎月アップデートが行われ、2017年にも大規模な機能追加が予告されており、今最も熱いプロトタイピングツールとして（一部から）注目を浴びています。
僕自身の印象としては、XDの軽快な動作と強力なリピートグリッド機能は単体のツールとしても使い易く、PhotoshopやIllustratorでデザインした各種パーツをXD上で素早く組み上げてプロトタイプまで持っていける柔軟さも気に入っています。
XDで最終的なアウトプットを作るというよりも、実装前に動きのイメージをつかんだり、簡単なユーザーテストを行うために使用することが多いです。
作るもの
架空のショッピングモール「JOJO TOWN」のフロアガイドアプリを制作するという名目で、ユーザーを迷わせないための仕組みとしてアプリ内の立体的空間を把握し、XDが持つ様々なトランジション効果を用いて適切なページ遷移を構築していくことを目的とします。
JOJO TOWNはS市郊外にある中規模ショッピングモール（という想定）で、地下1階＋3階の構造になっています。
地下1階は駐車場、1階は食品・外食フロア、2階はファッション関連、3階はエンタメ関連で、それぞれの階に2～3の店舗が入っています。
フロアガイドアプリとして達成すべきことは、
- 店舗の概要（名前、営業時間等）と詳細（扱っている商品・サービスなど）を伝える
- どこにどの店舗があるのかを伝える
の2点と考えます。
家にいながら「どんなお店が入ってるかな？」と見るだけなら一覧を表示すれば事足りますが、JOJO TOWN内にいる人が目的の店を探す場合は、自分との相対的な位置関係も含めて伝える必要があります。
画面をデザインする
勢いで名前を付けて3分で作ったロゴを筆頭に、以下のような画面構成でアプリ中の各画面のデザインを行いました。
- トップページ（フロアを選択）
- 各店舗のページ（概要と詳細）
- 店舗一覧メニュー
ほぼほぼXDのデザインモードだけで完結できるのですが、一部PhotoshopとIllustratorを併用しています。
（一部スクロールできそうでできないところがあるのは手抜きです。すみません・・）
全部並べるとこんな感じになりました。
画面をつなげる
次にXDのプロトタイピングモードで各画面をつなげていきます。
XDで表現できるトランジションは以下の4つがあります。
- なし（即座に切り替わる）
- ディゾルブ（フェイドで切り替わる）
- スライド（上に重なりつつ切り替わる）
- プッシュ（隣と一緒に動いて切り替わる）
ここで普通は最終的な動きを想定して上記トランジションから選択しつつ設定していくのですが、比較のためにあえてすべてのトランジションをデフォルトのディゾルブ（イーズアウト0.2s）で組んでみたものが以下になります。
（XDは書き出したプロトタイプをCreative Cloudサーバーにアップしてシェアすることや、記事中に簡単に埋め込むことができます）
JOJO TOWN Floor Guide (ver.0.0)
どうでしょう？まるでパワポのようですね。
一応店舗とフロアの位置情報を合わせて伝えるという目的は達していますが、動きがすべて同じなのでフロアの移動なのか店舗の切り替えなのか、店舗の概要と詳細の移動なのかが分かり辛い印象です。
空間を意識した画面遷移
ではこの平面的なプロトタイプに空間的な動きを取り入れていきます。具体的にはJOJO TOWNの構造を元に以下のルールでトランジションを設定しました。
- 連続した空間の移動はプッシュ（同一店舗内の概要と詳細の切り替え、階層の移動）
- 連続しない閉じた空間の移動はスライド（トップのフロア選択から店舗へ、店舗の切り替え）
- UIメニューからのジャンプはディゾルブ（トップに戻る、メニューON/OFF、店舗一覧からの移動）
JOJO TOWN Floor Guide (ver.0.5)
なんとなく自分がどこを見ているのか分かり易くなったような気がします。
けど実はすべてのトランジションがイーズアウトの0.2sという設定なので、ちょっと速過ぎてメリハリがないように感じます。
イージングを制するものはプロトタイプを制する
最後にイージングの種類と時間を調整していきます。コンマ数秒の調整と侮るなかれ、アニメーションの調整によりユーザーに与える印象は大きく変わります。
その昔FLASHというソフト全盛期には多くのFLASHerと呼ばれる先人たちがこのような（地味な）イージング調整にしのぎを削り、心地よいアニメーションが産み出されていたのですがそれはまた別のお話・・・
JOJO TOWN Floor Guide (ver.Final)
なんということでしょう。
動きも適度な速度になり、より空間を感じられるようになったような気がします。
（そう。JOJO TOWNはあなたの心の中に・・・）
まとめ
一切プログラム的なものを書かなくても、デザイナーだけで実装後のイメージを手軽に作れてシェアできるのがプロトタイピングのメリットです。
そのときになんとなくアニメーションを付けるのではなく、コンテンツに応じて空間を感じ取れるような動きを論理的に構築していくことで、より分かり易く違和感の無い印象を残すことができるかもしれません。
あとは関係者にプロトタイプをシェアしつつデザインを作り込むのもよし、簡単なユーザーテストを行なってUIを調整するのもよし、お好きなように進めることができます。もちろんここで作ったサンプルもこれが完成形ではなく、ここからよりユーザー目線で手直ししていくことで理想に近付けることもできるでしょう。
Final versionをこちらにコメント可能でシェアしていますので、「もっとこうしたほうがいい」「ここが分かり辛い」などがありましたらお気軽にコメントを頂けたらと思います。
ここまで読んで頂いて、Adobe XDに興味を持たれた方は是非こちらからダウンロードして触ってみてください。
またAdobe XD Advent Calendar 2016もまだ続いていますので、こちらも宜しくお願いします（参加も絶賛募集中ですよ？）。
それではXDで良きプロトタイプライフを！