Expression Blend について

  • [アーティクル]

Microsoft Expression Blend は、デスクトップと Web アプリケーションのデザインとプロトタイプ作成用のビジュアル ツールです。アプリケーションをビルドするために、図形やコントロール (ボタン、リスト ボックスなど) を描画し、マウスのクリックやユーザーの入力にアプリケーションが反応するようにし、さらにアプリケーション独自の外観を整えます。

important note重要 :

SketchFlow は、Expression Studio Ultimate だけで使用できます。

別のオブジェクトとの衝突に反応するオブジェクトを示す BeeHive サンプル

Cc296376.6232ba4d-5aa0-4185-b1cf-fe9fbfe3ed8e(ja-jp,Expression.40).png

SDK ライブラリやサード パーティのイメージ、オーディオ、ビデオ クリップ、カスタム コントロールを挿入することもできます。Expression Blend のデザイン画面に表示されるものを、アプリケーションの実行時にユーザーが見ることになります。

3D 投影変換で回転させたイメージとオブジェクトを示す Zune3D サンプル

Cc296376.37f9786c-c8bc-43c3-8789-2e5654c6ae90(ja-jp,Expression.40).png

Expression Studio Ultimate だけに搭載されている SketchFlow は、実際に動作するアプリケーションのプロトタイプを作成する機能セットです。最終的なアプリケーションがどのようになるかを確認するのに、それぞれの画面の静的なイメージを見ていく方法とは異なります。

各開発段階のドキュメントを示す PCGaming サンプル

Cc296376.7dc469b2-4ab8-4d56-96a6-f30c33370916(ja-jp,Expression.40).png

Windows Phone 開発者ツール Cc296376.xtlink_newWindow(ja-jp,Expression.40).png のダウンロード時に利用できる Expression Blend for Windows Phone を使用すると、Windows Phone 用 Silverlight アプリケーションをすばやく簡単にビルドすることができます。Expression Blend のデザイン ツールを使用して、Windows Phone テンプレート、グラフィック ツールとアニメーション ツール、組み込みのビヘイビアー、およびサンプル データを含む、Windows Phone アプリケーションを作成することができます。Windows Phone アプリケーションを作成したら、アプリケーションをビルドし、組み込みの Windows Phone エミュレーターか、コンピューターに接続されている Windows Phone デバイスでプレビューできます。

Expression Blend for Windows Phone

Expression Blend では、動作するアプリケーションの一部を操作しますが、通常の描画ソフトウェアと同じように、さまざまなオブジェクトを描いてスタイルを設定できます。インタラクティブなコントロールを作成する場合は、実際に動作するコントロール (ボタンやリスト ボックスなど) を描いてから、スタイルを設定します。

ListBox コントロールに適用して円状に動くアイテムを表示する 2 つのカスタム スタイル (ItemContainerStyle　と ItemsPanel) を示す ColorSwatchSL サンプル

Cc296376.16d8c960-f49f-46fd-9993-a0d06b4e268a(ja-jp,Expression.40).png

作成するアプリケーションの機能は、Microsoft Silverlight と Windows Presentation Foundation (WPF) という 2 つの強力な技術に基づいています。Expression Blend では、Silverlight を利用する Web サイトとアプリケーション、WPF に基づいたデスクトップ アプリケーションを作成することができます。

tip noteヒント :

Expression Blend にあるサンプルを開くには、[ヘルプ] メニューの [ようこそ画面] をクリックし、[サンプル] タブで一覧からサンプル名をクリックします。サンプルをビルドし実行するには、F5 キーを押します。

Expression Blend のしくみ

Expression Blend では、図形、パス、およびコントロールをアートボード上に描画し、外観と動作を変更してアプリケーションを視覚的に設計します。イメージ、ビデオ、およびサウンドをインポートできます。Windows ベースのアプリケーションでは、3D オブジェクトをインポートして変更することもできます。

ビジュアル要素やオーディオ要素をアニメーション化するストーリーボードを作成できます。また、オプションで、ユーザー アプリケーションを対話的に操作するときに、これらのストーリーボードをトリガーできます。Windows ベースまたは Silverlight ベースの アプリケーションの作業時に、基本的なコントロールに適用するテンプレートのデザインを変更して、アプリケーションに独自の外観やビヘイビアーを設定できます。

アプリケーションの編集時に、プログラマが編集中の分離コード ファイルまたはカスタム コントロール ファイルでプロジェクトをいつでも更新できます。デザイナーとプログラマが、お互いに邪魔することなく、同じプロジェクトで同時に作業することができます。

Expression Blend と連携するその他のアプリケーション

Microsoft Expression Design で生成したグラフィックスや XAML (Extensible Application Markup Language) リソースを Expression Blend プロジェクトにインポートできます。また、Microsoft Expression Encoder で作成した Silverlight メディア プロジェクトをインポートして、プロジェクトに新機能やビジュアル要素を追加したり、Expression Encoder で再利用可能なメディア プレーヤー テンプレートを変更したりできます。

Microsoft Expression Web では、Silverlight 対応 Web サイトやコンパイル済みの Silverlight アプリケーション ファイルを既存のプロジェクトや新しいプロジェクトにインポートして、完成したサイトをパブリッシュできます。

Microsoft Visual Studio 2010 は Expression Blend とシームレスに機能し、Visual Studio 2010 と Expression Blend で同時に変更したファイルの同期を取ります。Expression Blend では、個々の分離コード ファイルまたは Visual Studio 2010 内のプロジェクト全体を開くことができます。Visual Studio 2010 の展開ツールを使用してアプリケーションを展開することもできます。

Expression Blend で生成されるファイル

