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

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

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

引き続きSketchFlowを使用したアプリケーション設計について解説していきます。前回まではSketchFlowの概要や基本的な使用方法について説明してきました。今回からは実案件で実際に使用した場合どういった使い方が理想的なのか,セカンドファクトリーのワークフローと絡めてより現実的な視点で検証していきます。

なお,今回もサンプルを基に説明を進めていくので,下記URLからダウンロードして下さい。

インタラクティブな要素の追加

SketchFlowを使用する利点は,短期に動く状態のプロトタイプを作成できる点にあるでしょう。使用感の確認と修正を繰り返すことができ,早期にUIの矛盾や問題点を解決することができます。それでは,プロトタイプの段階でどのような点を確認する必要があるか、という視点でみていきます。

前回作成したサンプルは基本的な遷移の方法を解説するためのものだったので,画面数も少なく画面の状態変化も確認できません。しかし,実案件を考えた場合,画面要素の状態は何種類あるか,画面遷移時に画面要素のアニメーションはどういった動きになるのか等はプロトタイプの段階で確認できることが必要です。今回のサンプルでは,画面の状態にフォーカスして要素を追加してあります。

Stateの定義

画面要素の状態を表現する場合,SketchFlowではVisualStateという形で作成することができます。これは,画面要素の状態をState(ステート)という形で定義し,SketchFlowPlayerで再生時にその状態を確認できる機能です。

SketchFlowPlayerでサンプルを再生してみてください。⁠ツアー一覧画面」という画面を表示すると,この画面から遷移出来る画面だけではなく緑色の「絞り込みパネル/表示」⁠絞り込みパネル/非表示」という項目が表示されます図1)⁠これは,この画面が持っている画面要素の状態でクリックすると「絞り込みパネル」の表示を切り替えることができます図2)⁠

図1 画面要素の状態切り替え

図1 画面要素の状態切り替え

図2 絞り込みパネル(サンプル:ツアー一覧画面参照)

図2 絞り込みパネル(サンプル:ツアー一覧画面参照)

このStateという仕組みは,SketchFlow特有のものではなくSilverlight / WPFでも使用できる機能です。簡単にStateの仕組みを説明します。

Stateの定義はExpression Blendの「状態パネル」を使用して行います図3)⁠

図3 状態パネル

図3 状態パネル

「状態パネル」では,画面要素の状態の追加とその状態になった時に各要素の設定値がどのように変化するのかを定義できます。

サンプルの場合,⁠絞り込みパネル」のY位置(TranslateTransform Y)の設定値を「表示」状態と「非表示」状態で切り替えることでStateを定義しています。

このStateを使用すると,コードを記述せずにExpression Blendで画面状態の切り替えを作成することができます。

SketchFlowアニメーション

つぎに,画面自体の状態変化について説明します。Stateは個別の要素の変化を確認することには向いていますが,実際の案件でクライアントにデモを行う場合等は,プロトタイプでも,ある操作をしたときに画面がどのように変化していくのかを伝えることができる必要があります。

サンプルを実行してみてください。図4はツアー一覧画面に遷移した際に,操作のヒントダイアログを表示している状態です。ダイアログは3秒表示された後自動的に非表示になります。このように,ある操作を行った後にアプリケーションがどういう挙動をするのかを伝えることはプロトタイプ作成では重要な要素です。

図4 ヒントダイアログ表示

図4 ヒントダイアログ表示

では,この画面状態変化の作成方法を解説していきましょう。SketchFlowには,SketchFlowアニメーションという機能が存在します。これは,画面の状態をフレーム単位で定義する仕組みです。

図5 SketchFlowアニメーションパネル

図5 SketchFlowアニメーションパネル

図5はExpression BlendのSketchFlowアニメーションパネルです。

サンプルの場合だと,フレームは3種類存在します(①初期状態 ②ダイアログ表示 ③ダイアログ非表示)また,各フレーム間には0.5sといった形で数字が表示されていますが,これは①の状態から何秒かけて②の状態に変化するかを表しています。この場合,0.5秒かけて画面状態が変化するように設定していることになります。

②のフレームにマウスをロールオーバーすると,図6のような状態になります。

ここでも3sという数字が表示されていますが,これはこの②の状態で何秒間表示するかを表しています。設定した秒数が経過すると次のフレームに移動します。

図6 マウスロールオーバー状態

図6 マウスロールオーバー状態

このようにSketchFlowアニメーションで画面状態変化を定義したら,指定の状態にするためのトリガーを設定する必要があります。Expression Blendの「オブジェクトとタイムライン」パネルで,[UserControl]という要素を右クリックすると図7のようなメニューが表示されます。

図7 SketchFlowアニメーションの起動

図7 SketchFlowアニメーションの起動

メニューの中の「SketchFlowアニメーションの再生」という項目を選択すると,[PlaySketchFlowAnimationAction]という名前のアニメーション再生のトリガーを作成できます。

サンプルでは,画面が表示された時にアニメーション再生されるようになっています。これを設定するためにはまず,作成した[PlaySketchFlowAnimationAction]を選択して,⁠プロパティ」タブの中の「トリガー」を表示します図8)⁠

図8 トリガーパネル

図8 トリガーパネル

このトリガーパネルの中の「EventName」という項目があります。これは,設定したアニメーションをどのタイミング(イベント)で再生するかを決める値です。選択するとLoaded,MouseLeftButtonDownといった項目が出てきますので,その中の「Loaded」を選択してください。Loadedは画面が読み込まれた際にアニメーションを再生する設定値です。もちろん,他の値を選択すれば,そのイベントの発生したタイミングでアニメーションが再生されるようになります。

このようにStateとSketchFlowアニメーションを使用することで,画面の遷移だけではなく要素の状態や画面の状態もプロトタイプに盛り込むことができます。

著者プロフィール

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

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

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

URLhttp://www.2ndfactory.com/


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

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

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

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

コメント

コメントの記入