次の方法で共有

SketchFlow 概要

  • [アーティクル]

Microsoft Expression Blend は、対話型アプリケーションおよびコンテンツのため、より簡単で迅速なプロトタイプの作成、通信、およびレビューを実現することを目的とする新しい機能セットを提供します。この機能セットは SketchFlow と呼ばれます。

SketchFlow プロトタイプは Windows Presentation Foundation (WPF) または Microsoft Silverlight の本当のアプリケーションです。プロトタイプの初期段階のスケッチしかない場合でも、プロトタイプ プロジェクトをビルドし、実行し、プロトタイプ内を移動することができます。

SketchFlow プロトタイプは作業しているプロジェクトに応じて、シンプルにまたは複雑にすることができます。たとえば、プロトタイプはメモつきの大雑把なスケッチや、アートボードに描かれたワークフローを示す直線でつなげたメモつきの一連のスライドにすることも、または単一画面 (コンポーネント画面) 上の再利用可能な要素や画面間のナビゲーション (ナビゲーション接続) を持つ [SketchFlow マップ] パネルに要約された複雑なグラフにすることもできます。

SketchFlow には、実稼動アプリケーションのフローにより近づけるために、プロトタイプを対話的にするいくつかのツールが用意されています。たとえば、SketchFlow を使用すると、以下を実行できます。

  • プロトタイプを、サイト マップおよびアプリケーション画面上に記したわずかなメモから始め、進捗に合わせてプロトタイプを練り上げる。

  • ユーザー インターフェイス (UI) 要素を描いたり、共通の描画プログラムからインポートする。

  • プロトタイプをアニメーション化し、ユーザーとアプリケーションの対話の視覚的な表示を作成する。

  • 標準 UI 要素およびカスタム コントロールの完全なライブラリの使用。

  • オンザフライのサンプル データの作成、データ ドリブン UI の簡易な作成、データへのスタイルの追加。

  • 組み込みのビヘイビアー使用したコードの記述を必要としない対話の作成。ビヘイビアーは拡張可能なため、カスタム ビヘイビアーをプロトタイプ ツールボックスに簡単に追加できます。

  • コードの記述によるカスタム要素の作成、または開発チームで作成済みの要素の使用。

アートボード

SketchFlow では デザインについて 2 つのビューを提供します。アートボードおよび [SketchFlow マップ] パネルです。アートボードは各画面のビューを提供し、Expression Blend の描画ツールを使用して描くことができ、Adobe Photoshop から画像をインポートして、WPF および Silverlight で使用可能な Expression Blend のすべてのコントロールを使用できます。また、状態を使用して特定の要素の各種の状態を表示、または画面上でアニメーションを使用して要素との対話を表示することもできます。

詳細については、「アートボードでコンテンツの作成」を参照してください。

SketchFlow マップ パネル

[SketchFlow マップ] パネルで簡単にプロトタイプの構造を描くことができます。これは SketchFlow で作業中、Expression Blend アプリケーションの下部に表示されます。他のタイプの Expression Blend プロジェクトの作業中は表示されません。

[SketchFlow マップ] パネルはアプリケーション フローを視覚的に表わしたもので、最初の画面から始まり、ユーザー操作に従って最後のアクションまで進みます。

詳細については、「アプリケーション フローの作成」を参照してください。

画面

プロトタイプの各画面は、[SketchFlow マップ] パネルのノードとして表示されます。迅速かつ簡単に新しいコンポーネントまたはナビゲーション画面を作成できます。個々の画面を表すスタンドアロン ノードを作成し、接続を作成して各画面の間の接続を表すことができます。

SketchFlow には 2 つのタイプの画面があります。標準画面 (ナビゲーション画面と呼ばれる場合もあります) およびコンポーネント画面です。標準画面は移動可能な場所を表します。コンポーネント画面は再利用可能なコンテンツのブロック、または複数のナビゲーション画面で再利用可能な機能 (メニューまたは再生リストなど) です。コンポーネント画面は [SketchFlow マップ] パネルで直接作成したり、画面上のコンテンツからコンポーネントを作成したりすることができます。

つまり、新しいコンポーネント画面、コンポーネント接続、ナビゲーション画面、およびナビゲーション接続を [SketchFlow マップ] パネルに直接作成することで、アプリケーションのナビゲーションおよび構成を [SketchFlow マップ] パネルで直接定義できます。

ナビゲーション接続

ナビゲーション接続は、画面間のナビゲーションを表します。2 つの画面間のナビゲーション接続は、アプリケーションのユーザーが接続によって示されたナビゲーションを使用して画面間を直接移動できることを意味します。

ナビゲーション接続を使用すると、アプリケーション フローの概要ビューを直接 [SketchFlow マップ] パネルにすばやく作成することができます。

詳細については、「アプリケーション フローの作成」を参照してください。

コンポーネント接続

