スケッチフロー
これまではプロトタイプを作成する際は、アプリケーション全体の動き、画面同士の遷移情報や、大まかなコントロールの配置などを紙にスケッチを作成。その後画面遷移だけのモックなどを作成し、フィードバックを受け、再度作り直すといった開発が主だったと思います。
Expression Blend 3ではスケッチフローという機能を利用することで、プロトタイプフェーズをかなり短縮化できるようになっています。またスケッチフローで作成した情報は仕様書としてエクスポートすることができます。
ここではサンプルをもとにスケッチフローの概要を確認します。
スケッチフローのサポートによってSilverlightにおけるプロトタイプベースの開発が、これまで以上に身近なものになりました。
プロトタイプベースの開発には、技術的な問題を洗い出すために問題がありそうな部分を先行して開発し、技術検証を行いながら精度を高く繰り返し検証を行う開発と、ユーザーインターフェイスの動きをユーザーと確認しながら、画面の大まかなデザインと画面遷移のみのモックアップを作成しユーザーが要求する機能との齟齬を早めに埋めるための2種類があると筆者は考えています。
スケッチフローでのプロトタイプ開発はこのうち後者のモックアップを利用した開発の方法です。スケッチフローを利用することで手早く画面の大まかなイメージと動きをユーザーに伝えることができ、プロトタイプの開発速度を大幅に向上させることができます。
1. スケッチフローアプリケーションの作成
Expression Blendの新規作成から「Silverlight 3 SketchFlow アプリケーション」を選択して新しいスケッチフローのアプリケーションを作成します（図12）。
2. スケッチフローマップの表示
もしスケッチフローマップ（画面遷移の一覧）が表示されていない場合は、Expression BlendのメニューからSketchFlow マップを選択し表示させてください（図13）。
3. 画面の追加と編集
新しい画面を作成し、画面間の関連を作成します。
SketchFlow マップビューに表示されている「画面1」の下部にマウスアイコンをフォーカスすると、図14のようなボタンが表示されるので、接続された画面の作成をクリックして新しいスケッチフローの画面を追加します。
追加した画面は名前を変更したり、画面のタイプごとに色分けをしたりすることでスケッチフローの各画面の意味を分かりやすくすることができます（図15）。
4. 画面レイアウトのスケッチ
SketchFlow マップの「ログイン」をアクティブにし、プロトタイプ用の画面デザインを行います。
Expression Blendのアセットにはスケッチフロー用の手書き風コントロールが用意されているので、このコントロールを使ってデザインを行っていきます（図16）。
5. スケッチフローのナビゲーション
スケッチフローアプリケーションでは、コントロールのコンテキストメニューから、次にどの画面に遷移するかを設定することができます。ここで、次の画面を設定した場合SketchFlow マップ側にも画面遷移情報が反映されるため、どこからどこへ画面遷移しているのかがSketchFlow マップを見れば見渡せるようになっています（図17）。
6. フィードバック
ここまでくると画面遷移も行える状態で、スケッチフローの内容を確認することができます。［F5］ボタンを押しデバック実行しましょう（図18）。
ブラウザの中でSketchFlow プレイヤーが起動され、スケッチフローが再生されていると思います。実際にボタンをクリックすると次の画面に移動することも確認できます。
SketchFlow プレイヤーでは、スケッチフローの再生のほかに画面に対するフィードバックを集める機能を持っています。
次の3つの手順で作成したスケッチフローに対するフィードバックを集めることができます。
A. 作成者はスケッチフローをパッケージ化してレビューアーに配布
Expression Blendのメニューで［ファイル］-［SketchFlow プロジェクトのパッケージ化］をクリックし、作成したスケッチフローをエクスポートします。
B. レビューアーはSketchFlowプレイヤー上でフィードバックを記入し、フィードバックを保存
パッケージ化したスケッチフロープロジェクトに含まれるTestPage.htmlをブラウザで表示し、フィードバックを記入、SketchFlow プレイヤーの「フィードバックのエクスポート」から行ったフィードバックを保存し作成者に返却します（図19）。
C. 作成者はフィードバックを開き確認
Expression Blend のフィードバックパネルから受けとったフィードバックファイルをインポートしフィードバックの内容を確認します（図20）。
7. 仕様書の作成
これまで作成したスケッチフローのプロジェクトは、Microsoft Word形式の仕様書としてエクスポートが可能です。Expression Blendのメニューで［ファイル］-［Microsoft Wordにエクスポート］をクリックすると図21のようなWordファイルがエクスポートされ、スケッチフローの結果を仕様書としてエクスポートできます。
