Adobe XD事例： 株式会社LIFULL LiveMatch ライブマッチ – Adobe XDを活用してモバイルアプリの仕様を効率的に作成

連載

Adobe XD事例

音楽ライブの同行者を募集するマッチングサービス「ライブマッチ」のiOS版アプリのリニューアルおよびAndroid版アプリの新規開発プロジェクトにAdobe XDが採用されました。それぞれが4ヶ月という短期間のプロジェクトながら、約170の画面デザインのプロトタイプによる確認もしっかりこなしてアプリ開発が行われました。

開発を外部に委託していたという事情もあって、仕様を開発者に手渡す前にデザイン上の問題を解決しておくことは重要な課題と認識され、そのため、プロトタイプを用いた検証を行うべく、軽くて求めている機能が揃ったプロトタイプ兼デザインツールとしてAdobe XDが選択されたそうです。さらに、仕様書の作成にも、従来使用していたExcelの代わりとしてAdobe XDが使われました。これにより、一覧性が高くて仕様を伝えやすいドキュメントを作成できて、効率的で高品質な開発に役立ったいうことです。

Adobe XDを採用したメリット

操作性、ページ遷移をプロトタイプで確認

デザインは社内、開発は社外、というプロジェクト体制での進行だったため、プロトタイプによる開発前の検証は必須の工程と捉えていたと、デザインを担当したCEOの對馬 政隆氏は語ります。

「Illustratorでちゃんとデザインしたつもりでも、いざアプリをつくってみたら期待していたのと違うということもあります。デザインが実機で見たときに使い易いものになっているかを、外部に出す前に自分達で確認しておきたかったのです」

以前はデザインツールから画面サイズに合わせて書き出した画像をスマートフォンに入れて確認作業を行っていたそうです。しかし、これでは手間がかかるということで、プロトタイプ機能を持ったツールを探していたところ、出合ったのがAdobe XDのベータ版でした。

「Adobe XDではデバイスをUSBで接続するだけで、デザインした画面をそのまま実機上で操作して確認できるのが楽でした。また、簡単に画面遷移を定義できて、それをデバイス上で体験できるのも便利でした。画面遷移は実機で体感しないと問題があっても分かりにくいことのひとつです」

全ての画面をひとつのドキュメントに集約

最初の開発の時は、Excelの仕様書とIllustratorデータを別々に作成していたという對馬氏ですが、今回は、Adobe XDドキュメント一枚に全画面を収めて仕様書としたそうです。

「前回の開発では、画面ごと個別のシートに仕様を記述していました。そのため遷移するページとの関連性が別のシートを開いて見ないと分からなくて、それが細かな仕様のコミュニケーションを難しくしていると感じていました。とにかく仕様をひとつにまとめたいと思って始めたことでしたが、Adobe XDのドキュメント内に全画面を並べて、さらに画面遷移も示せるようになったことで、仕様が伝えやすくなったと思います」

また、全体の見通しの良さは、仕様の伝わりやすさだけでなく、つくりやすさにも効果があったようです。

「Excelでの仕様書作成は、別々のシートを行き来しながらの手間のかかる作業でした。Adobe XDの仕様書は広大なファイルではありますが、グループごとに遷移が確認しやすいよう並べてあるため、編集が簡単かつ確実に行えます」
開発者がデザインテータから簡単に情報を取得できるために、スペックを記述する手間が省ける点も、Adobe XDの利点であると對馬氏は話してくれました。

エラー時の処理を視覚的に記述

アプリには、あるボタンが押されたら次の画面に遷移するという通常のフローの他にも、例外的な状況が起きた場合は、それを伝えるエラー画面を表示するというフローが存在します。もちろんAdobe XDでつくった仕様書の中には、こうしたエラー発生時の遷移情報も記述されました。Adobe XDには、条件によって遷移先を変える機能はありませんが、對馬氏は独自の工夫で、この問題を解決しています。

「Adobe XDの中で、それぞれの画面の下に専用の領域を設け、そこにクリック後の状況を表すボタンを並べて遷移先を指定しました。ある画面でどんなエラーが起きるのかはExcelでも書けることですが、Adobe XDなら、プロトタイプを使いながら『この画面では、この状況になったら、この画面に遷移する』という仕様を実機の画面で確認することも可能です」

Adobe XDを使って仕様書を作成すると、仕様書がそのままプロトタイプになるというのは面白い視点です。

「例外発生時の遷移先の確認がデバイス上で行えることにより、エラー画面のつくり忘れという問題も減らすことができたように思います」

リピートグリッドをマイクロインタラクション作成に利用

リピートグリッドはグループ化されたオブジェクトをドラッグ操作だけで繰り返し配置できる便利な機能です。對馬氏は、これをアニメーションのプロトタイプ作成に応用しています。

「クリックするとアニメーションが再生されるボタンがあったのですが、そのアニメーションを制作するのにリピートグリッドがぴったりだと思って使いました。まず、リピートグリッドで初期状態のボタンオブジェクトを必要な数だけ横に複製し、それをアニメーションのタイムラインに見立てて、1コマ毎に少しずつパスを変形させてアニメーションを描きました」

Adobe XDでつくった各コマは、PNGとして書き出して、APNGに変換してからブラウザで再生して確認したそうです。

「イメージしていた動きを表現するのに必要なコマが揃っているか、足りなければAdobe XDに戻ってコマを追加、という作業を繰り返えしました。必要なコマの確認が済んだら、データをSVGでIllustratorに渡して、細かなパスを描きました。Illustratorで1コマ1コマつくりこむという作業を始める前に、描くべきコマの内容が分かっていたので、効率よく作業することができたと思います」

その他に便利だった機能としては、ナビゲーションバーを効率的に変更できる構造にするために使ったシンボルも挙げられました。對馬氏が、特にAdobe XDを使い続けたいと思っている理由は、その軽さだということです。プロジェクト開始時点では、ひとつのドキュメントに可能な限り多くの画面を収めたいと思ってデザインを始めたそうですが、最終的に全画面を問題なく配置できたことは嬉しい驚きだったようです。

今回の事例取材に対応していただいた株式会社LIFULL LiveMatch 代表取締役社長對馬 政隆氏

取材協力：

株式会社LIFULL LiveMatch 〒102-0083 東京都千代田区麹町1-4-4