ナビゲーション接続と同様に、コンポーネント接続を直接 [SketchFlow マップ] パネルに作成することができます。ナビゲーション接続がアプリケーションを介したナビゲーションを表しているのに対し、コンポーネント接続は、そのコンポーネントが接続されているナビゲーション画面上にコンポーネントが表示されることを示します。たとえば、デザインにヘッダー、フッター、ナビゲーション バーなどの重要なページ要素が含まれている場合、これらを直接アートボードに描くか、またはこれら 3 つの重要な各要素を表す 3 つの異なるコンポーネント ノードを作成し、プロジェクト全体で再利用することができます。

詳細については、「アプリケーション フローの作成」を参照してください。

SketchFlow アニメーション

[SketchFlow アニメーション] パネルを使用して、画面上のインタラクティブ要素を表すアニメーションを簡単に作成できます。Expression Blend で利用できるキーフレーム アニメーション ツールの使用方法を知らなくても、SketchFlow アニメーションを使うと、簡単なパラパラ漫画風のアニメーション シーケンスを短時間で簡単に作成できます。

詳細については、「インタラクティブ機能の追加」を参照してください。

サンプル データ

Expression Blend を使用すると、ライブ データにアクセスすることなく、簡単にデータ ドリブンのユーザー インターフェイスのプロトタイプを作成できます。[データ] パネルを使用して、有効なサンプル データを生成したり、XML ファイルからサンプル データをインポートすることができます。サンプル データはデザイン時にアートボード上のコントロールに対して利用可能です。サンプル データの詳細を幅広くカスタマイズすることができ、実行時にサンプル データの使用とライブ データの使用を簡単に切り替えることができます。

詳細については、「サンプル データの作成」を参照してください。

SketchFlow スタイル

プロトタイプを作成する場合、手書き風にしたいことがあるかもしれません。SketchFlow は WPF および Silverlight 標準コントロールの、アプリケーションを手書き風にするスキンのセットを装備しています。基本形を使用して、カスタム コントロール用に独自のスケッチ風のテンプレートを作成することができます。プロトタイプに SketchFlow スタイルを使用して洗練された外観ではなくアプリケーション フローを強調することで、校閲者はアプリケーションのグラフィック デザインではなくインタラクティブなデザインに集中することができます。これにより、デザインの初期段階で外観が洗練され過ぎたプロトタイプにありがちな、見当違いの期待やまぎらわしいフィードバックを防止することができます。

SketchFlow プレーヤー

デザインされたとおりにアプリケーション フローを再生する実行環境である SketchFlow プレーヤーで、いつでもプロジェクトをビルド、実行、そして表示することができます。

SketchFlow では、プロトタイプをクリックすることで UI 内の状態を変更し、アニメーションを実行することのできるスタンドアロン プレーヤーでプロトタイプを実行することにより、これを実現しました。SketchFlow プレーヤーでは、簡単にプロトタイプを校閲者に配布し、フィードバックを回収することもできます。描画したり、またはプロトタイプに直接コメントを追加できます。SketchFlow プレーヤーに収集されたフィードバックは、デザイナーによる評価や実装が可能な Expression Blend で表示できます。

詳細については、「プロトタイプのプレビュー」を参照してください。

コメントおよびフィードバック

コメントは Expression Blend の新しい機能で、SketchFlow プロジェクトでも使用できます。コメント機能を使用すると、メモを自分自身または他のユーザーに残すことができ、また [デザイン] ビューで作業中に他のメンバーからのフィードバックを追跡することができます。コメントは現在のプロジェクトを見やすくするために非表示にすることができます。また、このコメントを閲覧したい場合には表示することができます。

校閲者は、[フィードバック] パネルを使用して、SketchFlow プレーヤーにフィードバックを残すこともできます。フィードバックは .feedback ファイルとして保存され、個別ファイルとしてデザイナーに送信することができます。

コメントの詳細については、「ドキュメントにコメントを付ける」を参照してください。

フィードバックの詳細については、「プロトタイプにフィードバックを残す」を参照してください。

プロトタイプの変換

Microsoft Office PowerPoint プレゼンテーションから SketchFlow プロトタイプを作成することができます。Adobe Photoshop (.psd) および Adobe Illustrator (.ai) の画像を SketchFlow プロトタイプにインポートすることもできます。いつでも、プロトタイプから直接 Microsoft Word ドキュメントを作成することができます。

SketchFlow プロジェクトは標準の Microsoft Visual Studio ソリューションであるため、Visual Studio で編集することができます。プロトタイプが承認されると、プロトタイプ ファイルから SketchFlow データを削除して、プロトタイプ プロジェクトを実稼動プロジェクトにすることができます。SketchFlow データが削除されると、プロジェクトは他の Expression Blend プロジェクトと同様に機能します。

詳細については、「プロトタイプの変換」を参照してください。

結論

要約すると、SketchFlow を使用して簡単に概念的なアプリケーションの概要を作ることができます。まず、一連の画面を作成し、描画を開始します。アイデアが発展するにつれ、デザイン アイデアを伝達するため、必要に応じてプロトタイプを完成品に近づける対話的な要素を追加することができます。校閲者は SketchFlow プレーヤーを使用してアプリケーション フローを表示し、フィードバックをコメントとして直接プロジェクトに残すことができます。フィードバックが組み込まれ、プロトタイプが完了すると、プロトタイプは最終的な Expression Blend プロジェクトに変換するために開発者に渡されます。