CodeZine(コードジン)

特集ページ一覧

デザインツールの進化
― Expression Blend 3入門

Silverlight3徹底入門(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

スケッチフロー

 これまではプロトタイプを作成する際は、アプリケーション全体の動き、画面同士の遷移情報や、大まかなコントロールの配置などを紙にスケッチを作成。その後画面遷移だけのモックなどを作成し、フィードバックを受け、再度作り直すといった開発が主だったと思います。

 Expression Blend 3ではスケッチフローという機能を利用することで、プロトタイプフェーズをかなり短縮化できるようになっています。またスケッチフローで作成した情報は仕様書としてエクスポートすることができます。

 ここではサンプルをもとにスケッチフローの概要を確認します。

プロトタイプベースの開発

 スケッチフローのサポートによってSilverlightにおけるプロトタイプベースの開発が、これまで以上に身近なものになりました。

 

 プロトタイプベースの開発には、技術的な問題を洗い出すために問題がありそうな部分を先行して開発し、技術検証を行いながら精度を高く繰り返し検証を行う開発と、ユーザーインターフェイスの動きをユーザーと確認しながら、画面の大まかなデザインと画面遷移のみのモックアップを作成しユーザーが要求する機能との齟齬を早めに埋めるための2種類があると筆者は考えています。

 

 スケッチフローでのプロトタイプ開発はこのうち後者のモックアップを利用した開発の方法です。スケッチフローを利用することで手早く画面の大まかなイメージと動きをユーザーに伝えることができ、プロトタイプの開発速度を大幅に向上させることができます。

1. スケッチフローアプリケーションの作成

 Expression Blendの新規作成から「Silverlight 3 SketchFlow アプリケーション」を選択して新しいスケッチフローのアプリケーションを作成します(図12)。

図12 スケッチフローアプリケーションの作成
図12 スケッチフローアプリケーションの作成

2. スケッチフローマップの表示

 もしスケッチフローマップ(画面遷移の一覧)が表示されていない場合は、Expression BlendのメニューからSketchFlow マップを選択し表示させてください(図13)。

図13 スケッチフローウインドウの表示
図13 スケッチフローウインドウの表示

3. 画面の追加と編集

 新しい画面を作成し、画面間の関連を作成します。

 SketchFlow マップビューに表示されている「画面1」の下部にマウスアイコンをフォーカスすると、図14のようなボタンが表示されるので、接続された画面の作成をクリックして新しいスケッチフローの画面を追加します。

図14 画面の追加
図14 画面の追加

 追加した画面は名前を変更したり、画面のタイプごとに色分けをしたりすることでスケッチフローの各画面の意味を分かりやすくすることができます(図15)。

図15 画面の編集
図15 画面の編集

4. 画面レイアウトのスケッチ

 SketchFlow マップの「ログイン」をアクティブにし、プロトタイプ用の画面デザインを行います。

 Expression Blendのアセットにはスケッチフロー用の手書き風コントロールが用意されているので、このコントロールを使ってデザインを行っていきます(図16)。

図16 手書き風コントロール
図16 手書き風コントロール

5. スケッチフローのナビゲーション

 スケッチフローアプリケーションでは、コントロールのコンテキストメニューから、次にどの画面に遷移するかを設定することができます。ここで、次の画面を設定した場合SketchFlow マップ側にも画面遷移情報が反映されるため、どこからどこへ画面遷移しているのかがSketchFlow マップを見れば見渡せるようになっています(図17)。

図17 スケッチフローのナビゲーション
図17 スケッチフローのナビゲーション

6. フィードバック

 ここまでくると画面遷移も行える状態で、スケッチフローの内容を確認することができます。[F5]ボタンを押しデバック実行しましょう(図18)。

図18 スケッチフロー実行結果
図18 スケッチフロー実行結果

 ブラウザの中でSketchFlow プレイヤーが起動され、スケッチフローが再生されていると思います。実際にボタンをクリックすると次の画面に移動することも確認できます。

 SketchFlow プレイヤーでは、スケッチフローの再生のほかに画面に対するフィードバックを集める機能を持っています。

 次の3つの手順で作成したスケッチフローに対するフィードバックを集めることができます。

A. 作成者はスケッチフローをパッケージ化してレビューアーに配布

 Expression Blendのメニューで[ファイル]-[SketchFlow プロジェクトのパッケージ化]をクリックし、作成したスケッチフローをエクスポートします。

B. レビューアーはSketchFlowプレイヤー上でフィードバックを記入し、フィードバックを保存

 パッケージ化したスケッチフロープロジェクトに含まれるTestPage.htmlをブラウザで表示し、フィードバックを記入、SketchFlow プレイヤーの「フィードバックのエクスポート」から行ったフィードバックを保存し作成者に返却します(図19)。

図19 フィードバック
図19 フィードバック

C. 作成者はフィードバックを開き確認

 Expression Blend のフィードバックパネルから受けとったフィードバックファイルをインポートしフィードバックの内容を確認します(図20)。

図20 フィードバックの確認
図20 フィードバックの確認

7. 仕様書の作成

 これまで作成したスケッチフローのプロジェクトは、Microsoft Word形式の仕様書としてエクスポートが可能です。Expression Blendのメニューで[ファイル]-[Microsoft Wordにエクスポート]をクリックすると図21のようなWordファイルがエクスポートされ、スケッチフローの結果を仕様書としてエクスポートできます。

図21 Expression Blend からエクスポートした仕様書のイメージ
図21 Expression Blend からエクスポートした仕様書のイメージ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2009/12/16 15:05 PSD互換→PDF互換

  • 2009/12/16 15:02 PSD互換→PDF互換

バックナンバー

連載:Silverlight 3徹底入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5