Tweet

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

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

2009/07/16

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

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

　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と機能を提供できることをアピールした。

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード