次世代アプリケーション開発に必要なのはユーザーエクスペリエンスを意識したデザイン：Expression Review

マイクロソフトのExpressionは、プロフェッショナル向けのデザインツールだ。XAMLという斬新なコンセプトを持ちながらも、その操作性は既存のデザインツールを踏襲したものになっている。ここではその使い心地を見ていこう。

[岸田昇（インフォネット），ITmedia]

　マイクロソフトが作り上げたプロフェッショナル向けデザインツール、それが「Expression」ファミリーだ。ベクトル画像とビットマップ画像の双方が編集可能な「Expression Graphic Designer」、アニメーション制作やWebおよびWindowsアプリケーションのユーザーインタフェース制作に長けた「Expression Interactive Designer」、Web標準にのっとったコードを出力するWebオーサリングツール「Expression Web」という3つのエディションが用意されている。

　一見すると、「ついにマイクロソフトがデザイン業界に本格参入してきたか」と思えるが、実のところExpressionは単なるデザインツールにとどまらず、アプリケーション開発のトータルソリューションに極めて有用なツールとして、従来のアプリケーションとのスムーズな統合を図っている点を特筆すべきだ。これまで歴然と存在したアプリケーションデザイナーとデベロッパーとの間の見えない垣根を払拭するものであり、開発プロジェクトの生産効率を限りなく高めるものと言える。

　ほとんどのグラフィックデザイナーにとって、これまでアプリケーションのユーザーインタフェース（UI）開発は縁遠い存在であった。しかし昨今ではユーザービリティのみならずユーザーエクスペリエンスまでもを意識した、レベルの高いUIが必要とされるプロジェクトが増えてきている。そうした中で、今後デザイナーへのUIデザイン発注はますます増加していくと考えられる。

　さらにはWeb 2.0時代のよりリッチなコンテンツ制作や、ユーザー自身が決めていくカスタムスタイルシートを実現できるこのExpression登場は朗報と言えるだろう。

　Expressionの必要性は理解できても、今まで使い慣れたデザインツールすべてをExpressionに置き換えることには読者もいささか不安を持つことだろう。そこで今回、Webデザイナーとしての見地からレビューを行った。

実際にExpressionを体験してみる

　Expressionは9月現在、Expression Webエディションのβ版が日本語化されており、マイクロソフトのWebページからWinFXのランタイムコンポーネントとともに無償でダウンロードできる。そのほかのエディションはCTP（Community Technology Preview）版が同じくWebページから無償でダウンロードできる（ただしこちらは英語版のみ）。ぜひExpressionの世界を体験していただきたい。なお、製品版はWindows Vistaの完成に合わせて出荷される見込みとなっている。

　さて、Expressionの中心的存在になるエディションがInteractive Designerである。今回はこの英語版を試用したが、意外なほどに使い勝手が良い。全エディションとも視覚的に理解しやすいユーザーインタフェースのおかげで、敷居が低く使いやすい。エディションごとにツールメニューの表現が多少異なっているところは気になるが、すべての日本語版がリリースされたときに改善されるよう期待しよう。また、Graphic Designerのみフローティングウィンドウを採用しているが、これはグラフィックにおける作業効率を考えれば懸命な選択だろう。

　早速、サンプルとしてログイン画面を作成してみた。実際にアプリケーションを操作しながらお読みいただくと、より理解が深まると思うので、ぜひご利用いただきたい。

作成するログイン画面。バックグラウンドから文字の入力ボックス、ロゴグラフィックの配置など、デザインの基本的な要素を盛り込んでみた

　まずは、ウィンドウの背景を描画してみる。Tools paletteの“Rectangle”を使って四角形を作り、Appearance paletteの“Background”で色を指定。今回はブルー系のグラデーションにしてみた。デフォルトではグラデーションの方向が横になっていたのでTools paletteの“Brush Transform”で回転させてみたが、柔軟に描画でき操作性も良い。

　同様に、メッセージ画面を作る。無骨な角をTools paletteの“Selection”で右上にマウスを持ってくると簡単に角を丸くすることができた。Tools paletteの“Text”を使ってエリアを決め、「ログイン」とメッセージの文字を入力。バックグラウンドカラーやボーダーカラー・フォントカラーをAppearance paletteで決める。ユーザーIDとパスワードのテキストボックスをLibrary paletteの“TextBox”と“PasswordBox”をダブルクリックして配置する。ドラック＆ドロップで好きな所に配置できないのが多少不便だ。

　デフォルトでテキストBOXに入力されている文字を、Properties paletteの“Text”で削除する。このProperties paletteは細かな設定が行えるようだが、この辺りはデベロッパーに対処をお願いしたい気分だ。また視力が1.5の私でもフォントサイズが小さいのが気になる。

　続いてボタンの設置。Library paletteの“Button”をダブルクリックして配置する。テキストBOXもボタンもAppearance paletteで自由にカラーを決められる。ボタンにもデザイン性を取り込めるし、そのほかスクロールバーなどの部品もある程度自由にデザインを行えるので、より高いレベルでのユーザーエクスペリエンスを意識したデザインを可能にしてくれそうだ。

　当社のロゴの設置を試みた。当社のロゴデータはAdobe Illustrator 8.0で作成されている。Illustratorを起動し、Interactive Designer上でコピー＆ペーストを試みたが駄目だった。次にGraphic Designerで同様の操作を行ったところ、ペーストは成功した。一からデータを作らなくても良いためこれは非常に助かる。デザインの描画性から言えば当然だが、こうした作業でははじめからこのGraphic Designerを使ったほうが何かにつけ良いだろう。Graphic Designerで保存した後はInteractive Designerのツールメニューの“Project→Add Existing Item”から、Project paletteにアイテムを追加する。アイテムを使うときはダブルクリックすれば配置できる。なお、Project paletteはツールメニューの“Project→New Folder”で予めフォルダを作っておいたほうが整理が出来て良さそうだ。

