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

第3回 SketchFlowを使用したワークフロー

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

SketchFlowを使用したワークフロー

読者のみなさんにとって気になるのは,SketchFlowが実案件に使えるか,既存のワークフローの問題点を改善できるのかという点ではないでしょうか。SketchFlowを使用したプロトタイプの作成方法についてこれまで解説してきましたが,次のステップとしてSketchFlowを使用したワークフローについて考えてみます。

現在,セカンドファクトリーでは実案件にSketchFlowを採用しています。しかし,現状は部分的な使用に留まっています。理由はワークフローと照らし合わせた結果,現状使用しているツールを全て置き換えるに至っていないためです。では,実際にどういった形で使用しているか,例を挙げて説明していきたいと思います。

下記はセカンドファクトリーのSketchFlowを使わない場合のアプリケーションの設計ワークフローとそこで使用されているツールの関連図です図9)⁠

図9 セカンドファクトリーの設計ワークフロー

図9 セカンドファクトリーの設計ワークフロー

まず,設計・検討段階ではAdobe IllustratorやFireworksのようなドローイングツール,もしくは手書きでのスケッチでワイヤーフレームを作成します。この時点で,アウトプットは画像ファイル(png,png,pdf等)で出力されます。

次にAdobe Flashを使用して遷移が確認できるモックアップを作成します。Flashで使用する素材は,ワイヤーフレーム作成時に書き出された画像ファイルで,その上にボタンを配置してモックアップを作成していきます。

最後にモックアップの挙動を基に実際のアプリケーションを作成していきます。この時点で,素材は一から作成し直すのでモックアップは破棄されます。

現状は,このFlashで作成していたモックアップをSketchFlowに置き換える形で使用しています。ただ,実装方法はFlashの時と同じでワイヤーフレーム作成時に出力した画像ファイルの上にボタンを配置して作成しています。このような使用方法になっているため,前述では,SketchFlowを「部分的に使用する」という表現をしました。

もちろん,Flashでは自分で作成しなくてはいけなかった遷移の処理や,状態表示の切り替え部分をSketchFlowが自動で行ってくれるようになったことで,実装の工数は大幅に削減できたことは大きなメリットと言えます。

SketchFlowと親和性の高いワークフロー

SketchFlowを採用することで工数を削減することはできていますが,このワークフローをもう一歩先へ進めることはできないでしょうか。それでは,今度は逆にSketchFlowを最も活かせるワークフローはどんなものか考えてみましょう。

SketchFlowはExpression Blendをツールとして使用することもあり,最終的にSilverlight / WPFでアプリケーションを実装することを前提としています。

Silverlight / WPFはコントロールベースの開発プラットフォームで,標準で用意されている多様なコントロールを組み合わせることで工数を大きく削減することができます。この点を踏まえ,下記のようにワークフローを変更してみます。

図10 コントロールベースの設計ワークフロー

図10 コントロールベースの設計ワークフロー

図10のワークフローでのポイントはまず,ワイヤーフレームもSketchFlowで作成している点です。最終的にSilverlight / WPFのコンポーネントで実装を行うので,設計時点でどのコントロールを使用するかを実際にExpression Blend上で配置しながら検討します。

こうすることで,モックアップ作成というフェーズに分割する必要は無くなり,⁠動作するワイヤーフレーム」を作成することができます。

また,SketchFlowで生成されたコードも,Silverlight / WPFと共通のXAMLですので,実開発でモックアップのコードをそのまま使えるという可能性も出てきます(実開発プロジェクトへの変換という点は次回詳しく検証します)⁠

もちろん注意点もいくつかあり,設計者は標準コントロールのそれぞれがどういった挙動をするかについてしっかり理解している必要があることや,どのコントロールを使用するかに意識が行き過ぎたために作りやすさを優先してしまい,ユーザー体験を重視しない設計になってしまう可能性があるのも潜在的な問題と言えます。

少々極端ではありますが,設計の段階でコントロールを意識しておけば,標準のコントロールでは実装できない部分を把握できアプリケーション全体の実装の難易度や工数を計りやすくなるというメリットは大きいかと思います。

今回は,実際のワークフローと照らし合わせながら,SketchFlowを採用する利点について検証を行いました。次回は,Behaviorやカスタムコントロールを使用してより進んだSketchFlowの活用方法を紹介するとともに,SketchFlowで作成したプロトタイプを実開発に繋げていく方法についても解説をしていきます。

著者プロフィール

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

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

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

URLhttp://www.2ndfactory.com/


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

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

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

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

コメント

コメントの記入