ここから本文です

企業向けRIAに最適なアドビ流アジャイル

2009年12月 3日 掲載

[セッション-3] アジャイルで実現するユーザーエクスペリエンスデザインとエンタープライズ RIA

講演者　上条 晃宏（アドビ システムズ株式会社　テクニカルセールス統括部 シニアソリューションアーキテクト）

RIA 向け技術をリードするアドビ システムズ。テクニカルセールス統括部シニアソリューションアーキテクトの上条晃宏氏が「アジャイルで実現するユーザーエクスペリエンスデザインとエンタープライズ RIA」と題し、同社が社内で実践するエンタープライズ RIA 開発法を惜しみなく語った。アジャイル開発にUXデザインを取り込み、アジャイルがもたらす柔軟で迅速なロジック開発と、豊かなUXをもたらすデザインプロセスを両立させる。

相性の悪いアジャイルとUX

　上条氏は冒頭、米モルガンスタンレーが米アドビの協力を得て Flex ベースで開発、09年6月に稼働させた新型取引システム「Matrix」[morganstanley.com]を披露。同システムは、顧客が同行のリアルタイムな取引情報にアクセスし、解説ビデオや担当者とのチャットを参考に取引を実行できる。

　こうした本格的なエンタープライズ RIA では、UXデザインとロジック開発を高いレベルで連携させなければならない。アドビの場合、アジャイル開発を標準としており、それとUXデザインを連携する方法論が語られた。

　まず上条氏は「アジャイルとUXは相性がよくない」という点を強調した。アジャイル開発では、開発するソフトウェア機能を“ストーリー”（顧客の言葉で表現した軽い要求）で小分け、個別最適で順次開発。動く成果物を見ながら仕様を変えることが前提だ。一方のUXデザインは、最初に全体の要求分析を実施し、全体最適でデザインして、調整を繰り返す。仕様変更は混乱のもとだ。確かに、似ているようで真逆の面がある。そこで上条氏は、アジャイル開発にUXデザインを組み込むパターンを3つ示し、次のように問題点を指摘した。

　最初にUXデザインを行う場合、UXが固まるまで開発に着手できず、アジャイルの意義である開発の柔軟性も失われる。ならば開発とUXを同時並行で進めればよいかと言えば、両者のタイミングを合わせるのが難しい。イテレーションごとUXを常に開発より少し先行させ、イテレーション内でUXと開発を完結させると、今度はUXの一貫性保持、柔軟なデザイン変更が困難になる。

　結局のところ、「最初にUXの全体像、言い換えると“UXフレームワーク”を規定してから開発に入り、各イテレーションでは差分のUXだけ構築する。これはアドビ特有のものではなく、業界の流れ」（上条氏）という。

UXフレームワークで定義すべきもの

　では、UXフレームワークで何を定義し、どのようなプロセスでUXデザインを進めれば良いのか。ここからがアドビの実践ノウハウである。上条氏はまず、「広義の意味でのUX要素には“ビジョン”も含まれる。そのためUXチームはビジョン作りから参加し、UXの全体像を把握し、それをスケッチやモックアップで表現し、ユーザーに承認してもらうことが重要になる」と話した。

　一方、狭義のUX要素（画面の中身）は、下から順番にレイアウト／ナビゲーション／要素・構成／位置・大きさ／配色・文字・画像の6層から構成され、これにトランジションなどインタラクティブ要素が加わる。上条氏は「UXフレームワークとは結局、各要素のルールを決めたもの」として、下位3層をインタラクションガイド付き「ワイヤーフレーム」（優先順位の高いページのみ）、上位2層を「スタイルガイド」で文書化すれば良いと指摘した。このUXフレームワークがあれば、開発するストーリーごとに“バリエーション”で対処できるわけだ。

アジャイル環境のUXデザイン手順

　次にアジャイル開発の下で、どのようなプロセスでUXデザインを進めるのか。上条氏は次のように説明した。顧客からビジネス要件・業務シナリオを聞き出し、UX・開発・ビジネスの各チームが“ソリューション案”を持ち寄り、テーマやスコープを決定していく。前述した通り、企画段階からUXチームが参加しているのが重要だ。

　さらに、抽出した優先度の高い要件に基づき、最初にワイヤーフレームを作成する。その後、開発チームがストーリー、UXチームがスタイルガイド／アセットを並行して作成し、リリース計画を策定。このサイクルを顧客が承認するまで繰り返した後、ビジュアルデザインを施し、開発に入るという流れだ。上条氏は「要件からストーリーを導くのは意外に難しい。ワイヤーフレーム先行により、（本来はストーリーを分解して抽出する）タスクが見えやすくなる効果がある」と指摘する。

Flash Catalyst でスケッチがコードに変わる

　最後に上条氏は、このプロセスに最適なUXデザインツール「Flash Catalyst」の機能を説明した。「UXを顧客や開発者に見せる場合はプロトタイプが必要。それも動くものが良い。Flash Catalyst ならコーディングレスで動くプロトタイプを簡単に作成できる上、使い捨てではなく、ラウンドトリップでデータを再利用できる」。

　Flash Catalyst では、図形を自在に配置してワイヤーフレームを作成、GUI 操作で図形のエフェクトやトランジション、コントロールを定義し、インタラクティブな部品にできる。また、画面内で Photoshop/Illustrator/Fireworks CS4 を呼び出してのグラフィック編集も可能だ。つまり、コードが書けないデザイナーでも“動くプロトタイプ”が開発できるのだ。さらに、Illustrator などで作成したスケッチを読み込んだり、逆に Flex コードとして出力し、「Flash Builder」を使う開発者に引き渡せる。

　これら機能を前述のUXデザインに当てはめると、企画段階でのスケッチ、ワイヤーフレーミング、ビジュアルデザイン、開発の双方向プロセスで使える。UXの繰り返し改善に有効であり、成果物は常に“動くプロトタイプ”として顧客や開発者と共有される。UXチーム内の協業、デザイナーと開発者の協調作業も容易になるはずだ。

　豊かなUXを持つエンタープライズ RIA のアジャイル開発において、Flash Catalyst は欠かせないツールとなりそうだ。Flash Catalyst の正式リリース予定は2010年前半だが、現在、ベータ2[adobe.com]が公開されているので、ぜひ試してみたいところだ。

（編集部）