Expression Blend では、Windows Presentation Foundation (WPF) アプリケーション、Silverlight 対応のWeb サイト (.xap とサポート ファイル)、および Silverlight のユーザー コントロールが生成します。ビジュアル デザインは XAML 形式で表示されます。HTML が Web アプリケーションのマークアップ言語であるのと同様に、XAML は WPF のマークアップ言語です。

XAML および WPF の詳細については、「XAML の作業」および「学習およびコミュニティのリソース」を参照してください。

Expression Blend の機能

Expression Blend には、次の機能があります。

  • 新しい SketchFlow 機能。実際に動作する WPF または Silverlight アプリケーションのプロトタイプを作成する機能セットが Expression Studio Ultimate に含まれています。

  • Windows Phone 開発者ツール Cc296376.xtlink_newWindow(ja-jp,Expression.40).png のダウンロード時に利用できる Expression Blend for Windows Phone。

  • テキストおよび 3 次元 (3D) ツールを含む、ベクター描画ツールのスイート

  • ドッキング可能なパネルやオブジェクトのショートカット メニューの付いた使いやすいビジュアル インターフェイス

  • リアルタイム アニメーション

  • ユーザー エクスペリエンスを向上させる 3D およびメディアのサポート

  • ユーザー エクスペリエンスを向上させる効果および切り替えのサポート

  • Views および ViewModels のプロジェクト テンプレート

  • 一般的なコントロール用のカスタマイズ機能とスキン オプション

  • データ ソースと外部リソースの統合

  • デザインをリアルタイムで表示する画面とコードを表示する画面

  • Expression Design からアートワークをインポートする機能

  • Expression Encoder からサイトをインポートする機能

  • Visual Studio 2010 との相互運用性。デザイナーと開発者が共同して効率よく作業できます。

Expression Blend で使用できる機能の詳細については、「Expression Blend の新機能」を参照してください。

対象となるアプリケーションの種類

Expression Blend は、次の種類のアプリケーションを生成するように最適化されています。

  • 生産性を高めるアプリケーション   幅広い顧客ベースで生産性と効率の向上を実現するアプリケーション、および Microsoft Office などのビジネス アプリケーション。

  • Windows Phone アプリケーション   Windows Phone で実行されるようにデザインされているアプリケーション。

  • コンシューマー向けアプリケーション メディア プレーヤー、セキュリティ ツール、デスクトップ ガジェットなどのアプリケーション。

  • ゲーム   エンターテインメント向けの簡単なデスクトップ ゲームやオンライン ゲーム。

  • 情報キオスク   情報を入手したり、製品リストを検討したり、空港でチェックインしたりする場合に、ユーザーが対話できる情報キオスクで実行することを目的としたアプリケーション。

  • IT プロフェッショナル用ユーティリティ バグ追跡ツールなど、企業や顧客のニーズに合わせた小規模なジョブ用のツール。

ベスト プラクティス

デザインの良さは使いやすさの向上と直結しています。Expression Blend と Microsoft .NET Framework を使用して使いやすさを向上するには、次のような方法があります。

  • 現実世界のモデル化   専用のビジュアルと操作方法を定義して、個々のコントロールの外観と動作を現実世界の道具などに似せて作成できます。この方法は、ユーザーが実際の道具に慣れている場合に最適です。現実世界の手法は、作業を行う上で最も効率的な方法です。たとえば、電卓のような単純なユーティリティは、現実世界の電卓をモデル化すると使いやすくなります。

  • 文字による説明ではなく視覚的な表示の使用   アニメーションや切り替えを使用すると、情報の関連性、原因、結果を視覚的に提示できます。この方法は、テキストによる説明とは異なる方法でユーザーが見落としがちな情報を伝える場合に最適です。たとえば、子供向けの本ではページめくりをアニメーション化して、コントロールの動作を示すことができます。

  • アフォーダンスの向上   アフォーダンスとは、オブジェクトをどのように使用するかを示すオブジェクトのプロパティで、ラベルを使用して説明する方法の代わりになります。コントロールに専用のビジュアルとアニメーションを定義して、一般的ではないコントロールをどのように使用するかを示すことができます。

  • ナチュラル マッピングの使用   ナチュラル マッピングとは、ユーザーの望むこととその実現方法との間の明快な関係です。専用の外観と操作方法を定義すると、標準の共通コントロールで対応できない場合にナチュラル マッピングを利用できます。

  • 必要な知識の低減   専用の操作方法を定義して、作業を実行するときに必要な処理の数や知識レベルを抑えることができます。

  • フィードバックの向上   カスタム コントロールのビジュアルとアニメーションを使用して、ユーザーの操作に間違いがないかどうかをフィードバックしたり、処理の進行状況を示すことができます。たとえば、Windows Vista および Windows 7 の Internet Explorer のアドレス バーには、バックグラウンドで実行されているページ読み込みの進行状況が表示されます。

  • オブジェクトの操作の簡素化   フィッツの法則では、対象のクリックに必要な労力はその距離に正比例し、そのサイズに反比例します。たとえばアニメーションを使用して、ポインターがオブジェクトの近くにあるときはオブジェクトを大きく、離れているときは小さくすることができます。このようにすると、オブジェクトを簡単にクリックできます。また、通常はオブジェクトが小さくなるため、画面のスペースを効率的に使用できます。

  • フォーカス   機能豊富なレイアウトや専用のビジュアルを定義して、作業に必要な画面要素を強調したり、あまり重要でない要素を強調しないようにできます。

Noteメモ :

Windows 用にデザインする場合は、「Windows ユーザー エクスペリエンス ガイドライン Cc296376.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。実装方法にかかわらず、Windows ベースのすべてのアプリケーション用の高品質で統一された基準に合わせることができます。

関連項目

概念

Expression Blend の新機能
学習およびコミュニティのリソース

Copyright ©2011 by Microsoft Corporation. All rights reserved.