　ここで、作成したログイン画面をプレビューしてみた。ツールメニューの“Project→Test Project”またはF5キーで実行する。Windowサイズを最大化してみるとレイアウトが崩れることに気付く。これは、アプリケーションのカスタムレイアウトを可能にするためのようだ。配置したアイテムをTools paletteのSelectionで選択すると四方に青いラインの先に鎖のマークが表示されるが、それをクリックすることによりWindowサイズとの連動をコントロールできる。

　複数のアイテムをコントロールする際には、ツールメニューの“Arrange→Group”でグループ化すると、より容易に作業が行える。このとき、Timeline paletteを見ながら操作するとアイテム同士の関係が分かりやすい。

　Windowを分割し左右または上下のサイズをコントロールしてみた。ワークスペースの上部と左部に水色のライン上にマウスを持ってくると赤いラインが出現する。任意の場所でクリックすることでWindowを分割できる。あとは、Library paletteの“Grid Splitter”を配置しサイズを調整し、鎖のマークで連動をあわせるだけですむ。

鍵のマークをクリックすることでグリッドパネル（画面サイズ全体）のコントロールができ、鎖のマークをクリックすることで画面サイズの変更によるアイテムのポジションや伸縮のコントロールができる。また、画面の上下左右の分割も行える

　このLibrary paletteには必要なアイテムがすべて揃っているので、非常に便利だ。このpaletteはできるだけ縦長に広く表示しておいたほうが、多数あるアイテムの中から欲しいアイテムを見つけやすくなる。

　今度は、アイコンを設置してアニメーションで遊んでみた。マウスオーバーなどでよく利用されるアイコンの枠のみの回転を作ってみる。Timeline paletteのスタート位置とエンド位置で“Record Keyframe”をクリックしてKeyframeを決める。次にエンドのKeyframeを選択し、Transform paletteで“Rotation”タブを選びZの値を360にしてみた。そしてTimeline paletteで“Angle”のEdit Repeat Count（反復回数）をクリックして、Foreverを選択する。たったこれだけで終わりだ。あとはプレビュー画面を見て、Timeline paletteのKeyframeで速さを調整しよう。

画像の中央下部にあるのが、タイムラインの様子。Record Keyframeを配置し、アイテムのスピードや位置などさまざまなアニメーションを簡単に行える。タイムラインの左部にあるフォルダ内に各動作をコントロールできるオブジェクトやステータスがある

　続いてアイコンの移動のアニメーションを作ってみる。Tools paletteの“Ellipse”や“Line”、“Rectangle”でアイコンの軌道を描画する。その際、分かりやすいようにカラーについては、Appearance paletteで“Fill”をNo Brush（透明）にし、“Stroke”は、Solid Color Brush（塗りつぶし）でブラックにすることをおすすめする。Tools paletteのSelectionで軌道を選択し、ツールメニューの“Tools→Convert to Motion Path”でターゲット（ここではアイコン）を選択する。Timeline paletteのOnLoadedタブをクリックし、さらにターゲットの▼（Objects and object properties）をクリックして開くと“Motion Path”が出来ている。“Motion Path”を右クリックしてOrient To Path（方向転換）とEdit Repeat Countを指定し、あとはタイムラインでスピードを調整するだけ。はじめに描画した軌道が残っているので、削除しないと画面に表示されてしまう。

Ellipseを選んでアイコンのアニメーションの起動を描画した。画面中央下部のタイムラインで動きを調整する

　さらに3Dに挑戦してみた。写真レベルなら非常に容易い。写真を選択しツールメニューの“Tools→Make Image 3D”で3Dのイメージにし、Tools paletteの“Camera Orbit”で写真をドラッグすることで視点を変更できる。3Dアニメーションについては、上同様にMotion Pathで行うことができるので、Windows Presentation Foundation（WPF）を意識したアニメーションも容易に行えた。

写真をTools paletteの"Camera Orbit"で3Dコントロールしている様子。また、タイムラインの左部にあるフォルダ内にて、Directional（方向）やAmbient（光源）なども自由に調整することができる

　Expressionにはまだまだ多くの機能があり、もっと使い込みたくなってきたが、試用段階でのレビューはこの辺りで終わりたいと思う。

　Expressionには、デザインとシステム開発の互換性を高めるXAML（ザムル）言語というテクノロジーが使用されているが、今回のレビューでは一切編集することがなかった。こういった言語を意識することなくユーザーインタフェースのデザインを行えるのは素晴らしい。どの程度のデザインレベル（アニメーションを含む）まではXAMLの編集が不要なのかは不明であった。が、もし編集の必要に迫られても、システム開発者との互換性が高いため気軽に相談できそうなので問題はないだろう。

　WindowsというプラットフォームやInternet ExplorerというWebブラウザの普及率を考えると、このExpressionを使う価値は非常に高いようだ。そしてこれからWindows Presentation Foundationを駆使したサイトやアプリケーションが次々と登場してくれば、これまでユーザーエクスペリエンスというものに興味を持っていなかったクライアントも、これを重視したWebサイトやアプリケーションを依頼してくるようになるだろう。今後、Expressionはデザイナーに必須のツールとなるだろう。取り掛かるための敷居も低い。ぜひ、読者には早期の導入をおすすめしたい。