プロトタイピングツールSketchFlowを用いた,Silverlightアプリ開発

第2回 SketchFlowアプリケーションの作成

この記事を読むのに必要な時間:およそ 2 分

SketchFlowPlayer

作成したアプリケーションをビルドするとSketchFlowPlayerという画面遷移が実行できるアプリケーションに内包された形で作成されます(メニューのファイル>SketchFlowプロジェクトのパッケージ化を選択すると書き出すことができます)⁠

遷移を確認する場合は,このSketchFlowPlayerを操作してレビューを行なうことになります。

図9 SketchFlowPlayer

図9 SketchFlowPlayer

では,このSketchFlowPlayerでできることを説明していきましょう。

画面は大きく分けて,左側のコントロール部分と右側の画面表示部分に分かれています。

各機能は下記のようになっています。

① ナビゲーション
現在表示されている画面から遷移可能な画面の一覧を表示します。画面名をクリックすると直接その画面に遷移します。
② ズームバー
画面の表示倍率を変更します。
③ SketchFlowマップ
オーサリング時にもあったSketchFlowマップです。ここで,アプリケーションの遷移の全体像を俯瞰できます。
④ 画面表示領域
SketchFlowマップ上で選択している画面を表示します。

フィードバック

プロトタイプの確認は,プロジェクトメンバーだけではなく,クライアントなど様々な人が行い,それぞれからフィードバックがあります。その際,レビュー者はSketchFlowを使用して,画面毎のフィードバックを記入することができます。

図10 フィードバックの記入

図10 フィードバックの記入

フィードバックは左下の領域に記入することができます。また,画面表示領域にもフリーハンドで図や文字を書き込むことができます。

記入したフィードバックは,Expression Blendで読み込める.feedbackファイルとして書き出すことができます(フィードバックファイルの読み込みは,Expression Blendのフィードバックパネル図11で行います)⁠

図11 フィードバックの追加

図11 フィードバックの追加

また,フィードバックを読み込むと図12のようにオーサリング画面上に先ほどのSketchFlowPlayerで記入したコメントが表示されます。

図12 フィードバックの表示

図12 フィードバックの表示

ここまでの解説で一通りSketchFlowでは何ができるのか,どのような操作方法なのか,基本的なことをおさえてきました。要点のみの説明だったため,不明な点などはサンプルアプリケーションを参考にしてください。また,今回サンプルアプリケーションについてはSketchFlowで容易に出来る範囲を意識した構造になっており,SketchFlowを理解しやすいものになっています。

次回は,今回作ったサンプルにインタラクションの実装を追加して精度を高めていきます。また,どのようにすればプロトタイプを効率的に作成できるか,実業務で使用する上でわかったSketchFlowとワークフローの相性等も含め考察していきます。

著者プロフィール

杉下高仁(すぎしたたかひと)

Flash3から携わるインタラクションデザインの経験を生かし,2001年セカンドファクトリーに参加。創業期(本人は在学中)よりアルバイトとして現場に関わっていたこともあり,アプリケーション開発に対する UXの重要性をリアルに感じてきた。入社後インタラクションデザイナーとして業務を行う傍らソフトウエア開発 のノウハウを学び,双方の視点からクライアントを真に満足させることをポリシーとして現場を牽引する。

資格として,経済産業省認定テクニカルエンジニア(情報セキュリティ),経済産業省認定ソフトウエア開発技術者,Microsoft MVPなど多数保有。

URLhttp://www.2ndfactory.com/


落合健太郎(おちあいけんたろう)

在学中に情報の視覚化とインタラクションデザインについて研究し,多摩美術大学情報デザイン学科情報デザインコース卒業後,知識だけではなく実際のアプリケーション開発に生かしたいと,2007年セカンドファクトリーに参加。

UIの可能性を最大限発揮すべく,入社後はテクノロジーの領域を限定せず,製品プロトタイプや,デバイス向けUI等,デザインとシステムの融合が強く求められる案件に従事。今後の開発には欠かせないインタラクティブな操作を実現できる技術者として活躍中。

URLhttp://www.2ndfactory.com/
Twitter:http://twitter.com/nxxdle