プロタイピングツール「SketchFlow」

画面遷移もカンタン設計、MSが新ツールをデモ

2009/07/16

　7月16日に東京・六本木で開催されたイベント「ReMIX Tokyo 09」で、マイクロソフトは2009年秋に出荷予定の「Expression 3日本語版」のデモンストレーションを披露した。

　Expressionシリーズは、デザイナとソフトウェア開発者が協業するためのツール群で、最近アドビシステムズやマイクロソフトが取り組んでいる新しい市場領域の1つだ。Expressionシリーズに含まれるのは以下のツール群。

製品名	目的
Expression Web	CSSオーサリング
Expression Blend	Silverlightや.NET環境向けの画面設計
Expression Design	画像編集
Expression Encoder	動画の簡易編集、エンコード

Microsoft Expression Studioの製品群

　Expression Blend 3に新たに搭載される「SketchFlow」は、紙にスケッチを描くように画面設計が行えるプロトタイピングツールだ。Expression Blendを使うと、PhotoshopやIllustratorから出力したファイルや、サンプルデータを使い、画面（XAML）を作り込める。これにSketchFlowを組み合わせ、マウス操作で矢印でつなぐ操作で画面の遷移を定義。画面に配置したメニューやボタンの関係を定義していくだけで、実際に動作する簡単なプロトタイプが作成できる。作成したプロトタイプは、ワード文書に画面イメージ入りの「仕様定義書」として出力できる。

SketchFlowを使って2画面分のプロトタイプを設定した状態。マウス操作で遷移関係を矢印で設定する

画面のプロトタイプ設計の例。ピンク色になっているボタン類はクリックすると、ほかの画面へ飛ぶことを示している

実際にヤフーオークションのSilverlightアプリケーション設計で使った画面遷移の図

　SketchFlowのデモンストレーションを行った春日井良隆氏（マイクロソフトデベロッパー＆プラットフォーム統括本部 UXテクノロジー推進部）は、起動画面、ログイン画面、エラー画面などを実際に矢印で接続し、簡単なアプリケーションであれば、ものの数分で動くデモンストレーションが完成することを示してみせた。プロトタイプアプリケーションに使われるフォントや画面パーツは、あたかも人間が手書きしたような風合いになっている。デモンストレーションではこのほか、実際にSketchFlowを使った事例を紹介。Yahoo! Japanが作成したヤフーオークション向けのSilverlightアプリケーションのプロトタイプ画面や画面遷移図を披露した。プロトタイプの画面上に赤い囲みでコメントを付けられるなど、デザイナと開発者、あるいはユーザーと開発者が仕様定義の段階から協力して作業が進められるツールであることを強調した。

　ヤフーオークションのSilverlightアプリケーションは、以下の動画の通り。7月11日にリリースされたばかりのSilverlight 3の疑似3D機能を使い、画面切り替えやオークションアイテム読み込みを動的に見せている。

Silverlight 3を使ったヤフーオークションのRIAクライアント

Silverlight 3の疑似3D機能のデモンストレーション

　マイクロソフトは7月16日、Silverlight 3に対応した日本語版開発ツールを提供開始している。同社によれば、Silverlightは最初のバージョンのリリース以降22カ月で浸透率は「インターネットに接続できる端末の3分の1」。これはWindowsとMac OS X双方を合わせた数字だが、モバイル環境は含まない。Silverlight 3ではIIS 7の動画配信技術と組み合わせることで端末のCPUパワーや帯域に合わせた動画を配信したり、ライブ中継であっても見逃したシーンをプレイバック再生できる機能を実現。さらに、独自コーデックの利用可能とするAPIを用意するなど、動画コンテンツ市場でのSilverlight普及を促したい考えだ。すでに利用実績としては、マイケル・ジャクソンの追悼イベント、ツール・ド・フランス、ウィンブルドンテニスなどのイベントで、ライブ中継にSilverlightが使われた例があるという。講演では、Silverlightを使うことで、HD映像の配信だけでなく、イベントの関連情報やプレイバック機能を画面上でオーバーレイさせるなど、高度なUIと機能を提供できることをアピールした。