プロタイピングツール「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を組み合わせ、マウス操作で矢印でつなぐ操作で画面の遷移を定義。画面に配置したメニューやボタンの関係を定義していくだけで、実際に動作する簡単なプロトタイプが作成できる。作成したプロトタイプは、ワード文書に画面イメージ入りの「仕様定義書」として出力できる。

remix01.jpg SketchFlowを使って2画面分のプロトタイプを設定した状態。マウス操作で遷移関係を矢印で設定する
remix02.jpg 画面のプロトタイプ設計の例。ピンク色になっているボタン類はクリックすると、ほかの画面へ飛ぶことを示している
remix03.jpg 実際にヤフーオークションの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 西村賢)

情報をお寄せください:

HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

キャリアアップ

- PR -

注目のテーマ

ソリューションFLASH

「ITmedia マーケティング」新着記事

“AI美女”を広告に起用しない ユニリーバ「Dove」はなぜそう決めたのか
Unilever傘下の美容ケアブランド「Dove」は、「Real Beauty」の20周年を機に、生成AIツー...

有料動画サービス 34歳以下では過半数が利用経験、4割は1日1回以上利用
「ニールセン・ビデオコンテンツ アンド アド レポート 2024」を基に、テレビ画面での動...

2024年のGW予算は横ばい 賃上げよりも物価高と円安の影響が勝る?――インテージ調査
インテージが全国の15歳から79歳の男女を対象に実施したゴールデンウイークに関する調査...